💙 2021 JUNE

기말고사 + 정보처리기사 실기 + 여러 대외활동 코딩테스트, 면접으로 쉴 새 없이 바빴던 것 같다! 원래 학교 홈페이지를 클론코딩하려고 했으나.. 시간이 부족해 공부해보고 싶었던 리액트와 노드를 접목시킨 프로젝트성 강의를 듣고, 실습해보고자 한다.

🔍 Boiler-Plate

• 대부분의 웹 사이트는 로그인등등의 공통 기능을 가지고 있다.
• 근데 개발할 때 마다 처음부터 다 개발한다? -> NOPE!
• 공통 부분을 미리 만들어두고 개발 시 빠르게 가져다 쓴다!

🔍 기술 스택

• NodeJS
• React
• MongoDB

🔍 기능

• (1) 로그인
  • DB 연동
  • 비밀번호 암호화
• (2) 회원 가입
  • DB 연동
• (3) 로그아웃
• (4) 인증체크

🔍 결과

< landing page >

< login page >

< login userData (isAuth가 true)>

🔍 Note

NodeJS가 무엇인가?

• javascript는 브라우저 속에서 작동하는 언어였다.
• Nodejs를 통해 javascript를 브라우저가 아닌 서버사이드에서 사용할 수 있게 되었다.
• 하나의 언어라고 생각하면 된다.
• express는 nodejs를 가지고 프로젝트를 만들게끔 해주는 도구 (nodejs를 더 쉽게 사용하게 끔 하는 프레임워크)

Client란?

• 예를 들면 크롬 브라우저 (이름, 비밀번호 입력해서 서버로 보내는 ~)
• 정보들을 입력해서 서버로 보내는 것!

Body-Parser Dependency Install

• client에서 보내주는 정보를 받는 기능?
• npm install 해줌

Post Man Install

• client 부분이 없기 때문에 데이터를 생성해주기 위해 다운로드
• register route (회원 가입을 위한)

NODE MON Install

• 코드의 변화를 감지해서 반영해줌
• -dev? development mode! 로컬에서만 사용하겠다라는 의미

소스 속 비밀 정보 숨기기 for git

• .gitignore에 남겨놓기
• 근데 만약 배포 후 수정하는 것이라면? (heroku같이..) -> 로컬에 두면 안됨
• (1) development 버전 (2) production 버전 두가지로 따로 monogURI 생성

Bcrypt 라이브러리로 비밀번호 암호화하기

• postman에서 만든 계정은 mongoDB에 비밀번호가 명시되어있음 -> 암호화해야함
• register route 에서 save 하기전에 비밀번호를 암호화한다.
  • bcrypt 라이브러리를 require 하고, pre('save', function(next) {})
  • 암호화는 salt를 이용하는데, 그 전에 salt를 생성해야한다.
  • saltRounds 필요 (자릿수)
  • salt를 만들어낸 후 hash()로 hash를 만든다.
  • hash가 무사히 생성 되었다면 next() 함수 호출로 원래 있던 save() 함수로 돌아간다.

로그인 기능

• (1) 입력된 이메일을 DB에서 찾기
• (2) 있다면, 비밀번호가 같은지 확인
  • 비밀번호 복호화는 안되기때문에 입력 비밀번호를 암호화 == 기존 모델의 비밀번호를 비교
• (3) user를 위한 token 생성
  • jsonwebtoken 라이브러리 이용

Auth 기능

• 로그인된 유저만 or 관리자만~ 이런기능을 해줌
• token과 쿠키에 넣어준 user 정보를 이용해서 기능을 수행할 수 있는 권한인지를 계속 확인
• (1) 쿠키에 있는걸 복호화한다.
• (2) db에서 동일한 정보의 user가 있는지 확인한다.
• (3) 있으면 req.user에 정보 저장 후 next(), 없으면 err

로그아웃 기능

• 로그아웃 기능은 token을 지워주기만 하면 된다!
  • 인증이 안되기때문에 로그인 기능이 풀리기 때문
• (1) 로그아웃 하려는 user를 db에서 찾는다.
• (2) 찾은 후 token=""으로 바꿔 준다.

중간점 < backend >

nodejs를 이용한 백엔드 개발은 처음에 포기하고 다시 시작해본건데, 생각보다 재밌당!
얼른 프론트엔드도 듣고 해봐야지!!! (2021-06-27)

---

React JS?

• 페이스북에서 만든 라이브러리
• 컴포넌트로 만들어져 재사용성이 높음
• virtual DOM (real DOM vs virtual DOM)

Webpack, babel?

• 원래는 설정하는데 엄청 오래걸렸다. -> 이젠 자동으로 가능!
• babel? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 문법을 구형 브라우저에서 돌수 있게 변환시켜줌 (ES5로!)
• webpack? 예전과 달리 웹사이트 만들때 필요한 라이브러리, 프레임워크, 뭐 파일들.. 복잡시러운것들을 웹팩을 이용해서 bundle을 만들어줌! (내용 방대... 따로 공부해볼것!)

NPM vs NPX

