Step-up Step-up

JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. React React의 state와 props에 대해서 설명해주세요. React 컴포넌트의 key 속성에 대해서 설명해주세요. useEffect의 dependency array에 대해서 설명해주세요. HTTP/네트워크 CSR과 SSR의 차이점에 대해서 설명해주세요. GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요. 웹서버 기초 HTTP 메세지 구조에 대해 설명해주세요. Same-Origin Policy와 CORS에 대해서 설명해주세요. 체크리스트 [ ] 잘 모르는 내용에 대해서 모르는 부분을 인정하고 아는 부분까지는 최선을 다해 설명하려고 노력..

HTTP 트랜지션 해부에 관한 Node.js 레퍼런스를 참고 https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction Anatomy of an HTTP Transaction | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org POST에 문자열을 담아 요청을 보낼 때는 HTTP 메시지의 body(payload)를 이용합니다. 서버는 요청에 따른 적절한 응답을 클라이언트로 보내야 합니다. CORS 관련 헤더를 OPTIONS 응답에 적용해야 합니다. 클라이언트의 preflight request에 대한 응답을 돌려줘야 합니다. prefli..

💁‍♀️ 동일 출처 정책(SOP)에서 동일한 출처(Origin)로 보기 위해 동일해야 하는 요소를 고르세요. (정답 세 개) A. protocol B. host C. port D. url-path E. query 🔈 해설 정답 A,B,C 동일 출처 정책(SOP)에서 protocol, host, port가 같으면 동일한 출처로 보고 있습니다. 💁‍♀️🙈 CORS(Cross-Origin Resource Sharing)에 대한 설명으로 옳은 것을 고르세요. A. 같은 출처의 리소스만 공유가 가능한 정책이다. B. 보안을 위해 잠재적으로 공격받을 수 있는 경로를 줄이기 위한 정책이다. C. 다른 출처의 리소스를 받아오기 위해서 CORS가 등장했다. D. POST 메서드로 프리플라이트 요청을 보내 해당 출처 리소..

REST API에서 REST는 “Representational State Transfer”의 약자로, 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었습니다. REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다. 따라서 HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 하므로 모두가 잘 알아볼 수 있도록 작성하는 것이 중요합니다. REST API를 디자인하는 방법 REST API를 작성할 때는 몇 가지 지켜야 할 규칙들이..

SSR(Server Side Rendering)과 CSR(Client Side Rendering) SSR은 Server Side Rendering의 줄임말입니다. 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됩니다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 합니다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보..

웹페이지에서 일부분만 바꾸고 싶다면 어떻게 해야 할까요? 그럴 때 우리는 AJAX를 사용합니다. 1. AJAX 란? AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것입니다. 우리가 검색을 하기 위해 구글에 접속하면, 다음과 같은 웹 페이지를 볼 수 있습니다. 이 웹페이지의 html에 의해서 유저에게 필요한 페이지가 렌더링 됩니다. 그러나 딱 한 부분만큼은 html에 작성된 대로 유저가 사용하는 것이 아니라, 유..

HTTP는 HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 프로토콜입니다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었습니다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면, 서버도 HTTP Messages 양식에 맞춰 응답합니다. HTTP Messages HTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식입니다. HTTP Messages에는 다음과 같은 두 가지 유형이 있습니다. 요청(Requests) 응답(Responses) HTTP Messages는 몇 줄의 텍스트 정보로 구성됩니다. 그러나 개발자는 이런 메시지를 직접 작성할 필요가 거의 없습니다. 구성 파..

URL은 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냅니다. URL은 scheme, hosts, url-path로 구분할 수 있습니다. 가장 먼저 작성하는 scheme은 통신 방식(프로토콜)을 결정합니다. 일반적인 웹 브라우저에서는 http(s)를 사용합니다. hosts는 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타냅니다. url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타냅니다. URI는 Uniform Resource Identifier의 줄임말로, 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더..