분류 전체보기90 [JavaScript] 백준 2206번: 벽 부수고 이동하기 문제 정보난이도 : 골드 3알고리즘 유형 : BFS문제 링크 : https://www.acmicpc.net/problem/2206 문제 풀이(1, 1)에서 (N, M)까지 이동하는 최단 경로를 찾는 문제다. 맵에는 벽이 있지만, 단 한 번만 벽을 부술 수 있는 능력이 있다. 모든 인접한 칸으로의 이동 비용은 동일하기 때문에 BFS를 활용하여 최단 경로를 구할 수 있다. 이 문제에는 벽을 한 번 부술 수 있다는 조건이 있다.따라서 동일한 위치에 도달하더라도 아래의 2가지 상태가 나올 수 있다.벽을 한 번도 부수지 않은 상태로 도달한 경우이미 벽을 한 번 부수고 도달한 경우앞으로의 경로 선택에 영향을 미치기 때문에, 이 두 상태는 서로 다른 상태로 관리해야 한다. 일반적인 BFS에서는 방문 여부를 bool.. 2025. 5. 12. [JavaScript] 백준 30804번: 과일 탕후루 문제 정보난이도 : 실버 2알고리즘 유형 : 투 포인터, 슬라이딩 윈도우문제 링크 : https://www.acmicpc.net/problem/30804 문제 풀이최대 2가지의 과일만이 존재할 수 있다.정답이 되는 위치를 미리 알 수 없으므로, 처음부터 시작하여 2가지의 과일만 사용한 가장 긴 꼬치를 찾아야 한다.기본 아이디어:새로운 탕후루 꼬치(newTanghuru) 배열을 만들어 현재까지 유효한 과일 조합을 관리한다.과일 종류를 추적하기 위해 Set 자료구조(currentTypes)를 사용한다.배열을 순회하면서 조건에 맞게 과일을 추가하거나 꼬치를 조정한다. 알고리즘 동작 과정 예시:예를 들어, 과일 종류가 [1, 2, 3, 2, 1, 3]이라고 가정해보자.처음 1을 만남: newTanghuru =.. 2025. 5. 11. 프로젝트 회고 - 투데잇: AI 기반 자동 식단 일기 프로젝트 소개'투데잇'은 사용자가 식사 사진을 업로드하면 AI가 자동으로 음식을 인식하고 칼로리와 영양소를 분석해주는 식단 관리 어플리케이션이다. "사진 한 장으로 완성되는 식단 기록"이라는 슬로건처럼, 복잡한 식단 기록 과정을 단순화하여 사용자들이 꾸준히 식단을 기록할 수 있도록 도와주는 서비스를 구현했다. 팀 협업의 가치이 프로젝트에서 가장 값진 경험은 진정한 협업을 경험했다는 점이었다. 모든 프로젝트에서 중요하지만 이번엔 특히 더 의미가 있었다. 우리 팀은 특정 개념에 대해 서로 다른 정의를 가지고 있어서 여러 의견 충돌이 있었기 때문이다. 그 중 가장 기억에 남는 2가지에 대해 말해보겠다. 구체적으로 컴포넌트 정의에서 처음에는 atomic하게 가기로 했다. 하지만 이 방식이 불필요한 컴포넌트를 .. 2025. 5. 10. Next.js에서 ClientOnly 컴포넌트로 클라이언트-서버 렌더링 일관성 문제 해결하기 Next.js의 하이브리드 렌더링 모델은 강력한 이점을 제공하지만, 동시에 클라이언트와 서버 간 렌더링 차이로 인한 도전 과제도 함께 가져옵니다. 우리 프로젝트에서는 9주간의 데이터를 보여주는 캘린더 캐러셀을 구현하면서 이러한 문제에 직면했습니다. 캐러셀은 과거 4주, 현재 주, 미래 4주의 데이터를 표시해야 했으며, 사용자가 화면을 처음 로드했을 때 자연스럽게 '현재 주'를 기본으로 보여주길 원했습니다. 하지만 캐러셀 라이브러리는 클라이언트 사이드에서만 완전히 동작하기 때문에, 서버에서 렌더링된 초기 HTML은 항상 캐러셀의 첫 번째 항목(4주 전 데이터)을 표시했습니다. 이후 JavaScript가 로드되고 실행되면 캐러셀이 의도한 '현재 주' 위치로 이동하게 되는데, 이는 사용자에게 갑작스러운 UI .. 2025. 5. 10. useFunnel 훅 트러블 슈팅: 리렌더링 및 Hydration 문제 해결 배경: 왜 useFunnel을 사용하게 되었을까?퍼널은 '깔대기'라는 의미로, 사용자가 특정 목표를 달성하기 위해 거치는 일련의 단계들을 말합니다. 우리 프로젝트에서는 회원가입, 비밀번호 찾기, 목표 설정처럼 여러 단계로 이루어진 프로세스가 많았습니다. useFunnel은 이런 다단계 프로세스를 더 쉽게 관리하려고 만들었습니다. 각 단계별 UI 컴포넌트 관리, 단계 간 데이터 전달, 그리고 특정 단계로 직접 접근을 편하게 하는 것을 목표로 했습니다.더 자세한 이야기는 이 글에서 확인하실 수 있습니다! useFunnel 훅 소개useFunnel 훅은 다단계 프로세스를 관리하는 커스텀 훅입니다. 사용자가 단계별로 데이터를 입력하고 자연스럽게 다음 단계로 넘어갈 수 있게 도와줍니다. 각 단계마다 입력된 데이.. 2025. 4. 30. Next.js에서 단계적 사용자 경험을 위한 useFunnel 훅 구현하기 회원가입, 결제 프로세스, 설문조사를 만들 때 개발자들이 공통적으로 겪는 문제가 있습니다. 바로 여러 단계를 효율적으로 관리하는 것입니다. 반복되는 로직을 매번 작성하고, 데이터를 관리하고, URL과 동기화하는 과정은 복잡하고 오류가 발생하기 쉽습니다.이 글에서는 이런 문제를 깔끔하게 해결할 수 있는 커스텀 훅 useFunnel을 단계적으로 구현한 경험을 공유합니다. 이 훅을 활용하면 다음과 같은 이점을 얻을 수 있습니다:코드 중복 없이 여러 단계 프로세스를 쉽게 구현타입스크립트의 강력한 타입 검증으로 런타임 오류 방지URL과 상태 자동 동기화로 페이지 공유와 새로고침 문제 해결세션 스토리지 통합으로 사용자 데이터 안전하게 보존직관적인 API로 다단계 프로세스를 명확하게 구현 Funnel 이란?퍼널은 '.. 2025. 4. 29. 이전 1 2 3 4 ··· 15 다음
