분류 전체보기 (19) 썸네일형 리스트형 코드잇 스프린트를 마무리하면서... 6개월 코드잇 스프린트 프론트엔드 부트캠프의 마무리2024년 10월부터 시작한 부트캠프를 마무리했습니다. 수료하는 주말에 정보처리기사 실기 시험이 있어 집중하다 보니, 회고는 조금 늦게 남기게 되었습니다. 저는 약 6년간 이어온 웹디자이너 커리어를 내려놓을 만큼, 프론트엔드 개발자가 되고 싶었습니다. 오랜 시간 꾸준히 준비해왔고, 그 여정의 마지막 퍼즐처럼 부트캠프에 도전하게 되었습니다. 30대 중반에 시작한 도전이었기에, 패기와 자신감만으로 달려들던 20대와는 마음가짐부터 달랐습니다. 직책이 높아지고, 무언가를 해내야 한다는 책임감이 자연스럽게 자리 잡은 시기였기에, 이번에는 훨씬 더 성숙하고 진지하게 과정에 임할 수 있었습니다. 틈틈이 계획했던 자격증 공부와 부트캠프 수료까지 잘 마무리할 수 있었던 .. 고급 프로젝트 회고 3월부터 시작된 마지막 부트캠프 팀 프로젝트를 최근에 마무리했습니다. 이번 프로젝트는 약 6개월간 이어진 부트캠프의 마지막 과제로, 그동안 배운 기술과 경험을 모두 녹여낼 수 있는 기회였습니다. 단순히 결과물을 만드는 것에 그치지 않고, 팀원들과 함께 기획 단계부터 서비스의 구조, 사용성, 확장 가능성까지 깊이 있게 고민하며 프로젝트를 완성해 나갔습니다. 무엇보다 마지막 프로젝트라는 부담감보다는 책임감으로 임하며, 그동안 부족했던 부분을 채우고자 스스로에게 더 높은 기준을 요구했던 시간이었습니다. 기술적으로는 단순한 구현이 아니라 왜 이렇게 구현해야 하는지, 더 나은 방법은 무엇인지 끊임없이 질문하고 고민하는 습관을 기를 수 있었습니다. 또한 다양한 이슈를 직접 해결해 나가며 특정 기술에 대해 더 깊이 .. NextAuth에서 OAuth 로그인 흐름을 직접 제어하기 OAuth 기반 소셜 로그인을 구현할 때, 대부분은 인증 과정을 간편하게 처리해주는 라이브러리나 공식 Provider를 활용합니다. Next.js에서 인증을 처리하기 위해 널리 사용되는 라이브러리인 NextAuth 역시 다양한 소셜 Provider를 지원하고 있어 빠르게 로그인 기능을 도입할 수 있다는 장점이 있습니다. 하지만 실제 프로젝트에서 카카오와 같은 일부 플랫폼의 특성과, 이미 구축된 백엔드 중심의 인증 구조를 함께 고려해야 할 경우, 공식 Provider의 내부 동작이 오히려 발목을 잡는 상황이 발생했습니다. 특히 인가 코드가 일회용이라는 점이 문제였고, 이는 NextAuth가 인가코드를 즉시 사용하는 구조와 충돌했습니다. 이 글에서는 이러한 문제를 어떻게 해결했는지, 그리고 왜 Credent.. Next.js에서 Open Graph 이미지 생성하기 Next.js에서 Open Graph 이미지를 다이나믹하게 생성하는 방법을 공부하면서 겪었던 시행착오와 해결 과정을 정리한 글입니다. 공식 문서를 따라 구현했지만 예상치 못한 문제가 있었고, 이를 디버깅하면서 알게 된 Edge Runtime의 특성과 동작 방식에 대해 정리해 두었습니다. 목표OG 이미지용 opengraph-image.tsx 하나로 동적 이미지 생성API로부터 받아온 데이터를 이미지로 표시커스텀 폰트와 배경 이미지 사용Edge 환경 대응 (환경변수 미사용) 폴더 구조 및 기본 세팅/public └─ open-bg.png └─ IropkeBatang.woff/app/epigrams/[id]/opengraph-image.tsx ImageResponseOpen Graph 이미지를 생성하는 데.. Nextjs에서 페이지 전환 시 prefetch로 인해 middleware가 동작하지 않는 문제 Next.js에서 클라이언트 사이드 라우팅을 사용할 때 prefetch, middleware, 그리고 router cache가 서로 충돌하면서 예상하지 못한 동작이 발생하는 경우가 있습니다. 이 글에서는 로그아웃 후 잘못된 페이지로 전환되는 사례를 중심으로 이 현상을 분석하고, 클라이언트 사이드 라우트 캐시를 어떻게 제어할 수 있는지에 대해 정리했습니다. 문제상황프로젝트에서 사용 중인 미들웨어 코드// middleware.tsimport { NextRequest, NextResponse } from 'next/server';import { cookies } from 'next/headers';const AFTER_LOGIN_DOMAIN = ['/mydashboard', '/dashboard', '/myp.. 랜덤처럼 보이지만 일관된 색상 지정 방법 : 태그와 아바타 배경색에 활용하기 프로젝트를 진행하다 보면 태그나 기본 아바타의 색상을 일관성 있게 보여주는 것이 중요해지는 순간이 있습니다. 특히, 백엔드 API에서 별도로 색상 정보를 내려주지 않는 경우에는 프론트 코드에서 색상을 직접 지정해줘야 하는 상황이 생기죠.최근 Taskify 프로젝트를 진행하면서 비슷한 상황에 마주하게 되었고, 그 해결 과정과 구현 방법을 공유해 보려고 합니다. 문제 상황API에서는 태그나 아바타의 색상을 별도로 저장하거나 내려주지 않음랜덤 색상 사용 시, 페이지를 새로 고칠 때마다 색상이 달라져 일관성 부족 해결 아이디어 랜덤처럼 보이지만 예측 가능한 방식을 사용텍스트(예: 태그 이름, 사용자 이름)의 첫 글자를 기준으로 charCodeAt()으로 얻은 10진수 유니코드 값을 가져옵니다.색상 배열의 길이로.. NextAuth Credentials Provider와 Postman 연동하기: 로그인부터 API 요청까지 NextAuth를 사용하는 경우, Postman으로 API를 테스트할 때 accessToken 때문에 불편함을 겪을 수 있습니다. NextAuth는 보안 강화를 위해 accessToken을 HTTPOnly 쿠키에 저장하므로, 일반적인 방식으로는 Postman에서 직접적인 접근이 어렵습니다. 이때 활용할 수 있는 간단한 방법이 있습니다. NextAuth의 Credentials Provider를 사용하여 로그인 후, 세션 엔드포인트에서 accessToken을 추출하여 Postman 환경변수에 저장하고 이를 사용하는 것입니다. 이 방법을 단계별로 설명하여, Postman에서 NextAuth 세션 정보를 보다 효율적으로 활용할 수 있도록 안내해 드리겠습니다.주요 목표이미 구현된 NextAuth 기반의 로그인 시.. 중급 프로젝트 회고 2월 3일부터 진행된 약 2주간의 중급 프로젝트를 마무리했습니다. 두 번째 협업프로젝트라 첫 번째 프로젝트 때보다 더 기여를 많이 해보고 싶은 마음에 욕심이 많았던 프로젝트였던 것 같습니다. [github repo] : https://github.com/ToKyun02/Taskify[taskify service url] : https://taskify-lab.vercel.app/mydashboard프로젝트 소개중급 프로젝트도 여러개의 프로젝트 중에 팀원과 회의를 통해서 하나를 골라 진행하는 방식이었습니다. 프로젝트 기간은 2주로 동일하지만 초급 프로젝트 때보다 다뤄야 하는 페이지, 컴포넌트, api 등이 훨씬 많았기에 여러 가지를 고민 후에 프로젝트를 선정하게 되었습니다.기초 프로젝트에 비해서 다뤄야할.. 이전 1 2 3 다음
