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

1교시

[Mission에 대한 민태 님의 코멘트]

놀라운 게 2가지다

1. 생각보다 많은 사람들이 약 40명 정도 리포지토리를 생성해주었다.

2. 그리고 1명을 빼고 대부분 동일한 형태로 초기 구성을 했다. (CRA만 한 수준... 하하하...)

 

[그리고 Mission에 대한 발표를 해주실 분 2분 섭외]

1. 김홍중 님 : CRA는 유지보수가 어려워서 Webpack 및 babel 설정을 직접 했다고 했다. 근데 이 부분에 몇몇 참석자들이 의문이 생겨서 재 질문 -> 실무에서는 설정을 변경할 일이 많아서 커스텀을 해야 하는데 그래서 처음부터 직접 설정하면 유지보수 측면이 더 좋다.

 

(시니어의 입장에서 민태 님의 질문)

• 무엇을 어떻게 어디까지 만들 것인지에 대한 목표가 나와있지 않다.
• 그리고 사용하려고 하는 마크다운의 기능에 대해서 왜 해당 기능을 사용하는지에 대한 설명이 부족한 것 같다.
• 가장 간과하는 것 중에 하나가 어느 리포에서도 목표를 명확하게 설정한 디스크립션을 못 봤다.
• 해본 적이 없는 기술에 대한 난제가 있는지 파악하면 좋을 듯하다.
• 그리고 할 수 있는 것에 대해서도 다른 방식으로 시도해 보려고 하는지 고민해보는 것도 필요할 것 같다.
• 어떤 것들을 POC 하고 어떤 것들을 프로토타입 할 거야 라는 것을 고민
• 왜 리포를 1개로만 구성을 하려고 하는지? 이것도 맞는 건지 고민
• 세부적인 계획, 마일스톤을 러프하게 라도 할 수 있게 끔 서로 커뮤니케이션이 많이 되었어야 한다.

2. 두 번째분 섭외 안됨

 

(현재 우리들의 가장 큰 난재)

정말로 우리가 무엇을 어떻게 할 것인가? 오늘 무엇을 바라는 건가? README.md에 무엇을 기획한 것인가? 정작 컨센서스가 없다. 시니어는 기획서 정도는 만들겠지 정도의 무의식이 존재했다. 그래서 이러한 부분에 대한 컨센서스(합의)가 정확하게 되어있지 않았다. 그리하여 적극적으로 질문을 하자.

 

(급 면접 관련 팁)

어떤 질문에 대해 충분히 이해가 되지 못한 상황이 생겼다면, 두 가지 유형으로 나뉜다.
하나는 나름 답변하는 타입, 나머지 하나는 질문의 의도를 다시 한번 구체적으로 재 질문한다.
그러면 재 질문하는 것 자체가 커뮤니케이션에 대한 자세가 있다고 판단한다.

(고려해야 할 것)

• 기획적 확인사항
• 기능적 확인사항
• 운영적 확인사항

---

2교시

 

기술 숙련도에 대한 Range에 대한 파악 (타입 스크립트를 얼마나 아는지, 리액트를 얼마나 아는지)

대체적으로 타입 스크립트 > 리액트 > 백앤드 순으로 경험이 없음

 

[발표해주신 분의 깃 허브를 보면서 피드백]

• 홍중 님의 리포를 메인으로 하고 강의를 진행하기로 한다.

[스펙]

• 회원서비스를 한다.
• 구글 로그인을 붙인다.
• 당장은 백엔드까지는 아니어도 로그인 핸드 세이크까지만이라도 구현.
• 친구들끼리만 공유하는 간단한 문서 공유 서비스, 단일 문서
• 커스텀 컴포넌트가 들어가는 기능을 넣어보고 싶다.

[기획에 대한 고민]

• 라이브러리를 쓴다면 지속적으로 관리되는 라이브러리 인지?
• 라이브러리에서 지원하는 기능과 그렇지 못한 기능을 어떻게 통합해 인터페이스를 제공할 것인지? 아니면 직접 구현하는 것이 효과적일지?

(급 면접 관련 팁)

경력에서는 어떤 기술을 이력서에 적었는데, 그 기술을 왜 사용했냐고 물어보면, 이미 그 회사에서 쓰고 있었다. 하라길래 했다 등의 코멘트가 대부분이었고, 해당 기술에 대한 장, 단점 그래서 대체하고 싶은 기술 등 정도를 얘기하는 것이 좋을 것 같다. 엔지니어로서의 올바른 자세를 보여주는 것이 중요하다.

 

[급 미션]

토스트 ui를 사용할지 말지 각자 20분정도 docs를 보면서 고민하는 시간을 가진다.

봤지만 해당 기능을 어떻게 사용할지에 대해서는 아주 약간은 감이 오긴했다.

그런데 JS랑 TS랑 어떤식으로 호환이 되어서 사용이 될지??아직 그런거에 대한 감이 없다.

