코드의 바다에서 항해하기

들어가며1월 서류 합격 후 받게 된 기술 구현 과제를 완료했습니다. 이 글에서는 과제를 진행하며 마주했던 기술적 도전과 해결 과정 그리고 배운 점들을 정리해보려 합니다.과제 요구사항과제의 핵심 요구사항은 다음과 같았습니다.기능 요구사항Open API를 활용한 날씨 정보 조회사용자 장소 검색 기능즐겨찾기 추가/삭제 기능기술 스택 및 제약사항React + TypeScript 기반 개발FSD(Feature Sliced Design) 아키텍처 적용제공된 대한민국 행정구역 JSON 파일 활용Tailwind CSS를 이용한 UI 디자인처음 접해보는 FSD 아키텍처와 JSON 기반 검색 구현 등 새로운 시도가 많아 배울 점이 많았던 과제였습니다.핵심 성과사용자 경험 개선검색 최적화디바운싱 적용으로 불필요한 검색 연산..

1. 프로젝트 개요디자인 전공을 하다가 실제로 구현되는 과정이 재밌어서 컴퓨터공학을 복수전공하고 프론트엔드 개발 기술을 배운 지 3년 정도가 되었다. 나의 아이디어를 구체화하기 위해서 배운 기술이었으나 당장 다른 사람들이 기획한 아이디어를 구현하는 데 급급하기만 해서 항상 아쉬움이 남았었다. 이번 기회를 통해서 내가 필요하다고 생각하는 서비스를 구체화하여 내 손으로 직접 0부터 100까지 만들어보는 경험을 가지고 싶어서 프로젝트를 시작하게 되었다.전시회에 관심이 많은데 정보를 하나하나 검색해보거나 운 좋게 원하는 광고가 뜨면 전시회를 보러 다녀서 원하는 전시회를 보러 가곤 했다. 이렇게 한눈에 볼 수 있는 서비스가 없어 어떤 전시회가 운영되는지 몰라서 방문하지 못한 경험이 꽤 있었다. 하나의 플랫폼에서 ..

