토이 프로젝트 2주차 작업일지

지난 주말동안 웹 버전 포트폴리오 페이지 보완하는데 집중하느라 이건 작업을 못했다.

• '라이브러리'와 '리뷰 상세보기' 라우팅 연결
• '리뷰 상세보기' 페이지에 들어갈 JSON 제작

이렇게 간단하게 두 가지 작업만 완료했다. JSON 목데이터를 chatGPT 사용하지 않고, 실제로 내가 작성했던 리뷰를 긁어와서 수정하느라 시간이 약간 소요되었다.

※ 이전 포스팅 - https://hjinn0813.tistory.com/84

---

7월 08일 월요일

• '리뷰 상세보기'에 들어갈 컴포넌트와 페이지 기본 구조 설정
  → '라이브러리'에서 map() 메서드로 돌리고 있는 9개의 컴포넌트 중에 하나를 클릭하면, 해당 요소의 id값이 쿼리스트링으로 들어가서 화면에는 하나의 리뷰만 보여지도록 해야했고, 해당 기능은 useParams()를 사용해서 해결했다.
• '리뷰 상세보기' 컴포넌트와 페이지 디자인 완료
• '라이브러리'에 들어가는 컴포넌트와 '마이 페이지'에서 선택자 명확하게 수정
  → 다른 페이지에서도 쓰이는 'poster' 선택자나 button 태그로 디자인했더니 중복되어서 수정했다.
• '로그인' 페이지의 소셜로그인(네이버, 카카오) 구현 시도
  → API를 가져오긴 했는데 로그인 페이지가 제대로 열리지 않아서 한참 연구를 해봐야할 것 같다. 예전에 새싹 2차 팀플에서 로그인, 회원가입 페이지의 제작을 담당했지만 그때는 순수 HTML, JS 였고 지금은 React라서 확실히 다른 느낌?!
• '리뷰 작성하기' 페이지에 들어가는 토글 컴포넌트 기본 구조와 디자인 작업

---

7월 09일 화요일

• '리뷰 작성하기' 페이지와 컴포넌트의 기본 구조, 디자인 완료
  → 토글 컴포넌트의 디자인에서 세부적인 부분(버튼 크기)을 수정했고, 페이지의 기본 구조와 디자인 작업을 했다. 이제 '확인' 버튼을 누르면 입력했던 데이터들이 저장되어서 다른 페이지에서 보여지도록 해야할 것 같은데.. 지금 소셜로그인 기능이 가장 큰 문제라서 이건 천천히 작업해보자..😆
• '마이 페이지'에 버튼을 만들어서 '작성하기' 페이지 라우팅 연결
• 소셜 로그인 버튼 기능 연구
  → 구글링하다가 React에서 패키지를 설치하면 버튼 기능을 구현하기 쉽다고 해서 설치해보았다.

npm install react-naver-login
npm install react-kakao-login

---

7월 10일 수요일

오전에 GSAP 배우고, 배운 내용을 오후에 웹 버전 포트폴리오 페이지에 바로 적용해서 사이트가 조금 더 동적으로 보이도록 만들었다. 앞으로도 지속적으로 보완할 예정이지만, 그럼에도 지금보다 더 세련되고 멋지게 만들 수 있을 것 같아서 고민하는 중..😅

토이 프로젝트의 경우에는,

• 소셜로그인 기능 연구, '로그인' 페이지에 아이디/비번 input창 제작
  → 구글링을 많이 해보고 다른 분들이 성공했다는 코드를 참고해서 넣어봤는데, 왜 내가 하면 안되는지 모르겠다. 이거 하나를 오래 붙잡고 있는 것도 옳지 않다고 생각해서, 소셜로그인 기능 구현을 포기할 생각도 했다. Figma로 와이어프레임 다시 짜봤더니 나쁘지 않아서 input창과 '확인' 버튼을 만들었는데, 소셜로그인을 포기하면 사용되는 API가 하나도 없어서 너무 쉬운 프로젝트가 되어버리는게 문제다.🤔 현재까지는 소셜로그인 이외에는 API를 사용할만한 곳이 없다..
