FrontJin

로컬에서 npm run build를 했을 때는 아무 문제가 없었는데, GitHub에 push를 하면 빌드 오류가 발생하는 문제가 있었다. 이 문제 때문에 배포 브랜치에 여러 번 커밋을 푸시하게 되었고, 그 결과 서버 쪽에서 오류가 발생했다. 이후 백엔드 개발자로부터 "빌드 에러를 미리 잡는 방법을 고민해보는 게 어떻겠느냐"는 피드백을 받았다.하지만 당시에는 이렇게 생각했다.→ "로컬에서 build가 잘 되는데, 뭘 더 어떻게 하라는 거지?"그럼에도 불구하고 개선 방법을 찾아보기로 했다.🌱 해결 방법을 찾기까지build 에러가 GitHub Actions에서만 발생하는 것이라면, GitHub Actions에서만 실행되는 환경 차이를 먼저 의심해볼 수 있다.따라서 디버깅용 빌드 전용 브랜치를 따로 만들어, ..

오늘은 Anima 플러그인을 이용하여 Figma 디자인을 Tailwind css로 자동 변환하는 법을 설명하려고 한다. https://www.animaapp.com/figma Figma to Code - Export React, HTML & Vue from any Figma designCreate responsive prototypes, export HTML & CSS, React or Vue, or publish live websites from your design. Use Anima for Figma for free!www.animaapp.com 사용법준비물 : 디자인이 된 피그마 1. 피그마 하단의 플러그인 아이콘 클릭2. plugins&widgets 탭에서 Anima 검색, Run 3. 로그인하..

팀 과제(가취뽀) 중 Vintz 튜터님에게 가서 진행상황 보고를 했다. 이력서 페이지에 포인트를 걸고, 그 포인트만큼 차감되는 기능을 구현해야 해서 zustand를 설정하고 있다고 했다. 그런데 튜터님이 zustand를 꼭 써야 하냐는 질문을 하셨다. 그러게. 왜 써야 한다고 생각했지?일단 나의 이유는point state를 여러 곳에 써야 하니까(이력서 페이지, 포인트 상점 페이지 두 곳이지만)Next.js는 App router 라서 props를 어떻게 전달해야 할 지 모르겠음이 두 가지였는데, 병연님은 serverside에서 그냥 point를 가져오면 되지 않나? 라고 하셨다. 듣고 보니 그것도 그런 것 같은게 두 페이지만이라 굳이 zustand를 써야 하나 싶긴 했다.그렇지만 이야기를 하다 보니 확장..

Vintz 튜터님과 두번째 토론. 주제는 서버 사이드 캐싱과 클라이언트 캐싱의 차이점과 Next.js에서의 활용법이었다. 근데 내용이 너~무 어려워서 제대로 공부를 못 해 갔는데, 토론을 하다 보니 Next.js 부분은 강의를 찍으신 Chancellor튜터님께 직접 가는 게 나은 것 같아 튜터님과 Chancellor 튜터님 방이 비자마자 달려갔다. 질문을 드리자마자 너무나 완벽한 정리를 술술 설명해 주셨고 기억이 날아가기 전에 정리를 해 두려고 한다. 1. 캐싱 - 한번 불러온 데이터를 효율화를 위하여 서버나 브라우저 사이드에 저장해주고 빠르게 불러올 수 있도록 하는 프로세스.  - Next.js에서는 하고 싶은 기능에 따라 서버 사이드 캐싱/클라이언트 사이드 캐싱 중 더 적절한 옵션을 선택해서 진행한다..

스파르타 강의를 들으면서 4가지 렌더링 방식(SSG, CSR, ISR, SSR)을 배웠다. 그런데 SSR을 배우는 과정에서 SSR는 사용자와 상호작용되지 않는다고 이해했고, 그걸 튜터님한테 말씀드렸는데 hydration이라는 것이 끝나면 상호작용이 가능하다고 하셨다. 이어 hydration에 대해 공부하고 공부한 내용을 토론하자고 말씀을 주셔서 개발 아티클들을 몇 개 뒤져보고 내가 이해한 내용을 기록하려고 한다.  1. 정의 SSR(Server Side Rendering)에서, 서버에서는 사용자의 요청이 있을 때 마다 페이지를 새로 그려서 사용자에게 제공한다. 서버에서 index.html 파일을 제공하고 곧이어 자바스크립트 파일을 제공하는데, 브라우저에서는 html 파일을 미리 로드하고 자바스크립트 파일..