코드의 바다에서 항해하기

들어가며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)라는 개념을 알게 되었습니다.브라우저는 뒤로 가기 또는 앞으로 가기를..

객체 값의 전달 방식 참조에 의한 전달 예제 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에서 동일한 코드를 재사용하기 위해서 할 수 있는 유일한 조치는 복사 붙여넣기..

1. , 태그 2. 태그 3. , 태그 4. , 태그 5. 태그 6. 태그 7. , 태그  📍,  태그줄바꿈 태그기본적으로 코드는 공백 병합의 특징을 갖는다 -> 아무리 엔터, 스페이스를 눌러서 공간을 만들어도 적용이 안됨1.  태그 특징semantic한 태그 X오직 줄바꿈을 위한 태그2.  태그 특징텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 태그화면의 끝과 화이트 스페이스(띄어쓰기, 공백)가 만났을 때 공백을 어떻게 처리할 지 지정할 수 있음Style 종류설명white-space:nowrap끊기지 않고 화면 밖을 뚫고 나감white-space:normal화면 끝을 만나면 다음 줄로 바꿔줌work-break: keep-all단어 단위로 떨어지게 함(1). whi..

HTML 내에서 어떤 태그가 요소들을 그룹핑하는데 쓰이는지 알아보려고 합니다!!🗂️ ol, ul, li 태그주로 여러가지 목록을 나열할 때 사용합니다. 태그ordered list의 약자로 순서가 있는 목록을 뜻합니다. 태그unordered list의 약자로 순서가 없는 목록을 뜻합니다. 태그list item의 약자로 각 항목들을 나열하는 태그입니다.분야별 공부 분야 추천Front-End HTML CSS JavaScript Back-End Python Django 그림에서 확인할 수 있듯이, li 요소는  혹은  요소 안에서만 사용해야 하며,  과의 직계 자식 요소르는 만 사용 되어야 합니다. 📕 dl, dt, dd 태그, , 는 사전처..