티스토리

ji-frontdev

검색하기

블로그 홈

ji-frontdev

ji-frontdev.tistory.com/m

프론트엔드와 관련한 모든 영역을 안내

구독자: 1

방명록 방문하기

주요 글 목록

[Higher-Order Component(HOC)] 등장배경/Custom Hooks 비교 / 예제 코드 1. HOC란 무엇인가?**Higher-Order Component(HOC)**는 “컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수” 즉, 하나의 컴포넌트를 감싸 공통된 로직이나 기능을 주입하는 패턴이다. function withFeature(WrappedComponent: React.ComponentType) { return function EnhancedComponent(props: P) { // 공통 로직 return ; };} 2. HOC 패턴의 역사와 등장 배경🕰️ 언제 등장했나?**React Hooks가 등장하기 전 (React 16.8 이전)**에 유일한 로직 재사용 방식이었다.React 공식 문서에서도 권장되던 방식.🤔 왜 등장했나?공통 기능 (로딩, 인증, 로.. 공감수 0 댓글수 0 2025. 4. 20.
프론트엔드 개발자가 구독하거나 즐겨찾기 해두면 좋은 뉴스레터, 사이트 프론트엔드 개발자로서 트렌드, 기술, 도구 변화가 빠르기 때문에 꾸준히 정보 얻는 게 중요해요. 아래는 프론트엔드 개발자가 구독하거나 즐겨찾기 해두면 좋은 뉴스레터, 사이트 등을 정리해봤어요.📬 뉴스레터 (이메일로 받아보기 좋은 소스)Frontend Focushttps://frontendfoc.us매주 발행되는 프론트엔드 뉴스 요약 (HTML, CSS, JS 중심)JavaScript Weeklyhttps://javascriptweekly.comJS 중심으로 유용한 라이브러리, 아티클, 도구 등을 매주 소개React Statushttps://react.statuscode.comReact 생태계 관련 소식 요약 (라이브러리, 아티클, 릴리즈 등)CSS Weeklyhttps://css-weekly.com최신.. 공감수 1 댓글수 0 2025. 4. 19.
Next.js App Router에서 CSR 탭에서 SSR 페이지 전환으로 전환하기까지 Next.js의 App Router 기반 프로젝트에서 탭 UI를 구성하고, 각 탭에 컴포넌트를 연결하는 작업까지는 무리 없이 진행되었다.버튼을 클릭하면 탭이 바뀌고, 화면도 전환되는 인터랙션은 제대로 작동했다.하지만 치명적인 문제가 있었다.🧨 화면은 떴지만, 정작 중요한 데이터는 비어 있었다탭을 눌러도 아무런 정보가 표시되지 않았다.버튼은 잘 보였고, 레이아웃도 정상이라 “정상 동작”처럼 보였지만, 실제로는 데이터가 끝내 표시되지 않았다.원인은 클라이언트 사이드에서 데이터를 요청하는 구조 때문이었다.useQuery를 사용해 데이터를 가져오도록 했지만, 이 방식은 브라우저가 로드된 뒤 실행된다.그래서 브라우저에서 API 요청이 이루어지고, 거기서 데이터를 받아야만 실제 콘텐츠가 보여지는 구조였던 것이다... 공감수 0 댓글수 0 2025. 4. 18.
[Vite defineConfig 설정 기본편] root, base, plugins, resolve, build, 상황별 예시 1. 🧱 defineConfig()와 설정 구조 개요Vite는 ESM 기반의 번들러로, vite.config.ts 또는 .js 파일을 통해 설정을 제공합니다.이 설정 파일에서 defineConfig()는 타입 지원과 자동 완성을 위한 래퍼입니다.// 기본 구조import { defineConfig } from 'vite';export default defineConfig({ root: '.', // 프로젝트 루트 (index.html 기준) plugins: [], // 플러그인 배열 resolve: {}, // 경로 해석 관련 설정 build: {}, // 빌드 설정 (rollup 옵션 포함)}); 2. 🔍 주요 설정 속성 복기 .. 공감수 1 댓글수 0 2025. 4. 16.
tsconfig.json 설정 오류 해결: allowImportingTsExtensions는 왜 에러가 날까? 📌 에러 원인:allowImportingTsExtensions 옵션은 TypeScript가 .ts 또는 .tsx 확장자를 명시적으로 import하는 것을 허용하는 기능입니다. import { something } from './utils.ts'; 이런 식의 import를 허용하려면 TypeScript가 실제로 JavaScript 파일을 emit하지 않는 설정이어야 합니다. 그렇지 않으면 문제가 발생할 수 있기 때문이에요.그래서 이 옵션을 사용하려면 아래 중 하나를 설정해야 합니다:"noEmit": true👉 TypeScript가 아무 파일도 출력하지 않음"emitDeclarationOnly": true👉 타입 정의 파일(.d.ts)만 출력함✅ 해결 방법:방법 1. noEmit 설정 추가하기 (가장 .. 공감수 1 댓글수 0 2025. 4. 15.
[npm trends] 파일 압축 및 다운로드 관련 주요 라이브러리 비교(archiver,filesaver,jszip,pako,zipjs-browserify) 여러 파일 압축 및 다운로드 라이브러리들이 npm에서 사용되고 있습니다. 각각의 라이브러리는 사용 목적이나 성능 면에서 차별화된 특성을 가지고 있기 때문에, 어떤 작업에 어떤 라이브러리가 적합할지 잘 알고 선택하는 것이 중요합니다. 이번 글에서는 **archiver, file-saver, jszip, pako, zipjs-browserify**의 주요 특성과 용도를 비교해보겠습니다.1. Archiver설명: archiver는 주로 서버 측에서 압축 파일을 생성하는 데 사용되는 라이브러리입니다. 다양한 형식(zip, tar, 7z 등)을 지원하며, 서버에서 파일을 생성하여 클라이언트로 전송할 때 매우 유용합니다.주요 기능:여러 압축 형식(zip, tar 등) 지원.서버 측에서 압축 파일을 동적으로 생성 가.. 공감수 1 댓글수 0 2025. 4. 11.
[leetcode] Palindrome Number/ 팔린드롬 수, 배열 풀이 vs 공간 최적화 풀이 🌀 팔린드롬(Palindrome) 수란?팔린드롬(Palindrome)은 앞에서 읽든 뒤에서 읽든 똑같은 수를 말합니다.예를 들어:121 → 팔린드롬 ✅12321 → 팔린드롬 ✅123 → 팔린드롬 ❌-121 → 음수는 회문이 아님 ❌📌 문제 설명 (LeetCode 9. Palindrome Number)주어진 정수 x가 팔린드롬인지 확인하는 함수를 작성하시오.단, 음수는 팔린드롬이 아니며, 숫자를 문자열로 바꾸지 않고 해결하길 권장합니다. // Example 1:Input: x = 121Output: true// Example 2:Input: x = -121Output: false// Example 3:Input: x = 10Output: false ✅ 풀이 1: 배열을 이용한 직관적인 방법💡 아이디어.. 공감수 0 댓글수 0 2025. 4. 10.
[tailwindcss v4] PostCSS 플러그인 호환 문제 해결 [vite] Internal server error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration. Plugin: vite:cssPre-ransform error: [postcss] It looks like you're trying to use `tailwindcss` .. 공감수 0 댓글수 0 2025. 4. 9.
[Container/Presentational 패턴] Container/Presentational 패턴이란? 프론트엔드 개발자로서 4~5년 전 React 프로젝트를 진행하면서 Container/Presentational 패턴을 사용했던 경험이 있다.당시에는 패턴에 대해 깊이 이해한 상태는 아니었지만, 로직과 UI 코드가 얽혀 유지보수가 어려워지자 자연스럽게 관심사를 분리해야겠다는 필요를 느꼈고, 이 패턴을 도입했다.돌아보면 그 선택은 꽤 합리적이었다. 그리고 최근 React의 패턴 흐름을 공부하면서,과거의 구조와 현재의 방식이 어떻게 변화해왔는지를 다시 되짚어보게 되었다.🧩 Container/Presentational 패턴이란?1. 왜 나왔는가?React가 등장한 초기에는 컴포넌트 안에서 로직, 상태, UI 모두를 처리하는 방식이 일반적이었다.하지만 점점 규모가 커지고 협업이 늘어나면서, 다음과 같은 문제가 .. 공감수 0 댓글수 0 2025. 4. 9.
JavaScript 자료형별 반복문과 형변환 정리 알고리즘 문제를 풀다 보면 다양한 데이터 타입을 마주하게 됩니다.특히 Array, Object, Map, Set은 자주 사용되며,타입마다 반복하는 방식과 형변환 방법이 다르기 때문에 정리해 두는 것이 중요합니다.이 글에서는 각 타입별 반복 방식과 타입 간 형변환 예제를 정리해봅니다.📌 1. Array (배열)✅ 반복문const arr = [1, 2, 3];// forfor (let i = 0; i { console.log(idx, val);}); 📌 2. Object (객체)✅ 반복문const obj = { a: 1, b: 2, c: 3 };// for...infor (const key in obj) { console.log(key, obj[key]);}// Object.keysObject.ke.. 공감수 1 댓글수 0 2025. 4. 7.
[Custom Hook 패턴] Custom Hook 구조 및 작성 방법(MobX 클래스를 Custom Hook처럼 사용하면?) 1️⃣ Custom Hook 기본 구조Custom Hook은 기본적으로 함수형 컴포넌트 내부에서 재사용할 로직을 분리하는 패턴.📌 구성 요소반드시 use 접두사를 붙여야 함 → 예: useFetch, useAuth내부에서 React Hook(useState, useEffect, useContext 등)을 사용할 수 있음UI와 독립적이어야 하며 JSX를 반환하지 않음const useCustomHook = () => { // 상태 관리 const [state, setState] = useState(null); // 부수 효과 실행 useEffect(() => { // 로직 실행 setState('Hello Custom Hook!'); }, []); return state;}; 이제 .. 공감수 0 댓글수 0 2025. 4. 6.
[Custom Hook 패턴] Custom Hook이란? 왜 필요한가? 언제 사용하면 좋은가? 📌 Custom Hook 패턴 개요1️⃣ Custom Hook이란?Custom Hook은 React의 기존 Hooks(useState, useEffect, useContext 등) 을 조합하여반복되는 로직을 재사용 가능하도록 추출한 함수.컴포넌트 내부에서 자주 사용되는 로직을 별도의 함수로 분리함으로써 코드의 가독성과 유지보수성을 향상시킴.✅ 특징✔️ use 접두사를 반드시 붙여야 React가 Hook으로 인식함✔️ JSX를 반환하지 않음 (UI가 아닌 로직만 다룸)✔️ 다른 Hook(useState, useEffect, useMemo 등)을 내부에서 사용할 수 있음2️⃣ 왜 Custom Hook이 필요한가? (기존 React 개발 방식의 문제점)기존 방식에서는 반복되는 로직이 있을 경우, 여러 컴포넌.. 공감수 0 댓글수 0 2025. 4. 5.
2Sum과 3Sum 문제 접근 방법 및 시간복잡도 분석 코딩 테스트에서 자주 등장하는 문제 유형 중 하나가 2Sum과 3Sum 문제입니다. 이 문제들은 배열 내에서 특정 조건을 만족하는 숫자 조합을 찾는 문제로, 효율적인 접근 방식이 중요합니다.🔹 1. 2Sum 문제 접근 방식문제 개요:주어진 정수 배열 nums에서, 두 숫자의 합이 target이 되는 인덱스 쌍을 찾는 문제입니다.같은 요소를 두 번 사용할 수 없으며, 중복된 결과를 허용하지 않습니다.접근 방식 및 시간복잡도: 1️⃣ Brute Force (완전 탐색) → O(N²)모든 두 숫자의 조합을 확인하는 방법.❌ O(N²)으로 입력 크기가 커지면 비효율적코드 예시:function twoSum(nums: number[], target: number): number[] { for (let i =.. 공감수 0 댓글수 0 2025. 4. 4.
JavaScript에서 int 범위를 초과하는 값 관리하기 : BigInt JavaScript에서 큰 숫자를 다뤄야 하는 경우가 종종 있습니다. 특히 팩토리얼 같은 연산을 할 때 Number 타입의 한계를 경험하게 됩니다. 이 글에서는 JavaScript에서 큰 숫자를 관리하는 방법과 BigInt의 필요성, 그리고 실무에서 BigInt가 사용되는 사례까지 살펴보겠습니다. 💡1. JavaScript number 타입의 한계 🚧 JavaScript의 기본 숫자 타입인 Number는 64비트 부동소수점(double-precision floating point) 으로 표현됩니다. JavaScript에서 오차 없이 안전하게 표현할 수 있는 정수의 범위는 다음과 같습니다.console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991console.. 공감수 0 댓글수 0 2025. 4. 3.
슬라이딩 윈도우(Sliding Window) 알고리즘 개념-고정크기,가변크기,투포인터 슬라이딩 윈도우 연속된 구간(부분 배열 또는 부분 문자열)을 다룰 때 사용되며, O(n)의 시간 복잡도로 효율적인 문제 해결이 가능합니다.🔹 슬라이딩 윈도우 알고리즘 개념💡 일반적인 접근법초기 윈도우를 설정 (길이 k의 첫 번째 부분 배열 또는 문자열)윈도우를 한 칸씩 이동하면서 이전 값은 제거하고 새로운 값을 추가필요한 계산을 업데이트 (예: 합, 평균, 최대값, 최소값 등)모든 윈도우에 대해 최적값을 찾음💡 시간 복잡도단순 O(n * k) 브루트포스 접근법을 O(n)으로 최적화할 수 있음모든 원소를 한 번씩만 처리하므로 O(n)🔹 슬라이딩 윈도우 알고리즘 유형1️⃣ 고정 크기(Fixed Size) 슬라이딩 윈도우📌 길이가 k인 고정된 윈도우를 이동시키며 계산하는 방식📌 대표 문제: 최대/최소 합, 평균, .. 공감수 0 댓글수 0 2025. 4. 2.
[HackerRank] 두 집합 사이/Between Two Sets 문제 설명두 개의 정수 배열이 주어집니다.다음 두 가지 조건을 만족하는 모든 정수를 찾아 개수를 반환하세요.1️⃣ 배열 a의 모든 요소가 해당 정수의 약수여야 한다.즉, 그 정수는 a의 모든 요소로 나누어 떨어져야 합니다.2️⃣ 해당 정수는 배열 b의 모든 요소의 약수여야 한다.즉, b의 모든 요소는 그 정수로 나누어 떨어져야 합니다.이러한 숫자들을 두 배열 사이에 있는 숫자(between the sets) 라고 합니다.이 숫자들의 개수를 반환하면 됩니다.입력 형식첫 번째 줄에는 두 개의 정수 n과 m이 주어집니다. (n은 배열 a의 크기, m은 배열 b의 크기)두 번째 줄에는 n개의 정수로 이루어진 배열 a가 주어집니다.세 번째 줄에는 m개의 정수로 이루어진 배열 b가 주어집니다.제한 조건출력 형식두 .. 공감수 0 댓글수 0 2025. 4. 1.
프론트엔드 개발에서 KLOC(Kilo Lines of Code)을 어떻게 활용할까? KLOC이란 무엇인가? 📊KLOC는 Kilo Lines of Code의 약자로, 코드 라인의 수를 측정하는 지표입니다. 1 KLOC은 1,000줄의 코드 양을 의미해요. 소프트웨어 개발에서 KLOC은 코드의 크기나 복잡도를 파악하는 데 사용됩니다. 예를 들어, 대형 소프트웨어 프로젝트에서 KLOC을 통해 코드의 양을 측정하고 개발 리소스를 계획할 수 있습니다.KLOC을 측정하는 이유 🔍KLOC을 측정하는 이유는 다양합니다. 주로 프로젝트 관리, 유지보수, 품질 관리에 활용됩니다.1. 프로젝트 견적 및 일정 산정 ⏳KLOC은 소프트웨어 개발 프로젝트의 규모를 가늠하는 데 도움이 됩니다. 많은 코드 라인이 필요하다면, 그만큼 개발 기간과 인력이 더 많이 소요될 가능성이 높습니다.2. 코드 품질 및 복잡도.. 공감수 1 댓글수 0 2025. 4. 1.
프론트엔드도 알아야 할 Availability(가용성)과 Reliability(신뢰성) 프론트엔드 개발자들은 UI 관리를 하며 아래와 같은 문제를 경험할 수 있어요."API 응답이 없을 때 UI를 어떻게 조절해야 할까?""사용자가 많이 접속할 때 네트워크 지연이 발생하면 어떻게 대처해야 할까?"과거에는 Availability(가용성)과 Reliability(신뢰성)이 백엔드와 인프라 중심의 개념이었지만, 이제는 프론트엔드 개발에서도 중요한 요소가 되고 있어요.프론트엔드 개발에서 Availability과 Reliability를 어떻게 적용할 수 있는지 쉽게 정리해볼게요!프론트엔드에서 가용성 (Availability)프론트엔드에서 Availability이 중요한 이유프론트엔드에서 가용성이란 사용자가 언제든지 웹페이지를 사용할 수 있도록 보장하는 것을 의미해요.예를 들어, API 응답이 늦거나 .. 공감수 0 댓글수 0 2025. 3. 31.
AI 코딩 시대, 개발자는 ‘감’으로 코딩하고 있을까? 🤔 AI 코딩 도구, 어디까지 발전했을까?최근 몇 년간 AI 코딩 도구는 비약적인 발전을 이루었다. 2025년 3월 현재, AI는 단순한 코드 추천을 넘어 전체 프로젝트 구조 설계, 리팩토링, 디버깅, 테스트 자동화까지 지원하고 있다. 과거에는 개발자가 일일이 코드 작성과 오류 수정을 해야 했지만, 이제는 AI가 이를 자동으로 제안하고 보완해 준다. 💡 대표적인 AI 코딩 도구GitHub Copilot: 코드 자동 완성 및 추천 기능으로 개발자의 생산성을 크게 향상Tabnine: AI 기반 코드 보완 및 예측CodeWhisperer: AWS 기반의 AI 코딩 도우미Cursor: AI 기반의 코드 리뷰 및 리팩토링 지원ChatGPT 코드 해석 기능: 코드 설명 및 리팩토링 도움이제 개발자는 AI의 도움.. 공감수 1 댓글수 0 2025. 3. 28.
2025년 프론트엔드 개발자 로드맵 2025년 프론트엔드 개발자 로드맵 💻✨프론트엔드 기술의 변화는 빠르지 않아요. 🚀 새로운 기술이 등장하지만, 기존 기술을 완전히 대체하는 경우는 드물죠.예를 들어, 리액트(React)는 여전히 강세를 보이며, 이를 대체할 기술이 등장하려면 정말 압도적인 장점이 필요합니다.그럼, 2025년을 대비한 프론트엔드 개발자 로드맵을 함께 살펴볼까요? 👇필수 CS 지식 🧠프론트엔드 개발자에게 중요한 CS 기초는 필수입니다!자료구조, 알고리즘, 네트워크 📚 → 프론트엔드 개발자에게 꼭 필요한 지식!데이터베이스, 운영체제 💾 → 배우면 좋지만, 후순위로 공부해도 괜찮습니다.프론트엔드 핵심 기술 스택 🚀프론트엔드 개발에서 중요한 기본기를 다지는 것이 가장 중요합니다.HTML, CSS, JavaScript .. 공감수 3 댓글수 0 2025. 3. 27.
[프로그래머스] 기지국 설치-JS-접근법-문제풀이 문제 설명N개의 아파트가 일렬로 쭉 늘어서 있습니다. 이 중에서 일부 아파트 옥상에는 4g 기지국이 설치되어 있습니다. 기술이 발전해 5g 수요가 높아져 4g 기지국을 5g 기지국으로 바꾸려 합니다. 그런데 5g 기지국은 4g 기지국보다 전달 범위가 좁아, 4g 기지국을 5g 기지국으로 바꾸면 어떤 아파트에는 전파가 도달하지 않습니다.예를 들어 11개의 아파트가 쭉 늘어서 있고, [4, 11] 번째 아파트 옥상에는 4g 기지국이 설치되어 있습니다. 만약 이 4g 기지국이 전파 도달 거리가 1인 5g 기지국으로 바뀔 경우 모든 아파트에 전파를 전달할 수 없습니다. (전파의 도달 거리가 W일 땐, 기지국이 설치된 아파트를 기준으로 전파를 양쪽으로 W만큼 전달할 수 있습니다.)이때, 우리는 5g 기지국을 최소.. 공감수 0 댓글수 0 2025. 3. 23.
Optimistic UI란 무엇인가? Optimistic UI는 사용자 인터페이스(UI)에서 서버 응답을 기다리지 않고 즉시 반영된 것처럼 UI를 업데이트하는 기법입니다. 즉, 사용자가 어떤 작업을 요청하면 그 작업이 서버에서 성공적으로 처리될 것이라고 낙관적으로 가정하고, 바로 UI에 그 변화를 반영합니다. 서버 응답이 실제로 오면 UI가 업데이트되며, 만약 문제가 발생하면 오류 처리를 통해 롤백하거나 수정합니다.🔑 예시: 댓글 작성하기일반적인 흐름: 사용자가 댓글을 작성하면 서버로 데이터를 보내고, 서버에서 응답이 올 때까지 "로딩 중" 메시지를 표시합니다. 그 후 서버 응답에 따라 댓글을 화면에 표시합니다.Optimistic UI 흐름: 사용자가 댓글을 작성하면, 서버 응답을 기다리지 않고 즉시 댓글을 화면에 표시합니다. 서버에서 실.. 공감수 1 댓글수 0 2025. 3. 21.
효율적인 버전 관리의 첫걸음, Semantic Versioning "프로젝트를 진행하다 보면 종종 버전 관리를 어떻게 해야 할지 고민이 될 때가 있다. 버전 관리 시스템은 정말 다양한 방법들이 있지만, 그중에서 Semantic Versioning은 많은 개발자들에게 필수적인 개념으로 자리 잡고 있다. 특히 npm을 활용한 패키지 관리에서 Semantic Versioning의 중요성은 더욱 두드러지는데, 이 개념을 제대로 이해하지 않으면 의도치 않은 버그나 충돌이 발생할 수 있다." 이번 글에서는 Semantic Versioning의 개념과, 그 활용에 대해 구체적으로 설명하며,npm 환경에서 어떻게 효과적으로 버전 관리를 할 수 있는지에 대해 다뤄보겠다.Semantic Versioning의 기본 개념**Semantic Versioning(세멘틱 버전 관리)**은 소프.. 공감수 1 댓글수 0 2025. 3. 21.
[프로그래머스] DFS/BFS > 여행경로 /JS / 접근법, 문제풀이 문제 설명주어진 항공권을 모두 이용하여 여행경로를 짜려고 합니다. 항상 "ICN" 공항에서 출발합니다.항공권 정보가 담긴 2차원 배열 tickets가 매개변수로 주어질 때, 방문하는 공항 경로를 배열에 담아 return 하도록 solution 함수를 작성해주세요.제한사항모든 공항은 알파벳 대문자 3글자로 이루어집니다.주어진 공항 수는 3개 이상 10,000개 이하입니다.tickets의 각 행 [a, b]는 a 공항에서 b 공항으로 가는 항공권이 있다는 의미입니다.주어진 항공권은 모두 사용해야 합니다.만일 가능한 경로가 2개 이상일 경우 알파벳 순서가 앞서는 경로를 return 합니다.모든 도시를 방문할 수 없는 경우는 주어지지 않습니다.입출력 예예제 #1["ICN", "JFK", "HND", "IAD"].. 공감수 1 댓글수 0 2025. 3. 19.
[프로그래머스] DFS/BFS > 단어변환 /JS / 접근법, 문제풀이 문제 설명두 개의 단어 begin, target과 단어의 집합 words가 있습니다. 아래와 같은 규칙을 이용하여 begin에서 target으로 변환하는 가장 짧은 변환 과정을 찾으려고 합니다.1. 한 번에 한 개의 알파벳만 바꿀 수 있습니다.2. words에 있는 단어로만 변환할 수 있습니다.예를 들어 begin이 "hit", target가 "cog", words가 ["hot","dot","dog","lot","log","cog"]라면 "hit" -> "hot" -> "dot" -> "dog" -> "cog"와 같이 4단계를 거쳐 변환할 수 있습니다.두 개의 단어 begin, target과 단어의 집합 words가 매개변수로 주어질 때, 최소 몇 단계의 과정을 거쳐 begin을 target으로 변환할 .. 공감수 0 댓글수 0 2025. 3. 19.
[프로그래머스] DFS/BFS > 게임 맵 최단거리 /JS / 접근법, 문제풀이 문제https://school.programmers.co.kr/learn/courses/30/lessons/1844?language=javascript 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다.지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다.위 그림에서 검은색 부분.. 공감수 1 댓글수 0 2025. 3. 18.
[DFS 문제] 그래프 탐색 / 연결 요소의 개수 찾기 그래프 탐색 (예상 소요 시간: 15~20분) 🔹 문제: 연결 요소의 개수 찾기 N개의 노드와 M개의 간선이 있는 무방향 그래프에서 연결 요소(연결된 노드 집합)의 개수를 구하시오. 입력 예시:console.log(solution(6, [ [0, 1], [0, 2], [3, 4]])); // 출력: 3 풀이6개의 노드가 있고, 간선으로 연결된 노드는 아래와 같다:0-1-2 (하나의 연결 요소)3-4 (두 번째 연결 요소)5는 독립적으로 존재 (세 번째 연결 요소)방문하지 않은 노드부터 DFS나 BFS를 시작하고, 그 노드와 연결된 모든 노드를 탐색한다.각 연결 요소를 찾을 때마다 연결 요소 개수를 증가시킨다.function solution(n, edges) { let coun.. 공감수 0 댓글수 0 2025. 3. 18.
[DFS 문제] 경로 탐색(미로 탐색, 최단 경로) 난이도 2 - 경로 탐색 (예상 소요 시간: 10~15분) 🔹 문제: 미로 탐색N x M크기의 미로가 주어진다. (1,1)에서 시작해 (N,M)으로 가는 최단 경로를 DFS로 탐색하여 출력하시오.벽(0)과 길(1)로 이루어져 있으며, 상하좌우로 이동 가능하다. 입력 예시:4 4 1 1 0 1 1 1 1 1 0 1 0 1 1 1 1 1 출력 예시:최단 거리: 7 // 0,0 -> 4,4 console.log(solution(5, 5, [ [1, 1, 0, 0, 0], [0, 1, 1, 1, 0], [0, 0, 0, 1, 0], [1, 1, 1, 1, 1], [0, 0, 0, 0, 1]])); // 예상 결과: 9console.log(solution(4, 4, [ .. 공감수 0 댓글수 0 2025. 3. 18.
[DFS 문제 LV1] 숫자 삼각형 탐색 문제/코드 난이도 1 - 기본 탐색 (예상 소요 시간: 5~10분)🔹 문제: 숫자 삼각형 탐색 n개의 줄로 이루어진 숫자 삼각형이 주어진다. 가장 위에서 시작해서 아래로 이동하며 합이 최대가 되는 경로를 찾으시오.단, 한 번에 아래층의 바로 아래나 오른쪽 아래로만 이동할 수 있다. 입력 예시:3 7 3 8 8 1 0 출력 예시: 최대 합: 18 (7 → 8 → 3) 문제 설명숫자로 이루어진 삼각형이 주어졌을 때, 위에서 아래로 이동하면서 얻을 수 있는 최대 합을 구하는 문제.단, 이동할 때는 바로 아래 또는 오른쪽 아래로만 갈 수 있어. 입력 예제 2 4 4 2 3 3 6 1 8 2 7 4출력 예제 2 최대 합: 18 (4 → 3 → 6 → 7)경로 설명4 (첫 번째 줄)3 (두 번째 줄, 선택 가.. 공감수 0 댓글수 0 2025. 3. 18.
DFS & BFS 탐색 문제 개념 정리(개념, 코드, 시간/공간복잡도 비교) 🔎 1️⃣ DFS & BFS 문제에서 묻는 것그래프 탐색 문제에서 DFS(깊이 우선 탐색)와 BFS(너비 우선 탐색)를 구현할 수 있는지를 확인합니다.✅ 주요 개념DFS(Depth-First Search, 깊이 우선 탐색)그래프에서 한 경로를 깊게 탐색하다가 막히면 다시 되돌아가며 탐색하는 방식재귀(Recursive) 또는 스택(Stack)으로 구현BFS(Breadth-First Search, 너비 우선 탐색)시작점에서 가까운 노드부터 탐색하는 방식큐(Queue)를 활용하여 구현✅ 이 문제에서 확인하려는 핵심 내용그래프 탐색 알고리즘을 이해하고 있는가?DFS와 BFS를 직접 구현할 수 있는가?스택(Stack), 큐(Queue) 자료구조를 활용할 수 있는가?시간복잡도와 공간복잡도를 고려하여 효율적으로 탐.. 공감수 0 댓글수 0 2025. 3. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.