프로그래머스스쿨 실무와 가까워지는 Node.js 백엔드 개발(feat.TypeScript) 스터디 에서 수강하며 정리한 글 입니다. 문제가 있을 시, 삭제 하겠습니다.
스터디 방식
프로그래머스 스쿨 사이트 주소
https://school.programmers.co.kr
이번에 node.js와 typeScript 도 배워볼겸,
백엔드 할 때 유의할 점과 코드를 어떻게 하면 더 효율성 있게 짤 수 있을지, 코드리뷰를 서로 주고받는 방식에 대해서도 배워보고 싶어서 신청하게 되었다.
스터디 시작 전에 메일이 오는데,
학습공간 사이트와 깃허브 초대 주소가 온다.
학습공간을 들어가면 대쉬보드와 커리큘럼 등을 볼 수 있고, 1주차 시작 전에 미리 환경 셋팅할 수 있게 글도 올라와 있다.
실시간 줌으로 수업은 진행되고, 줌 주소는 당일 수업 시작 10분 전 쯤 슬랙으로 날아온다.
수업영상은 녹화되고, 다음 날 업로드 되어 복습할 수 있다. 그래도 복습영상은 잘 안 보게 되니까 되도록 당일에 집중해서 들어야지
1주차
서버가 하는 일
식당에 가서 주문을 한다고 가정하고,
메뉴를 고른 뒤 주문 하면 접객원이 음식을 가져다 주는데
웹 프로그래밍을 할 때 게속 말하는 서버의 하는 일이 접객원과 같다고 보면 된다.
주방에서 무슨 일이냐든 요청 사항을 전달한 뒤 결과물을 고객(client)에 전달한다.
마이크로 서비스 아키텍처(MSA)는 여의도 진주집이나 하동관을 떠올리면 좋다. ㅎㅎ
손님이 많으니까 접객원마다 역할을 다르게해서 각자 맡은 일만 하도록 한다.
HTTP 살펴보기
웹 서비스는 HTTP를 이용해서 요청을 받는다. 예를 들어 브라우저 주소창에 google.com 을 입력하고 방문하면 브라우저는 google 서버로 아래처럼 요청을 보낸다.
가린 부분은 cookie 내용이고, f12 개발자모드에서 network 탭에서 볼 수 있다.
Start Line
GET, POST, PUT, DELETE 같은 Method가 제일 먼저 위치하고 그 뒤에 어디로 요청을 보내는지 특정하는 Path가 위치한다.
Path는 쿼리 파라메터(Query Parameter)를 가질 수 있다.
쿼리 파라메터는 패스 가장 뒤에 물음표(?) 기호를 넣고 시작한다.
/users?id=123&name=test?id=123&name=test 부분이 쿼리파라메터이며, 2개 이상의 쿼리 파라메터가 있다면 & 기호로 연결해서 표현
Header 에서 일반적으로 많이 쓰는건 Host, User-Agent, Accept 등의 필드.
Blank Line과 Body
헤더 뒤에 Blank Line이 위치하면 그 뒤에 Body(바디)가 있다는 뜻.
곧 헤더와 바디를 나누는 경계가 Blank Line이다.
Body에는 주로 사용자가 제공해야하는 정보를 담는 역할을 하는데
예를 들어 아이디(ID), 비밀번호를 입력해서 로그인을 하려고 한다면 해당 내용은 Body에 담긴다.
Http 요청에는 머리, 가슴, 배처럼 Start Line, Header, Body가 있다.
Express.js Next.js
웹 어플리케이션이 하는 일은 보통 HTTP 요청을 받아서 처리하는 일.
Express.js 와 Next.js 는 웹 서버를 만들 수 있는 프레임워크이다.
Express.js
node.js 에서 가장 널리 사용되는 웹 어플리케이션 프레임워크.
자바스크립트로 백엔드를 다룰 때 압도적인 사용량을 차지.
Next.js
MIT 라이센스로 제공되는 오픈소스 리엑트 프레임워크
React.js 로 프론트엔드를 다루고 필요한 몇가지 API를 별도 서버없이 추가할 수 있는 Next.js가 강점을 가진다.
Next.js Routing
페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있다.
Next.js는 pages 폴더에 추가된 파일로 라우트를 자동 생성.
pages/api 폴더 외에 위치한 모든 파일은 html 반환한다고 보면 된다.
.ts , .tsx 확장자 : .js처럼 타입 스크림트 파일용 확장자.
.tsx는 .jsx 확장자와 비슷하다.
Index Route
index 란 이름을 가진 파일을 루트로 자동 라우팅.
- pages/api/beverages/index.ts -> /api/beverages
- pages/index.tsx -> /
Nested Route
중첩된 파일도 차례로 풀어서 라우팅
- pages/api/events/index.ts -> /api/events
- pages/api/events/[indexId]/orders/index.ts -> /api/events/:eventId/orders
Dynamic Route
동적 라우팅을 사용하려면 대괄호를 사용. 이렇게 하면 Request 객체를 통해 대괄호안의 값을 사용할 수 있다.
- pages/api/events/[eventId]/orders/index.ts -> /api/events/:eventId/orders
pages 안에 위치한 파일과 폴더를 통해 패스가 만들어진다.
유용한 VSCode extension
Thunder Client
Postman 처럼 http 요청을 보낼 수 있는 익스텐션
설치하고 나면 번개 모양이 생긴다.
이런식으로 url로 http 요청을 보내고 응답 json 값을 볼 수 있다.
