프론트엔드를 하다 보면 상태 변경과 데이터 변환이 정말 자주 등장한다. 이때 함수형 프로그래밍(FP)은 코드를 더 예측 가능하고 테스트하기 쉽게 만든다. 이번 글은 핵심을 짧게 정리하고, 코드 예제로 바로 확인한다. 실제로 언제 FP가 맞는지도 함께 본다.1. 기본 개념 한 줄 요약함수형 프로그래밍은 순수 함수와 불변성에 기반한 선언적 스타일이다.동일 입력 → 동일 출력, 외부 상태 변경 없음. 원본은 건드리지 않고 새 값을 만든다.2. 순수 함수 vs 부수효과, 코드로 비교 // 순수: 동일 입력이면 항상 동일 출력, 외부 상태 변경 없음 function add(a: number, b: number): number { return a + b; } // 비순수: 외부 상태(total)를 변경..

프로그래밍을 하다 보면 반복문을 자주 사용하게 된다. 그중에서도 while문과 do-while문은 조건 기반 반복문으로 자주 비교된다. 이번 글에서는 이 두 문법의 차이를 직접 코드 예제를 통해 확인하고, 실제로 어떤 상황에서 어떤 문법이 더 적합한지를 정리해본다.1. 기본적인 차이점while문은 조건을 먼저 확인한 후 코드 블록을 실행하고,do-while문은 코드 블록을 먼저 실행한 후 조건을 확인한다.// while문 - 조건 먼저 확인let whileCounter = 0;while (whileCounter 결과적으로 while문은 조건이 false이면 한 번도 실행되지 않지만, do-while문은 조건이 false여도 최소 한 번은 실행된다.2. 조건이 처음부터 false인 경우// while문le..

