오늘 20.03.14 13:00 ~ 17:00까지 프로그래머스 Dev-Matching이 있었다.
최근에 리액트를 많이 공부하고 있어서 리액트는 꽤 자신이 있었는데, 바닐라 자바스크립트로는 개발을 해본적이 거의 없어서 별로 자신이 없었다. 하지만 꽤 재밌는 경험이 될 것 같아 참가했다.
문제는 고양이 사진을 보여주는 페이지의 버그 수정 및 추가 기능을 넣는 것이었다. 내가 생각한 것이랑 많이 달라서 깜짝 놀랬다. 일단 요즘 리액트를 함수형으로 공부를 하고 있어서 class 형으로 되어있는 코드가 너무 헷갈렸고, webpack 같은 것을 쓰지 않아서 그런가 index.html에 모든 js 파일을 불러와서 쓰는 것도 낯설었다. index.js 같은 곳에서 import 해서 쓰는 방식이 아니라 처음엔 import 해보려다가 오류가 나서 한참 헤맸다. 그리고 미리 환경 체험을 해보지 않아 실행 방법도 몰라서 처음엔 헤맸다. 그냥 npm install 후 npm start 한 다음 위에 실행을 누르면 됐다.(처음엔 실행 버튼 있는지 몰라서 한참...ㅠㅠ) 역시 미리 체험해보는 것은 중요한 것 같다.
그래도 집중해서 하다보니 어느정도 풀렸다. 필수라고 되어있는 부분은 거의다 풀었고 다른 부분도 조오오금 했다. 물론 완벽하게 구현한건 아니고 자잘한 오류들이 있었지만. 그래도 꽤 만족스러운 결과인거 같다. 정말이지 4시간이 후딱 가버렸다. 이상한점은 ES6기반으로 되어있다고 할거라고 그런식으로 적혀있었는데 ES8에 추가 된 async await로 fetch를 바꿔라~ 이런 문제가 있어서 약간 요상했다. 바닐라라서 거의 못 풀줄 알았는데 꽤 많이 풀었기 때문에 ㅎㅎ 바닐라 js를 더 공부해야할지 리액트를 더 다져야할지 고민 되는데 일단 리액트가 더 재밌게 할 수 있는 것 같아서 리액트 위주로 더 열심히 공부해봐야겠다.
데브매칭 참여하셨군요! 저도 async await 보고 뭐지? 싶었네요 ㅋㅋㅋ
순수 바닐라에 es6래서 시험전에 제네레이터로 async await 구현체나 테스트 모듈같은 유틸 만들어놨었는데 바벨 있고, npm 있고...
아무쪼록 고생하셨습니다~ 좋은 결과 있으시길 바래요ㅎㅎㅎ