들어가기 프로젝트의 규모가 커지고 관리해야 할 상태가 더 많아진다면 여러 가지 문제가 생길 수 있다. 먼저 리듀서 함수의 액션 타입(식별자)에서 오타가 난다거나, 식별자의 이름이 충돌되는 경우가 그렇다. 또 데이터와 상태가 많아질수록 리듀서 함수의 길이가 점점 길어지면서 유지보수하기 어려워질 수 있다. 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로 작성한 요소들의 스타..
💥 문제 상황 getSlideComponent라는 함수로 screenWitdh에 따라 적절한 캐러셀을 보여주려고 한다. screenWidth가 1200 이하면 MO 버전으로, 그 이상이면 PC 버전의 캐러셀을 보여주려고 한다. const getSlideComponent = () => { if (screenWidth 1200) { return slidesPC; } }; slidesMO, slidesPC는 모두 string[] 타입을 갖고 있다. const slidesPC = [ `${import.meta.env.VITE_PUBLIC_URL}/src/assets/img/carousel/딸기_PC.jpg`, `${import.meta.env.VITE_PUBLIC_URL}/src/assets/img/carous..
✏️ 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..
들어가기 이번 프로젝트에서는 styled-components를 사용했다. 이전에도 사용해본 적 있는 스타일링 라이브러리지만, 실질적으로 어떻게 동작하는지는 모르고 있었다. 😅 (그저 CSS-in-JS라는 것과 ``으로 감싸 스타일링 하면 된다는 매우 단순한 기본 문법만 알고 있었다.) 이번 기회에 내가 왜 많은 스타일링 프레임워크 중 styled-components를 골랐는지, 이 기술의 장단점과 동작 원리에 대해 알아보았다. 왜 도입했는가? 먼저 이세계 MBTI를 만들기 전, 곰곰 다이어리를 만들 때에도 진행바를 구현한 적이 있었다. 진행바를 동적으로 스타일링 해야 했는데, CSS module을 사용하고 있어 인라인 태그로 스타일링을 구현할 수 밖에 없었다. 인라인 스타일을 지양해야 하는 이유는 가독성..
들어가기 개발자지만 아이러니하게도 이세계 MBTI를 만들면서 개발만큼 신경썼던 부분이 디자인이었다. 몇 번 개발을 하면서 '내가 힘들게 만든 내 새끼... 다른 사람들도 봐주면 좋을텐데' 라는 생각이 많이 들었다. MBTI 테스트를 2번이나 만든 이유도 MBTI 테스트 같은 스낵 컨텐츠는 비교적 유저 유입이 쉬울 것 같아서였다. 실제로 지인이 필요한 곰곰 다이어리(ㅠㅠ)는 참여율이 저조했으나 이세계 MBTI는 단시간 내 제법 높은 유입을 기록했다. 요는 사람들이 할만한 테스트를 만들고 싶었던 건데, box-shadow, text-shadow 등 몽환적인 톤앤매너를 가져가는 동시에 게임 사이트처럼 BGM을 넣고 싶었다. 우연히 어떤 게임 사이트를 들어갔는데 BGM이 잘 어울려서 이것저것 눌러봤던 개인적인 ..
들어가기 yarn + Vite + TS로 웹 개발 시 진행하는 절차를 기록하려고 한다. 최근까지 작업한 이세계 MBTI는 JS -> TS로 마이그레이션 한 거지, 처음부터 작업한 건 아니었다. 이번에 CSS 및 반응형 작업을 해보기 위해 갱규님과 작업을 새로 하게 되어 바로 TS로 진행하기로 했다. 대부분 TS 강의가 TS 문법 및 개념 설명에 그쳐서 실질적으로 웹 개발에 만날 여러 에러들이 기대된다 ^_^... 프로젝트 생성하기 Vite와 CRA에 대해서도 좀 더 스터디 해봐야겠지만, React 공식 문서에서 CRA가 빠진지 꽤 되었고 Vite가 훨씬 성능이 좋기 때문에 최근에는 Vite가 더 많이 사용되고 있다. 최근 개발 흐름이 Vite로 넘어가고 있어서 나도 공부해보고자 Vite를 써보고 있다. ..
