[WIL] 2022 - 10 W2

😸주간 요약

이번 주는 컨디션 난조로 개인 공부를 이틀은 하지 못했다. 그래도 TIL 이나 아침 모임은 거의 빼먹지 않고 할 수 있었다. 시간이 금인데 목요일, 금요일 이틀 개인공부를 마저 하지 못한게 아쉽.

새롭게 시작하는 것들에 많이 참여하려고 했다. 프로젝트도 시작되고 부트캠프도 2달 밖에 시간이 남지 않았다. 더 알차게 보내고 싶은 마음이 커서 새로운 스터디에 합류를 많이 하게 되었다.

짧게 끝나는 CS 스터디, 함수형 코딩 스터디, 알고리즘 스터디… 그리고 타입스크립트 공부를 위해 챌린지도 등록했다. 이번에는 꼭 성공하고싶다!

원래 목표는 Next.js를 활용한 캐럿마켓을 끝내는 것이었는데 역시 내 실력부족으로 이해하는데 시간이 두 배 이상 걸리는 바람에 아마 50% 의 진도율로 마무리가 될 것 같다. 일단은 프로젝트에 집중해야 하기 때문에…! 로그인,인증 로직을 이해하고 복습하는데 거의 2주 가까운 시간이 걸렸다는게 ㅋㅋㅋ 놀라운데… 그래도 서버쪽 동작을 조금이나마 이해할 수 있어서 아주 버린 시간은 아니었던 것 같다.

💛Facts

✔️부트캠프에서 배운 것

• AWS 배포 실습 : S3 버킷 사용하여 정적 웹사이트 배포하기
• CI/ CD 개념 : 애자일을 기반으로 지속적인 통합과 배포하기
• Github Action : 빌드 → 배포 자동화하기
• Proxy로 개발시 발생하는 CORS 에러 해결하기

✔️개인공부

• iron-session 사용해 로그인 유저 인증하기
• SWR 로 데이터 쉽게 fetch 해오기
• 함수형 프로그래밍 강의 시작 : 일급함수와 고차함수 개념 복습

💛Feelings & Finding

✔️AWS 배포 실습

AWS 서비스에서 가장 대표적으로 이용할 수 있는 것은 EC2 와 RDS 그리고 S3 이 있다. EC2는 말그대로 컴퓨터를 대여하는 서비스인데, AMI 라는 미리 지정된 템플릿에 맞춰서 생성된 인스턴스를 할당받는 개념이다. 현재 컴퓨터와 ssh 를 토대로 연결되어 실제 컴퓨터처럼 조작할 수 있는데, 여기에 서버를 띄울 수 있다.

RDS 란 관계형 데이터베이스 서비스로 서버에 직접 DB 엔진을 설치할 수도 있지만 관리가 번거롭기 때문에 이용하면 좋다.

S3 는 파일 스토리지로, 물리적인 파일을 저장하는 저장소이다. 빌드를 통해 생성된 파일들을 S3 버킷에 담아두게 되면 정적 웹사이트로 호스팅이 가능해진다.

✔️CI/CD

지속적인 통합, 지속적인 배포를 의미하는 단어로, 코드를 계속해서 합치면서 오류를 빠르게 해결하고 또 이렇게 준비된 프로덕션용 코드를 빠르게 배포할 수 있도록 하는 배포 자동화의 개념까지 포함한다. CI/CD 를 위해서 파이프 라인을 구축한다고 하는데, 이를 위한 툴로는 Jenkins, Buildkite, Github Action 등이 있으며 회사마다 자동화의 단계도 다르고 사용하는 툴도 다르다.

✔️Github Action

Github Action을 사용하면 레포지토리에 특정한 이벤트가 발생했을 때 자동으로 내용을 테스트하고 빌드하고 배포까지 하도록 자동화 파이프라인을 구축할 수 있다. 이 일련의 과정을 workflow 라고 하며, workflow에서 실행되는 각 작업들을 job 이라고 한다. Github Action 의 편리한 점은 job을 수행하기 위해 미리 만들어진 명령어인 Action을 사용할 수 있다는 점이다.

yaml 이라는 데이터 직렬화 언어를 사용하는데, json 보다 직관적이고 주석을 작성할 수 있다는 것도 특징이다.

Github Action 으로 S3 버킷 배포하기

✔️Proxy

개발 단계에서 서버와 클라이언트의 도메인 주소가 다르면, SOP 정책에 따라서 CORS 에러가 발생한다. 이 때 서버쪽에서 HTTP 응답 헤더를 수정하여 요청 출처를 허용할 수도 있지만 경우에 따라서 이방법이 적용되지 않을 수도 있다. Proxy 는 클라이언트 쪽에서 이 문제를 해결할 수 있는 방법이다.

