우아한테크캠프 2주차 후기

 벌써 2주차가 지나가고 있다. 일단 오늘 배포를 하고 팀별로 발표하는 것을 보고 느낀것은 약간 절망??이였다. 나는 나름대로 구조를 생각하면서 코드를 짜고 있는데 다른팀들을 보니 내가 할 수 있는걸까?? 하는 생각이 들었다. 그래서 줌에서 발표할때도 원래같으면 기능을 내가 설명한다고 했을텐데 기가죽어서 팀원분에게 하라고 했다. 나는 바닐라 자바스크립트를 나쁘지 않게 사용한다고 생각했는데 이번주 3기 합격생분들의 세미나(특히 해민님.... 말도안되는 .... 진짜 말이안됩니다.), 미니세미나, 결과물들을 보니 우울해질 수 밖에 없었다. 먼저 세미나를 대충 설명하자면 저번 우테캠에서 우아한형제들에 입사를 한 장해민? 이란분은 지금도 밥먹는 시간외에 코딩만 한다고 한다.... 우테캠 프로젝트 결과물들을 보니 도저히 시간내에 할 수 없는 결과였다. 그런 사람이 지금도 밥먹고 코딩만 한다니... 지금 나는 밥먹는 시간 아껴가면서 공부를 하지만 회사다니면서도 그럴수있을까?? 하는 생각이 든다. 그런 괴물은 일단 제쳐두고...(나쁜뜻아님!!) 다른 한분의 말씀이 기억에 남는다. 그분은 피자에 비유를 했는데 장해민이란분은 피자를 하루에 라지사이즈 10판만드는 사람이라고 했는데 자기는 일주일에 스몰사이즈 10판도 힘든 사람이라고 했다.(피자 개수는 정확하지 않아요..) 그냥 자기가 만들수있는 피자 개수를 파악하고 우테캠 기간 동안 피자를 만드는 개수를 늘려가면 된다고 했다. 아무래도 나는 지금 일주일에 스몰사이즈 5판도 힘든사람인거 같다.. 미니세미나의 내용도 기억에 남는데 한분은 함수형 프로그래밍에 대해서 설명을 했다. 나는 그냥 순수함수만 사용하면 되는줄 알았는데 그런 간단한게 아니였다. 너무 어렵다... 클로저, 함수형프로그래밍, 트리구조... 대충 보기는 했지만 실제 프로젝트에서 사용하라고 하면 벌써 머리가 아파온다. 일단 나는 기본적인 것에 치중할 생각이다. 천천히 하나씩 적용해 나가겠다. 일단 함수형 프로그래밍을 강의한분이 참고한 영상링크를 올린다. 나도 나중에 봐야겠다.

https://www.youtube.com/watch?v=4sO0aWTd3yc&ab_channel=naverd2 

 

 그리고 두번째 세미나 발표분.... 이건 진짜 .... 입이 벌어졌다. 저번주를 되돌아보는 그런 방식으로 발표한다고 하셔서 오 이런것도 발표를 하는구나 했는데.. 진짜 엄청났다. 주말동안 모든팀의 코드를 보고 자기가 개선해야될점을 팀별로 적어놨다. 이건 진짜 말이안된다.... 나도 주말동안 공부를 하긴했는데 20팀의 코드를 본다는건... 그것도 우리와 같은 교육생입장에서... 나는 못...하ㄴ.ㄷ ㅏ

우리팀의 내용도 있었는데 기발하다 하는 부분은 역시나 전혀없었다. 반성...

코드리뷰가 왜이렇게 하기가 싫을까... 책 보는건 좋아하면서 남의 코드좀 들여다봐야겠다. 다들 나보다 잘하고 mvc패턴, 아토믹패턴, 리액트패턴, 별별 패턴들을 다 사용한다. 그에비해 나는 디자인 패턴을 몇번 찾아보긴 했지만 와.. 어렵네 하고 넘어갔다. 코드의 질이 중요하다는 것을 많이 느낀다. 

https://github.com/hseoy/practice/wiki/%EB%90%98%EB%8F%8C%EC%95%84%EB%B3%B4%EA%B8%B0-(%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC%EC%BA%A0%ED%94%84-1%EC%A3%BC%EC%B0%A8) 

