코딩하는 짱구

Unit10 - [Web Server] 기초 SOP(Same-Origin Policy)는 웹 보안의 중요한 개념으로, 웹 브라우저에서 실행되는 스크립트에 의해 다른 출처의 리소스에 접근하는 것을 제한하는 정책입니다. SOP는 웹 애플리케이션이 악의적인 공격으로부터 보호되고 사용자의 개인 정보가 안전하게 유지될 수 있도록 합니다. SOP의 핵심 내용 동일 출처(same origin): 동일 출처란 프로토콜, 호스트, 포트가 모두 동일한 경우를 의미합니다. 예를 들어, http://example.com과 http://example.com/api는 동일 출처입니다. SOP의 제약 사항: 스크립트로 로드한 문서는 동일 출처의 리소스에만 접근할 수 있습니다. 스크립트로 로드한 문서는 다른 출처의 리소스에 직접적인..

프론트앤드 부트캠프/Day 2023. 6. 1. 10:54

React는 "단방향 데이터 흐름"을 사용하여 데이터를 관리함. 이는 데이터의 흐름이 한 방향으로만 진행되어 데이터 변화를 추적하고 업데이트하기 쉽게 만듭니다. React의 데이터 흐름 구성 요소 1. 단방향 데이터 바인딩 : React 컴포넌트는 상위 컴포넌트로부터 props로 데이터를 전달받습니다. 이 데이터는 자식 컴포넌트에게 전달되며, 자식 컴포넌트는 해당 데이터를 사용하여 UI를 렌더링합니다. 부모 컴포넌트에서 데이터가 변경되면 React는 자동으로 자식 컴포넌트를 업데이트하여 변경된 데이터로 UI를 갱신합니다. 2. 상태(state) : React 컴포넌트는 상태를 사용하여 내부적으로 유지할 데이터를 관리할 수 있습니다. 상태는 컴포넌트 내부에서 변경 가능하며, 컴포넌트가 다시 렌더링될 때 업..

프론트앤드 부트캠프/Day 2023. 5. 31. 16:38

사이드 이펙트(Side Effect)란? 사이드 이펙트는 한국어로는 '부작용'이라는 뜻입니다. Side Effect는 프로그램의 실행 결과에 영향을 주는 모든 동작 또는 변화를 의미합니다. 일반적으로 함수나 메서드 내부에서 발생하는 외부 상태 변경, 외부 자원에 대한 접근, 예외 발생 등을 포함합니다. Side Effect는 함수의 반환 값 이외에도 프로그램의 상태를 변경하는 것을 의미합니다. 1) 변수 변경 : 함수나 메서드 내에서 전달받은 인자나 외부 변수의 값을 변경하는 것은 Side Effect입니다. 예를 들어, 전달된 배열을 역순으로 정렬하는 함수는 원래의 배열을 변경하므로 Side Effect가 발생합니다. function reverseArray(arr) { arr.reverse(); // ..

프론트앤드 부트캠프/Day 2023. 5. 31. 16:37

Postman은 API 개발 및 테스트를 위한 인기 있는 도구입니다. Postman 사용 방법 Postman 다운로드 및 설치 : Postman을 공식 웹 사이트(https://www.postman.com/downloads/)에서 다운로드하고 설치합니다. Postman 실행 : 설치가 완료되면 Postman을 실행합니다. 새로운 요청 생성 : Postman 화면에서 "New" 버튼을 클릭하여 새로운 요청을 생성합니다. 요청을 위한 새로운 탭이 열립니다. 요청 URL 설정 : 탭 상단의 주소 표시줄에 API의 엔드포인트 URL을 입력합니다. HTTP 메서드 선택 : 주소 표시줄 옆에 있는 드롭다운 메뉴에서 HTTP 메서드(GET, POST, PUT, DELETE 등)를 선택합니다. 요청 헤더 설정(선택 사..

프론트앤드 부트캠프/Day 2023. 5. 26. 11:48

1. JSON 말고 XML도 있어요. 개발자들이 어떤 정보를 나타내기 위해 흔히 쓰는 데이터 포맷으로는 JSON 뿐만 아니라 XML(Extensible Markup Language)이라고 하는 데이터 포맷도 있습니다. XML을 한마디로 쉽게 이야기하자면, 태그를 사용해서 데이터를 나타내는 것입니다. JSON Data { "name":"Michael Kim", "height":180, "weight":70, "hobbies":[ "Basketball", "Listening to music" ] } XML Data Michael Kim 180 70 Basketball Listening to music JSON 과 XML 의 차이점 JSON과 XML은 모두 데이터를 저장하고 교환하기 위한 형식입니다. 그러나 ..

프론트앤드 부트캠프/Day 2023. 5. 25. 13:15

Chapter1. REST API REST API(Representational State Transfer API)는 웹 서비스를 위한 아키텍처 스타일 중 하나입니다. REST는 웹 상에서의 자원(Resource)을 표현하고, HTTP 프로토콜을 기반으로 클라이언트와 서버 간 통신을 수행하는 방식을 지칭합니다. REST API는 이러한 REST 아키텍처 원칙을 따르는 웹 서비스의 인터페이스를 말합니다. API 란 무엇인가? API는 "Application Programming Interface"의 약어입니다. API는 다양한 형태로 제공될 수 있으며, 일반적으로 웹 API, 라이브러리 API, 운영체제 API 등이 있습니다. 웹 API : 웹 기반의 서비스를 제공하는 인터페이스로, 주로 HTTP 프로토콜..

프론트앤드 부트캠프/Day 2023. 5. 24. 09:24

click 이벤트 사용하기 - onClick React 에서는 html과 다르게 이벤트에 camelCase를 사용한다. 리액트에서 클릭 이벤트를 처리하는 방법은 다음과 같습니다: 1. 이벤트 핸들러 함수를 작성합니다. 2. 이벤트 핸들러 함수를 컴포넌트의 요소에 연결합니다. 예를 들어, `` 요소에 `onClick` 속성을 추가하여 클릭 이벤트를 처리하도록 설정합니다. 3. 이벤트 핸들러 함수에 매개변수를 전달하려면 콜백 함수를 사용합니다. 간단한 예제를 통해 이를 설명하면 다음과 같습니다: //javascript import React from 'react'; function handleClick() { console.log('버튼이 클릭되었습니다!'); } function MyComponent() {..

프론트앤드 부트캠프/Day 2023. 5. 24. 09:23

State와 Props는 리액트(React)에서 컴포넌트 간 데이터를 전달하고 관리하는 데 사용되는 개념입니다. **State(상태)**: - State는 컴포넌트 내에서 관리되는 데이터입니다. - 컴포넌트 내부에서 `this.state`를 사용하여 선언하고, `this.setState()`를 사용하여 업데이트합니다. - State의 값이 변경되면 리액트는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다. - 주로 컴포넌트의 내부 상태를 저장하고, 사용자 상호작용, API 요청 결과 등과 같이 동적으로 변경되는 데이터를 다룰 때 사용됩니다. - 클래스형 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다. import React, { Component } f..

프론트앤드 부트캠프/Day 2023. 5. 22. 21:56