어제의 이야기

어제 공부한 것

Controller...

로컬 로그인 구현, 카카오 로그인 구현,
그리고 multer 패키지 사용법까지 봄.

이후에는 리액트 프레임워크, 리액트 동작원리까지 봄.

로컬 로그인 구현하기 : 구조 파악

• 주요 기능이 있는걸 따로 폴더에 넣고, index.js로 관련을 전부 module.exports 하는 식으로 provider 구현. (이걸 Nest에는 아마 Service 로 폴더를 만들어서 할거임.)
• 미들웨어도 폴더를 만들어 관리함.
  쓰는 함수는 exports.isLoggedIn 처럼 함수 정의.
  잘 끝나고 나면 next()를 호출하는게 미들웨어 특징인듯.
• 그럼 이제 routes 폴더 단계에서 require로 함수들을 전부 import해와서
  router.get('/profile', isLoggedIn, renderProfile);
  식으로 라우트를 이어줌.
  중간은 미들웨어 폴더에 있는 함수고, 맨 뒤는 controller 폴더에 있는 함수임.
  미들웨어에서 구현하는 함수는 주로 체크하거나 검사하는 함수임.
• controller 폴더에 있는건
  page 파일에는 단순 render만 다루는가하면
  auth 파일에는 주요 기능을 다루어 관리하는 등 응답요청을 관리하지
  그것만 뺴면 엄밀히 구분되어있지 않음.

로컬 로그인 디테일

• passport 모듈은 LocalStrategy 라는 객체가 있어서 그걸 설정해주면 그 전략에 따라 로그인함. 여기서 하는건 기존에 있는 회원인지, 아닌지 등을, 즉 위의 미들웨어는 로그인 체크지만 여기서하는건 가입 체크임.
• req.login() 이라고 login이라는 함수 구현 중 호출되는 이건 passport 모듈이 추가해주는 별도의 메서드고, 내가 앞서 설정한 LocalStrategy에 따라 동작함.
• 내가 어떠한 유효성 체크를 한다(1) 유효성 체크 전략은 이렇다(2) 해서 미들웨어가 두개 중첩이라고 주석이지만 인수를 뒤에 붙이는 경우가 있음. 왜 하는진 아직도 모르겠음.

카카오 로그인은...

• passport.authenticate('kakao')는 그래서 kakao 모듈로 설정한 내 전략을 그대로 불러온다고 보면 됨.

카카오 전략은 clientID를 따로 발급받아서
카카오 개발자 계정, 카카오 로그인용 애플리케이션 등록을 해야한다는 점 유의.

multer 패키지로 이미지 업로드 구현하기

사실 뒷부분 파트에서는 다들 알죠? 라고 하기에
앞부분 파트에서 다시 찾아봄.

• multer 함수는 인수로 두개 받음.
  첫번째는 storage관련이고 두번째는 filename 인데
  어떤 폴더에 어떤 식으로 저장하고 파일명은 어떻게 지을것인지임.
• 첫번째는 multer의 메서드인 diskStorage로 destination, 목적지를 지정하는 함수를 설정해서 done(null,'uploads/') 등으로 첫째는 에러, 둘째는 했다면 저장할 경로등을 지정.
• 두번째는 아무튼 그냥 책봐라
• uploads 폴더는 직접 만들거나 fs 모듈로 서버 시작시 생성.
  ...

그리고 상세 메서드

• .single은 하나만 업로드함.
  (이미지 하나 -> req.file, 나머지-> red.body)
• 여러 파일은 받을때부터 input 태그에 multiple 명시,
  .array 사용. 결과도 req.file이 아니라 req.files 배열에 있음.
  (이미지들 -> req.files, 나머지-> req.body)
• 받으려는 input 태그나 폼 데이터 키가 다르면 .fields.
  (두번째와 동일.)

그외 궁금한 것

• Sequelize의 findAll에서 include 옵션은
  관계형 DB에서 연결된 모델을 함께 검색하여 가져오고싶을떄 사용.
  (Post안에 그 User 정보도 가져오고 싶어서 include 옵션에 포함하는등.)
• 몽구스의 poplulate와 유사.
  대신 여기선 관계를 명시적으로 정의하지 않음.(정의하지 않아도 그냥 가져옴.)

명시적으로 선언해서 가져오는 것보단 늘 참조 가능한게 좋은거 아닌가?

