xu의 개발일지

DFS(Depth First Search)는한 경로를 끝까지 탐색한 뒤 되돌아오는 탐색 알고리즘이다.즉, 갈 수 있는 곳까지 계속 들어가고막히면 이전 지점으로 돌아와 다른 경로를 탐색한다.예를 들어 미로를 탐색할 때,갈 수 있는 길 → 계속 이동막다른 길 → 뒤로 돌아가기다른 길 탐색이 방식이 DFS이다. DFS 특징- 깊게 탐색- 모든 경우 탐색 가능- 백트래킹 구조- 재귀 사용이 일반적 언제 DFS를 사용?- 모든 경우의 수 탐색- 경로 찾기- 조합 문제- 퍼즐 문제- 그래프 탐색- 연결 요소 찾기function dfs(node) { // 현재 노드 처리 for (const next of neighbors) { dfs(next); }} DFS의 기본 구조이다.DFS 시간..

프로젝트를 하다 보면 이런 명령어를 자주 보게 된다.pnpm build npm run build ./gradlew build next build빌드 도구란👉 사람이 작성한 코드를 실행 가능한 형태로 변환하는 도구 개발자가 작성하는 코드는 대부분 "그대로 실행하기 위한 코드"가 아니라 "개발하기 편한 코드"이다.빌드 도구의 필요성개발 코드에는 - TS 사용- 여러 파일로 나뉘어 있음- 디버깅 코드 포함- 최적화 X이러한 특징들이 있는데, 이 상태로는 브라우저가 이해하지 못하거나 성능이 떨어질 수 있다.따라서 빌드 과정이 필요하다.빌드 과정1. 컴파일TypeScript → JavaScript최신 문법 → 호환 가능한 문법2. 번들링수십, 수백 개 파일을 몇 개 파일로 합친다.- 네트워크 요청 줄이기- 로딩..

많은 개발자가 “라이브러리 설치하는 도구” 정도로만 알고 있지만, 패키지 관리 도구는 그보다 훨씬 중요한 역할을 한다.패키지 관리 도구(Package Manager)는 프로젝트에 필요한 외부 라이브러리를 설치하고, 버전을 관리하고, 실행 환경을 구성해주는 도구이다.쉽게 말하면:👉 프로젝트가 정상적으로 실행되도록 “의존성”을 관리하는 시스템패키지 관리 도구가 왜 필요한가?소프트웨어 프로젝트는 수많은 라이브러리에 의존합니다.예를 들어 React 프로젝트라면:- React- React DOM- 상태 관리 라이브러리- HTTP 클라이언트- 빌드 도구이 모든 것을 수동으로 다운로드하고 관리하는 것은 사실상 불가능하고, 패키지 관리 도구는 이를 자동화한다.패키지 관리 도구의 역할1. 의존성 설치pnpm insta..

모노레포(Monorepo)는 여러 프로젝트나 패키지를 하나의 Git 저장소에서 관리하는 전략이다.즉, 관련된 모든 코드베이스를 하나의 리포지토리에 모아 관리하는 방식. repo/ ├─ apps/ │ └─ web (React 또는 Next.js) ├─ services/ │ └─ api (Spring Boot) ├─ packages/ │ └─ contracts (API 스펙 / 공유 정의) - web → 사용자 UI- api → Spring 서버- contracts → API 명세 (OpenAPI 등) 모노레포의 장점 1. API 변경을 한 번에 반영 가능Spring에서 API 응답 필드 변경프론트 요청 코드 수정같은 PR에서 처리 가능하므로 동기화 문제가 줄어듦2. 전체 시스템을 하나로 관리이슈, 버전, ..

해시는 값을 빠르게 찾기 위한 자료구조이다.키(key) → 값(value)로 구성되어 있고 특정 값을 key로 저장하고 그에 해당하는 값을 빠르게 조회할 수 있는 구조!["A", "B", "A", "C"]특정 값이 존재하는지 확인해야 한다고 할 때,배열을 사용하면 모든 요소를 확인해야 해서 시간복잡도가 O(N)이다.해시를 사용할 경우{ A → 2 B → 1 C → 1}값을 바로 찾을 수 있어 O(1)이 된다.코테에서는 주로 1. 개수 세기2. 존재 여부 확인크게 이 경우 해시가 사용된다.const map = new Map();map.set("A", 1); // 저장map.get("A"); // 값 조회map.has("A"); // 존재 여부 확인const set = new Set();set.add(..

이번 알파프로젝트에서는 실시간 채팅을 구현해야 했다.보통 WebSocket을 사용하는데 실무에서는 순수 WebSocket만으로는 불안한 경우가 많다고 한다.또한 백엔드에서 토큰을 헤더에 넣어서 요청을 보내달라고 했는데, 순수 WebSocket은 헤더에 토큰을 넣을 수 없다고 해서...그래서 SockJS를 사용하게 되었다.SockJS는 웹소켓 연결을 안정적으로 유지하기 위한 라이브러리이다.- WebSocket이 가능한 환경에서는 WebSocket을 사용하고- 그렇지 않은 환경에서는 HTTP 기반 fallback 방식으로 동작한다.즉, 어떤 환경에서도 최대한 웹소켓처럼 동작하게 해주는 연결 담당자이다.그럼 이제 STOMP는 무엇인가...STOMP는 웹소켓 위에서 동작하는 메시지 프로토콜이다.- 메시지 전송-..

안녕하세요4호선톤이 끝나자마자 바로 교내톤을 하게 되었습니다.. 🥲17일에 주제가 공개됐고, 22일 오후 2시가 발표였습니다!!5일 안에 주제도 정하고 디자인도 하고 개발도 해야하는 ㅎㅎㅎ주제- 일상에 도움을 주는 서비스- 업무를 편하게 관리해줄 수 있는 서비스- 국민대학교와 관련된 서비스사실 가장 무난한 주제면서도 은근히 어려운...월요일에 주제가 뜨고 그날 자정에 디코 회의로 주제를 정했답니다 😊기디분께서 멋사 면접 때도 활용하신 멋드러진 아이디어가 있으셔서 어렵지 않게 주제 확정을 할 수 있었습니다 😘저희는 국민대 전용 주문, 전달 매칭 서비스를 선택했습니다!월~금이라는 시간이 있었지만저는 디자인이 나온 후에 작업이 가능하고,,회사에 알파 프로젝트까지 있었어서 금요일 밤을 새기로 합니다환경세팅..

안녕하세요4호선톤 후기를 남기려고 합니다4호선톤은 4호선에 있는 대학들이 참여해서 함께 해커톤을 하는 겁니당. (저희 학교는 우이신설선인데)아무튼 팀빌딩도 개발자가 기획자의 아이디어를 보고저 이 팀 할래요!이렇게 신청하는 방식 🥳아이디어를 꼼꼼히 보던 중 아이들의 집중력 향상을 위한 게임 서비스를 발견했고, 게임 UI는 한 번도 해본 적이 없어 지원을 했습니당팀장님께 제 깃허브 주소도 드리구 회사에 다니고 있어 저녁에만 작업이 가능하다고 조심스레 말씀드렸는데 흔쾌히 괜찮다고 해주셔서 팀이 되었답니다 ㅎㅎ디자인을 받고 실제로 개발 작업을 한 기간은 2주? 정도 됐던 것 같아요. 회사랑 병행하는게 힘들었지만 ㅠㅡㅠ 열심히 했다.같은 프론트 팀원분께서 실력이 넘 좋으셔서 큰 무리 없이 작업을 마칠 수 있었다..

네이버 지도 API를 연동하고, 마커와 폴리라인을 표시해봅시다~우선 네이버 클라우드 플랫폼에서 애플리케이션을 등록하고, Maps API를 활성화 해야 한다.그리고 클라이언트 ID를 발급받아서 환경 변수에 저장해놓기! NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certificationwww.ncloud.comDynamic Map을 선택하면 된다. (Geocoding은 주소를 좌표로 변환할 때 사용했슴)기본 구조Next.js에서 외부 JS SDK를 불러올 때는 next/script 컴포넌트를 사용한다.네이버 지도 API는 SDK 스..

GA란?Google Analytics (GA)는 구글에서 제공하는 웹/앱 분석 서비스이다.웹사이트 방문자 수, 페이지뷰 등 사용자 행동을 분석할 수 있고, 이벤트도 추적 가능!그래서 사용자 행동 데이터를 기반으로 서비스를 개선할 수 있고, 마케팅 전략 또한 수립이 가능하다.최신 버전인 GA4에서는- 기존 UA(Universal Analytics)와 다르게 이벤트 기반 구조- 페이지뷰, 버튼 클릭, 사용자 상호작용을 모두 이벤트로 수집- 모바일 앱 + 웹 통합 분석 가능이러한 기능들이 제공된다. Google 애널리틱스로그인 Google 애널리틱스로 이동accounts.google.comGA를 Next.js에 적용하는 법1. GA Measurement ID 준비- GA4 계정 생성 → Property 생성 ..