Intro디프만 15기에 합류하게 되면서 스터디에도 욕심을 내봤다. 솔직히 프로젝트를 위해서 글을 쓰는 오늘 시점부터 배울 것이 너무나 많아져서 내가 너무 황새 따라가려다 다리가 찢어지는 거 아닐까 약간! 아주 약간! 🥲 걱정이 되긴 하지만, 간단하게라도 혼자가 아니라 사람들과 공유하면서 배워가는 경험을 얻고 싶었다. 그러나 좀처럼 프론트엔드 직무에 적합한 스터디 공고가 올라오지 않고 있었는데, 다행히 같은 팀인 HM님이 테스트 코드 관련 강의 스터디 공고를 올리셔서 이번 스터디는 프론트엔드의 테스트 코드를 간단하게 알아보는 것으로 진행하게 되었다. 아주 예전에 React 강의에 묶음으로 있었던 Jest로 테스트 코드가 무엇이고 왜 쓰는 것인지는 한 번 찍먹을 해봤지만, 당시에는 React를 사용하는..
상황App.tsx에 다양한 경로를 만들었는데 Nav를 추가하게 됐다.여러 페이지들 중 Home, Recommend, My page에만 Nav를 추가하려고 한다. } /> } /> } /> } /> } /> } /> } /> } /> } /> /, /recommend, /mypage에만 nav를 추가하려면 react router의 outlet을 사용하면 된다.OutletAn should be used in..
들어가기 예전부터 React로 개발하면 맨 윗줄에 import React from 'react'를 쓰는 게 거의 관행이었다. 뭔가 왜? 라는 의문을 가질 것도 없이 그렇게 해야 React를 쓸 수 있다고 이해했기 때문이었고, 단축키인 rafce를 사용하면 알아서 import React from 'react'가 포함된 화살표 함수 컴포넌트를 만들어주기 때문에 크게 불편함을 느끼지 못하고 있었다. 그런데 어느 순간부터 import React from 'react'에 밑줄이 쳐지면서 아래와 같은 메세지가 생겼다. 이게 불편하다는 걸 인지하게 된 첫 번째 이유는 "안 쓰고 있는데... 왜 이걸 import 해야 하지?" 라는 의문이었다. 두 번째로는 저걸 지우지 않은 상태로 Vercel을 사용해 빌드를 했더니 ..
들어가기 프로젝트의 규모가 커지고 관리해야 할 상태가 더 많아진다면 여러 가지 문제가 생길 수 있다. 먼저 리듀서 함수의 액션 타입(식별자)에서 오타가 난다거나, 식별자의 이름이 충돌되는 경우가 그렇다. 또 데이터와 상태가 많아질수록 리듀서 함수의 길이가 점점 길어지면서 유지보수하기 어려워질 수 있다. const counterReducer = (state = initialState, action) => { if (action.type === 'plus') { return { counter: state.counter + 1, showCounter: state.showCounter, }; } if (action.type === 'minus') { return { counter: state.counter - ..
들어가기 이전 글에서 + 버튼과 - 버튼을 눌러 1씩 증감하는 카운터를 만들었다. 매우 단순하게 하나의 action을 다뤘는데, 지금부터는 아주 약간 더 다양한 것을 하려고 한다. 예를 들어 1가 아니라 5씩 증가하는 버튼이나, 카운터 버튼이 보였다/보이지 않는 토글 같은 것은 어떻게 만들 수 있을까? payload 먼저 5씩 증가하는 버튼을 만들고 싶다면 어떻게 해야 할까? if (action.type === '5 plus') { return { counter: state.counter + 5, }; } 물론 이렇게 해도 상관 없지만, 이는 확장성이 떨어진다. action에 원하는 속성을 추가하는 더 좋은 방법이 있다. action은 객체라는 점을 기억하고 가자. const morePlusHandler..
들어가기 지난 번 글에서 Redux에 대해 간단히 알아보았다. React에서는 Redux Store를 어떻게 만들고, 어떻게 제공하고 그 데이터를 어떻게 사용하는지 예제를 통해 알아보자. Store 만들기 만들기 전에 먼저 yarn add(또는 npm i) redux react-redux로 라이브러리를 설치한다. 이전에 적었는지 모르겠지만 Redux는 React에서만 사용할 수 있는 라이브러리가 아니기 때문에 react-redux도 설치해야 한다. store 폴더를 만들고 index.js를 생성한다. 꼭 폴더명을 store로 할 필요는 없지만 통상적으로 store라고 사용하니 절대다수를 따라주자. import { createStore } from 'redux'; const counterReducer = ..
Redux란 A state management system for cross-component or app-wide state 컴포넌트 간 상태 또는 앱 전역 상태를 위한 상태 관리 시스템 상태는 3가지로 나눌 수 있다. 1. 로컬 상태: 데이터가 변경되어 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 2. 컴포넌트 간 상태: 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 상태 (props drilling을 거치는) 3. 전역 상태: 애플리케이션의 모든 컴포넌트에 영향을 미치는 상태(사용자 인증 같은) 컴포넌트 간 상태나 전역 상태의 경우, 데이터를 넣고 전체 props 함수를 업데이트 하는 행위는 번거로울 수 있다. 그래서 React가 내부에서 지원하는 Context가 존재하고, 이를 ..
React.js의 렌더링 방식 React의 렌더링 방식을 살피기 전, 웹 브라우저가 어떻게 동작하는지 먼저 알아보자. 웹 브라우저의 동작 브라우저는 HTML, CSS로 작성한 웹 페이지를 화면에 렌더링한다. 이 렌더링 과정은 Critical Rendering Path를 이뤄진다. 1단계: HTML -> DOM, CSS -> CSSOM으로 변환한다. 이 때 DOM은 문서 객체 모델의 약자로, HTML을 브라우저가 해석하기 편한 방식으로 변환한 '객체 트리'를 말한다. CSSOM도 동일하다. 2단계: Render Tree DOM + CSSOM = Render Tree 웹 페이지의 청사진으로, DOM에는 HTML로 작성한 요소들의 배치 및 모양을 기술한 정보가 있고 CSSOM에는 CSS로 작성한 요소들의 스타..
✏️ Describing the UI : Rendering Lists React에서 filter와 map을 이용해 데이터 배열을 필터링하고 컴포넌트 배열로 반환할 수 있다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이런 콘텐츠 목록이 있을 때, 해당 데이터에 뭔가를 추가하게 되면 수동으로 코드를 고쳐줘야 한다. 이 때 해당 데이터를 구조화 하면 유지보수에도 용이하고 코드의 가독성도 좋아진다. const people..
Vite의 환경 변수 곰곰 다이어리와 이세계 MBTI에서는 Vite를 사용했다. 이번 글의 주제가 번들러는 아니기 때문에 간단하게 설명하면 Vite는 CRA와 같은 번들러다. CRA(create-react-app)으로 대부분의 프로젝트를 생성하는데, 프로젝트 크기가 크고 빌드 속도가 느리다는 단점이 있다. CRA의 대체제로 부상한 것이 Vite인데, 이 Vite는 CRA에서 환경 변수를 사용할 때와 방법이 조금 다르다. CRA에서는 1. .env 파일 생성 2. REACT_APP 으로 변수명이 시작되는 변수 생성 3. 따옴표로 감싸거나 띄어쓰기를 사용하지 않는다. 4. 사용 시 process.env.변수명 으로 호출한다. REACT_APP_TEST_DATA = hello process.env.REACT..
