sjindev 님의 블로그

들어가며CorkCharge는 사용자가 콜키지 가능 매장을 지도에서 조회할 수 있는 서비스다.프로젝트의 핵심 기능인 콜키지 맵은 네이버 지도 API를 기반으로 구현했으며, 현재 지도에 표시된 지역의 좌표를 서버에 전달해 해당 범위에 존재하는 매장 데이터를 받아온다. 받아온 데이터는 줌 레벨에 따라 개별 매장 마커 또는 지역별 클러스터 마커로 표시한다.초기 구현에서는 현재 뷰포트의 좌상단과 우하단 좌표를 그대로 API 요청에 사용했다. 기능 자체는 정상적으로 동작했지만, 지도를 조금만 이동해도 API가 다시 호출되고 마커가 새로 그려지는 문제가 발생했다.이번 글에서는 다음 과정을 정리한다.지도 이동마다 API가 반복 호출된 원인단순 디바운스 대신 버퍼 영역을 사용한 이유LatLngBounds와 useRef를..

4학년 1학기가 끝나기 한달도 채 남지 않았다.어찌저찌 면접의 기회를 받고 지금까지 2곳에서 면접을 봤다. 오늘은 지금까지 본 면접에 대한 회고를 써보려고 한다. 지금까지 면접을 본 곳은 SK증권(IT) 체험형 인턴십과 서울 영커리언스(하계 인턴십) 이다! 1. SK증권(IT) 체험형 Internship우선, 서류 -> 면접 -> 입사 절차였다. 어찌저찌 서류 전형에 합격해서 면접을 보러갔다. 내가 지원한 직무는 "채널시스템 개발"이었고 하는 일은 MTS 개발 및 MTS관련 문의 응대 였다. 나는 서류를 통과하기도했 고 내 서류에는 내가 그동안 해왔던 FE 관련 내용(Typescript)으로 도배를 했기 때문에, 면접에서도 타입스크립트를 이용하여 웹앱을 만들어본 프로젝트 경험을 어필하려고 했다.결론부터 ..

첫 사용 계기처음 AI를 이용해 개발을 시작했을 때는 그냥 단순했다.막히는 코드가 있으면 ChatGPT 나 Gemini 같은 웹 기반 생성형 AI에 질문을 던지고, 답변을 참고해서 직접 수정하는 정도였다. 마치 검색엔진을 조금 더 똑똑하게 사용하는 느낌에 가까웠다. 그런데 졸업 프로젝트를 진행하면서 처음으로 “AI Agent 형태의 개발”을 제대로 경험하게 됐다. 계기는 굉장히 현실적이었다. 프로젝트 자체보다도, 프로젝트를 진행하는데 있어서 교수님의 개 큰 트롤 이슈 우리 졸업 프로젝트는 매주 정해진 시간에 진행 상황을 공유하는 방식이 아니었다. 교수님이 필요할 때 갑자기 공지를 올리고, 그날 바로 연구실로 오라고 하는 구조였다. 문제는 그 공지가 너무 갑작스럽다는 점이었다. 목요일이 졸업 프로젝트 수업..

