개발34 Next.js로 내 소개 웹사이트 만들기 프론트엔드 개발을 해오면서 실무에서는 아직 Next.js를 사용해볼 기회가 없었지만, 최근 들어 점점 더 많은 프로젝트에서 Next.js를 도입하는 것을 보며 직접 공부해보기로 마음먹었습니다.이번 글에서는 Next.js를 처음 시작하면서 학습한 내용과 셋업 과정, 그리고 실제로 정리한 깃허브 레포지토리를 공유합니다.📌 Next.js란?Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅, API 라우트 등 다양한 기능을 제공하여 React 개발을 더욱 구조적이고 효율적으로 할 수 있도록 도와줍니다.📁 프로젝트 구조 및 환경 설정아래는 제가 설정한 파일/폴더 구조 형태입니다. 프로젝트는 아래 깃허브에 정리되어 있습니다.🔗 깃허브 .. 2025. 6. 3. 프론트엔드 디자인 패턴 보호되어 있는 글 입니다. 2025. 5. 25. 요즘 쓰는 최고의 개발 도구: Cursor 최근에 개발 생산성을 높이기 위해 Cursor라는 AI 코드 편집기를 사용해보고 있는데 정말 만족스럽다.기존의 VS Code 기반에 OpenAI의 GPT 모델이 결합되어 있어서 친숙한 사용성과 강력한 AI 기능을 동시에 제공한다. 특히 마음에 드는 기능은 다음과 같다:코드 자동 완성 및 리팩토링 지원단순한 자동 완성 수준을 넘어서, 문맥에 맞는 함수 작성, 주석 기반 코드 생성, 기존 코드의 구조 개선까지 손쉽게 도와준다."Ask Cursor" 기능코드 블럭을 드래그해서 자연어로 질문하면, 어떤 코드인지 설명해주거나, 성능 개선 방법, 버그 수정 방법까지 제안해준다. 마치 코드리뷰어와 함께 일하는 느낌.통합형 Git & Terminal커맨드 라인도 에디터 안에서 바로 사용할 수 있고, Git 인터페이스도.. 2025. 5. 22. SPA에서 SEO 적용을 위해 시도했던 것들 회사 프로젝트에서 SPA(react)구조의 한계 속에서도 SEO(Search Engine Optimization)를 적용해보기 위해 여러 가지 방법을 시도해보았습니다. 아래는 그 과정에서 테스트해본 내용과 결과입니다. react-helmet-async 도입SEO를 위해 가장 먼저 시도한 건 react-helmet-async 라이브러리였습니다.해당 라이브러리를 통해 페이지별로 meta 태그를 동적으로 변경할 수는 있었지만 SPA 특성상 실제 HTML 파일이 하나의 index.html로 구성되어 있기 때문에 브라우저나 봇 크롤러는 여전히 동일한 문서만 바라보게 됩니다.즉, URL을 공유하거나 크롤링될 때, 실제 화면에는 동적으로 바뀐 meta 태그가 반영되었더라도 크롤러 입장에서는 적용된 내용을 읽을 수 없.. 2025. 5. 21. [FormData 전송] 배열 데이터를 POST할 때 [object Object] 에러가 발생한 이유와 해결 방법 프로젝트에서 이미지 업로드 기능을 구현하며 POST 요청을 보낼 일이 있었는데,요청 payload에 객체 배열을 포함하자 다음과 같은 문제가 발생했습니다.[object Object] 형태로 전송되어 서버에서 파싱 오류 발생🔍 문제 원인: 배열 형태의 객체가 그대로 직렬화되지 않음일반적으로 JSON API에서는 JSON.stringify()로 객체를 문자열로 변환해 전송하면 문제가 해결됩니다.하지만 이번 케이스는 FormData를 이용한 multipart/form-data 방식이었고,배열 속 객체에 File 타입이 포함되어 있었습니다.{ images: [ { displayOrder: 1, imageType: 'thumbnail', imageFormat: 'jpeg', .. 2025. 3. 10. [어드민 시스템] 추가 개발건 보호되어 있는 글 입니다. 2024. 6. 27. 이전 1 2 3 4 ··· 6 다음
