회고

React doesn't react - 1) 부족했던 기본기(HTML, CSS)

쓱쓱565 2022. 6. 23. 15:48

이전 글

1. 2022.06.07 - [실패의 기록 || 회고] - React doesn't react - 0) 나는 무엇을 배웠는가?

 

목차

1. 서론

2. 결론 

3. 본론

1. 서론

React는 제게 유달리 어려웠습니다. 그 이유는 크게 아래의 세 가지였습니다. 

 

  1. 기본기가 부족했습니다. html, css, javascript 모두에 익숙하지 않았습니다.
  2. frontend에 대한 흥미와 의욕이 부족했습니다.
  3. 무리하게 Typescript를 도입했습니다. 

이번 글에서는 어째서 HTML / CSS를 충분히 공부하지 않았는가에 대해 작성했습니다. 

 

2. 결론

1) 문제의 발생 원인

  HTML과 CSS가 현대의 응용 프로그래머 레벨에서 조작해야 할 수준의 내용인지 알지 못했습니다. 파이썬 유저가 Pypy와 Cpython의 차이에 대해서 알지 못하더라도 Django 기반의 서버를 만들 수는 있는 것처럼, HTML과 CSS에 대해 잘 모르더라도 현대 우리가 흔히 사용하고 있는 형태의 웹사이트를 충분히 구현할 수 있다고 생각했습니다.  

2) 배운 것들

(1) React와 Vue의 설계 철학 차이

  React와 Vue의 설계 철학 차이에 대해 느낄 수 있었습니다. 이 내용에 대해서는 다음 글에 보다 자세히 서술하겠습니다. 

(2) 같은 일을 하는 다른 도구들의 사용법 익히기

  비슷한 일을 하는 다른 도구(Vue와  React)를 배울 때 어떻게 하면 좋을지에 대해 느꼈습니다. 각각의 도구들이 왜 나오게 되었는지, 즉 무슨 문제를 해결하는지에 대해 알게 되면 자연스럽게 '얘는 왜 이렇게 생겼지'를 납득할 수 있게 되었습니다. 

 

3. 본론

  HTML과 CSS 학습의 가장 어려운 점은 특유의 '어썸함' 이었습니다. 아무리 이상하게 마크업을 작성해도 화면에는 항상 무언가가 보입니다. 그런 특징 때문에 골머리를 많이 썩었습니다. 파이썬을 사용할 때에는 어디서 무슨 오류가 나는지 아주 친절하게 다 보여줬는데, HTML과 CSS를 조작할 때는 그런 피드백이 없었으니까요. 그리고 저는 시각적인 부분보다는 논리의 흐름을 다루는 것을 더 선호했기에 HTML과  CSS 부분에 큰 흥미를 느끼지도 못했습니다. 

 

  부트캠프에서는 딱 일주일만 HTML과 CSS에 대해 다뤘습니다. 그 뒤로는 Bootstrap을 하루 정도 배웠고, 샘플 페이지를 몇 개 정도 만들었습니다. 그 뒤로는 알고리즘 주간이 시작되어 알고리즘 학습을 하게 되었습니다. 

 

  '인스타그램 클론 코딩' 스터디에 참여했습니다. FE 부분이 취향에 잘 맞지 않아, 스터디라도 하지 않으면 이 분야에 대한 공부를 아예 하지 않을 것 같은 기분이 들었기 때문입니다. 인스타그램에서 미리 만들어둔 CSS를 긁어올 생각으로 개발자 도구를 열었을 때 충격을 많이 받았습니다. HTML부터 2만 줄에 가까웠고, CSS 속성들 역시 일일이 파악하기에는 너무나 복잡했기 때문입니다.

 

  그때 생각했습니다. 1) 내가 방문하던 종류의 웹사이트들을 밑바닥(html-css)부터 구현하려면 정말 오랜 시간이 걸리겠구나 2) 이 많은 설정들을 동시에 - 그리고 빠르게 만지려면 바닐라 html과 css만 만져서는 답이 나오지 않겠구나. 그래서 다른 동기들이 CSS 설정을 이리저리 만져보며 디테일을 구현하는 동안, 저는 어떻게든 Bootstrap만으로 비슷한 효과를 구현해보려 노력했습니다. 

 

  그 이후에는 Vue를 사용해 FE를 구현했습니다. Bootstrap의 사용 경험과 매우 흡사했습니다. 이 덕분에 HTML - CSS 기본기 부족에 대해서는 거의 느끼지 못했습니다. React에서 보다 직접적으로 CSS를 조작하게 되고 나서야 이 문제에 대해 자각할 수 있었습니다. 

 

산책하다 본 까치. 비를 맞아서 깃털이 푸석푸석하다.