그리고 내가 구현하고 싶은 기능은 토스트 UI에는 없었다. 이 부분은 직접 구현이 필요할 듯 하다.

---

3교시

[발표]

안태영님 : 리액트를 공부해야하면서 토스트 UI를 추가적으로 공부해야하기 때문에 토스트 UI를 선택하기는 어려울 것 같다. 그리하여 리액트를 학습하기 위한 수단으로 미니 노션같은 에디터를 만드는 것이 목표이다.

 

황윤선님 : examples를 위주로 살펴봤지만 노션이라기 보다는 일반적인 위지윅 에디터느낌을 많이 받았다. 노션을 만드는 것이지 에디터를 만드는 것이 아니라고 생각한다. 그래서 우리가 만들 노션이 위지윅 적인 부분에 중점을 둔다면 토스트 UI가 맞는다. 마크다운 측면을 중점으로 생각한다면 꼭 이걸 써야하는지에 대한 생각이 들었고, 다른 마크다운 api나 이러한 부분들을 직접 컴포넌트를 설계하여 선택하는 것도 좋을 것 같다.

 

강경만님 : 단일 문서로 기획을 하기로 했기 때문에 다양한 기능을 구현한다기 보다는, 작은 기능 1~2개 정도를 목표로 만드는 것이 유효하다고 판단된다. 그것을 기준으로는 토스트 UI는 우리 문서에는 무거운 라이브러리라고 판단된다.

 

시니어 의견

• 일단 토스트 UI는 올인원 에디터다. 모든 것을 다 가지고 있다.
• 이건 장단점이 있는데, 우선 커스터마이징에 대해서 얼마나 노출성이 있는지를 파악해봤다.
• 본인이 생각했을때 API문서가 상당히 부실하다고 느꼈다. -> 크게 커스터마이징 할 일이 없어서 그러한 목적으로 디자인 된 라이브러리가 아니라고 본다. 플러그인이나 미들웨어 스펙도 없었다.
• 좀 더 깊게 살펴봐야 겠지만 노션 구현에는 시간이나 비용이 많이 소모된다고 판단되었다.
• 또 리액트와 타입스크립트에 대해서 자세한 설명이 조금 부족하다고 판단된다.
• 아쉬운 점 하나는 엔지니어링 측면에 대해서도 고민해보면 좋았을 것 같다. (코드레벨, 이슈, 스타수 등등)
• 그래서 본인이 찾아 본 것은 Draft.js이다. 에디터를 만들 수 있게 하는 프레임워크이다.
• https://www.slatejs.org/ 다른 분이 소개한 슬레이트js
• 이 슬레이트와 드레프트를 가지고 가벼운 프로토타입을 구현해보자.

---

[다음주 화요일까지 Mission]

   (기획내용 정리)

• 로그인 구현, OAuth 연동
• 문서를 여러개 만들 수 있는 문서 리스트 UI
• 문서는 커버와 제목이 기본적으로 있고 본문이 있는 형태
• 간단한 프로토타입 제작(slatejs, draftjs) -> 어떤 라이브러리 사용할지 결정
• 리액트 컴포넌트는 function 형태로 class ㄴㄴㄴ

프로토타입은 코드샌드박스 같은 웹을 이용해서 구현해보자.

https://codesandbox.io

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

[논의한것]

1. 이 서비스는 언제 사용하나요?
   친구들끼리 간단한 문서를 공유하고 싶을때 사용할 수 있습니다.
2. 사용자는 무엇을 할 수 있나요?

• 사용자는 회원가입을 하여 로그인을 할 수 있습니다.
• 폴더구조를 가지지 않는 개별 문서 여러개를 경험합니다.
• 최소한 리스트 UI는 경험할 수 있습니다.
• bullet작성, image추가, code block삽입을 할 수 있습니다.
• 문서내의 커버, 고정된 제목, 본문을 볼 수 있습니다.
• 문서를 동시에 작성 할 수 없고 마지막 작성자가 작성한 내용으로 문서 내용을 overwrite합니다.

[해야할것]

1. OAuth연동을 합니다.
   단, 다음 단계로 진행합니다.
   이 저장소를 fork하여 fork된 자신의 계정에서 작업을 합니다.
   작업을 완료하면 이 저장소로 pull request합니다.
2. Draft와 Slate라이브러리를 이용하여 bullet작성, image추가, code block삽입 중에서 최소 1개의 프로토타입을 제작합니다.
   CodeSandbox와 같은 에디터를 이용하여 빠르게 제작할 수 있습니다.
   이 과정으로 어떤 라이브러리를 사용할지 생각합니다.

 

---

[모르는 것 메모]

POC : Prove of Concept -> 워킹 가능한 모델인가를 실험해보는 것

PR : Pull request

OOS : 오오스?? 로그인 관련된 뭐가 있는 것 같음 아...이거 OAuth였음...ㅠ