FrontJin

문제 : 100개의 이력서를 돌렸는데 취업이 되지 않는다 스파르타를 수료한 지도 5개월이 다 되어 간다. 그 동안 1개월의 인턴(스파르타 프로그램)을 했고, 2번의 면접, 3번의 기술 면접, 1번의 커피챗을 했고 1번의 코딩 테스트를 치뤘다. 결과는 모두 탈락. 면접을 좀 다녔으니 이력서는 내가 가진 경험의 최대치를 보여주는 것 같다고 판단했다. 포장은 잘 되어 있었다. 내가 부족한 건 내용물이다. 비전공자 개발자, 유례 없는 취업난 속 청년이라는 현실도 물론 나를 옥죄었지만, 누군가는 내 열정을 알아봐 주었다. 100개에서 2,3개는 그저 운이 좋았다라고 할 지도 모르겠지만, 나는 면접에서 그들이 나의 열정과 커뮤니케이션 능력, 비개발적 능력을 알아보았다고 생각한다. 문제는 기술 면접이다. 기술 면접..

Cursor에서 자동완성, Cursor Tab, AI Suggestion 등 GPT 기능이 전부 작동하지 않는 현상이 발생했다.처음에는 단순히 설정이 꼬인 줄 알고 쉽게 해결될 문제라고 생각했다. 하지만 예상보다 깊고 구조적인 문제가 있었고, 최종적으로는 Cursor 팀에 직접 피드백을 보내야 하는 상황이었다.이 글은 해당 문제를 겪는 사용자가 어디서부터 점검하면 좋을지를 기록한 경험 기반 트러블슈팅 로그이다.🌱 초기 판단: 설정 꼬임 정도로 여겼다Cursor의 자동완성 기능은 평소에는 잘 작동했기 때문에, 이번 현상도 단순한 일시적 오류로 생각했다.과거에도 자동완성이 먹통이 될 때가 있었지만, Cursor 앱을 껐다 켜면 정상 작동했기 때문에 설정 문제일 거라 판단했다.그래서 Settings > Au..

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

Next.js + React Hook Form 기반으로 콘텐츠 생성/수정 페이지를 구현하면서, footer 버튼에서 form의 현재 상태를 필요로 하는 요구가 생겼다.초기 접근처음에는 useForm() 내부에서 watch()를 사용해 전체 form 데이터를 실시간으로 추적하고, 해당 값을 ContentFooter 컴포넌트에 prop으로 전달하는 방식으로 구현했다. 문제 발생하지만 watch()는 form의 모든 필드가 변경될 때마다 리렌더링을 유발한다. 특히 이미지나 파일 업로드 등 상태가 큰 컴포넌트가 포함된 경우 watch()의 호출 비용이 커져 성능 저하로 이어졌다.실시간 렌더링이 잦아지고버튼과 무관한 필드 변경에도 전체 리렌더가 발생함원인 분석watch()는 전체 상태를 추적하기 때문에, 모든 입..

로그인 기능을 구현하다가 예상치 못한 문제가 하나 생겼다.로그인은 정상적으로 성공했고, 상태도 잘 저장되었지만 router.push()가 작동하지 않았다. 상태 저장도 되고, 콘솔에도 데이터가 잘 찍히는데 페이지 이동이 일어나지 않았다.문제 상황- 로그인 API 요청을 보낸 뒤, 응답으로 받은 사용자 정보를 Zustand에 저장하고 그 직후 router.push()를 호출했는데 페이지가 이동하지 않았다.- 아무런 에러도 없고, 상태도 잘 저장되었는데 라우팅만 반응이 없었다.재현 조건- 상태 저장 없이 router.push()만 실행하면 잘 작동했다.-상태 저장을 한 다음 줄에 라우팅 코드를 넣으면 작동하지 않았다. >> 상태 저장과 라우팅이 한 번에 일어날 때 문제가 발생했다.검색1. router.pus..

오늘은 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에서는 하고 싶은 기능에 따라 서버 사이드 캐싱/클라이언트 사이드 캐싱 중 더 적절한 옵션을 선택해서 진행한다..