[맛팁 3] 폴더 구조 설계 및 스타일링

드디어 각 페이지의 스타일링을 완성하여 1차적으로 배포를 하였다.
원래 계획은 스프린트처럼 일주일 동안 기획, 스타일링, 기능까지 완벽히 구현해서 MVP 1차 배포하고, 두 번에 나눠서 Backlog를 2차, 3차 배포하려는 계획이었는데 현실은 MVP 만으로도 1주 기획, 1주 스타일링, 1주 기능구현 ^^..
면접준비, 알고리즘, 영어공부, 강의 듣는 등 이것저것 병렬적으로 진행해서 프로젝트에 모든 시간을 쏟지 못하고 있는 상황이라 더더욱 진행이 더디다.
혼자서 플젝하는 것 정말 쉽지 않다.. 디자인도 맘에 안 들어서 계속 수정의 수정을 거듭하고 컬러배치도 아직 맘에 안 드는데 시간을 너무 쏟는 것 같아서 일단 내버려 두었다. 조만간 다시 바꿀 예정ㅠ
그래도 프로젝트를 하니깐, 공부만 하던 것보다 확실히 "내가 코딩을, 개발을 하고 있구나!"라는 생각이 들어서 조금 위안? 이 되고 발전적인 삶을 사는 기분이다!! 생각이 많아져서 쓸데없는 서론이 너무 길었다 흐흐

---

이번 프로젝트에서 이룬 것

• 폴더 구조 설계
• 레이아웃 컴포넌트 생성
• 공통 컴포넌트 분리
• 각 페이지 스타일링
• 1차 배포

---

폴더 구조 설계

