인기 글
-
React 상대경로, 절대경로 사용하기
React(CRA) 에서는 웹팩과 바벨 설정이 기본적으로 되어 다른 파일을 가져오기 위해 import 를 사용할 수 있는데, 이때 경로를 지정하는 방법은 상대경로와 절대경로로 나뉜다. 상대경로현재 import를 하는 파일의 위치를 기준으로 경로를 지정한다. import Chicken from '../fastfood/chickens/chicken'사용법은 다음과 같다 '/' : 루트(최상위 디렉토리)'./' : 현재 디렉토리'../' : 현재 위치에서 상위 디렉토리 위와같은 경로설정을 통해 가져오려는 파일의 위치를 적어주면 사용가능하다. 그러나 가져오려는 파일이 현재 위치에서 멀리있다면 어디있는지 가늠하기도 힘들고 보기에 복잡하다는 문제가 생기게 된다. 이럴때 절대경로를 사용한다면 불편함을 해소할 수 있..
-
[데브캠프 : 김민태의 프론트엔드 개발 3기] Git/GitHub 학습
Git이란? 깃은 '형상 관리 도구'!Git은 소프트웨어 개발에서 필수적인 형상 관리 도구(VCS, Version Control System)이다. 코드를 포함한 프로젝트의 파일과 디렉토리 상태를 추적하고 관리할 수 있으며, 변경 이력을 남겨 과거 버전으로 복원이 가능하다. 버전 컨트롤 시스템의 필요성소프트웨어는 계속해서 변하며, 모든 변경사항을 기록하고 복구 가능하도록 관리하는 것이 중요하다. 다수의 인원이 방대한 양의 파일을 관리하는 환경에서 Git은 "누가, 왜, 무엇을" 수정했는지 기록하며, 협업 과정에서 충돌 문제도 해결할 수 있다. 개발자의 시각: 하드웨어와 운영체제 프론트엔드 개발자가 알아야 할 운영체제와 파일 시스템프론트엔드 개발자라면 하드웨어와 OS의 작동 방식을 이해해야 한다. "브라우..
-
[데브캠프 : 김민태의 프론트엔드 개발 3기] OT 후기
프론트엔드 개발을 어느 정도 경험한 후, 전문가의 멘토링을 통해 부족한 점을 보완하고 체계적인 학습으로 기본기를 다지기 위해 패스트캠퍼스의 데브캠프: 김민태의 프론트엔드 개발 3기에 참여하였다. 첫날 진행된 OT와 현직자 특강은 앞으로의 여정을 준비하는 데 중요한 출발점이 되었다. 이번 글에서는 OT와 특강에서 얻은 인사이트를 중심으로 공유하고자 한다.데브캠프를 선택한 이유프론트엔드 학습 기회를 탐색하던 중, 체계적인 커리큘럼과 실무 중심의 학습 환경을 제공하는 데브캠프가 주목을 끌었다. 특히, 다섯 번의 팀 프로젝트와 백엔드 연계 프로젝트를 통해 실무 역량을 키울 수 있다는 점이 매력적이었다.또한, 전문 컨설턴트를 통한 취업 상담과 포트폴리오 준비 과정이 포함되어 있어 개발 실력뿐 아니라 커리어 전반을..
리스트 : 콘텐츠가 있으면 최근 5건을 불러옵니다.
-
전역 상태와 로컬 상태 분리 전략[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025.03.14 13:29
1. 전역 상태와 로컬 상태의 분리우리는 전역 상태와 로컬 상태를 명확하게 구분하여 관리하였다.불필요한 전역 상태 증가를 방지하고, 필요한 데이터만 적절한 방식으로 유지하는 것이 목표였다.2. 전역 상태 관리: Redux 활용급여 내역 리스트와 같은 전역적으로 관리해야 하는 데이터는 Redux를 사용하였다.여러 컴포넌트에서 공유해야 하거나, 페이지 간 이동 시 유지해야 하는 데이터를 중앙에서 관리할 수 있도록 하였다.3. UI 관련 상태 관리: useState 활용로딩 상태, 입력 값과 같은 UI 관련 상태는 useState를 활용하였다.이렇게 함으로써 Redux의 상태 트리에 불필요한 데이터를 저장하지 않고, 컴포넌트 내부에서만 필요한 데이터를 관리할 수 있었다.4. 데이터 전달 방식: QueryStr..
-
정규표현식(Regular Expressions) 정리[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025.03.07 12:20
정규표현식(Regex)은 특정한 패턴을 찾아내고 처리하는 데 사용되는 문자열 매칭 기술이다. 주로 프로그래밍에서 텍스트 데이터에서 특정 규칙을 만족하는 문자열을 검색, 변환, 검증하는 데 활용된다.정규표현식의 주요 개념개념설명패턴특정한 규칙을 표현하는 문자열메타문자(Metacharacters)특별한 의미를 가지는 기호들옵션(Flags)정규표현식의 동작 방식을 조절하는 옵션1. 정규표현식 연습 사이트Regexr : 정규표현식을 직접 실습할 수 있는 사이트2. 기본 문법(1) 구분자정규표현식은 /로 감싸서 작성한다.예시:/패턴/(2) 옵션 (Flags)옵션을 사용하면 정규표현식의 동작 방식을 변경할 수 있다.| 옵션 | 설명 || --- | --- || g | 패턴을 모두 찾기 || i | 대소문자 구분 없..
-
2월 마지막주차 수업내용 정리[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025.02.28 13:50
타입스크립트 핵심 개념 정리1. 컴파일러 언어와 인터프리터 언어컴파일러 언어컴파일러 언어는 코드를 실행하기 전에 모든 소스 코드를 기계어로 번역한 후 실행한다. 대표적인 예로 C, C++과 같은 언어가 있다.인터프리터 언어 (스크립트 언어)인터프리터 언어는 실행 시점에서 코드의 문장을 하나씩 번역하면서 실행한다. 자바스크립트(JavaScript)와 같은 언어가 대표적이다. 인터프리터 방식이 상대적으로 단순하지만, 실행 속도가 느릴 수 있다.타입스크립트(TypeScript)는 자바스크립트와 다르게 트랜스파일(Transpile) 과정을 거친 후 실행되므로 컴파일러 언어와 인터프리터 언어의 중간적인 특성을 가진다. 즉, TypeScript는 트랜스파일러 언어라고 할 수 있다.2. 타입스크립트 실행 과정타입스크..
-
리덕스(Redux) 1.0[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2025.02.21 13:47
1. 리덕스란?리덕스(Redux)는 리액트에서 상태(state) 관리를 효율적으로 하기 위한 라이브러리이다. 애플리케이션이 커질수록 상태 관리가 복잡해지는데, 리덕스를 사용하면 전역 상태를 체계적으로 관리할 수 있다.1.1 리덕스를 사용하는 이유전역 상태 관리: props 전달 없이 상태를 공유할 수 있다.예측 가능성: 상태 변경이 한 곳에서 이루어져 디버깅이 용이하다.유지보수 용이: 코드의 일관성이 높아 관리가 쉽다.prop drilling 방지: 중간 컴포넌트가 불필요하게 상태를 전달할 필요가 없다.2. 리덕스의 핵심 개념리덕스는 단방향 데이터 흐름을 따른다. 즉, 데이터의 변경이 한 방향으로만 이루어지므로 예측 가능하고 디버깅이 쉬워진다.개념설명스토어(Store)애플리케이션의 전역 상태를 저장하는 ..
-
서비스 기획 특강 정리: PMF부터 애자일까지카테고리 없음 2025.02.17 13:21
서비스 기획 특강에서 배운 내용을 정리해보았습니다. 실무적인 팁부터 시장에서 성공하는 프로덕트의 조건까지 폭넓은 주제가 다뤄졌습니다. 이 글에서는 핵심 내용을 요약해 보겠습니다.1. PMF(Product-Market Fit)와 시장에서 먹히는 프로덕트✨ 문제 해결 능력이 핵심좋은 프로덕트를 만들기 위해서는 어떤 문제를 해결할 것인가를 명확히 정의해야 합니다.빠르게 딜리버리하는 능력이 중요하며, 이를 위해서는 개발을 직접 하지 않더라도 기획자가 조합하고 다룰 수 있는 능력을 갖추는 것이 중요합니다.기술적 혁신뿐만 아니라 운영에서 차별화된 전략을 갖춘 기업이 성공하는 경우도 많습니다. (예: 배달의민족, 쿠팡이츠)✨ 시장 분석과 포지셔닝해외 사례를 참고하는 것도 중요합니다. 특히 미국 시장에서는 SaaS(S..