[프로그래머스 스터디/5기]실무와 가까워지는 Node.js 백엔드 개발 - 2주차

이번 주차에 배운 내용

• Git 사용법 익히기
• Next.js
• API 생성 (데이터 추가/조회/변경/삭제 처리를 하고 결과를 반환하는 API)
• 인증(Authentication)과 인가(Authorization)
• 이번주 미션
• WIL : Week I learned

---

Next.js (Node.js 의 서버사이드 프레임워크)

JavaScript의 프레임워크 React.js

React.js의 프레임워크 Next.js

 

Next.js는 Node.js를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 어플리케이션 기능을 가능하게 한다.

다시 말해, Next.js는 서버에서 페이지를 구성하여 제공할 수 있는 React 기반의 프레임워크이다.

 

React.js로 프론트엔드를 다루고 필요한 몇가지 API를 별도 서버없이 추가할 수 있는 Next.js가 강점을 가집니다.

그리고 API Route가 개발될 Express.js에서 제공하는 Request, Response같은 추상화된 객체를 사용하도록 되어있어 Express.js를 다룰 줄 안다면 쉽게 사용가능하다.

스터디를 진행하며 초반에는 Next.js와 Express.js의 차이를 이해하지 못했고
Express.js 코드만 사용해봐 Next.js를 잘 몰랐다.
하지만 블로그를 통해 정리 하다보니 조금씩 더 알게되는 것 같다.

Next.js 설명 및 Next.js VS Express.js - 더보기 클릭!

https://en.wikipedia.org/wiki/Next.js

Next.js - Wikipedia

Next.js VS Express.js

요약 : Express.js는 API 구축을 위한 백엔드 프레임워크인 반면, Next.js는 프로젝트의 SEO, 개발 경험 및 성능을 개선하기 위해 React를 기반으로 구축되는 풀 스택 프레임워크입니다.

 

https://stackoverflow.com/questions/69918766/nextjs-vs-express

NextJS vs Express

 

API 생성

입력값 검증 (Validation)

클라이언트를 믿고 검증없이 값을 쓰고 싶지만 운영 환경 서버는 다양한 공격을 마주한다.

그래서 HTTP 요청이 예상한 값만 온다고 할 수 없다. 따라서 전달 받은 입력 값을 검증하는 과정이 필요하다.

 

req 매개 변수안에 query 필드가 있습니다. 이 값을 통해 아래 2가지 값을 전달받을 수 있다.

1. 동적 라우팅으로 입력된 값

    ㄴ 폴더나 파일에 대괄호(braket)으로 감싸진 값

2. PATH 뒤에 붙은 Query Params

 

1번, 2번 값들이 점점 많아지는 경우 직접 체크하는 코드를 짜는 것이 어렵다.

따라서 Fastify 프레임워크를 살펴보면 Avj 모듈을 활용하면 유효성 검사를 진행할 수 있다.

하지만 Next.js는 Avj모듈을 지원하지 않기 때문에 직접 설치해서 사용해야된다.

인증과 인가

인증 : 유저가 누구인지 확인하는 절차 ex) 회원가입 후 로그인

인가 : 유저에 대한 권한을 허락하는 것

 

이번 서비스에서는 Firebase의 인증(social login)을 통해 웹 앱에서 손쉽게 인증을 사용한다.

로그인이 완료되면 브라우저에 여러분이 구글을 통해 인증을 받았다는 사실을 저장해두고 사용하게 됩니다.

저장된 정보가 신분증처럼 인증 정보를 확인할 때 사용하는 토큰(token)입니다. 토큰은 웹 클라이언트에서 아래 코드처럼 접근할 수 있습니다.

인증 정보는 HTTP 요청할 때 Headers의 Authorization 필드에 담아서 보내곤 합니다. 저희도 그렇게 처리할겁니다.

이번주 미션 

이번주 미션은 제공받은 코드에서 중복을 제거하고 보기 좋게 리팩토링 하는것이었다.

백엔드가 익숙하지 않아 아직 전체적인 흐름이 눈에 들어오지 않아 아쉽게도 이번 미션은 수행하지 못했다.

하지만 다른 분들이 올린 PR을 보면서 코드리뷰 하는 법이나 좋은 코드 작성 법을 배울 수 있었던 것 같으며

하나씩 코드를 뜯어보며 다음 번에는 꼭 코드리뷰에 참여할 수 있었으면 좋겠다.

WIL (Week I Learned)

• 싱글턴 패턴(singleton pattern)
• TypeScript Omit
• JSON Schema
• Array.isArray() : 인자가 Array인지 판별하는 메서드

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

• 자바스크립트에서 == 와 === 는 다르다.

== 는 형 변환을 한 뒤 비교하고 === 는 형 변환을 하지 않고 비교한다.

• 자바스크립트의 인스턴스(instance), 자세한 설명 더보기 클릭!

https://velog.io/@nasowoo/%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4Instance

Javascript의 인스턴스(Instance)란?

 

• 부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다.
• 현직자이신 요창님이 자주 사용하는 vscode 익스탠션을 알려주셔서 좋았다.

Atom One Dark Theme는 너무 맘에 들어서 바로 다운받아 적용시켰다!!

---

https://programmers.co.kr/learn/courses/14014

[스터디/5기] 실무와 가까워지는 Node.js 백엔드 개발(feat.TypeScript)