일주일 동안 플젝을 진행하면 정말 여러 번 폴더 구조를 갈아엎었다...
NextJS를 제대로 진행하는 프로젝트는 이번이 처음이어서 그렇기도 했지만,
NextJs는 파일 구조 기반 라우터이기에 폴더와 파일 구조가 routing에 영향을 미치기에 스타일링 작업을 하면서도 마음에 들지 않으면 계속 수정을 반복했다  :(

NextJs : file-based routing	React + React-router : code-based routing
별도의 boilerplate 코드가 필요 없음.	boilerplate 코드가 필요함.
직관적인 시스템.	직관적이지만 새로운 컴포넌트와 컨셉을 포함하고 있음.
파일 + 폴더 구조가 경로에 영향을 미침	코드 기반이기에 파일 + 폴더 구조가 중요하지 않음.
네비게이션은 <Link> 컴포넌트와 함께 명령적으로 작동.	네비게이션은 <Link> 컴포넌트와 함께 명령적으로 작동.

---

src안에 public을 제외한 폴더들을 넣었으며,
images 폴더 안에 스타일링 작업을 하면서 필요한 아이콘, 이미지들을 넣었다. public으로 빼야 할지 어떨지 고민을 많이 했지만, 일단은 images폴더 안에 넣기로 결정하였다.
styles 폴더에는 글로벌 스타일을 넣었다.

pages는 routing 되는 부분이어서 고민을 많이 했는데,
로그인 페이지는 login, 마이 페이지는 mypage이며, 그 안에 찜한 레시피들을 보여주는 페이지를 fav로 하였다.
전체 레시피를 보여주는 페이지는 all이며, 상세 페이지를 보여주는 페이지는 세그먼트를 사용해서 recipeId로 지정하였다.
메인 페이지는 pages 레벨에 있는 페이지로 "/"에 해당한다.  

현재 가장 고민되는 폴더는 components이다.
공통 컴포넌트가 들어가는 common과, 레이아웃 파일들을 넣은 layout 폴더 외에 일반적인 컴포넌트들이 들어있다.
현재 MVP 단계인데도 불구하고, 많은 컴포넌트들을 생성해서 components 폴더 내부 구조의 가독성이 많이 떨어지는 상태라고 생각한다.
해당 부분을 어떤 식으로 나누면 좋을지 고민하고 있는데, 아마 페이지별로 컴포넌트도 분리작업을 해야 하지 않을까 싶다.
또한 공통으로 쪼갤 수 있는 것들은 최대한 쪼개서 common에 갖고 있는 것이 좋을 것 같다는 생각이 든다.

디자인을 완벽하게 제작하여 프로젝트를 시작한 것이 아니라, 피그잼에 캡처한 스케치들을 참고해서 스타일링 작업을 하면서 내 마음에 들도록 계속 수정하는 중이다...
그래서 정확하게 여기에는 이 컴포넌트가 들어간다는 확신이 없어서 공통으로 뺄 컴포넌트가 정확히 보이질 않는다ㅠ
그렇기에 작업하는데도 시간이 더 오래 걸리지 않나 싶다... 효율적으로 진행하고 싶었는데 만만치 않구나!
아무튼 폴더구조는 앞으로도 프로젝트 진행하면서 계속 바뀌지 않을까 싶다 :(

---

웹 vs 웹앱 

애초에 웹앱으로 하려고 스케치, 레퍼런스도 웹앱으로 기획하였는데, 막상 시작하려니까 사이즈부터 난관이었다.
웹앱 사이즈 관련해서도 몇몇 가이드를 보았는데, 사이즈가 다 각각이었다. 그냥 적당한 사이즈를 찾으면 되는 것 같아서 나도 그냥 내 눈에 보기 좋은 사이즈로 지정하였다.

여러 개의 사이트를 살펴보았는데, 그중에서 위 두 개만 가져와봤다.
펫프렌즈의 메인 사이트 사이즈는 가로 402 정도, 윙잇은 475이며 내 사이트는 455 정도이다.
지금 이렇게 보니, 나는 현재 펫프렌즈, 윙잇 같은 사이드? 컴포넌트도 없어서 너무 초라해 보이고, 메인 컴포넌트가 더 작아 보이는 느낌이다.. 아무래도 약간의 업데이트가 필요한 것 같다. 그리고 나중에 위의 사이트처럼 왼쪽의 컴포넌트를 추가한다면, 더 전문적인 사이트 느낌을 낼 수 있어 보인다 :) 그리고 무한스크롤과 캐러셀도 적용해서 스크롤을 다 제거해야지!

---

NextJs에서 svg, image 추가

NextJs에서 svg를 추가하는 법과 image를 추가하는 법은 다르다.
svg는 svg를 import 해서 JSX에 바로 넣어주면 끝!

하지만 image는 그렇게 할 경우에 에러가 난다.
아래와 같이 next의 Image 태그를 import 해서 받아 온 후 해당 Image 태그를 이용해서 src 안에 추가할 image를 넣어주어야 하더라. 또한 alt 어트리뷰트까지 적어주는 것이 좋다.

---

Image와 props의 타입 선언

Image에 타입을 지정할 때는 next/image 안에 있는 StaticImageData 속성을 이용했다.
간단한 스타일링 작업으로 RecipeInfo에 image만 들어갔지만 곧 여러 데이터들이 들어갈 예정이다.

https://stackoverflow.com/questions/69722076/next-js-type-error-cannot-find-name-staticimagedata

---

또한 레이아웃 컴포넌트 또는 카드 컴포넌트 등에서는 컴포넌트 안에 다른 자식 요소들을 추가해야 한다.
props에 PropsWithChildren의 타입을 적용해서 props가 children을 제대로 받아 올 수 있게 되었다.

---

masonry 컴포넌트 적용

핀터레스트에서 스케치 관련해서 많은 레퍼런스들을 보다가 핀터레스트의 레이아웃에 눈길이 갔다.
내가 상상했던 전체 레시피 페이지의 레이아웃!!! 검색하고 나니 이미 핀터레스트의 레이아웃은 유명했고 나만 몰랐다는...!
어떻게 구현할까 요리조리 검색하다가 라이브러리가 있다는 것을 확인하고 라이브러리를 적용하기로 결정했다.
모든 것을 직접 구현하는 것도 좋지만 많은 라이브러리를 접해보고 내 입맛 따라 바꿔보는 경험도 좋다고 생각하기에 이번에는 라이브러리를 사용해 보았다.
https://www.npmjs.com/package/react-masonry-css

지금 블로그를 하면서 내가 구현한 페이지에 캡처하려고 들어간 순간, 갑자기 스타일이 무너져있어서 부랴부랴 확인하였는데 라이브러리가 먹통이 되어있네??? 오잉... 검색한 masonry 라이브러리 중에 다운로드 횟수가 제일 높았는데ㅠ

---

언제 고쳐질지, 다음에도 또 이럴지 괜히 의심스러워서 결국 새로운 라이브러리로 변경했다..
이 정도 다운로드 횟수도 괜찮을지 아직은 감이 잘 안 잡히고, 사이즈도 해당 라이브러리가 조금 더 크긴 하지만 도전!
https://www.npmjs.com/package/react-responsive-masonry

어려운 라이브러리가 아니어서 설치하고 적용하는데 5분 이내로 할 수 있다. 아래처럼 잘 적용된 것을 볼 수 있다!
개인적으로는 이번에 바꾼 react-responsive-masonry 라이브러리가 더 쉽게 적용할 수 있었다.
기존 라이브러리는 반응형이 필요하면 별도의 변수를 입력해서 태그 안에 대입해야 했고, 별도의 css 파일도 존재했다.
새로운 라이브러리는 반응형이 필요하다면 responsiveMasonry라는 속성을 import 해서 별도의 변수를 입력하는 것 없이 태그에 column값만 적어주면 된다. 또한 css 파일도 적용하지 않아도 돼서 코드도 더 깔끔하고 굿!
왜 먹통이 된 건지는 알 수가 없지만 덕분에 더 괜찮은 라이브러리를 찾았다. 기존의 라이브러리는 안녀엉~ 
얼른 기능 구현해서 스크롤만 어떻게 하면 좋을 것 같다 너무 거슬려ㅠ.ㅠ!

---

1차 배포

이제까지 netlify, heroku 그리고 github으로 배포를 해보다가 vercel로 배포한 것은 이번이 처음이다.
NextJs를 배우면은 vercel로 배포하려고 이제까지 아껴두었었다 흐흐.
vercel 배포가 쉬운 건지 아니면 내 프로젝트가 아직 스타일링 뿐인 껍데기여서 그런지 배포가 너무 순조롭게 진행되어서
내심 맘 졸였었는데 기분 좋게 한 번에 성공하였다.

아직 기능들을 넣은 것이 아니라서 build 해보면 Static 한 파일들만 나온다.
이번 배포는 너무 간단해서 MVP 마무리하고 환경변수 넣고 데이터 추가해서 배포할 때, 조금 더 할 말들이 생길 것 같다.
일단은 여기까지! 이제 얼른 기능들 넣고 다시 한번 배포를 해보자꾸나!

---

프로젝트 일정

예상보다 진도가 더뎌서 기간을 조금 더 오래 잡아야 할 것 같다. 하지만 이 프로젝트를 진행하면서 Ts, NextJs에 대해 제대로 배우는 것 같아서 조금씩이지만 꼼꼼하게 공부하는 느낌이라 만족스럽고 재미있게 진행하고 있다.
이번주에 일정들이 많아서 어떻게 될지 모르겠지만... 계획한 것들을 최대한 실행할 수 있는 만족스러운 한 주가 되었으면 좋겠다!

---