ItsMe

이게 포트폴리오를 만든 시작 이었다.취업준비를 시작하며 프론트엔드 개발자인 걸 회사에 어필하는 방법 자체에 고민을 많이 해봤다.어떤 기술을 사용하고, 어떤 기능을 구현해서, 어떤 결과물을 만들어 내는 것이 포트폴리오의 전부 인것처럼 생각 했었다.그런 생각의 꼬리에 꼬리

이 프로젝트를 시작하며 단순하게 결과물을 띡 보여주는게 아니라 설계와 개발 과정 전체를 보여주는 것을 목표로 시작했다.기존 포트폴리오는 "무엇을 만들었는가"에 집중 했다면, 나는 "어떻게 생각하고 만들었는가"를 보여주는 것 이다.프로젝트는 다음과 같은 구조를 기반으로

데이터 구조와 로직을 먼저 설계한 이후, 화면을 그려야 했다.구현의 1번 목표는“데이터를 UI에 연결해서 실제로 보여주는 것”현재까지 진행한 것은Markdown → 파싱 → projectMapper → Project\[]즉, UI에 필요한 데이터는 이미 준비했다.이번

이전 글에서는 Grid 기반 Card UI와 Liquid Glass 스타일을 구현하면서“어떻게 보여줄 것인가”에 집중했다면,이번 작업에서는 한 단계 더 나아가👉 “어떻게 관리하고, 어떻게 동작하게 만들 것인가”에 집중했다.기존에는 스타일이 컴포넌트마다 흩어져 있었고,

관리자 전용 로그인 기능을 구현했다. 나만 사용하는 페이지 이긴 하지만, 수정이 필요할때마다 재배포 하는 작업이 불필요하다고 생각했고, 로그인 관련 기능을 구현해보고 싶다고도 생각했다.로그인 기능이 필요해 -> JWT를 사용해보자 -> NextJs 에서 JWT를 쉽게

포트폴리오 프로젝트 'ItsMe' 를 개발하며 가장 공을 들인 부분은 별도의 DB 없이도 관리자 페이지에서 자유롭게 포트폴리오를 추가, 수정, 삭제(CRUD)할 수 있는 시스템을 구축하는 것이었습니다.이 과정에서 로컬 개발 환경과 배포 환경(Vercel)의 결정적인 차

기능 구현과 CRUD 시스템 구축을 마친 후, 드디어 'ItsMe' 프로젝트를 Vercel을 통해 실제 운영 환경에 올렸습니다. Next.js 15라는 최신 환경에서 배포를 진행하며 느낀 Vercel의 편리함과, 포트폴리오의 완성도를 높여준 도메인 연결 과정을 기록해

프로젝트의 기능이 하나둘 늘어가면서 코드의 중복이 눈에 띄기 시작했습니다. 특히 포트폴리오를 작성(Write)하고 수정(Edit)하는 로직, 그리고 이미지를 업로드하는 과정이 여러 곳에서 산발적으로 사용되고 있었습니다.이번에는 코드의 응집도를 높이기 위해 진행한 모듈화

프론트엔드 개발자로서, 나를 소개할 수 있는 웹페이지 하나는 있어야지.. 가 포트폴리오 제작의 시작이었습니다. 그렇게 시작해서, 그러면 어떻게 보여줘야할까? UI는? Data의 관리는?? 등등의 요소들을 설계해 가고, 구현해 가며 배포도 하고, 리팩토링 과정을 거쳐 회

ItsMe! 프로젝트는 회고 까지 작성 했지만 추가 단계로, 제 웹페이지를 보시는 분들은 볼 수 없었던 하지만, 포트폴리오를 관리해야하는 입장에서 반드시 필요하다고 생각되어 추가했던 Admin(관리자)페이지를 기록해보려고 합니다.보통 포트폴리오는 정적 페이지로 만드는