레벨 5는 알고리즘 문제 풀이에서 가장 높은 난이도를 가진 단계입니다. 복잡한 자료구조와 고급 최적화 기법을 자바스크립트로 구현할 수 있어야 하며, 성능과 메모리 효율을 고려한 코드 작성 능력이 요구됩니다.🧠 핵심 주제1. 메모이제이션 (Memoization)중복 계산을 피하기 위한 값 저장 기법입니다.const memo = {};function fib(n) { if (n DFS + DP 유형에서도 자주 사용됩니다. 키로 (node, step) 형태의 값을 Map에 저장해 중복 탐색을 방지합니다.2. 캐싱입력이 동일한 연산 결과를 저장합니다. 메모이제이션과 유사하나 범용적입니다.const cache = new Map();function expensiveFn(x) { if (cache.has(x)) ..

레벨 4에서는 심화된 알고리즘과 자료구조를 JavaScript로 다룰 수 있어야 합니다. 그래프와 트리 등 복잡한 구조의 탐색, 백트래킹, 동적 계획법, 그리고 언어의 한계를 뛰어넘는 최적화 기법 등이 요구됩니다.그래프 탐색 (DFS/BFS 활용)그래프 표현: 인접 리스트/행렬로 표현방문 처리: 배열 또는 Set 사용다중 컴포넌트 탐색 필요가중치 그래프: 다익스트라(우선순위 큐 필요), 0-1 BFS, A* 알고리즘트리 구조 및 조작트리 순회: 전위, 중위, 후위 (DFS/BFS 활용)트라이(Trie) 구현:class TrieNode {constructor() { this.children = {}; this.end = false; }}class Trie {constructor() { this.root =..

레벨 3에서는 재귀 알고리즘과 자료구조를 직접 구현하거나 활용하는 문제가 등장합니다. 재귀 호출, 그래프 탐색, 큐/스택 구현, 이진 탐색과 같은 알고리즘 패턴을 자바스크립트로 다룰 수 있어야 합니다. 또한 문자열/배열 조작 기법과 일부 유용한 메서드의 심화 사용이 요구됩니다.✅ 재귀 함수재귀는 함수가 자기 자신을 호출하여 문제를 해결하는 기법입니다. 예를 들어 팩토리얼 계산이나 DFS 탐색을 재귀로 구현할 수 있습니다. 종료 조건(base case)을 명확히 해야 하며, 너무 깊은 재귀는 Maximum call stack size exceeded 오류가 발생할 수 있습니다.function factorial(n) { if (n ✅ DFS / BFS (깊이/너비 우선 탐색)DFS재귀 또는 스택으로 구현하..

코딩테스트에서 기본적인 문제를 해결하려면 자바스크립트 문법 중에서도 조금 더 실전적인 도구들을 다룰 줄 알아야 합니다.레벨 2에서는 고차 함수, 객체/Set/Map 활용, 정렬과 정규식, 그리고 ES6 이상의 편의 문법들을 중심으로 정리합니다.✅ 고차 함수 (map, filter, reduce)map: 각 요소에 함수를 적용해 새로운 배열 생성[1, 4, 9].map(x => x * 2); // [2, 8, 18]filter: 조건에 맞는 요소만 걸러냄[5, 12, 8].filter(x => x >= 10); // [12]reduce: 모든 요소를 누적 계산[2, 4, 6].reduce((sum, num) => sum + num, 0); // 12※ reduce 사용 시 빈 배열 체크 & 초기값 설정 주..

코딩테스트를 준비할 때 반드시 알고 있어야 할 JavaScript 기초 문법과 함수들을 정리한 문서입니다.이 문서는 레벨 1 (입문) 수준으로 구성되어 있으며, 변수 선언, 조건문, 반복문, 배열/문자열 처리, 내장 함수 사용 등을 포함합니다.✅ 변수 선언: var, let, constvar: 함수 스코프, 중복 선언 가능, 호이스팅 발생 (초기화 없이 사용 가능). 사용 비추천.let: 블록 스코프, 호이스팅은 되지만 TDZ(일시적 사각지대)로 초기화 전 사용 불가.const: 블록 스코프, 재할당 불가. 기본적으로 상수 선언에 사용.일반적으로 const → 재할당 없는 값, let → 재할당 가능한 값, var는 사용 지양.✅ 조건문 (if / 삼항 연산자)if (조건) { // 실행 코드} els..

최근 웹 개발에서 AI 기능 통합이 급증하면서, 프론트엔드 개발자도 AI 관련 용어를 정확히 이해해야 할 필요성이 커지고 있습니다. ChatGPT API 연동부터 이미지 생성 AI까지, 다양한 AI 서비스를 프론트엔드에 통합하는 프로젝트가 늘어나고 있기 때문입니다.이 글에서는 프론트엔드 개발자가 꼭 알아야 할 AI 핵심 용어들을 체계적으로 정리했습니다. 각 용어의 정의와 함께 실제 프론트엔드 개발에서 어떻게 활용되는지 설명하겠습니다.기본 AI 개념AI (Artificial Intelligence, 인공지능)인간의 지능을 모방하여 학습, 추론, 문제 해결 등을 수행하는 컴퓨터 시스템입니다. 프론트엔드에서는 주로 REST API나 WebSocket을 통해 AI 서비스와 통신합니다.머신러닝 (Machine L..

프론트엔드 개발에서 성능은 사용자 경험을 좌우하는 핵심 요소입니다. 특히 대용량 데이터 처리, 복잡한 UI 렌더링, 실시간 검색 기능 등을 구현할 때 알고리즘의 효율성이 직접적으로 성능에 영향을 미칩니다. 이 글에서는 시간복잡도와 공간복잡도의 개념부터 실무에서의 활용 방법까지 체계적으로 정리하겠습니다.알고리즘 복잡도란 무엇인가?성능 평가의 필요성실제 개발에서 동일한 기능을 구현하는 여러 가지 방법이 존재할 때, 어떤 방법이 더 효율적인지 판단해야 합니다.// 배열에서 최댓값 찾기 - 방법 1function findMaxMethod1(arr) { let max = arr[0]; for (let i = 1; i max) { max = arr[i]; } } return max;}// 배..

프론트엔드 개발에서 사용자 인증은 거의 모든 프로젝트의 핵심 요구사항입니다. 전통적인 세션 기반 인증에서 토큰 기반 인증으로의 전환이 가속화되면서, JWT(JSON Web Token)는 현대 웹 애플리케이션의 표준 인증 방식으로 자리잡았습니다. 이 글에서는 JWT의 개념부터 실제 구현까지 체계적으로 정리하겠습니다.목차JWT란 무엇인가?JWT의 구조와 동작 원리JWT vs Session 인증 방식 비교JWT의 장점과 단점실제 구현 예시보안 모범 사례결론 및 실무 가이드JWT란 무엇인가?JWT(JSON Web Token)는 당사자 간에 정보를 JSON 객체로 안전하게 전송하기 위한 컴팩트하고 자체 포함된(self-contained) 방식을 정의하는 개방형 표준(RFC 7519)입니다.JWT가 필요한 이유현대..