토이 프로젝트 1주차 - 기획 및 개발 시작

새싹 수업이 종강한지도 한 달이 훌쩍 지났다.

팀플이 3개가 있지만 직접 코딩을 했던 프로젝트는 2개 뿐이고, 이번달부터 새롭게 들어온 교육과정에서 개인 토이 프로젝트가 필수라고 하여 고민하다가 내 취미인 영화를 주제로 프로젝트를 시작했다. 글을 쓰는게 너무 좋아서 영화를 보고 썼던 리뷰가 500편은 넘는 것 같은데, "영화를 추천하면서 리뷰까지 같이 공유하는" 사이트는 많지만 "오직 리뷰만 기록하고 공유하는" 곳은 없다고 생각했고, 그래서 직접 만들어보기로 했다!😝

수업에서는 요즘 HTML 같은 기초적인 부분 배우는 중이라, 강사님이 잘하는 분들은 수업 안 듣고 개인 프로젝트해도 된다고 해서 작업하다가 남겨보는 아주 간단한 기록!

---

7월 3일 수요일

사이트의 전체적인 디자인도 중요하지만, 개발자가 되려면 코딩 실력이 더 중요할 것 같아서 일단 제대로 된 사이트를 만들어 내는 것에 중점을 두기로 하고 본격적인 작업 시작.

• 사이트명과 메인 컬러는 chatGPT의 도움을 받았고, 로고 디자인과 파비콘도 인터넷에서 대략적으로 만들었다.
• 페이지 종류: 홈, 로그인, 마이 페이지, 라이브러리, 리뷰 상세보기, 리뷰 작성하기 등 6개.
  → 혼자 하는 프로젝트라서 최소한으로 만들어보려고 이렇게 결정했는데, 만들면서 개수가 늘었다. 
• 사용기술 결정: React, SASS
  → 어떤 페이지들이 필요하고, 그 페이지에는 또 어떤 요소들이 필요한지를 생각해보니.. 한 페이지마다 똑같이 생긴 요소가 반복적으로 들어가는 경우가 많아서, 컴포넌트화 하는게 훨씬 효율적인 제작방법이라고 생각되어서 React+SASS로 결정했다.
• 유저플로우: 작업 내용을 생각하다가 머릿속이 복잡해져서 Figma를 켜서 유저플로우부터 만들었다. 기획 단계에서 무엇을 어떻게 만들지 체계적으로 잡혀있어야 작업물도 제대로 나온다고 생각한다. 그래서 새싹 수업 당시부터 팀플 때마다 유저플로우, 회의록 같은걸 항상 내가 정리했었다.

---

기획 단계에서 생각해본 내용들을 모두 개인 노션에 정리해두고, 기획안이 어느 정도 짜여졌다고 생각되어 개발을 시작했다. 오늘(7/3일) 작업한 내용들을 정리해보자면,

• create-react-app 명령어로 내 컴퓨터 바탕화면에 새로운 디렉토리를 만들고, github 레포와 연결시켰다.
• App.js와 index.js를 제외한 다른 파일은 필요없으므로 전부 삭제하고, 내부의 불필요한 코드도 제거했다.
• public/index.html에서 title과 파비콘을 수정했다.
• src 디렉토리에 assets, components, pages, styles 등 기본 디렉토리 구조를 만들고 jsx 파일도 각각 만들었다. 로그인 페이지에서 input창 없이 API를 활용해서 카카오와 네이버 로그인 버튼만 보여줄 생각이라서 env 파일도 만들고 gitginore에 추가했다.
• react-router-dom을 설치하여 App.js에서 Header, Footer를 포함해서 기본적인 라우팅 설정을 했다.
• SASS를 설치하여 styles 디렉토리에도 각각의 scss 파일을 만들었다.
• 아직 개발 중이기 때문에, github에서 devel 브랜치를 디폴트 브랜치로 설정하였다.

npm install react-router-dom
npm install sass

여기까지가 기본 설정이었고, 그 다음이 진짜 코딩 작업 시작이었는데.. 이제 Header의 기본 구조를 완성했다.😅

Header 하나 만드는데도 React를 어떻게 사용했는지 기억이 안 났다. 새싹 수업 당시에 했던 팀플 레포에서 코드를 열심히 살펴보면서 만드는데, 한 달 사이에 정말 다 까먹었구나 싶어서 마음이 약간 착잡했다.

컴포넌트들 기본 구조를 짜는 것보다 디자인하는게 시간이 더 걸릴텐데 언제 완성할 수 있을까..😂

마음이 급해서 와이어프레임도 안 짜고 코딩부터 시작했는데, 일단 Figma로 와이어프레임부터 완성해야지..

---

7월 4일 목요일

개발 둘째날. 역시 디자인이 제일 시간이 오래 걸린다.

Header, Footer를 완성한줄 알고 호기롭게 '작업완료'라고 커밋메시지 적어서 push했는데, 나중에 또 수정할 사항이 생겨서 다시 만지기를 반복했다. 예전부터 느낀거지만 디자인은 보면 볼수록 자꾸 부족한게 보여서 끊임없이 만지게 된다. 완벽하려는 강박을 버려야 덜 피곤할텐데..😅

오늘의 작업내역은,

• github에서 issue 기능에 페이지별로 체크리스트를 만들었다.
• 와이어프레임 제작 완료 (by figma)
• root.scss 파일 작성 완료
• header, footer 기본 구조와 디자인 완료
• '마이 페이지' 기본 구조와 디자인 완료
• '메인'에 들어갈 컴포넌트 기본 구조, 디자인 완료
• '메인'에 컴포넌트 연결하고 디자인 완료

---

7월 5일 금요일

웹페이지 버전 포트폴리오의 코드를 수정하느라 작업을 많이 못했다.

• '메인'의 카드 컴포넌트에 들어가는 상세 텍스트 작업
  → 영화 제목, 리뷰 제목, 리뷰 작성자가 포함된 JSON 파일을 chatGPT로 만들어서 map() 메서드로 돌렸다.
• '라이브러리' 페이지에 들어가는 컴포넌트의 기본 구조 작업
• '라이브러리'에 필요한 포스터 사진 모으고, 컴포넌트에 들어갈 상세내역 작업
  → 이것도 JSON이 필요해서 chatGPT의 도움을 받고 싶었지만, 실제 포스터를 사용해야해서 부득이하게 내가 실제로 작성했던 리뷰들을 가져와서 사용할 수 밖에 없었다. 기획 단계에서는 목데이터가 이렇게 많이 필요할 줄 몰랐다.😂
• '라이브러리' 페이지의 기본 구조
  → 앞서 만든 JSON 파일을 불러오고, 포스터 사진도 전부 불러와서 map() 메서드로 돌렸다.
• 포스터 이미지가 '라이브러리' 페이지에서 보여지도록 설정
  → JSON 파일을 직접 다루는건 처음이어서 이미지 파일의 경로 지정 문제로 고생하다가 겨우 해결했다. React에서는 JSON 파일에 이미지 속성을 사용한다면, value로 들어가는 이미지 경로는 변수로 지정해야했다.
• '라이브러리', '마이 페이지' 페이지 제목 위치 통일
  → 페이지 디자인에서의 전체적인 통일감을 위해 margin, padding 등 값을 수정했다. 

---

모든 페이지의 기본적인 구조와 디자인을 빨리 마무리하고, 동적인 페이지가 될 수 있도록 추가적인 작업을 해야하는데 다음주에는 할 수 있으려나..😅