이번주 한 일

• 사이드 프로젝트 세팅 + 디자인 + 로그인 구현

이번주의 정리

1. 사프 세팅중 + 디자인 수정 중

• 사프 프로젝트 세팅
  • 겪었던 이슈 사항들.. -> vite 가 속도가 빠르다고 해서 해당 빌드툴을 사용해서 진행했는데, 프로젝트를 세팅하면서 전에는 겪지 못한 다양한 이슈를 겪었다.
    1. --jsx flag 오류
       • [디버깅] Cannot use JSX unless the '--jsx' flag is provided.ts(17004) 해결 좌측의 게시물처럼 대부분 블로그들이 위의 방식을 차용하여 해당 오류를 해결했다.
         쉽게말하면
         1. ts 버전이 vscode 와 맞지않는 경우 -> 설정에서 select typescript version에서 버전을 use workspace version으로 변경
         2. tsconfig.json에서 react-jsx 인 경우 -> react로 변경
       • 위의 두가지 방법 다 나에게 맞지 않았고, 저 두가지 방법 외에는 나오지 않았다. 찾아보다 보니, tsconfig.node.ts와 충돌이 일어나는 것 같다는 생각이 들었고, 해당 파일을 삭제하고 나니 위의 이슈가 사라졌다. 아직도 왜 해당 파일 때문에 생긴 오류인지 의문 그잡채
    2. src path 오류
       • 이 또한 이전에 했던 방식대로 했으나, 여기서는 tsconfig.json 과 tsconfig.node.json 중 어디에 경로를 줘야할지 고민하다가 양쪽에 다 줬는데 오류 대파티가 열렸다. 이 부분은 위의 이슈를 처리하면서 tsconfig.node.ts 삭제한 뒤 자연스럽게 해결됐다.
         • viteTsconfigPaths 플러그인을 사용해야한다는 글이 많았어서 해당 플러그인을 설치해서 추가해두긴 했는데, 나중에 삭제하고 한 번 더 테스트를 해봐야할 것 같다. 워낙 여기저기서 많이 터져서 어떤 원인으로 인해 어떤 이슈가 터졌는지 판단하기가 너무 어려웠다..:( 기능 구현 다 뿌셔놓고 정리좀 해야할듯
         • 결론 : 현재는 tsconfig.json 의 baseUrl : "src" 설정 + viteTsconfigPaths 플러그인 사용
    3. tsconfig.node.ts 설정?
       • 구글링 해본 결과로는 위 tsconfig.node.ts의 경우 tsconfig.json파일을 확장하거나 재정의하여 node.js 환경에 맞게 컴파일 옵션을 설정한다고 하는데, 내가 겪은 대부분의 오류들이 tsconfig.json에서 기존 + 추가 설정한 사항들과의 충돌로 생긴 오류가 아닐까한다. tsconfig.node.ts의 사용은 좀 더 고민을 해봐야할듯.
    4. theme 설정 방법
       • 해당 설정에 대해 설명을 잘 해주신 블로그가 있어서 많이 참고했다. 회사에서 사용하던 방식이랑 유사하긴 했다. Vite + TS + React + Redux + tanstack-query + styled-components 셋팅 & 사용하기 (삽질의 여정)
• 디자인 수정중
  • 디자이너가 없어서 내가 디자인 다 하고 있는 중. 그냥 하고싶은대로 ui 짜서 디자인했는데 팀원들은 나름 만족해주신 것 같다. 근데 내가 만족안됨 :( 디자이너가 필요행....
  • 선물 아이콘 만들었다. 살면서 처음 만들어봤는데 꽤 괜찮게 나와서 뿌듯했담. 개발자 치고 이정도면 됐지 뭐..
  • 배경에 대한 디자인은 canvas의 ai 이미지 만들어주는 기능을 사용하고 있다. 이미지들도 다 무료 이미지고 출처 표기에 대한 사항도 필요없어서, 해당 기능 사용해서 진행할 듯?
  • 아직도 ui 수정 + 기능추가 남았다. 프론트단에서 보여주기만 하면 되는 부분만 남았긴한데 이번 주말은 약속 + 복통으로 인해 날려버렸다. ui 생각하는거 너무 어렵다.
• 로그인 구현은 진행중,,(사실 거의 못했다)

2. i18

• 지난달에 겪었던 이슈사항인데, 정리하는 걸 까먹어서 지금 추가중
  • next i18n과 react i18n을 구별하지 못한 부분으로 생긴 이슈였는데, 확실히 생각이 안나는데 ㅠㅠ Error : Hydration failed because the initial UI does not match what was rendered on the server.같은 에러가 발생했다. 참고 - [Nextjs] react-hydration error 원인 및 해결방법 (feat. react-calendar)
  • react tree가 dom과의 동기화에 실패할 수 있다는 오류였는데, 사실 내가 잘못 import 해온 문제였다.. next-i18n으로 import를 해와야하는데, react-i18n으로 import를 해와서 생긴 이슈였다. 진짜 혼자 뻘짓 다했다 :(
  • 결론 : import 생각하고 하기