React doesn't react - 0) 나는 무엇을 배웠는가?

제가 싸피에서 개발을 하며 가장 힘들었던 기술 스택은 React 입니다. 11개월만에 제대로 푹 쉬며 ‘나는 그때 왜 그렇게 React를 어려워했을까?’ 를 생각해보았습니다. 제 공부 습관에 대해, 그리고 싸피 생활에 대해 돌아볼 수 있는 좋은 기회였습니다.

 

거시적인 관점에서 저는 이런 것들을 배웠습니다. 

1. 왜 공식 문서로 공부를 해야하는가?
2. 유사한 역할을 하는 다른 기술 스택을 배울 때에는 어떻게 하면 좋을까?
3. CS - 혹은 '기초'는 왜 중요한가?

 

이어지는 글들에서는 아래 내용에 대해 다루게 될 예정입니다. 시간 순서대로 서술하는 것이 좋을지, 아니면 생각의 흐름대로 서술하는 편이 더 좋을지는 고민해보겠습니다. 

 

1. 왜 React 에서 고전했나요?
   1. 기본기가 부족했습니다. html, css, javascript 모두에 익숙하지 않았습니다.
   2. frontend 에 대한 흥미와 의욕이 부족했습니다.
   3. 이 상황에서 Typescript까지 사용하여 더욱 혼란스러웠습니다.

 

1. 그러면 어쩌다 2학기 중반이 되어서야 기본기 부족에 대해서 알게 되었나요?
   1. 역설적이게도 Vue 가 정말 잘 만들어졌기 때문입니다. Vue는 저처럼 경험이 적은 개발자들이나 비 개발자들(디자이너 등) 도 비교적 쉽게 작성할 수 있게 만들어졌습니다. Vue의 공식문서에서는 Vue의 구조 덕분에 Vue의 러닝커브가 낮다 고 서술합니다.
   2. Vue는 하나의 Vue 컴포넌트에서 탬플릿(html)과 스타일(css), 스크립트(js)를 관리합니다. html을 쓰라고 해둔 곳에 html을 작성하고, css를 작성하라고 해둔 곳에 스타일을 작성하면 어떻게든 작동했습니다. 1) prop-emit, 2) lifecycle-hook, 그리고 3) 중앙 상태저장소(vuex) 정도가 Vue를 배우는 데의 어려움이었던 것으로 기억합니다.
   3. https://kr.vuejs.org/v2/guide/comparison.html#HTML-amp-CSS

 

1. 왜 html과 css 기본기를 쌓지 않았나요?
   1. HTML과 CSS가 프론트엔드의 기본기라는 사실을 그 당시에 잘 알지 못했습니다. 그래서 부트캠프 과정 초반에는 웹페이지 스타일링을 할 때 Bootstrap에 의존했습니다.
   2. 당시 동기들과 함께 ‘인스타그램 클론코딩’ 스터디를 했습니다. 인스타그램에서 미리 만들어둔 CSS나 긁어올 생각으로 개발자 도구를 열었다가 충격을 많이 받았습니다. html부터 2만 줄에 가까웠기 때문입니다.
   3. 그 때 생각했습니다. 1) 내가 방문하던 종류의 웹사이트들을 밑바닥(html-css)부터 구현하려면 정말 오랜 시간이 걸리겠구나 2) 이 많은 설정들을 동시에 - 그리고 빠르게 만지려면 바닐라 html 과 css만 만져서는 답이 나오지 않겠구나.
   4. 다른 동기들이 CSS 설정을 이리저리 만져보며 디테일을 구현하는 동안, 저는 어떻게든 Bootstrap만으로 비슷한 효과를 구현해보려 노력했습니다.
   5. 그 덕분에 Vuetify(Vue의 ui 라이브러리)를 사용하는 것은 몹시 쉬웠습니다. 사용법ㅇ이 Bootstrap 의 사용 경험과 매우 흡사했거든요.