• NPM (Node Package Manager) ? 레지스트리같은 저장소의 역할. local과 global 다운로드 방법이 있다.
• NPX (Node Package Runner) ? 원래는 다운로드 받았던건데 npm 레지스트리에서 look up해서 이젠 다운로드 없이 가져와서 쓸 수 있다. 항상 최신 버전을 쓸 수 있다.

Boiler-Plate 구조

• action & reduction : redux 관련
• component/view : 페이지 하나하나
• App.js : 라우팅 관련
• Config.js : 환경 변수
• hoc : 컴포넌트안에 컴포넌트를 갖는 function (ex: auth에서 자격을 확인한 뒤 admin에 들어올 수 있게 또는 없게끔 하는 걸러주는 함수 뭐.. 이런식?)
• utils : 페이지에서 겹치는 부분들

React Router Dom

• 리액트에서 페이지간 이동을 할때 react-router-dom을 사용한다.
• https://reactrouter.com/web/guides/quick-start

Data Flow

• (client) 로그인 버튼 클릭 -> (server) db에서 유저가 있는지 찾고, 비밀번호가 맞는지 check! -> (server) client에게 response
• 데이터를 보낼때 AXIOS 라이브러리 이용!

TypeError: Cannot read property 'prototype' of undefined

• 강의를 따라하다가 에러가 나서 구글링을 해보았다. 로그를 읽어보니 import한 것들이 사용되지않아서 생기는 에러였고 주석처리 하니까 사라졌다!

Proxy Server

• proxy server? client와 server사이에 res와 req인데 여기에 proxy 서버가 낄 수 있다. ex) IP주소를 모르게 할때? 데이터도 중간에서 바꿔줄 수 있고, 방화벽이나 필터 기능
• 사용하는 이유!
  • 인터넷 사용 제어
  • 캐쉬를 이용해 더 빠른 인터넷 이용 제공
  • 더 나은 보안 제공
  • 이용 제한된 사이트 접근 가능

Concurrently로 백엔드, 프론트엔드 동시에 키기

• 두 개 일일이 다 키는거 너무 귀찮다~
• Usage: "start" : "concurrently \"~\" \ "~\"" 이런식!

CSS Framework

• Material UI, React Bootstrap, Semantic UI, Ant Design ... 등등 많다.
• Ant Design로 진행
• 이것도 나중에 공부해볼것!

Redux

• 상태관리 라이브러리 (State?)
• Props: 부모 컴포넌트에 자식 컴포넌트가 들어간다. 서로 무언갈 주고 받을땐 props을 이용한다. 소통방식은 부모->자식 으로만 전달가능하고, 전달했을때 그 값은 immutable
• State: 부모 자식이 아닌 컴포넌트 사이의 정보 교환. mutable. 값이 변경될때 rerendering 된다.
• Redux Store에 정보를 저장해두면 상위 컴포넌트로 타고 올라가는게 아니라 직접적으로 상태관리를 할 수 있다.
• 진행: React Component -> (dispatch) -> ACTION -> REDUCER -> STORE -> (subscribe) // 한 방향으로만 흐른다.
• ACTION: 어떤 상황이 일어났는지에 대한 객체
• REDUCER: ACTION으로 인해 어떤 값이 뭐로 변했다와 같은 그런 State를 리턴
• STORE: app에 전체적인 State을 감싸줌. 메소드를 여러개 가지고 있다.

Redux Thunk, Promise

• dispatch 과정을 통해 ACTION을 해야하는데, ACTION은 객체로 받는다. 하지만 가끔 function or promise로 전달되는 경우가 있고 이 경우엔 오류가 발생하기 때문에 라이브러리를 이용해준다.

React vs React Hooks

• class component / functional component

로그아웃

• 그저 landing page에 버튼을 만들어서 backend에 만들어준 logout기능으로 이동

인증

• 아무나 진입 가능한 페이지 / 로그인한 회원만 진입 가능 페이지 / 로그인 한 회원은 진입 못하는 페이지 / 관리자만 진입 가능한 페이지
• hoc (HigherOrderComponent)
• 해당 유저가 해당 페이지에 들어갈 자격이 되는지를 알아 낸 후에 자격이 된다면 가게 해주고, 아니면 다른 페이지로 보내버린다.
• backend에 request를 날려서 상태를 리턴받는다.
• null: 아무나 출입 true: 로그인한 유저만 false: 로그인 안한 유저만

🔍 소감

여름방학이 시작되었고 어떻게든 6월 프로젝트를 끝내고 싶어서 종강 후 4일?만에 호다닥 수강하게 되었었다. redux나 react처럼 요즘 채용공고에 hot!한 기술들이 사용되길래 선택했었는데, 어려운 감이 없지않았지만 쫌... 재밌었당ㅎㅎㅎ 웹 개발자를 준비하면서 프론트엔드를 선택하면 디자인 감각이 없어서 부족하지 않을까? 했지만 이번 강의는 디자인 <<<< 데이터 + 코딩이 위주였어서 리액트 구조와 서버와 분리된 프론트엔드의 맛...? 쩝쩝.. 을 살짝이나마 보지 않았을까? 싶다. 다음 노선을 정해야하는데, 우선 JS의 최신 문법과 기초를 더 단단히 다지는것을 다음 목표! (7월 프로젝트는 무얼할까...)