미리보기 결과부터 빠르게 봅시다 구현전략 🙄 서로 다른 컬럼을 가진 데이터들은 어떻게 thead를 구성해야 할까 페이지에서 column 배열을 만들어 테이블 컴포넌트에게 전달하고 내부에서 테이블 헤더를 생성한다 🤨 서로 다른 타입을 가진 데이터를 하나의 테이블에서 어떻게 분기처리 해야 할까 각각의 페이지에서 data를 테이블 컴포넌트에게 전달한다 제네릭을 이용하여 테이블 컴포넌트의 props로 받는 data를 map함수를 이용해 로우를 생성한다 😎 <span style="color: rgba(16,185

1. 프롤로그 리액트는 기본적으로 데이터 흐름이 하향식(top-down)이다 즉, 부모에서 자식으로 객체(props)를 내려주는 방식인데 간혹 부모 컴포넌트의 상태변화가 자식으로 인하여 영향을 받아야 할때도 있다 버튼 클릭 시 리스트의 아이템 생성이 대표적이다. 이때, State 끌어올리기를 사용할 수 있지만 문제는 Props drilling이 발생될 수 있다는 것. 그렇기에 공통으로 사용할 수 있는 Store를 만들어 상태를 저장하고 상태의 변화에 따라 액션을 주고 관리하는 것이 Redux이며, 이것이 Redux의 존재이유라 할 수 있다. 👏👏👏 다

1. 프롤로그 대다수의 개발자들에게 SPA의 단점이 무엇인가 물어보면 SEO를 많이 얘기한다 SEO가 왜? 🤔🤔🤔 2. SEO 검색 엔진 최적화(Search Engine Optimization)는 사이트를 검색 결과에 잘 노출될 수 있도록 하는 것인데 구글, 네이버와 같은 검색 엔진은 자체적으로 만든 검색봇을 이용해서 수 많은 웹페이지에서 검색 결과에 근접한 페이지를 최상위에 매칭해준다 3. Rendering 이때, 검색봇이 수집할 때 활용하는 것으로 웹 브라우저 기반 해석(렌더링)이 있다. > 대표적인 웹 브라우저 렌더링 방식 > > 1. Client-side rendering(CSR) > 1. Server side rendering(SSR) 핵심은 검색 엔진이 렌더링된 웹페이지를 해석할 때 자바스크립트를 사용하여

1. 프롤로그 &nbsp; &nbsp; &nbsp; 🤔리액트에서는 트래픽 추적을 어떻게 해야 할까? 고민을 하게된건 다음과 같은 상황이었다. > (전체회의 중) > CEO : 이번에 ΔΔ기업에서 우리 서비스를 인수하고 싶다네요? > CTO : 그쪽에서 트래픽도 요구할 수 있겠네요 > CEO : 예 어려운 작업인가요? > CTO : 간단합니다😙 구글, 알렉사, 시밀러웹 등 트래픽 추적 기능을 제공하는 플랫폼 덕분에 실제로 개발자가 처리해야 할 내용은 비교적 단순하다 2. 트래픽 추적 우리 서비스는 구글에서 제공하는 Google Analytics를 이용해서 트래픽을 추적하기로 결정했다 &nbsp; 싱글페이지 환경의 리액트에서 Google Analytics를 도입하기 앞서 일반적인 멀티페이지 환경에서는 기존에 어떻게 적용했고 어떠한 방식으로 동작했었나를 확인

1. 프롤로그 input, select, button 등 폼 데이터를 다루기 위해 자주 사용되는 요소들이 있다 이러한 엘리먼트에 styled-components로 스타일 구성을 하거나 혹은 커스텀 훅을 사용하여 상태를 관리할 수 있도록 직접 함수 컴포넌트를 만들어 사용한다 🤔🤔🤔 그렇다면 ref를 함수 컴포넌트에서 어떻게 사용하는지 알아보자 2. ref 이해하기 ref가 왜 필요한지 잠시 살펴보자면 (알고 있다면 pass 하도록 하자👏) 기존 자바스크립트에서는 id, class, name, data 등 속성을 지정하여 getElementById와 같은 메서드를 사용하여 선택자로 선언할 수 있었다 ref란 리액트에서 DOM 엘리먼트에 <span style="background-color: rgba(32, 201, 151,

