본문 바로가기

분류 전체보기

 (99)
[HTTP/네트워크] CORS, SOP 코드스테이츠 교육엔지니어님 말로는 기술면접에 나올 수 있는 내용이라고 한다. 꼭 말로 설명할 수 있도록 머리에 담아놓자! 🧐 SOP이란 SOP(Same-Origin Policy)이란 동일 출처 정책을 뜻한다. 쉽게 풀어 말하자면 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책이다. 여기서 말하는 ‘출처(Origin)’는 다음과 같이 이루어져있다. 출처 = 프로토콜 + 포트 포함 호스트 https://todayscommit.tistory.com:443/에서 https://는 프로토콜 :443은 포트 todayscommit.tistory.com:443는 호스트를 말한다. (자주쓰이는 포트는 생략가능해서 안보임) 출처는 프로토콜, 호스트(포트포함)의 조합으로 되어있다. 이 중 하나라도 다르면 동일한 출처로 ..
[Node.js] 서버 개발 필수 모듈 Nodemon 🫣 서버 껐다켰다 하기 귀찮으니까 Nodemon 만약 app.js 파일에 서버를 작성하고 아래의 명령어를 적어 서버를 돌렸다면 node app.js 만약에 app.js의 서버 코드를 바꾸게 되면 터미널에서 ctrl + c를 이용해서 서버를 껐다 키지 않으면 반영이 되지 않는다. 이렇게 매번 서버를 껐다 키기는 너무너무 번거로운 일이다. 이런 불편함을 없애기 위한 모듈이 nodemon이다. 😈 Nodemon 다운받고 실행시키기 1. Nodemon은 npm을 통해 설치할 수 있다. 터미널에서 다음의 명령어를 입력한다. npm install nodemon 2. 노드몬이 서버 파일을 감시하도록 해준다. 노드몬이 서버를 업데이트하게 하는 방법은 기본적으로 아래의 명령어를 입력하는 것인데 nodemon --watc..
[Node.js] Node.js http모듈 사용해서 미니 서버 만드는 방법 🛠 Node.js의 http모듈로 서버 만들기 보통은 Express라는 프레임워크를 사용해서 서버를 만드는 경우가 많지만, Express의 기초가되는 원리를 이해하기 위해, 혹은 간단한 테스트를 하기 위해서 express없이 node.js 모듈만으로 서버를 만들줄 알아야 한다. 😛 간단히 http모듈 사용해보기 📌 이부분은 Danny TWLC님의 유튜브 강의 "NodeJS 13강 - HTTP 서버 만들기"를 정리 + nodejs 공식문서 "HTTP 트랜잭션 해부"의 내용을 추가 하였습니다. 1. js 파일에서 http 모듈을 불러온다 //임의의 app.js 파일 내부 const http = require("http"); 2. createServer를 사용하여 웹서버 객체를 만든다. //임의의 app.js..
[React] 컴포넌트 내에서 ajax 요청하기, loading indicator 추가하기 🦋 시작하며 useEffect 기본을 이해해야 한다. (링크) 📡 필터링 예제로 보는 ajax 요청 어떤 목록을 필터링하는 예제에서 두가지 방법이 있을 수 있다. 컴포넌트 내에서 필터링: 처음에 한번 외부 API로부터 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법 (코드펜 예제) 컴포넌트 외부에서 필터링: 한번에 다 받아오지 않고 검색어 바뀔 때마다, 컴포넌트 외부로 API 요청해 필터링 한 결과를 받아오는 방법 (보통, 서버에 매번 검색어와 함께 요청하는 경우가 이에 해당) (코드펜 예제) 각각의 장단점은 아래와 같다. 장점 단점 컴포넌트 내부에서 처리 HTTP 요청의 빈도를 줄일 수 있다 브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난..
[React] 상태(state) 끌어올리기, useEffect 기본 🦋 시작하며 React의 데이터의 흐름과 어떤 것을 state로 두어야 하는지 이해해야한다. (링크) 🧐 상태 끌어올리기는 왜 필요할까 간단히 말하자면, 상위 컴포넌트의 state를 하위에서 바꾸어야 할때 필요하다. "단방향 데이터 흐름"이기 때문에, 자식 컴포넌트 여러개가 하나의 상태에 접근하고자 할때 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 하고 자식에게 props로 state를 물려줘야한다. 그런데 이 부모컴포넌트의 상태를 바꿔야하는 자식 컴포넌트가 있다면? 여러개의 자식 컴포넌트가 상태에 접근해 두기위해서 부모에 state는 그대로 두되, 특정 자식컴포넌트는 부모의 상태에 접근해 변경해줄 수 있도록 세팅해야 한다. 이 과정을 공식홈페이지에선 "역방향 데이터 흐름 추가"한다고 표현한다. 📌 ..
[HTTP/네트워크] Postman으로 OpenWeather API 정보 가져오기 🛠 HTTP API 테스트 도구 테스트를 위해 브라우저 상의 GET요청이 아닌 다른 요청을 보내려면 개발자 도구의 콘솔창에서 Web API fetch를 사용해야한다. 이때 매번 코드 작성 없이 HTTP 요청을 테스트할 수 있는 다양한 API 테스트 도구들이 있다. 이런 도구를 이용하면 클라이언트 입장에서 서버 API를 테스트 할 수 있다. (GET말고 POST같은 다른 메서드도 해주기 위해서 쓴다. ) CLI curl (대부분의 리눅스 환경에 내장되어 있음) wuzz GUI Postman (가장 사용하기 쉬움) Insomnia 📮 Postman 기본 사용법 1. 가입하기 2. Workspaces > My Workspace 3. +탭 눌러 새로운 탭 만들고, 요청/응답을 여러 개 확인 4. API를 참고해..
[HTTP/네트워크] REST API, Open API ⭐️ 시작하며 REST API를 이해하기 위해서는 HTTP와 API에 대한 사전 지식이 있어야한다. 💡 REST API란 REST API란 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST란? 자원(resource)에 대한 주소를 정하는 방법 디자인 원리/제약, 즉 규칙 즉, REST API는 REST 성숙도 모델(RMM,Richardson Maturity Model)을 준수하는 API(애플리케이션 프로그래밍 인터페이스)라고 볼 수 있으며, 그 REST 성숙도 모델에 대해서는 아래에서 설명한다. *REST = Representational State Transfer *로이 필딩의 박사학위 논문에서 웹(http)의 ..
[HTTP/네트워크] SSR&CSR 표 하나로 정리 🍻 SSR(Server Side Rendering) VS CSR(Cliden Side Rendering) SSR CSR 웹페이지를 서버에서 렌더링 브라우저가 서버의 URI로 GET요청 ➡️ 서버가 웹페이지 렌더링 ➡️ 서버가 렌더링한 웹페이지 파일 브라우저로 전송 ➡️ 브라우저가 보여줌 웹페이지를 클라이언트(브라우저)에서 렌더링 브라우저가 서버의 URI로 GET요청 ➡️ 웹페이지의 골격이 될 단일 페이지(Single Page) & 자바스크립트 파일을 보냄 ➡️ 브라우저가 받아서 자바스크립트 파일을 실행시킴 ➡️ 완전히 렌더링된 페이지로 바꿈 웹페이지의 내용에 데이터베이서가 필요한 경우 ➡️ 서버에서 데이터베이스의 데이터 불러옴 ➡️ 완전히 렌더링된 페이지로 변환 ➡️ 브라우저에 응답으로 보냄 웹페이지의 ..
[HTTP/네트워크] AJAX와 AJAX의 장단점 💡 AJAX란? AJAX(Asynchronous JavaScript And XMLHttpRequest)은 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법을 말한다. 👀 AJAX의 특징 AJAX는 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다 예시) 검색어를 입력할 때마다 뜨는 추천 검색어 스크롤이 끝나면 데이터를 가져와서 업데이트하고 랜더링하는 무한스크롤 페이스북 메시지 네이버 포털사이트의 뉴스 탭 📌 AJAX의 두가지 핵심 기술: JavaScript,DOM & Fetch ajax는 fetch와 dom이 결합된 형태라고 생각해도 된다고 한다. Fetch -페이지를 이동하지 않아도 서버로부터 ..
[HTTP/네트워크] HTTP Messages(HTTP Requests, HTTP Responses) 💡 HTTP Messages란 HTTP Messages란 클라이언트와 서버 사이에서 데이터가 교환되는 방식으로, 요청(Request)과 응답(Response)두가지 유형이 있다. 💡 HTTP Messages 요청과 응답의 구조 HTTP Message는 몇줄의 텍스트 정보로 구성되나, 개발자가 직접 작성하지 않아도 구성파일, API, 기타 인터페이스에서 자동 완성됨 start line 헤드(head) -요청이나 응답의 상태 -항상 첫 번째 줄에 위치 -응답에서는 status line이라고 부름 HTTP headers -요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합 empty line -헤더와 본문을 구분하는 빈 줄 payload 바디(body) -요청과 관련된 데이터나 응답과 관련된 데이..

티스토리툴바