들어가며이번에 진행하고 있는 개인 프로젝트인 전시 공연을 한눈에 볼 수 있는 플랫폼에서 '좋아요 기능'을 구현하면서 마주한 문제들과 해결 과정을 공유합니다. 단순해 보이는 좋아요 기능이지만, 실제로는 상태 동기화, 에러 처리, 캐시 관리 등 고려할 것이 많았습니다.1. 요구사항 정리구현해야 할 기능: 좋아요 추가/취소 실시간 좋아요 상태 확인 (하트 버튼) 비로그인 사용자 처리 중복 추가 방지 여러 페이지에서 상태 동기화 (상세 페이지 ↔ 좋아요 목록)기술 스택: Next.js 16 (App Router), TanStack Query, TypeScript2. 왜 TanStack Query를 선택했는가?고민했던 방법들1) useState + useEffect 조합?useEffect(() => {fetch(..

🚨 문제 상황Next.js 16 App Router에서 Gallery Hub 개인프로젝트를 진행하던 중, sonner 라이브러리를 사용한 Toast 알림이 화면에 나타나지 않는 문제가 발생했습니다.// LoginForm.tsximport { toast } from "sonner";export function LoginForm() { const handleLogin = () => { // 로그인 성공 toast.success("로그인 성공!"); // 보이지 않음! }; return ( // ... 폼 UI );}분명히 코드는 실행되는데 (console.log로 확인), Toast가 화면에 렌더링되지 않았습니다. export default function RootLayout(..

Next.js에서 React Suspense 실전 적용기🤔 Suspense란?React의 Suspense는 컴포넌트가 렌더링되기 전에 필요한 데이터를 기다릴 수 있게 해주는 기능입니다.기존에는 각 컴포넌트에서 loading 상태를 관리했지만, Suspense를 사용하면 로딩 UI를 부모 레벨에서 선언적으로 처리할 수 있습니다.기존 방식 vs Suspense// 기존: 각 컴포넌트마다 로딩 처리function ExhibitionList() { const [loading, setLoading] = useState(true); if (loading) return 로딩 중...; return 전시 목록;}// Suspense: 선언적으로 처리로딩 중...}> 이번 글에서는 Next.js 프로젝트에 Su..

1. 문제 상황최근 프로젝트에서 탭 콘텐츠가 서버에서 받아온 값으로 동적으로 렌더링되는 구조였습니다. 그런데 상품 상세페이지로 이동했다가 뒤로가기를 하면 탭 상태와 스크롤 위치가 초기화되는 문제가 있었습니다.사용자는 뒤로가기를 했을 때, 자신이 마지막으로 보고 있던 탭과 위치로 자연스럽게 돌아가길 기대합니다. 하지만, 페이지가 새로 로드되면서 처음 탭으로 돌아가고, 스크롤도 맨 위로 이동해버리는 사용자경험 측면에서 불편한 점이 발생했습니다. 그래서 이를 해결하기 위해 bfcache에 대해서 알게되었습니다.2. bfcache(Back-Forward Cache)란?이 문제를 해결하는 과정에서 bfcache(Back-Forward Cache)라는 개념을 알게 되었습니다.브라우저는 뒤로 가기 또는 앞으로 가기를..

1. 프로젝트 배경레거시 코드를 Next.js와 Typescript에 맞게 리팩토링하면서 겪은 경험을 공유하려 합니다. 사이드 프로젝트 구인 플랫폼을 통해서 팀원들을 모집하여 함께 작업을 진행했습니다. 기획자 분께서 이미 기초 구현이 되어있는 프로덕트가 있어서 리팩토링 위주로 작업하고, 이후 추가 기능을 덧붙이는 형식으로 진행했습니다. 처음에는 기본 기능이 이미 구현되어 있으니 작업이 빨리 끝날 것이라고 생각했지만, 제가 구현한 코드가 아니라 코드에 대한 이해와 기능 구현 기능을 넘어서는 리팩토링 작업까지 해야 했고, 예상보다 시간이 많이 소요되었습니다.특히, 기존 코드가 Next.js와 TypeScript로 작성되어 있었지만 모두 CSR 방식으로 구현되어 있었고, 하나의 useEffect에 여러개의 로..

🌱 꿈에 그리던 인프콘 당첨8월 3일, 인프런에서 주최한 개발자 컨퍼런스 인프콘 INFCON 2024에 다녀왔습니다. 작년에 삼성 개발자 컨퍼런스에 이어서 두번째 컨퍼런스다.지난 3년 동안 계속해서 인프콘 신청을 했으나 떨어졌고, 당첨된건 이번이 처음이다. 경쟁률이 높은 컨퍼런스인데, 운이 좋게 붙은 것 같아 최대한 열심히 들어보고자 했다.  제작년에는 무료로 진행했던 것 같은데, 이번에는 44,000원의 참가비가 있었고, 인프런의 강의를 한번이라도 산 회원한테는 50%의 할인을 해주어서 22,000원에 구매할 수 있었다. 이번 인프콘에가서 알게 된 사실인데, 그럼에도 10000명이 넘는 인원이 인프콘에 신청했다고 한다. 🌱 인프콘 입장  티켓 부스에서 등록을 하고 이름표와 여러 기념품을 받았고, 기..

객체 값의 전달 방식 참조에 의한 전달 예제 const person = { name: 'Max' }; const secondPerson = person; // 참조 값을 복사(얕은 복사) console.log(secondPerson); 결과 [object Object] { name: "Max" } 객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라고 한다. 객체 person은 메모리에 저장되어있고, 상수 person에는 메모리에 있는 주소를 가리키는 포인터를 저장한다. 위 그림처럼 Person을 사본 SecondPerson에 할당하면 원본 person의 참조 값을 복사해서 SecondPerson에 저장한다. ..

오늘은 웹개발자를 준비했다면 많이 들어본 Sass 와 SCSS에 대해서 알아보자!  둘이 비슷한거 같은데 정확히 뭐가 뭔지 모르겠다면 글을 끝까지 읽어주시길..!우선 Sass에 대해서 언급 하기 전에 CSS특징에 대해서 이야기 해보고 왜 Sass가 나오게 되었는지 이야기 해보자!  CSS는 HTML과 마찬가지로 누구나 배우기 쉬운 언어이다. 그렇게 설계되었기 때문이다. 처음부터 설계 의도가 "누구나 다 CSS를 만질 수 있게 하자!" 이었기 때문에 짧은 시간에 배워서 바로 웹 브라우저에서 시각적으로 확인할 수 있다. 하지만 CSS는 스타일 시트 규모가 점점 커질 수록 복잡해지고,  유지보수가 어려워진다는 큰 단점이 있다. CSS에서 동일한 코드를 재사용하기 위해서 할 수 있는 유일한 조치는 복사 붙여넣기..