스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기
-
전역 상태와 로컬 상태 분리 전략스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 3. 14. 13:29
1. 전역 상태와 로컬 상태의 분리우리는 전역 상태와 로컬 상태를 명확하게 구분하여 관리하였다.불필요한 전역 상태 증가를 방지하고, 필요한 데이터만 적절한 방식으로 유지하는 것이 목표였다.2. 전역 상태 관리: Redux 활용급여 내역 리스트와 같은 전역적으로 관리해야 하는 데이터는 Redux를 사용하였다.여러 컴포넌트에서 공유해야 하거나, 페이지 간 이동 시 유지해야 하는 데이터를 중앙에서 관리할 수 있도록 하였다.3. UI 관련 상태 관리: useState 활용로딩 상태, 입력 값과 같은 UI 관련 상태는 useState를 활용하였다.이렇게 함으로써 Redux의 상태 트리에 불필요한 데이터를 저장하지 않고, 컴포넌트 내부에서만 필요한 데이터를 관리할 수 있었다.4. 데이터 전달 방식: QueryStr..
-
정규표현식(Regular Expressions) 정리스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 3. 7. 12:20
정규표현식(Regex)은 특정한 패턴을 찾아내고 처리하는 데 사용되는 문자열 매칭 기술이다. 주로 프로그래밍에서 텍스트 데이터에서 특정 규칙을 만족하는 문자열을 검색, 변환, 검증하는 데 활용된다.정규표현식의 주요 개념개념설명패턴특정한 규칙을 표현하는 문자열메타문자(Metacharacters)특별한 의미를 가지는 기호들옵션(Flags)정규표현식의 동작 방식을 조절하는 옵션1. 정규표현식 연습 사이트Regexr : 정규표현식을 직접 실습할 수 있는 사이트2. 기본 문법(1) 구분자정규표현식은 /로 감싸서 작성한다.예시:/패턴/(2) 옵션 (Flags)옵션을 사용하면 정규표현식의 동작 방식을 변경할 수 있다.| 옵션 | 설명 || --- | --- || g | 패턴을 모두 찾기 || i | 대소문자 구분 없..
-
2월 마지막주차 수업내용 정리스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 2. 28. 13:50
타입스크립트 핵심 개념 정리1. 컴파일러 언어와 인터프리터 언어컴파일러 언어컴파일러 언어는 코드를 실행하기 전에 모든 소스 코드를 기계어로 번역한 후 실행한다. 대표적인 예로 C, C++과 같은 언어가 있다.인터프리터 언어 (스크립트 언어)인터프리터 언어는 실행 시점에서 코드의 문장을 하나씩 번역하면서 실행한다. 자바스크립트(JavaScript)와 같은 언어가 대표적이다. 인터프리터 방식이 상대적으로 단순하지만, 실행 속도가 느릴 수 있다.타입스크립트(TypeScript)는 자바스크립트와 다르게 트랜스파일(Transpile) 과정을 거친 후 실행되므로 컴파일러 언어와 인터프리터 언어의 중간적인 특성을 가진다. 즉, TypeScript는 트랜스파일러 언어라고 할 수 있다.2. 타입스크립트 실행 과정타입스크..
-
리덕스(Redux) 1.0스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 2. 21. 13:47
1. 리덕스란?리덕스(Redux)는 리액트에서 상태(state) 관리를 효율적으로 하기 위한 라이브러리이다. 애플리케이션이 커질수록 상태 관리가 복잡해지는데, 리덕스를 사용하면 전역 상태를 체계적으로 관리할 수 있다.1.1 리덕스를 사용하는 이유전역 상태 관리: props 전달 없이 상태를 공유할 수 있다.예측 가능성: 상태 변경이 한 곳에서 이루어져 디버깅이 용이하다.유지보수 용이: 코드의 일관성이 높아 관리가 쉽다.prop drilling 방지: 중간 컴포넌트가 불필요하게 상태를 전달할 필요가 없다.2. 리덕스의 핵심 개념리덕스는 단방향 데이터 흐름을 따른다. 즉, 데이터의 변경이 한 방향으로만 이루어지므로 예측 가능하고 디버깅이 쉬워진다.개념설명스토어(Store)애플리케이션의 전역 상태를 저장하는 ..
-
useEffect와 리액트 라우팅 개념 정리스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 2. 14. 14:26
1. useEffect란?컴포넌트의 생애주기와 관련된 훅으로, 특정 시점에서 실행해야 하는 비동기 코드나 부수효과(Side Effects)를 처리할 때 사용한다.리액트의 UI는 데이터가 변경될 때만 업데이트되므로, 데이터를 기반으로 동작을 수행하는 경우 유용하다.1.1. useEffect의 기본 개념리액트의 가상 DOM(Virtual DOM, VDOM)에서 변화가 발생하면 실제 DOM에 반영되는 과정이 반복된다.컴포넌트의 라이프사이클(생성 → 사용 → 소멸)에 따라 적절한 처리를 해야 한다.useEffect를 활용하면 특정 시점에서 실행할 비동기 코드를 등록할 수 있다.1.2. useEffect의 사용법무조건 두 개의 인자를 받는다.실행할 함수(셋업 코드)의존성 배열(어떤 값이 변경될 때 실행할 것인지 ..
-
자바스크립트 런타임과 이벤트 루프, 비동기 처리에 대한 이해스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 1. 24. 14:26
자바스크립트(JavaScript)는 현대 웹 개발에서 빼놓을 수 없는 핵심 언어이다. 특히 브라우저 환경뿐 아니라 Node.js를 통해 서버 측에서도 사용되면서 더욱 그 범위가 확장되고 있다. 이러한 자바스크립트의 동작 방식을 이해하는 것은 개발자로서 필수적인 역량이다. 그중에서도 “어떻게 자바스크립트가 비동기 처리(Asynchronous)를 수행하는가?”라는 질문에 대한 답을 알고 있으면, 예측하기 어려운 오류나 성능 문제를 미연에 방지하고 코드의 유지보수성도 높일 수 있다. 이번 글에서는 자바스크립트 런타임의 핵심 개념인 이벤트 루프(Event Loop), 싱글 스레드 모델, 비동기 처리 방식 등에 관해 자세히 살펴보도록 하겠다.자바스크립트 런타임이란?자바스크립트 런타임이란 자바스크립트 코드가 실행되..
-
JavaScript에서 DOM과 이벤트스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 1. 17. 13:18
JavaScript에서 DOM(Document Object Model)과 이벤트는 웹 개발에서 핵심적인 역할을 한다. DOM은 HTML 문서를 구조화하고 조작할 수 있게 하며, 이벤트는 사용자와의 상호작용을 처리하는 메커니즘을 제공한다.01. DOM(Document Object Model)이란?DOM은 HTML 문서의 계층 구조를 트리 형태로 표현한 것으로, JavaScript를 사용하여 문서를 동적으로 조작할 수 있게 한다. DOM은 HTML 요소를 노드(node)로 간주하며, 노드는 크게 다음과 같이 분류된다:요소 노드(Element Node): , 와 같은 HTML 태그텍스트 노드(Text Node): 요소 내부의 텍스트속성 노드(Attribute Node): 요소의 속성DOM 요소 선택JavaSc..
-
[데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(4) : JS스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 1. 10. 12:24
JavaScript 개요01. 기본 문법JavaScript는 웹 개발에서 동적인 기능을 구현하기 위해 사용하는 프로그래밍 언어이다. JavaScript 코드는 로 불러올 수 있다.JavaScript는 다음과 같은 기본 문법을 갖는다:변수 선언: var, let, const 키워드를 사용하여 변수를 선언한다.let x = 10; const y = 20; var z = 30;데이터 타입: 문자열(String), 숫자(Number), 불리언(Boolean), 객체(Object), 배열(Array) 등이 있다.조건문: if, else if, else를 사용한다.if (x > y) { console.log("x가 y보다 큽니다."); } else { console.log("x가 y보다 작거나 같습니다."); }0..