[개인 프로젝트 1주차 02] LeafyLog 메인 페이지 만들기 - 문제점들

드디어..! LeafyLog 메인 페이지 코딩을 시작했다.

 

위는 최종 디자인 시안이다.

 

주요 기술은 next.js와 typescript이다.

 

문제점1

프로젝트를 진행하면서 어려웠던 점은 next.js와 typescript였다. 나는 TopDown방식으로 공부하는 것을 좋아해서 이것들의 강의를 먼저 학습한 후 프로젝트를 만들기 보다 일단 이 둘로 프로젝트를 만드는 것을 시작했다.

 

초반부터 styled-components가 새로고침하면 동작하지 않는 등의 자잘한 문제가 있었다. 또한 타입스크립트를 쓰니 props을 넘길 때마다 무슨 타입인지 지정해줘야 하니 여간 번거로운게 아니었다.

 

Typescript에 장점을 어느정도 알고 있음에도 불구하고 당장 프로젝트를 할 때 시간이 2배로 걸리니 이걸 왜 써야 하는가 ... 하는 회의감이 있었다. 당장 오류메세지도 이제껏 보지 못했던 것들이고 구글에 검색해도 같은 오류가 나는 경로가 다양하여 내 케이스에 적용하는 데에도 어려움이 따랐다.

 

문제점2

너무 길어진 index.tsx.

나는 아직 컴포넌트를 효율적으로 나누는 방법을 모른다. 아직까지는 단순히 반복문에 있는 요소들만 하나의 컴포넌트로 묶는 정도? atomic 디자인에 대해서도 알긴 하지만 처음부터 그렇게 나누고 코딩하기에는 리액트에 대한 숙련도가 너무 없는 상태이다. 그래서 멘토님의 조언대로 일단은 하나의 파일에 작성하고 필요하면 분리하는 방식으로 진행하려고 한다.

 

문제점3

배보다 배꼽이 크다.

react보다 styled-components가 많다.

 

내 현재 코드에서는 styled-components의 코드가 그것도 styled components 들의 이름도 바로 생각나는 대로 적으니 나는 알아보기 쉽지만 남은 내 코드를 보고 많이 혼란스러울 것이다.

 

문제점4

생각안한 듯한 네이밍들.

네이밍 할 게 너무 많다보니 하나하나 신경써서 하기보다 직감적으로 지은 것 같다. 이로인해 굉장히 낯부끄러운 코드가 되었다.