hseoy/practice

 

 그래서 나는 이번주에 무엇을 배웠을까?? 성장하지 않았을까?? 절대 그건 아니라고 생각한다. 나는 나대로 잘하고있다. 라고 생각하려고 하고있다. 배포주소에 들어가보니 저렇게 하면 나도 쉽게 만들지. 하는 부분이 생각보다 많이 있었다. 지금 내가 하는 방식이 좀 어려운것같다. 진짜 지식이 없는 상태에서 코드 참조도 안하고 무에서 유를 창조하다 보니 어떤게 어렵고 이런걸 몰랐다. 아니 일단.. 그전에 이번주에 가장 많이 배운것은 깃허브 관련된 지식이다. 팀원분이 깃허브를 이전에 사용하셨어서 마일스톤, 라벨, 이슈, 위키 이런것들을 잘 활용하고 있다. 처음에는 좀 힘들었는데(지금도 힘들다) 분명 나중에 도움이 된다고 생각한다. 크롱이나 호눅스도 깃허브는 나중을 위해서 필요하다고 말한적이 있다. 일단 익숙해져야된다. 일단 그렇게 첫번째는 깃허브. 그리고 두번째는 바닐라 자바스크립트다. 타입스크립트도 적용을 하고는 있는데 아직 많이 미숙하다. 제대로 공부한 적도 없고 겨우 쓰고만 있는정도다. 그래도 뭐 익숙해진다는건 좋은거니까 좋은건 좋은거지. 바닐라 자바스크립트로 이정도로 복잡한 작업을 한적이 없었는데 다시는 없을 좋을 경험이다. 또 웹펙관련해서도 나름 공부를 했다. 이건 블로그에 올릴거다. 잠자고나서... 아 다른 얘기를 쓰고있네. 바닐라자바스크립트로(await금지, 라이브러리 금지(fetch사용)) 제약사항까지 걸고 하다보니 자연스럽게 그와 관련된 학습도 하게된다.

 내가 지금 사용할려는 방식은 pjax구조이다. 일단 프로젝트를 설명하자면 당근마켓 비스무리한걸 만드는 건데 이게 원래는 안드로이드 앱인만큼 슬라이드(오른쪽에서 왼쪽으로 푸시되는)로 만들어야한다. 그래서 자연스럽게 spa 방식이 강요된다.(그렇지 않고도 할 수 있겠지만 나는 잘모르겠다)

 나는 지금 최상위 모듈에서 나머지 페이지 컴포넌트들을 인스턴스로 생성하고 setstate, render, rerender 등의 함수를 이용하고 있다. 조금 더 정확히 말하며 메인화면에서는 공통적인 state 몇개만 관리하고 setstate를 하게되면 render를 하고 render 과정에서 하위 컴포넌트들을 appendchild를 하거나 하위 컴포넌트의 setstate를 호출한다. 그리고 하위 컴포넌트의 setstate를 호출하면 rerender를 호출해서 필요한 부분만 수정을한다. 이때 모든 state를 수정하면 안되기때문에 action이라는 인자를 하나 넣었다.(setstae에도 마찬가지)

 

그냥 url을 이동하지 않고 사용하는 방법이 가장 기본. 그리고 #을 사용해서 이동하는 방법이 발전? history api를 이용해서 url을 이동하는 방법(pjax)가 가장 어렵다. 사실 pjax방식은 구현할 수 있는데 쌓는다는게 좀 어렵다. 이게 결국 spa는 새로고침을 어떻게 구현할것인가가 문제인데 쌓는 방식(스택) + pjax는 족므 골치가 아프다. 지금 생각하고 있는 것은 일단 express에 api로 접근하는 부분을 제외한 나머지 url을 index.html 파일을 보내버리고 거기서 url을 음... /login/signup에서 새로고침을 했다고 하면 최상위 모듈의 상태를 바꾼다. this.setState(action,url) =>  this.state.deep=[login, signup] (대충 이런식..) 그다음 render에 액션을 하나 추가해서 signup부분은 바로 나오게(클래스를 하나 더 만들면 되네그냥. animation없는걸로) 그 밑에 모듈은 insertbefore?였나?? 그걸로 앞에다 추가를 하면 본문은 빨리 나오게 하고 밑에 쌓인 컴포넌트들을 천천히 생성하면 된다.(물론 빨리 생성한다.. 지금작업자체가 그렇게 복잡도가 높은 작업이 아니다보니) 아니면 앞에서부터 appendchild를 하고 로딩을 구현해도 괜찮을 것 같다. 아니 뭐하러?? 더 쉬울듯?? 아닌가... 그냥 최상위 모듈에 this.render(refresh?) 이런식으로 만들어서 this.state.deep에 있는(url을 join으로 가공)해서 foreach문으로 실행해도 될듯.. 일단 좀 생각이필요...

 

주말에 공부해야될것

웹팩,바벨,폴리필

history api

시간남으면 ts

프로젝트 내동네 구현(쉬움) 아닌가..??

프로젝트 글쓰기 하는데까지? 할수있을듯

 

다음주 주요 내용

pjax 새로고침 적용

post(multer로 사진올리기 + 드래그앤드롭으로 순서바꾸기(사진))

채팅(웹소켓 또는 settimeout)

 

 

깃허브

https://github.com/woowa-techcamp-2021/deal-13

woowa-techcamp-2021/deal-13

 

프로젝트 영상

https://www.youtube.com/watch?v=JEluKigQtiA&ab_channel=%28%ED%85%8C%ED%81%AC%EC%BA%A0%ED%94%84%29%EA%B3%A0%EC%9A%B0%ED%98%81 

 

 

 

급하게 영상을 찍어서 부족한 부분이 있어서 내가 혼자 따로 찍어봤다

https://www.youtube.com/watch?v=KqdmhrnmNek&t=50s&ab_channel=%EC%9C%A4%EC%9C%A4