1. 프롤로그 어떻게 하면 빠르게 되는건데?🤔 내가 만든 서비스의 성능을 개선해 보고 싶다면 성능을 끌어올릴 수 있는 것에는 어떠한 방법들이 있는지 알아야 한다 > 대표적인 성능 최적화 방법 > > 1. 코드 분할 > 1. 코드 리팩토링 > 1. 코드 압축&난독화 > 1. 리소스 줄이기 > 1. 리렌더링 방지 > 1. 트리쉐이킹 > 1. 레이아웃 스래싱 회피 너무도 많다!! 그러나 해야만 한다😭 오늘은 저 중에서 코드 분할만 다뤄보겠다 2. 코드 분할 코드 분할(Code-Splitting)이란 브라우저가 페이지를 렌더링하기 위해 리소스를 다운받아야 하나 한 번에 전부 받는 것이 아니라 화면 구성에 필요한 부분만 잘라내어 다운로드 하는 작업을 말한다 그렇다면 리액트에서는 어떤 방법으로 코드 분할을 할 수 있을까?🍕 2-1. React.lazy React 자체에 내장되어 있는 <span style="bac

1. 프롤로그 React는 Redux, MobX, Context를 이용해서 전역에서 props를 공유할 수 있다 그렇다면 한 번 적용해보면서 현업에서 사용할 수 있을지 따져보자 오늘 다뤄볼 예제는 다음과 같은 미션이 있다. > 1. Context로 데이터를 공유했으면 좋겠어요 > 2. Hook도 사용해 주세요 > 3. 인증 여부에 따라 로그인/비로그인 화면을 나눠주세요 2. Context React 서버가 정상적으로 구동되었다는 전제하에 Context를 만들어 하위 컴포넌트에서 데이터를 조작할 수 있도록 파일을 하나씩 만들면서 알아보도록 하자😙 루트 경로에 ‘src’ 폴더를 하나 생성하고 ‘context’ 폴더를 하나 더 만들어 AuthContext.js 파일을 생성하고 context를 만들기 위해 ‘createContext’를 import 하면 된다 > ‘useState’ Hook으로 사용자의 인증여부에 따라 ‘auth’의 값을

1. 프롤로그 Styled-Component나 meterial-UI, Ant-deign 등 React 애플리케이션 개발을 더 빠르고 쉽게 만들어주는 컴포넌트 라이브러리가 존재한다 이번 시간엔 Emotion으로 스타일링을 적용해보자 기본적인 환경 설정을 위해 프로젝트를 하나 만들고 터미널을 열어 아래의 명령어를 입력해준다 > @emotion/css 공식 문서에서 자세한 내용을 참고할 수 있다 2. @emotion/css 기본적인 사용 예시를 한번 보자면 className이 중복없이 자동으로 부여 되는 특징을 가지고 있고 객체 안에서 템플릿 리터럴을 이용할 수 도 있다 > ‘base’와 같이 컴포지션 타입으로 만들어 두면 위와 같이 재사용이 가능하다 3. @emotion/react React에서 사용하기 편하도록 만들어진 라이브러리이다 css prop을 지원하는 것이

1. 프롤로그 &nbsp; &nbsp; &nbsp; 🤔SPA인데 엔트리 포인트를 나눠? 왜!!? 라고 생각될 테지만... 실제로 규모가 큰 프로젝트를 SPA로 구축하다 보면 처음 계획과 달리 달갑지 않은 선택의 순간이 찾아오기 마련이다. 예를 들면 다음과 같은 상황이다. > (프로젝트 종료 후) > 클라이언트 : 아 참 문의하기 기능도 필요한데.. > 기획자 : 문의 글을 볼 수 있는 관리자 화면도 필요하겠군요! > 클라이언트 : 센스쟁이! 이메일 연동도 되는 거죠? > 기획자 : 당연히 되죠 🤣🤣🤣 > . > .. > ... > 개발자 : tlqkf 실제로 이런 경험을 겪은 개발자들이 적지 않을 것이다 자 그럼 본론으로 돌아와서 관리자 화면도 일반화면과 동일하게 하나의 .html에서 라우팅 처리만 적용하면 되는 거 아닌가 하고 의문이 들 수 있다. 1-1. 해결과제 > ✋ 해결해야 할 과제 > 1. 늘어난 정적리소스를