오성국 블로그 이것저것 끄적끄적

코드 스테이츠 13주차

07 Mar 2021

코드 스테이츠를 통해 배운 것을 정리하는 post

무엇이든 보고 듣기는 쉽지만 자기 것으로 만드는 것엔 노력이 필요하다.


학습할 내용


월요일

리덕스 개념 뽀개기

전체적인 흐름에서 리덕스의 위치와 역할을 분석했고, redux가 있기전에 어떠한 필요성에 의해서 만들어 졌는데 고민해보는 시간을 가졌다. 페이스북에서 View 와 Model 사이에 여러 액션들의 연관 관계가 복잡해지고 유지보수와 에러 핸들링이 어려워 짐에 따라 FLUX 아키텍쳐를 이용한 리덕스를 이용해 데이터의 흐름을 한 방향으로 만들어서 문제를 해결했다.


화요일

MVC 패턴

클라이언트 없이 모델과 컨트롤러를 연결하는 작업을 했는데 생각보다 어려웠고 내부적인 동작이 어떤건지 알지를 못해서 약간 답답했지만, 그래도 하루가 가기전에 해결했다


JavaScript Question

여러가지 JS 에서 헷갈리는 부분을 객관식 형태와 풀이 해설이 있는 프로젝트로, 간편하게 문제들을 풀면서 놓치고있고 헷갈려 했던 개념들을 다시 잡는 시간이 되었다 총 155 문제중에 30문제를 풀었다.


수요일

JavaScript Question

60 문제까지 해결!!

  1. 이벤트 타겟은 무조건? 하나?
  2. 원시형 객체는 메서드와 프로퍼티가 없다. “abc”.toUpperCase() 되는데?? 그거는 new String() 이 암묵적으로 실행됨
  3. 제너레이터 함수
  4. parseInt 는 문자열을 순차적으로 읽고 숫자가 아닌값이 나오면 읽은것만 숫자로 바꿔서 리턴한다.
  5. 함수가 속성을 new 호출하고 리턴하면 속성값으로 들어간다.
  6. x = ( y = 10 )
  7. 익스포츠한 모듈값은 리드온니

여러가지 생소한 기술들이나 필요한 개념들


Short.ly

다른 동기분들과 스프린트 했던 코드들을 서로 리뷰하면서 여러 메서드 사용법이나 코드 스타일을 볼 수 있었다.

다같이 models 디렉토리의 index.js 의 역할과 동작에 대해 얘기를 나누면서 스프린트 코드에 대해 더욱 선명하게 알게된거 같다!


목요일

이름은 달콤한게 새벽까지 잠을 못자게 나를 괴롭혔다. 상태가 없는 HTTP 통신 특성상 할 수 없는 것들이 많아서 상태를 가질 수 있게 도와주는 기술이다. 주로 클라이언트 측에서 가지며 여러가지 정보들을 담을 수 있다.

하지만 보안적으로 취약해서 중요한 정보를 쿠키에 담아두긴 부담이 되는데 이를 위해 만들어진게 Session 이다.


Session

Session 을 Sesstion 이라 잘못적어서 귀중한 4시간을 버렸다 ㅠㅠ 오타조심 express-session 이라는 미들웨어를 이용해서 간편하게 사용할 수 있었다. 처음에 사용법이 너무 낮설어서 삽질을 많이했었다.

데이터를 서버에 저장하며 쿠키보다 보안성이 높다. 하지만 세션 서버를 분리할 수 없고 서버 부담이 많이


axios

fetch 보다 뭐가 좋은지 모르겠지만 한번 써보자해서 써봤는데, 이상하게 쓰다가 400 에러를 잔뜩 먹어서 좋게 보이지 않는다. 그래도 익숙해지니 나름 쓸만했다.


로그인, 로그아웃 구현

로직들이 단순하지 않겠다. 생각했지만 이렇게 새벽 늦게까지 할줄은 생각을 못했다 ㅜ

그래도 전체적인 흐름을 잡을 수 있었고 로그인 관련 코드 구조를 알 수 있어서 매우 유용했다!!


금요일

token 기반 인증 방식

세션의 단점, 서버의 부하가 늘어나며 여러개의 서버를 만들 때 불리하다. 이러한 단점을 보완하기위한 방법으로 토큰 기반의 인증 방식이 생겼다.

실생활의 예를 들어보면, 세션은 파티에 참석하는 손님을 초대명단(어마어마하게 많은 인원이 적힌)에서 해당 손님이 포함되는지 확인하는 것과 각각의 손님들에게 초대장을 주고 손님이 오면 전달했던 초대장을 확인 후 입장을 시키는 작업과 유사하다고 생각된다


JWT

JSON Web Token 으로 가장 보편적으로 사용되는 토큰의 모양이다 (다른 모양의 토큰도 있나??) header.payload.signature 로 구성되어있고 클라이언트는 조회만 가능하며 수정은 서버에서만 가능한 구성이다. 다중 서버와 서버의 부하도 크지 않아서 사용하는 것으로 이해했다.


주말

express json 과 send 차이

Express 의 Github 레포지토리로 가서 메서드를 확인하는 어느 블로그 글을 봤다. 글 링크

오픈소스이다 보니 어떤 동작을 하는지 직접 찾아볼 수 있다는걸 다시한번 느끼게 되었다. 공식문서도 좋은 자료이지만 메서드를 사용하면서 생기는 에러가 어떤 경우에 처리되는 에러인지 확인하며 디버깅하는 방법도 좋은 것 같다.


OAuth 예습

간편 로그인을 이용하기 위한 방법으로 인증을 하는 과정과 토큰을 생성하는 과정을 입체적으로 머릿속에 그려볼 필요성을 느꼈다. 사용자의 회원가입 데이터를 보안적 책임을 이미 잘 구비해둔 곳에 일임함으로써 사용자의 보안 위험을 줄여준다.


res, response, result 변수 네이밍

비동기 요청으로 받아오는 결과값을 res 로 이름을 지으면 req, res 의 res 와 이름이 충돌?이 생겨서 에러가 발생할 수 있다. 비동기 함수 안의 비동기 함수의 결과값을 받아올 때, 변수 네이밍에 신경을 더 써야겠다.


마지막 HA 를 남기고 전체적으로 복습을 진행했다. 진행하는동안 동작만 만들었던 부분들을 왜 이렇게 써야하고 메서드의 동작이 어떤 원리에 의해서 돌아가는지 파악하는 시간을 가졌다. 정리를 하고 스프린트를 다시 시작했는데 처음 스프린트를 풀 때와는 느낌이 사뭇 달랐다.

처음엔 테스트 코드 하나하나를 해결하기위해 코드를 작성했다면, 복습 할 땐 전체적인 구성과 구조를 생각하면서 코드를 작성했다


Related Posts