첫번째 프로젝트인 [노션 클로닝 - 자동 편집기 구현] 작업을 시작했다.
컴포넌트 단위로 app을 만들어보는 첫번째 시도이다!
오늘은 html과 css를 작성하고, 컴포넌트를 만들어 화면을 구성했다.
일단은 하던대로 HTML로 먼저 구조를 짰다.
짠 html을 보면서 컴포넌트를 만들어나기 위해서였다.
근데 뭔가 실무에서는 이렇게 html을 구조를 미리 다 짜고나서 시작하지는 않는 것 같은 느낌이 들었지만.. 아직 익숙하지 않아서 바로 컴포넌트를 만든다면 분명 해멜 것 같았다.
그 후 notion페이지를 참고해서 css를 작성했다.
시작을 늦게 해 시간이 촉박했지만 어느정도 화면이 그려져있어야 로직을 짤 때 수월할 것 같아서 먼저 대략적으로 디자인을 했다.
요즘 계속 자바스크립트만 공부해서인지 html, css가 전처럼 익숙하지 않았다.. 원하는 디자인 대로 막히지 않고 짤 수있는 정도까지는 되는 줄 알았는데 오래 안하다보니 알던 것도 까먹게된다..틈틈이 복습을 해야겠다고 생각했다.
구성한 html를 보며 컴포넌트를 만드는데 많은 부분에서 궁금증이 생겼다.
첫번째로는 컴포넌트 이름을 어떻게 지어야하는지였다. 태그 이름대로 지어야 할지? 아니면 기능을 기준으로 지어야할지? 또한 자식 요소들의 이름은 부모와 연관지어야할지? 혼란스러워서 이름을 짓는 것부터 오래 걸렸다.
또한 컴포넌트를 얼마나 쪼개서 어떻게 폴더화는 어떻게 할지도 많이 고민했다.
다른 사람들 것을 보면서 많이 참고해야겠다고 느꼈다.
컴포넌트를 만들 때 궁금했던 점은 style작업을 위해 감싼 div는 어떻게 처리해야하는지였다. 부모 컴포넌트 안에 돔을 생성해야하는지 아니면
innerHTML로만 그려줘야하는지?
이런 저런 고민끝에 화면을 만들기는 했다. 좋은 코드들을 참고해서 수정하려고 한다. 확실히 스스로 구현해보면서 많은 고민해보는 과정이 힘들기는 하지만 고민했던 부분을 찾아서 알아냈을 때 기억에 더 잘 남게되는 것 같다.
앞으로 구현해야할 많은 기능들이 막막하긴 하지만.. 겁먹지 않고 차근 차근해나가려고 한다.
어려운 기능이라도 잘게 쪼개서 차근차근 해나가면 못할 게 없다!
