본문 바로가기
Project/우아한테크러닝 4기

우아한테크러닝 4기 / 20210608 / 교육에 대한 기록 / 메모장

by RUCKUS 2021. 6. 8.

1교시

[지난 미션에 대한 리뷰시간]

  • 황윤서님 : Draft.js로 리스트 기능 구현

    민태님 긴급 피드백
    - 다양한 주니어들의 실수로 나타나는 현상
    - 본인의 맥락으로 설명하고 있다. 본인이 설명하고 싶은 것만 설명하고 있다.
    - 그래서 공유를 받는 다른 사람의 입장에서는 이해하기가 굉장히 어렵게 된다.
    - 그래서 처음 셋업 부터 단계적으로 어떤식으로 구현했는지 하나하나 설명하는 것이 필요해야 한다. 
    - 별로 관심없는 시니어라면 대충 얼버무리고 발표를 끝내버릴 수도 있기 때문에 적극적인 설명이 필요.
    - 다른 사람에게 어떻게 전달할지에 대한 기술도 필요하다.

  • 피드백후 재설명
    구글 로그인 및 로그아웃을 react-google-login 패키지를 사용하여 구현
    Draft.js를 이용하여 ordered-list와 unordered-list 설명

    민태 피드백
    - 구현이 당장 목적은 아니다.
      이런 기술을 잘 학습하게 어떻게 사용하는지를 의견교환하면서 피드백을 받는 것이 목적
    - 너무 만드는 데에만 에너지를 많이, 포커스를 두고 있는 것 같다.
    - OAuth를 구현하기 이전에 그것이 무언지를 우선적으로 알고 개발에 들어가는 것이 중요, 최소한 오버뷰정도는 보아야하는 것이다.
    - ~라고 들었다. ~가 신기했다. ~라고 느꼈다. 라는 톤앤매너는 엔지니어로써의 에티튜드를 가지는 발언은 아니다.
      (안해봤다는 거로 들린다.)
    - 프로토 타입이 뭘까요?? -> 기술비용이 얼마나 들지 산정 하는 것, 결국 리스크를 확인 하는 것.
    - 각 함수마다 필요한 부분만 코딩 하는 것이 중요. 무언가 다른기능이 있는 것 같은 착각을 일으키게 한다.

    참석자의 윤서님 코드에 대한 피드백
    - event 타입을 any로 지정하지 않는 것이 좋을 것 같다.
    - 함수를 usecallback으로 감싸면 좋을 것 같다.
    - util 쪽 코드를 담고 있는게 다른 폴더로 나누어져 있는 것이 좋을 것 같다.
    - 커맨드? 라고 해야하나 저 string으로 되어있는 command를 enum과 같은 형식을 사용했으면 좋을 것 같아요
    - Editor내에 command배열을 map으로 접근하는것은 어떤가요?
    - EditorEvent를 새로 만들어놓고 해당 editorEvent를 상속하면서 그 상속한 객체들을 command를 key, 상속된 EditorEvent를 value로 해놓는것도 한가지 방법일 것 같네요.

2교시

[다른분 발표]

  • 양채훈님 : OAuth로 구글, 네이버 로그인 구현

    민태님 피드백
    - 구글과 네이버의 차이점이 있었나요? -> 구글이 좀 더 정보를 쉽게 얻을 수 있다?? 네이버는 백엔드에서만 주니까 그 외에는 비슷하다고 느꼈다.
    - 네이버를 붙인 이유는?? -> 너무 구현을 많이 안한 것 같아서...
    - 구글과 네이버를 그래도 둘다 구현한 것은 잘했다.
  • 이윤희님 : passport라는 것을 사용했다. 다른 분들과 다르게 백앤드로만 돌아간다. 보안이 더 좋다고 생각했다.

    민태님 피드백
    - passport보다 직접 구현하는게 코드 자체는 더 단순화 될 수 있다. passport가 OAuth말고 다양한 다른 N개의 인증들을 제공하기 때문
    - 백엔드와 클라이언트 사이드에 인증의 장단점에 대해 가벼운 설명 -> 백엔드가 보안 및 팝업 없이 리다이렉트 되는 점 등이 있기 때문에 여러가지 측면에서 백엔드에서 구현하는게 장점이 많다고 본다.
    - OAuth와 관련해서는 꼭 1번쯤은 학습을 하여야 한다.

    참가자 질문
    - 프론트에서만 구글 로그인으로 구현하신 분들은 시크릿키 어떻게 관리하고 있으시나요? 시크릿키는 서비스 사용자들이나 다른 사람들에게 노출 되면 안되는데 어떻게 관리하고 있는지 궁금합니다! -> 클라이언트 쪽에서 구현할 때는 시크릿키를 사용하지 않아요.

 


3교시

[다른분 발표]

  • 윤태원님 : react-google-login을 사용하지 않고 직접 사용하였다.

    민태님 피드백
    - 클래스를 굉장히 잘 사용하시는 분이었다. 프론트는 보통 클래스화를 잘 안쓰는 경향이 높다.
    - 그리고 디렉토리 스트럭처 구조를 만들때, 폴더 및 이름명을 어떤식으로 해야할지 고민을 많이 해야한다.


    참가자 질문
    - 코드에 비해 주석이 너무 많은 것 같습니다. 주석을 함수마다 다 달아놓으시는 이유가 있을까요? -> 사실상 주석 없는 수준이다 from 민태님
    - async, await 구문이 아닌 then을 사용하는 이유가 있으신가요? -> 구현되는 수준이 복잡한 부분이 아니라서 then체인으로 했다. (promise 구문이라고도 불리는 것 같음)

  • 김홍중님 : slate.js를 이용하여 가벼운 텍스트 출력까지만 시도 하였다.
  • 양채훈님 : slate.js

[Slate vs Draft]

  • Element를 직접 생성해 주입할 수 있다는게 참 좋아보인다.
  • slate.js가 DOM의 작동방식을 최대한 따라간다는 방향을 가져서, 더 적응하기도 편할 것 같다.
  • 민태님도 슬래이트가 첫인상으 더 깔끔해보인다.

[마지막 질문]

  • 다들 잘하시는거 같아 민망한 질문이긴 하지만 타입스크립트 숙련도가 낮아서 너무 속도가 더딘데 좀 가볍게 적용해보려면 어떤식으로 접근하는게 좋을까요.
    -> 민태님이 고민해서 답변주겠다고 함.

[정리 및 미션]

  • 구글로그인은 클라이언트 사이드와 서버사이드 쪽으로 리포를 양쪽으로 나눠서 생성하자.
  • 뿌리 리포는 둘 중 어떤 것을 머지할지를 고민해보라.
  • Slate.js로 구현하자.
  • 무료 DB를 어떤 것을 붙일지 고민하자.
  • 노션의 1페이지의 UI를 구성해보자.