Proxy 가 요청 주소를 위장하여, 브라우저는 서버와 클라이언트가 같은 출처에 있다고 착각하게 만든다. 요청을 보내는 주소를 현재 클라이언트의 출처와 같게 만들고, 서버쪽에서 위장을 해제해서 원래대로 요청을 받은 뒤 다시 출처를 위장하여 응답하는 방식이다.

전역적인 설정으로는 cra의 경우 package.json 에 proxy 속성을 추가하면 되는데 이는 webpack dev server proxy를 이용하는 방식이다.

여러개의 주소에 프록시가 필요할 경우 http-proxy-middleware 를 사용하고, src 디렉토리에 setupProxy 파일을 생성해 proxy가 필요한 엔드포인트와 요청 주소를 입력하여 설정할 수 있다.

[TIL] 2022-1013

✔️iron-session과 로그인 로직

iron-session 이란 서버에 부담을 주지 않는 토큰 인증방식과 유사하면서, 오고가는 페이로드를 암호화 할 수 있는 Next.js 라이브러리이다. https://github.com/vvo/iron-session

유저를 인증하기 위해서 이용하는 쿠키를 암호화 할 수 있는데, 사용법은 간단하다. 로직때문에 조금 헷갈릴 수 있는데, 만약 일회용 비밀번호를 이용하는 로직이라면 아래와 같이 구성할 수 있다.

1. 사용자가 이메일을 입력한다.
2. 해당 이메일과 그와 연결된(relation) 인증번호(토큰)을 생성한다.
3. 유저 이메일로 인증번호를 보낸다.
4. 이메일을 받은 유저는 인증번호를 입력한다. (이 과정에서 form 이 바뀌어야한다.)
5. 서버는 인증번호가 유효한지 확인한다.
6. 유효하다면 다른 페이지 접근 권한을 준다. (로그인 성공)

쿠키가 필요한 이유는 현재 로그인이 된 상태를 계속해서 기억해야 하기 때문에 그렇다. 페이지를 이동해도 기억하려면 요청시마다 쿠키를 서버에 전달해야하는데, 이 때 인증을 위한 쿠키를 5번과 6번에서 발급하게 된다.

권한이 필요한 페이지에서는 요청시 쿠키에 저장된 유저 아이디 req.session.something 을 확인해서 접근이 유효한지, 유효하지 않은지를 확인할 수 있고, 유효하다면 유저 데이터를 받아오도록 로직을 작성할 수 있다.

✔️SWR

SWR 이란 클라이언트에서 data fetch를 편리하게 할 수 있도록 도와주는 라이브러리이다. fetching 과정이 간소화되고, 같은 요청을 반복하는게 아니라 캐싱해두었다가 사용하면서 최신화까지 자동으로 진행하는 아주 똑똑한 친구이다. npm i로 설치한 후 아래와 같이 적용하면, 길게 fetch(url).then.then… 으로 이어가며 fetch를 하지 않아도 된다^^

import useSWR from 'swr'

// 첫번째 인자 url 은 요청 url인 동시에 캐시 저장을 위한 key이다.
const { data, error } = useSWR("<요청 url>", <url로 fetch 요청을 보내는 fetcher 함수>)

// fetcher 함수는 아래처럼 url을 받아서 fetch 를 해준 뒤 json 데이터를 리턴한다.
const fetcher = (url) => fetch(url).then(response => response.json());

✔️함수형 프로그래밍 : 일급함수와 고차함수 복습

함수형 프로그래밍 강의를 보기 시작했다. 첫 챕터는 일급함수와 고차함수 복습.

• 평가 : 코드가 계산되어서 값을 만드는 것.
• 일급 : 값으로 다룰 수 있다는 의미

자바스크립트에서는 함수가 일급 객체이기 때문에 변수에 할당할 수도 있고, 함수의 전달 인자로 사용할 수도 있으며 함수의 결과로 함수를 리턴할 수도 있다.

이 때 함수를 값으로 다루는 함수를 고차함수라고 한다. 함수를 인자로 받아서 실행하는 함수, 그리고 함수를 리턴하는 함수 (클로저를 만드는 함수) 가 있다.

💛Feedback

• 달리기를 오래 쉬어서 걷기 운동을 했다. 다음주에는 달리기도 할 수 있기를~
• 금요일 제외하고 TIL 작성 연속 4일. 작성을 하면 정리도 되고 마음이 편안해진다.
• 뽀모도로 타이머를 이용한 시간관리에 익숙해지는중. 얼만큼의 작업시간이 필요하는지 파악하는게 중요하다.
• 다음주에도 미루기보다 미리미리 해두기 ^^

💛Future Action

• 스터디와 챌린지를 위해서 미리미리 준비해두기.
• 솔로 프로젝트 TODO 리스트 리팩토링하고 잘 마무리하기.
• 포도마켓 매일 1시간은 진행하기.