주제 선정
처음에 포폴을 어떤것을 만들지 엄청 고민이였다 ㅠㅠ
그러다가 우연히 포켓몬 카드를 디자인 하는 영상을 보고 이걸로 만들어 보자라는 생각을 했고,
거기에 다른 기능을 추가해서 작업하면 재미있을꺼 같았다.
[디자인 참고] https://pokemon-cards-inky.vercel.app/
그리하여!!
포켓몬 카드 리스트를 보여주고, 카드타이틀, 내용, 이미지를 넣어서 다운로드 받아보는 사이트를
작업하기로 주제는 정하였다
사용기술
Skill: next.js(App router) | TypeScript
Styling Tools : tailwind css | scss module | ui shadcn
Library : axios | react-query | intersection-observer | html2canvas | react-hook-form
나는 next.js이 App router를 이용해서 작업하였다. 이전에 app router를 사용하기도 했고, server 컴포넌트와 client 컴포넌트 각각 페이지에서 적용할수 있는 것과 아닌것을 알고 싶기도 했고, 내가 알고 있는 지식으로 온전히 만들어 보고 싶었다.
nextjs 에서 밀고있는 tailwint css, css module 익숙해 지기위해서 선택하였다.
ui shadcn는 디자인 라이브러리로서 모듈 공통화하기 좋을꺼 같아서, custom을 하며 작업을 하였다.
파일구조
📦app
┣ 📂(page)
┃ ┣ 📂(main)
┃ ┃ ┣ 📂_components
┃ ┃ ┃ ┣ 📂(aside)
┃ ┃ ┃ ┃ ┗ 📜side-nav.tsx
┃ ┃ ┃ ┣ 📂(card)
┃ ┃ ┃ ┃ ┣ 📜card-box.tsx
┃ ┃ ┃ ┃ ┣ 📜card-list.tsx
┃ ┃ ┃ ┃ ┣ 📜card.constants.ts
┃ ┃ ┃ ┃ ┣ 📜card.module.scss
┃ ┃ ┃ ┃ ┣ 📜card.tsx
┃ ┃ ┃ ┃ ┗ 📜card.type.ts
┃ ┃ ┃ ┣ 📂(myinfo)
┃ ┃ ┃ ┃ ┗ 📜my-info.tsx
┃ ┃ ┃ ┣ 📂(seach)
┃ ┃ ┃ ┃ ┗ 📜search.tsx
┃ ┃ ┃ ┗ 📜search-card-wrap.tsx
┃ ┃ ┣ 📜loading.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┗ 📂create-card
┃ ┃ ┣ 📂_components
┃ ┃ ┃ ┣ 📜create-card-form.tsx
┃ ┃ ┃ ┗ 📜create.module.scss
┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┗ 📜page.tsx
┣ 📜globals.css
┗ 📜layout.tsx[vscode 자동 파일트리] https://jane-aeiou.tistory.com/80
파일을 import 하거나 page로 default로 내보내지 않으면 경로로 인정이 되지 않지만, 직관적으로 보이도록 component에 '언더바'를 추가하였다.
_component를 하면그 하위 경로들을 라우팅에서 제외하겠다는 의미이며, 해당 폴더 안에 있는 파일들이 URL 경로로 접근되지 않도록 설정하는 것입니다.
(cart) 괄호를 사용하여 그룹이라는 명시적으로 표현하였습니다.
이렇게 하여 불필요한 경로가 라우팅되는것알 방지하고, 그룹을 지어 명시적으로 폴더 구조를 볼수있도록 작업하였습니다.
작업과정
처음에 예상한 시간은 2일이였다. 4일걸렸다.. 단지 페이지는 2장인데.
이유는 있다!
이유를 알아야 나중에 이곳에서 버린 시간을 아낄수 있다!
문제점 및 고칠점
- 회원가입, 로그인 firebase를 사용하려했지만, 몇일전 바뀐정책의 명시된 방안 따라 해보고, 강사님에게 여쭤보았지만.. 잘 모르셔서 포기, 다른 방안으로 작업하였으나, 생각해보니 로그인 기능이 필요하지 않아 제거
- 디자인, 기획을 작업하며 하다보니, 하나의 값을 바꾸면 다른게 연결된것들이 있어서 수정하지 않으면 디자인을 볼수없어서, 디자인 및 구조 많은 변경
- 외부라이브러리 연관된 부분들이 굉장히 컸다. 처음 사용하는것이 많아 typeScript 적용하는데 이해도 부족, api 사용 방법 이해 부족으로 정보를 찾는데 굉장히 시간을 많이 보냈다. (챗gpt와도 1:1 데이트 시간이 많았다😥)
- TS type지정에 대한 에러가 많았다
- 고민을 많이 했다 (더 좋은 코드, 쉬운코드는 어떻게 작성 해야할까? 이 방식이 맞을까? 등등)
배운점
- 카드 만드는 form을 react-hook-form으로 다~ 만들고 보니 코드가 너무 길고 무거운 느낌이 들었다.
총 3가지 type을 비교했다.
1. ui shadcn 라이브러리 react-hook-form
2. 일반적인 input, form
3. react-hook-form simple 버전
나는 3가지를 다 작업해 보고, 마지막 3번을 선택했다.
react-hook-form의 장점인 form을 관리하기가 편하고, 2번은 validateion 작업의 코드를 넣게되면 코드가 똑같이 길어진다. form의 양이 많으면 react-hook-form을 당연히 사용하는것을 추천하다!
2~3개 정도의 form이면서 error에 대해 각각의 대응해야 하다해도 react-hook-form으로 작업하면 좋다.
단순한 작업의 input몇개고 error의 대처가 많지 않다면,react-hook-form을 사용하지 않아도 될꺼 같다
-app 라우터에서 'use client' 디렉티브가 있는 파일의 자식 파일은 서버 컴포넌트가 될 수 없다.
클라이언트 컴포넌트는 브라우저에서 실행되지만, 서버 컴포넌트는 서버에서 실행된다.
'use client' 디렉티브가 있는 파일은 클라이언트 컴포넌트로 지정되므로, 이 컴포넌트의 자식 컴포넌트도 브라우저에서 실행되게 된다.
클라이언트는 주로 상태 관리나 이벤트 같은 것을 브라우저에서 처리하고, 서버는 데이터를 처리, 그 결과 값을 클라이언트에 전달한다.
이러한 과정에서 두 컴포넌트가 혼합되면 데이터 흐름과 상태 관리가 복잡해져서 의도한 대로 동작하지 않을 수 있다.
반대의 경우인 서버 안에 클라이언트 자식 컴포넌트가 있는 것은 상관없다.
클라이언트는 HTML, CSS 같은 파일을 서버에서 먼저 받고, 자바스크립트를 통해 추가적인 동작을 처리하고,
서버는 모든 것을 서버에서 만들어서 내보내는 과정을 거친다.
그렇기 때문에 클라이언트와 서버는 다른 환경에서 동작하니 충돌이 없어서 가능하다.
또한, server는 초기에 데이터를 가져올때 느린 단점이 있는데, client는 html을 받아 빠르게 화면에 표현하기 떄문에 server 안의 client 자식의 구조를 효율성이 좋다고 한다.
느낌점
2일 생각한것을 4일 걸렸다.
생각보다 나에게는 어려웠다. 해보지 않은 작업이고. 라이브러리고, 외부 api의 값은 다를수 있으니 다른 방법으로 page를 불러와야하고, 타입을 모르겠고ㅠㅠ 이 정도 코드면 정리가 잘 된건지 고민고민하며 만들었다!
아직 배우고 있는 중이고, 이런저런 정보를 찾다보니 그런거라 생각한다!
그리고 테스트도 해보고, 왜 그런지도 찾아보고...
다음에는 조금더 빨리 그다음에느 그 전보다 빨리 하다보면 점점 빨리질것이고, 에러, 오류를 지속해서 보다 보면 이유 또한 빠르게 알게 되니 나의 지식은 계속 쌓이는 거라 생각한다.
솔직히 한번 들어 알지 못하고, 한번 본다고 알지 못하는 나에게는 여러번 듣고, 보고를 반복하며 몸에 베는 방법이 제일 맞는거 같다. 그렇게 알게되면 비슷한 문제 또한 잘 헤쳐나가기 떄문이다!!!
외우는 것도 좋지만, 이해하고 습관처럼 부딪히는 것도 좋은 방도 인거 같다! 그래도 만족한다!!