• 명시적 선언시 ORM 도구가 제공하는 기능 사용 가능.
• 모델간 의존성 명확히 확인.

질문하고 생각해보니,
만약 협업을 한다면 미리 DB를 애초에 어떤걸 상정하고 짰는지
명시할수 있는 DB가 좋을거같긴함. DB 수정 자체는 sequelize로
설정 수정하고 force로 강제 변경 시키면 개발 중 수정은 용이하니까.

리액트 질문 모음

react에서 build한 후 serve로 실행시키는 것과, npm start는 다르다고 한다. 후자는 웹팩이 서버 형태 구동이라 하는데, 어차피 build후 실행하는 거면 둘이 다를 건 없지 않나.

• 후자는 자동으로 빌드하고 새로고침함.
  매번 서버를 실행하고 빌드하는 과정을 줄여서 수정이 빠름!
  물론 실제 배포시에는 전자로 해야함.

Luxon 라이브러리 DateTime 객체에 호출되는 .startOf와 .toRelative() 는...

• 전자는 내가 확인하려는 비교 대상외 0으로 초기화.(1일전을 하려면 22시간 차이 같은건 그냥 0으로 바꾼다는것임.)
• 후자는 그걸 이제 문자열로 바꾸어주는 메서드.
• toLocaleString은 내가 실행하는 환경이나 서버에 따라 현지화해주는 메서드.

경고 메시지 : img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

• 이미지에는 alt 속성으로 대체 텍스트를 포함해주는게 좋다는 경고.

가상 DOM이 물리 DOM보다 좋은 이유?

• 가상 DOM 구조 라는걸 이미 만들고 나면,
  그 뒤에 재랜더링할때는 가상 DOM 구조와 비교하여 변경된 속성을 감지하기때문에
  내가 특정 DOM 객체의 ID로 찾아가서 바뀌었는지 일일이 확인하지 않아도 리액트 딴에서 반영, 변경해줌.
• 굳이 따지자면 바로 변경 사항을 반영해준다~의 원리인셈.

children 속성은 왜 쓰지?

• 컴포넌트를 중첩하여 UI 구성시
  중첩된 컴포넌트 간에 데이터를 전달하고 싶을때...
  즉, 부모-자식 요소를 찾는 쉬운 방법으로 자식을 찾아가는 포인터를 설정하는셈.
• 대개 children?: ReactNode 등으로 속성을 선언(후자는 모든 리액트 요소가 가지는 속성) 해서 태그에 용이하게 추가하는데 이후 버전 부터는 쉽게 선언할 수 있는 방법 제공.

흠 이벤트 파트 다시 보는데
어떻게 구성되었는지 전체적으로 한번 더 확인해야할듯.

약간 이벤트 객체 만들어서 이벤트를 해당하는 Id에 붙이는 그런 함수 객체 method를 가진 함수를 만든다? 까진 알겠어.
근데 이거 return을 구조체로 하던데 아 이거 자체가 이름이 function이어도 함수 컴포넌트라 이걸 추가 하기만 하면 이러한 구조가 있고 요러한 이벤트가 붙어있는 컴포넌트가 되는 것인가. 이해 완료.

소감

로그인 구현 자체에서 이제야 진짜로 '미들웨어'가 뭔지 알게 된 기분이고
여기서 한 구성 자체가 MVC임을 리액트 책에서 다시금 확인하게됨.

Do it 시리즈가 그런건지 리액트 웹앱 책이 그런건지 모르겠는데
개념 정의, 설명을 정말 잘해놨다. 내가 헷갈려하던걸 취합한 느낌.

API 서버도 정말 보고 싶은데
리액트 훅까진 봐야할거같고 오늘이 발표임...

오늘의 계획

변경 사항 및 일정

없음.

내일 오전 10시 발표.
내일 랜덤 런치.
내일 오후 6시 설문 마감.

오전

TIL 다 쓰기.

낮

알고리즘.
발표 자료 준비.

발표할 게 모자라면 관련 구현.

저녁

발표 준비 잘 하고
만약 일찍 끝났다면 리액트 훅.

오늘의 다짐

그래서 내일까지 포함해서
리액트 훅 보고, API 서버까지 볼수 있으면 정말 좋을텐데.

뭣보다 웹소켓도...
꼭 쓰게 될거같긴한데.