분류
-
전역 상태와 로컬 상태 분리 전략스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 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)애플리케이션의 전역 상태를 저장하는 ..
-
서비스 기획 특강 정리: PMF부터 애자일까지카테고리 없음 2025. 2. 17. 13:21
서비스 기획 특강에서 배운 내용을 정리해보았습니다. 실무적인 팁부터 시장에서 성공하는 프로덕트의 조건까지 폭넓은 주제가 다뤄졌습니다. 이 글에서는 핵심 내용을 요약해 보겠습니다.1. PMF(Product-Market Fit)와 시장에서 먹히는 프로덕트✨ 문제 해결 능력이 핵심좋은 프로덕트를 만들기 위해서는 어떤 문제를 해결할 것인가를 명확히 정의해야 합니다.빠르게 딜리버리하는 능력이 중요하며, 이를 위해서는 개발을 직접 하지 않더라도 기획자가 조합하고 다룰 수 있는 능력을 갖추는 것이 중요합니다.기술적 혁신뿐만 아니라 운영에서 차별화된 전략을 갖춘 기업이 성공하는 경우도 많습니다. (예: 배달의민족, 쿠팡이츠)✨ 시장 분석과 포지셔닝해외 사례를 참고하는 것도 중요합니다. 특히 미국 시장에서는 SaaS(S..
-
useEffect와 리액트 라우팅 개념 정리스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 2. 14. 14:26
1. useEffect란?컴포넌트의 생애주기와 관련된 훅으로, 특정 시점에서 실행해야 하는 비동기 코드나 부수효과(Side Effects)를 처리할 때 사용한다.리액트의 UI는 데이터가 변경될 때만 업데이트되므로, 데이터를 기반으로 동작을 수행하는 경우 유용하다.1.1. useEffect의 기본 개념리액트의 가상 DOM(Virtual DOM, VDOM)에서 변화가 발생하면 실제 DOM에 반영되는 과정이 반복된다.컴포넌트의 라이프사이클(생성 → 사용 → 소멸)에 따라 적절한 처리를 해야 한다.useEffect를 활용하면 특정 시점에서 실행할 비동기 코드를 등록할 수 있다.1.2. useEffect의 사용법무조건 두 개의 인자를 받는다.실행할 함수(셋업 코드)의존성 배열(어떤 값이 변경될 때 실행할 것인지 ..
-
리액트 1차스터디/[패스트캠퍼스] React & Redux로 시작하는 웹 프로그래밍 2025. 2. 7. 00:33
1. 리액트는 왜 필요한가?1.1 DOM(실제 돔)의 업데이트 방식, 구동 방식DOM(Document Object Model)은 HTML 요소를 객체로 표현한 계층적 구조이다.브라우저는 DOM을 이용해 웹페이지를 렌더링하며, 변경 사항이 발생할 때마다 전체 DOM을 다시 그린다.이 과정은 성능 저하를 유발할 수 있다.특히, 대량의 요소가 있는 웹페이지에서는 변경이 빈번할 경우 렌더링 비용이 높아진다.브라우저의 CRP 단계CRP(Critical Rendering Path, 중요 렌더링 경로)는 브라우저가 HTML, CSS, JavaScript를 처리하여 화면에 렌더링하는 과정이다.CRP는 다음과 같은 단계로 진행된다:HTML 파싱 및 DOM 생성: HTML 문서를 해석하여 DOM을 구성한다.CSS 파싱 및..
-
자바스크립트 런타임과 이벤트 루프, 비동기 처리에 대한 이해스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025. 1. 24. 14:26
자바스크립트(JavaScript)는 현대 웹 개발에서 빼놓을 수 없는 핵심 언어이다. 특히 브라우저 환경뿐 아니라 Node.js를 통해 서버 측에서도 사용되면서 더욱 그 범위가 확장되고 있다. 이러한 자바스크립트의 동작 방식을 이해하는 것은 개발자로서 필수적인 역량이다. 그중에서도 “어떻게 자바스크립트가 비동기 처리(Asynchronous)를 수행하는가?”라는 질문에 대한 답을 알고 있으면, 예측하기 어려운 오류나 성능 문제를 미연에 방지하고 코드의 유지보수성도 높일 수 있다. 이번 글에서는 자바스크립트 런타임의 핵심 개념인 이벤트 루프(Event Loop), 싱글 스레드 모델, 비동기 처리 방식 등에 관해 자세히 살펴보도록 하겠다.자바스크립트 런타임이란?자바스크립트 런타임이란 자바스크립트 코드가 실행되..