Facts
- 우테코 레벨 2를 시작했다.
- CRA를 사용하지 않고 리액트를 사용하기 위해 webpack, babel, eslint를 설정했다.(5시간)
Feelings & Findings
우테코 레벨 2를 시작했다.
우테코의 방학이 끝나고 레벨2를 시작했다. 개강과 동시에 몰려드는 과제들이 많다. 새롭게 리액트를 시작하기 때문에 코치의 리액트 강의도 듣는다. 하지만 주요 개념만 짧게 설명하고 넘어간다. 방학 때 리액트 공부를 하지 않았으면 페어에게 미안할 뻔 했다. 조금이라도 해놓은 것이 다행이다.
개강 기념으로 우테코에서 선물을 준다.
- 닉네임이 새겨진 텀블러
- 우테코가 새겨진 전자패드
- 각종 스티커
- 우테코 볼펜
- 배민 피규어
교육을 해주는 것만 해도 정말 감사한데, 이런 것까지 준비해 주시다니.. 정말 감동이다. 아이패드는 있지만 애플 펜슬을 구매하지 않아서 쓸모가 없었는데, 전자 패드로 인해 더더욱 쓸모가 없어졌다.
레벨2는 리액트이기 때문에 크루들과의 실력 차이가 날 수 밖에 없다고 한다. 하지만 더 잘하는 크루가 잘 설명해주고, 같이 성장할 것을 알고 있다. 크루들을 믿고, 나도 최대한 모두 공유하고, 열심히 할 것이라는 다짐을 한다. 지금까지 자바스크립트를 열심히 했으니까 잘 따라갈 수 있을 것이다. 지금까지 못 할 것 같다고 생각했던 것들을 모두 해냈다. 이번에도 해낼 수 있다.
CRA를 사용하지 않고 리액트를 사용하기 위해 webpack, babel, eslint를 설정했다.(5시간)
create-react-app을 사용하면 편하게 미션을 시작할 수 있다. 하지만 내부 코드를 모르기 때문에 용납할 수 없다. 페어와 마음이 맞아 처음부터 구현하기로 한다.
webpack과 babel은 이미 전 미션에서 경험했기 때문에 쉬울 줄 알았는데... 쉽지 않다. 많이 하지도 않았는데 1~2시간이 지나간다. 작성된 코드를 보면 별거 없는데 도대체 어디서 시간이 지체된 건지 알 수가 없다. 다음부터는 시간이 지체된 부분을 다 남겨 놓아야겠다.
기억나는 것은 예전에 했던 실수인 HtmlWebpackPlugin을 사용하면서 index.html에서 script를 실행시킨 것이다. 실수를 했던 것임에도 알지 못했고, 30분 정도를 지체한다. 결국 크루의 도움을 받다가 갑자기 생각이 나서 버그를 해결한다.
이유는 HtmlWebpackPlugin 자체에서 main.js를 실행시키는 script를 만들어주는데 html에서 또 index.js를 실행시키고 있기 때문이다. 그래서 webpack-dev-server에서는 실행될 때 index.js를 가져올 수 있고, index.js를 가져왔더니 babel이 실행되지 않은 jsx 문법이 있어서 나타나는 오류다. 아마 배포를 했을 경우에는 파일이 없다는 오류가 나올 것 같다.
다음은 나타난 에러 코드이다. Uncaught SyntaxError: Unexpected token '<' 이제는 실수하지 않을 것이다.
또, eslint와 prettier의 호환성 문제 때문에 시간이 지체된다. 항상 설정하는 것인데도 왜 오류가 계속 발생하는지 이해가 가질 않는다. 그래서 다음 미션부터 시간을 지체하지 않기 위해 이번에 완벽하게 공부해서 boilerplate를 만들어 놓으려고 한다.
코드가 변경될 때마다 새로 고침되는 것이 싫어서 react-hot-loader를 설치한다. 분명 블로그에서 하라는 대로 잘 따라 했는데 안된다. 30분 정도 고민하다가 우선순위가 아닌 것 같아 포기한다. 저녁 먹고 와서 쉬는 시간에 블로그가 아닌 공식 문서를 보고 따라 하니까 바로 성공한다. 역시 블로그보다는 공식 문서가 최고라는 생각이 든다. 공식 문서를 우선시하자.
설정만 5시간이 걸린 것은 아니다. 페어와 규칙을 정하고, 컴포넌트 단위로 쪼개서 DOM을 구성하는 것까지 걸린 시간이다. 오늘 대략적인 틀을 모두 잡아서 내일은 css와 기능 구현을 하면 된다. 페어와 함께 충분히 만족하며 하루를 마친다.
Plans
- 로또 1단계 구현하기(css 및 기능)