어느덧 3학년이 끝나고 4학년을 맞이하기 전 마지막 방학이 왔습니다.다행히 3학년 2학기 드림학기제를 진행하며 9학점을 받게되어 전공은 2과목만 들었고, 덕분에 조금 여유로운 학기를 보낼 수 있었습니다. 지나고 돌이켜보면 조금 여유로운 학기를 보냈던 내가 후회되기도 하네요. 일단, 학점도 커리어하이(그래도 드학9학점에 4.5를 맞지못한 아쉬움은 남지만..)였고 무엇보다 좋은건 이번 학기가 끝나면 일주일뒤에 나는 유럽으로 떠난다는 기대감에 부풀어있었습니다!! 2025. 12. 27~ 2026. 01. 12 기다리던 유럽여행. 사실상 2학기 드림학기제를 통해 한가로웠던 시간들을 여행준비에 쏟은 것 같습니다. 기다리고 기다렸던.. 중국국제항공을 타고 인천-> 베이징(2h) -> 런던 히드로 공항(12h였나..

개발을 하다 보면 "서버 응답을 기다리는 짧은 시간조차 사용자에게는 지루함이 될 수 있다"는 고민을 하게 되었다. 특히 좋아요 버튼, 삭제, 수정처럼 사소하고 빈번하게 일어나는 작업에서 더더욱... 오늘은 진행 중인 프로젝트 '코르크차지(CorkCharge)'의 그룹 관리 기능을 구현하며 적용한 낙관적 업데이트와 그 과정에서 마주친 Race Condition(경쟁 상태) 문제 해결 과정을 적어보려고 한다.1. 낙관적 업데이트(Optimistic Update)란?낙관적 업데이트는 "서버로 보낸 요청이 성공할 것이라고 낙관적으로 가정"하고, 서버 응답이 오기 전에 UI를 먼저 업데이트하는 기법이다.일반적인 방식: 요청 → 대기(Loding) → 응답 완료 → UI 업데이트 (느린 네트워크에서 답답함 유발)낙..

문제 상황우리 프로젝트는 현재 지도 페이지에서 특정 버튼 또는 클릭의 여부에 따라 사전에 구현해둔 바텀 시트에 children 컴포넌트를 각각 분기처리하여 그때 그때 필요한 컴포넌트를 바텀시트로 띄우곤 한다. 현재 프로젝트의 코드 구조는 간략히 아래와 같다.// CorkageMap.tsx 의 일부. 각 컴포넌트의 props는 생략...... {/* 바텀시트: 저장한 매장 or 멀티핀 리스트 */} {sheetView === 'list' && ( )} {sheetView === 'store' && } {sheetView === 'multipin' && } {/* [추가] Detail 컴포넌트 렌더링 (ID ..

- 문제 배경Vercel + React Router (CSR- Client Side Rendering) 환경에서 Vercel 로 배포한 "https://프로젝트명.vercel.app/" 배포주소에서 발생하는 오류가 하나 있다. 프로젝트를 하며 작성하는 Router.tsx 파일의 path가 localhost 에서는 잘 작동하지만 배포도메인에서는 맨 뒤에 path를 입력했을 때 404 not found 오류가 발생한다. - 문제 요약"https://프로젝트명.vercel.app/" : 해당 URL 접속은 잘 됨!"https://프로젝트명.vercel.app/signin" : 이처럼 서브 라우트로 직접 접근하면 404 Not Found 발생하는 문제.- 원인: CSR(클라이언트 사이드 라우팅)과 정적 호스팅의..

오늘은 배포자동화에 필요한 CI/CD 파이프라인 구축을 위해 어떤 코드를 작성해야하는지 알아볼 예정입니다. github 액션을 이용하면 코드를 push 했을때, PR Template 을 통한 체계적인 Pull Request 작성, CI 테스트, CD 테스트, prettier 적용 테스트 등 다양한 테스트를 진행할 수 있습니다. 위와 같은 테스트가 필요한 이유는, 사전에 내가 올릴 코드들을 여러가지 test를 통해 협업 브랜치에 merge 됐을 때, 발생하는 오류가 없는지 사전에 확인해보기 위함입니다. 문제발생 가능성이 있거나, 실제로 문제가 있는 코드는 협업 브랜치에 merge 됐을 시 팀원들에게 많은 사랑...을받을 수 있을 겁니다.그러지 않도록, 협업에서 주로 사용하는 3가지 테스트를 위한 gith..

오늘은 vercel 로 배포및 CI/CD 파이프라인 구축을 통해 프론트엔드 개발환경을 세팅해볼 예정입니다. 위 블로그를 작성할때 기준 저의 프로젝트 개발환경 세팅은 pnpm + react + typescript + tailwind 입니다. 또한, 저의 경우 깃허브 레포지토리로 미리 위 세팅에 대해 template 레포지토리가 있기 때문에 레포는 미리 만들어두고 시작했습니다. 1. github에 있는 repository clone 1. vscode 로컬 환경에 워크스페이스 폴더를 등록합니다.2. 해당 워크스페이스 폴더로 터미널 경로를 맞춰줍니다.3. git clone [레포주소]4. pnpm install : 의존성 설치 작업 진행.(저는 기존 템플릿 레포지토리를 클론받은거라 의존성 설치를 해주었습니다..

브라우저의 렌더링 과정1. 요청과 응답브라우저 주소창에 URL 입력 시 브라우저가 DNS를 통해 IP 주소 조회함해당 서버로 HTTP 요청 전송함서버는 HTML 문서를 응답으로 반환함브라우저는 HTML 문서 수신 후 렌더링 엔진에 전달함2. HTTP 1.0 과 HTTP 2.0HTTP 1.0: 요청마다 TCP 연결 새로 생성함, 다중 요청 불가능함, 리소스가 많은 페이지에서 성능 저하 발생함HTTP 2.0: 하나의 연결에서 다중 요청 동시 처리 가능함, 헤더 압축과 서버 푸시 지원으로 성능 향상됨3. HTML 파싱과 DOM 생성DOM 생성과정 요약1. 렌더링 엔진이 HTML 문서를 읽고 토큰 단위로 분해함2. 토큰을 객체로 변환하여 노드를 생성(문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드).3...