기록하는 습관.

들어가기 앞서서프론트엔드 개발을 준비한지 대략 2주의 시간이 지났습니다. 준비를 하는 동안 새롭게 학습한 것들이 많은데 학습 곡선이 두 번째로 깊었던 건 CSS였습니다. 누군가는 다른 기술을 학습하는 것보다 CSS나 HTML이 쉽다고 하던데 나는 왜이리 학습 곡선이 깊었을까?스스로에게 위의 질문을 하고 생각해보았습니다. 저는 개발에 있어서 일관성 있는 프로젝트의 구조와 코드의 재사용성을 가장 중요하게 생각합니다. CSS도 일관성있는 구조 및 의미있는 네이밍, 재사용성을 높이자는 열망을 갖고 임했습니다. 학습 초기에 이러한 생각이 저의 발목을 잡았고, 더뎌지지 않았나 싶습니다. 여러 시도 끝에 목표로하는 레이아웃을 만들게 되었고 이번 포스팅에 소개하고자 합니다.STEP 1. CSS, Grid 레이아웃 잡기..

팀에서 Docker를 사용하면 운영체제와 상관없이 일관성있는 개발환경을 유지할 수 있습니다.이번 포스팅에서는 로컬 환경 React코드가 실시간으로 반영(핫리로드)되는 Docker 격리환경(빌드환경) 구성을 목표로 합니다.STEP 1. Dockerfile Docker는 Dockerfile을 기반으로 이미지를 생성하고, 이 이미지를 Docker 컨테이너로 실행하는 흐름을 갖습니다.** 하나의 도커 이미지로 여러 개의 도커 컨테이너를 만들 수 있고, 각각의 컨테이너는 독립적으로 실행됩니다.DockerfileFROM node:18# Set working directoryWORKDIR /app# Install dependenciesCOPY package*.json ./RUN npm install# Copy all..

React의 기본적인 데이터 전달 흐름은 부모 컴포넌트(상위 컴포넌트)에서 자식 컴포넌트(하위 컴포넌트)로 전달합니다. 계층적인 컴포넌트 구조가 있을 때, 가장 하위 레벨의 컴포넌트가 가장 상위 레벨의 컴포넌트의 데이터 값을 필요로 한다면 이 값을 중간 레벨의 컴포넌트들이 넘겨줘야합니다.이는 단순히 중간 레벨의 컴포넌트가 하위 레벨 컴포넌트로 넘겨주는 역할로만 사용된다면 코드의 복잡성을 증가시켜 차후의 유지보수가 어렵게 됩니다. 이를 보완하고자 사용할 수 있는 것이 Context API입니다.STEP 1. Context APISTEP 1-1. 사용이유 및 용도, 유의사항 Context를 사용하면 기존에 props로 데이터를 전달하는 방법이 아닌 useContext()로 전달받아 하위 컴포넌트에서 사용합..

STEP 1. List와 Key일상생활에서 우리가 사용하는 키로는 주민등록번호, 학번, 핸드폰 번호, 여권번호가 있습니다. 모두다 고유하다는 값의 특징을 가지고 있습니다. 하지만 고유하다는 범위가 “대한민국”으로 한정되어 있습니다. 이는 특정 범위에서 고유하다는 말입니다.리액트에서는 고유하다는 것(고유성)을 “key”로 나타내며 이는 고유한 문자열입니다. 리액트에서의 특정 범위는 “List” 입니다. List는 key를 가지며 이는 ⭐List에서 어떤 아이템의 변경, 추가, 제거의 구분을 위해 사용합니다. 즉, 서로 다른 List에서 key값이 같더라도 영향이 없음을 말합니다.List 내에서만 고유한 값이면 됩니다.STEP 1-2 예시코드코드는 키값으로 숫자의 값을 사용합니다. 현재는 numbers 값..

React에서 클래스형 컴포넌트를 학습하며 bind() 학습에 많은 시간이 들었습니다.bind()를 학습하며 해소한 어려움을 잊지 않기 위해 기록합니다.STEP 1. 클래스형 컴포넌트의 bind()class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true }; // 초기 상태 설정 // 이벤트 핸들러에서 `this`를 바인딩 this.handleClick = this.handleClick.bind(this); } handleClick() { // prevState를 사용해 상태를 업데이트 ..

React 학습을 통해 프로젝트를 만들려고 합니다.학습을 하며 useEffect()를 이해하는데 큰 어려움이 있었습니다.기록을 통해 학습한 내용을 잊지 않기 위해 작성합니다.useEffect()STEP 1. "useEffect는 Side effect를 분리하기 위해 사용한다." useEffect는 Side effect를 작업을 분리하기 위해 사용합니다. Side effect는 컴포넌트의 렌더링 과정 외부에서 발생하는 작업입니다. 대표적으로 API 호출(데이터를 가져오거나 보내는 작업), DOM(React 외부에서 DOM을 직접 변경하는 작업), 타이머 작업(setInterval, setTimeout을 사용하는 작업), 구독 설정 (이벤트 리스너를 등록하거나 소켓 연결 설정)이 있습니다.STEP 1-2. ..