들어가며나에게 있어 '성능 개선' 은 고수들만 할 수 있는 어려운 작업이다.성능 개선에 관해서 1도 몰랐던 나의 입장에서 학습하며 적용한 내용들을 정리해보고자 한다. 본격적인 얘기를 하기 전에, 성능 지표에 관한 키워드 정리부터 해보자. LCP Largest Contentful Paint의 약자로, 화면 안에서 가장 큰 콘텐츠가 표시되기까지 걸린 시간을 말한다.CSR에서는 첫 html 파일이나 첫 이미지 파일 등이 해당 될 수 있겠다. Layout Shift페이지가 로딩되거나 동작하는 중에 텍스트, 이미지, 버튼 등의 위치가 예상치 못하게 움직이는 현상을 말한다.예를 들어 버튼을 누르려는 순간 위에 이미지가 나타나면서 버튼이 아래로 밀리는 현상이 바로 Layout Shift이다. CLSCumulative..

들어가며기술 요구사항 충족을 위해 API 응답 데이터 타입 가드를 진행했는데, 반영하자마자 타입 가드의 중요성을 바로 느끼는 경험을 하게 되었다.무슨 경험을 했는지는 글의 마지막에서 소개하겠다. API 응답데이터 타입 가드를 하려다가 이런 생각이 들었다.이미 서버 응답 타입을 interface로 전부 정의해두고 있는데, 이걸 그대로 이용해서 실제 응답도 검증할 수 있지 않을까?예를 들어 이런 타입이 있었다.export interface Destination { destinationId: string; name: string; address: string; roadAddress: string | null; latitude: number; longitude: number; provider: 'N..

2026년 9월 17일, 세종대학교에서 열린 그리디콘에 다녀왔다.개발자 컨퍼런스에 직접 가보는 건 처음이었다.컨퍼런스 영상이나 다른 사람들의 후기는 종종 봤지만, 직접 참여하는건 처음이라 꽤 기대됐다.특히 우테코 프론트엔드 코치인 준도 연사로 참여한다는 이야기를 듣고 더 기대됐다.매일 우테코에서 보던 코치를 밖에서 연사로 만나는 것도 조금 신기할 것 같았다.무료로 참여하는 컨퍼런스였는데 생각보다 준비도 잘 되어 있었다.무선 충전 마우스패드도 받았고, 저녁으로 햄버거와 콜라도 제공해주셨다.사실 이때부터 이미 꽤 만족했다. 첫 번째 발표는 우테코 7기 출신이자 현재 우아한형제들에서 백엔드 개발자로 일하고 계신 민서현님의 발표였다.주제는 ‘내가 가진 것에서 시작하는 취업 준비’였다.제목만 들었을 때는 자소서..

들어가며주차의 민족에서는 사용자가 목적지를 검색한 뒤 해당 목적지 주변의 주차장을 추천받을 수 있다. 기존에는 검색 결과에서 선택한 장소가 그대로 최종 목적지가 되었다.하지만 사용자가 항상 정확한 장소명을 알고 검색하는 것은 아니다. 지도에서 목적지 주변을 살펴보다가 검색 결과와 조금 떨어진 건물이나 특정 위치를 목적지로 설정하고 싶을 수도 있다.이를 위해 목적지 확인 화면에 중앙 고정 핀을 표시하고, 사용자가 지도를 움직여 목적지를 다시 설정할 수 있는 기능을 구현했다. 지도 이동이 끝나면 중앙 좌표를 백엔드에 전달하고, 역지오코딩 결과로 받은 장소명을 새로운 목적지로 사용한다.전체 동작 흐름은 다음과 같다.검색 결과에서 목적지 선택→ 선택한 목적지 좌표로 지도 이동→ 화면 중앙에 고정 핀 표시→ 사용..

돌이켜보면 내가 무언가를 시작할 때, 충분히 준비되어 있었던 적은 거의 없었다.크롤링을 무료 강의로 조금 배웠을 때는 무턱대고 크몽에 서비스를 올렸다. 돈을 받고 일을 맡을 만큼 잘한다고 생각했던 건 아니다.그런데 실제 의뢰가 들어오고 나니 어떻게든 결과물을 만들어야 했다.돈을 받았으니 모르는 건 찾아보고, 막히면 다시 공부하고, 이틀간 밤을 새기도 하면서 어떻게든 결과물을 전달했다.컴퓨터 동아리에 들어간 뒤에는 파이썬 초보자 세션 강의까지 맡았다.누군가를 가르칠 만큼 내가 잘 알고 있는지 확신은 없었다.그래도 맡고 나니 어설프게 알고 있던 내용들을 다시 공부하게 됐고, 내가 설명하지 못하는 부분이 곧 내가 제대로 모르고 있던 부분이라는 것도 알게 됐다.혼자 여행조차 해본 적이 없으면서 한 달 동안 남미..

들어가며 별것도 아닌 문법 하나에 꽤 오랫동안 붙잡혀 있었다.ViewportParkingLotDetailResponse['dailyOperations'][number] 처음에는 dailyOperations가 배열이라는 것까지는 이해했다. 그런데 뒤에 붙은 [number]가 왜 배열 안 객체 하나의 타입이 되는지는 쉽게 납득되지 않았다.number는 내가 알고 있던 숫자 타입인데, 여기서는 실제 숫자 값일까? 배열의 인덱스일까? 아니면 다른 의미가 있을까?알고 보니 이 문법은 JavaScript에서 실제 값을 꺼내는 인덱싱이 아니라, TypeScript에서 이미 정의된 타입의 프로퍼티 타입과 배열 원소 타입을 가져오는 문법이었다.별것 아닌 문법처럼 보였지만, 알고 있던 JavaScript 인덱싱과 Type..