개발브롞으

이번 글은 직관GO 프로젝트 작업 진행 중 발생한 페이지네이션 트러블 해결 과정에 대한 설명글이다. [ 문제 상황 ]음식 부스 페이지에서 구장 필터 또는 음식 카테고리 필터를 변경할 때, 페이지네이션이 초기화되지 않는 버그가 발생했다.예를 들어:구장 A에서 3페이지를 보다가 구장 B로 필터를 바꾸면, 구장 B의 데이터가 3페이지부터 시작됨전체 카테고리에서 5페이지를 보다가 결과가 1페이지뿐인 카테고리로 바꾸면, 데이터가 아예 안 보이다가 1페이지 버튼을 직접 눌러야 표시됨원인은 FoodBoothGrid 컴포넌트가 currentPage 상태를 내부에서 관리하고 있어서, 부모에서 filteredFoodBoothData가 바뀌어도 currentPage가 자동으로 리셋되지 않는 구조였다. [ 해결 방법 1 -..

이번 글은 Next.js로 프로젝트를 시작하기 전 헷갈리는 개념들에 대한 정리 글이다. [ 개념 핵심 ]Server Component : 컴포넌트가 서버에서 실행됨Client Component : 컴포넌트가 브라우저에서 상호작용 가능하게 동작함 ('use client' 사용)SSR : 페이지를 서버에서 렌더링해서 HTML로 보내는 방식CSR : 브라우저에서 JS가 돌면서 화면을 만드는 방식=> Server Component, Client Component : "어디에서 실행되는가"의 개념=> SSR / CSR : "어떻게 렌더링되는가"에 대한 개념 [ 핵심 개념 추가 설명 ]- Server Component : 주방에서 미리 만들어서 내보내는 음식=> 손님(브라우저) 앞에서 요리하는 것이 아닌 주방..

이번 글은 카카오맵 SDK를 연결하는 과정을 담은 설명글이다.완성된 코드는 글 맨 아래에 작성되어져있다. ⬇️ 카카오 지도 띄우는 법 공식 가이드 ⬇️https://apis.map.kakao.com/web/guide/#step1 https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해 보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 지도 띄우기는 지도의 좌표를 넣어서 그 좌표 기준으로 지도를 생성하고 마커를 찍는 개념이다. 나는 현재 api에서 불러온 address 값이 '서울특별시 성동구 연무장길 xxx' 이런 형태이기 때문에 이 문자열 형태의..

이번 글은 API의 세부 개념들에 대한 설명글이다. [ API ]API는 Application Programming Interface의 약자=> 서로 다른 소프트웨어, 어플리케이션, 시스템이 서로 소통하고 기능을 공유할 수 있게 해주는 매개체이자 규칙의 집합비유 개념 : 식당 [ API 요청 URL ]API 안에 있는 한개의 호출 경로(엔드포인트)⬇️ 아래 예시 - API 요청 URL ⬇️/posts?username=kim// 의미 해석 : post -> '게시글을 달라.' & username -> 'kim'에 해당하는 사용자의 것 - 엔드포인트(endpoint) : 위의 URL에서 posts에 해당하는 부분=> 어떤 종류의 데이터를 다룰 지 정하는 주소 (데이터 종류 결정)비유 개념 : 메뉴 이름 ..

이번 글은 StoryBook에 대한 설명글이다. [ StoryBook이란? ]- UI 컴포넌트 개발 도구=> ex. 버튼 컴포넌트 : 큰 사이즈 버튼, 작은 사이트 버튼, 활성화된 버튼, 비활성화된 버튼 ( 각각의 버전을 story라고 함)(StoryBook : story들을 모아 관리하는 것) [ StoryBook의 장점 ]- 작업 효율 증가=> 컴포넌트 디자인을 쉽게 확인 가능 → 개발자들의 컴포넌트 중복작업 감소 & 쉽게 컴포넌트 디자인 확인 - 원활한 소통=> UI를 빠르게 보여줄 수 있음 → 개발자와 디자이너 간 소통 시간 단축 - 의도치 않은 UI 변경 확인=> Chromatic를 통해 코드 배포 전 의도치 않은 UI 변경을 체크할 수 있음* Chromatic : storybook에서 개발한..

Q. React Query가 만들어진 이유와 React Query를 사용할 때 얻게 되는 이점 [ React Query가 만들어진 이유 ]React 특징컴포넌트 기반의 UI 라이브러리 (클라이언트 상태 관리를 중심으로 설계)=> 실제로는 API 호출을 통해 서버 상태를 다뤄야하는 경우가 많음 API 처리 방법useEffect(), useState() : 서버에서 데이터를 가져오는 비동기 로직, 요청 상태, 에러 핸들링, 캐싱 처리=> 이때 발생하는 문제점 : 중복코드 증가, 로딩과 에러처리 누락, 데이터 캐싱과 동기화 어려움 위의 이유를 극복하기 위해 React Query가 등장함 [ React Query를 사용할 때 이점 ]- 자동 캐싱 및 데이터 동기화 : 요청이 중복되지 않게 관리- 자동 리페칭 ..

이번 글은 웹사이트를 분석해주는 도구인 GA와 GTM에 대한 글이다. [ 웹사이트 분석 도구란 ]웹사이트에 들어온 사용자 수, 행동, 클릭 경로, 체류 시간, 이탈률을 추적하는 도구 => 목적 : 방문자 행동을 파악 → 서비스 개선 + 마케팅 전략 수립에 활용(페이지에 스크립트를 삽입해 데이터를 실시간으로 수집함) [ GA(Google Analytics) ]가장 널리 사용되는 웹사이트 분석 도구=> 사용자의 행동 데이터를 수집해 대시보드 형태로 시각화 - GA 기능방문자 수, 지역, 디바이스 분석페이지별 체류 시간, 이탈률유입 경로(검색, 광고, SNS 등)사용자 전환(구매, 회원가입 등) 추적https://analytics.google.com/analytics/web/#/a366955189p5..

이번 글은 AWS로 배포하는 방법에 대한 글이다. [ 배포 - 정적배포 vs 동적배포 ] - 정적 배포html, css, js 같은 고정된 파일을 다룸서버 로직 없이 사용자에게 파일만 전달 (포트폴리오, 랜딩페이지, 정적블로그 등...)배포 방법 => AWS S3 + CloudFront 조합특징 : 파일만 보여주기 때문에 빠르고 간단함 - 동적 배포백엔드 서버를 통해 동적으로 데이터를 처리DB와의 통신, 사용자 인증 등 서버 로직 포함 (로그인 기능이 있는 웹앱, 게시판, 쇼핑몰)배포 방법 : AWS EC2, Elastic Beanstalk, Lambda 등 사용특징 : 서버 로직을 포함하고 있어 빠르고 간단함 - 실전 배포 조합 예시=> 정적 배포: S3 + CloudFront + Route 53 +..