• '로그인' 페이지에서 테스트용 아이디+비번을 설정해서 실제 로그인이 되는지 검증하는 기능 구현
• Header에서 로그인 여부에 따라 '로그인'과 '마이 페이지' 아이콘이 등장하도록 기능 구현
• '마이 페이지'에 '로그아웃' 버튼을 만들고, 실제 로그아웃이 가능하도록 기능 구현
  → 이렇게 로그인/로그아웃 기능과 관련해서 3군데를 수정했고, 전부 로컬 스토리지를 사용했다!

---

7월 11일 목요일

• 영화 정보 검색 페이지 제작
  → '라이브러리' 페이지와 '리뷰 상세보기' 페이지에서 포스터 사진과 영화제목이 뜨는데 어디에도 영화 정보를 검색할 수 있는 곳이 없는게 아이러니한 부분이라서, Header에 아이콘을 추가하였다. 해당 아이콘을 클릭하면 '검색 페이지'로 넘어가서, 검색값에 맞는 영화정보가 등장하도록 제작했고, API는 영화진흥위원회가 제공하는걸 사용했다.
• '리뷰 작성하기' 페이지에서 사진 첨부 기능
  → 영화정보를 불러오는 API를 찾아봤는데 포스터까지 제공하는게 없어서, 리뷰를 작성할 때 개인이 포스터를 추가하도록 만들었다. 보통 포스터나 티켓 사진만 업로드하는 경우가 많아서, 사진은 1장만 등록될 수 있도록 했다.
• Footer, 메인, 마이페이지에서 최상위 부모태그를 시멘틱 태그로 수정
• 메인, 리뷰 상세보기, 검색, 글쓰기, 라이브러리 등에서 미디어쿼리 수정
• README에 각 페이지별 상세기능 정리
  → 아무것도 안 적혀있는 상태였어서 중간점검 개념으로 정리했다.

---

7월 12일 금요일

• 웹 버전 포트폴리오 사이트의 '프로젝트' 영역 디자인을 수정하느라, 토이 프로젝트는 작업하지 않았다.
  • 새로 듣고 있는 교육 첫 날, 강사님한테 당시까지 만들어놓은 상태로 피드백을 받았는데, 프로젝트를 늘어놓는게 좋다고 해서 수직으로 나열했었다. (가장 초기에 어떤 상태였는지 github를 찾아봤지만 업로드하지 않았어서 기록이 없음..)
  • 아무튼 그렇게 수직으로 나열시켜서 디자인까지 마쳤는데, 이런 방식은 나의 작업기록(?)을 한 눈에 보기가 불편하다고 생각되었다. 고민 끝에 각각의 메인 페이지 캡쳐 이미지를 카드 형식으로 펼쳐놓고, 클릭해서 뒤집으면 해당 프로젝트와 관련된 정보가 등장하도록 수정했다.
  • 미디어쿼리도 신경써야할 것 같아서 계속 체크하고 수정하다보니 하루가 갔다.😝

포트폴리오 사이트 작업을 끝내고, 퇴근(?)시간이 얼마 남지 않아서 티스토리에 커스터마이징을 했다.

새싹 수업 초기에도 '개발 블로그'의 중요성이 언급되었는데, 이번에 새로 들어온 교육에서도 강사님이 '개발 블로그' 운영이 중요하다고 하셨다. 블로그를 꾸준히 운영하는 것 자체가 포트폴리오가 될 수 있어서, 블로그만 보고 채용되는 경우도 간혹 있다셔서, 내가 그동안 잘하고 있었다는걸 다시금 느꼈다.👍

아무튼 티스토리는 귀여운 파비콘을 등록했고, 사이드바에 내 GitHub 프로필과 포트폴리오 웹사이트 바로가기를 설정했다.

---

토이 프로젝트는 대부분의 페이지 및 컴포넌트의 기본 구조, 디자인, 기능 구현까지 끝났다. 최초 기획안과 비교했을 때, 전체 공정률의 90%는 달성한 것 같다. 소셜로그인 기능은 너무 어려워서 천천히 시도해보고, 아무리 해도 안되면 포기할 생각이다. 이미 API를 하나 사용했으니까 포기해도 괜찮겠지?!😅

내가 지금 고민되는 부분은, 토이 프로젝트로 만든 작업물을 조금 더 실제로 운영중인 사이트처럼 세련되게 만들 수 있을듯한데 어떤 부분을 어떻게 수정하면 좋을지 모르겠다. 고민해봐야지..