2021/05/13 Update - createSelector shopping cart 연습예제

React는 프레임워크가 아닌 라이브러리?

상태관리 라이브러리에 대해서 포스팅을 하는 글에서 갑자기 뜬금없이 React가 프레임워크인지 아닌지에 대한 이야기를 하는 이유는 React에서는 상태관리와 라우팅을 기본적으로 제공하지 않기 때문에 라이브러리로 분류한다는 이야기를 하기 위해서이다. Vue와 Angular에서는 자체적으로 상태관리를 지원하기 때문에 프레임워크라고 하지만 React는 다르다.
하지만 생태계 자체로써 봤을때에는 React도 프레임워크이다.

React의 상태관리 라이브러리의 선택지 Redux와 MobX

React는 Vue와 Angular와 다르게 자체적으로 상태관리를 지원하지 않기 때문에 Redux나 MobX를 선택적으로 사용해서 상태를 관리한다.

ContextAPI + useReducer가 Redux와 MobX를 대체할 수 있다?

JavaScript를 ContextAPI+useReducer라고 하고, jQuery를 Redux나 MobX라고 비유한다면, ContextAPI+useReducer의 조합으로 Redux나 MobX를 구현할 수 있다는 결론이 나온다. 하지만 손쉽게 사용할 수 있도록 이미 만들어져 있는 Redux나 MobX를 사용하는 것이 좋다.

Read More

지난 과거의 나와 현재의 나 그리고 두려움을 극복하기 위한 자기반성

이번 포스팅에서는 나의 내적으로 좀 의미있는 반성의 시간을 갖으며, 글을 작성해보려고 한다.
반성이 없는 계획과 발전은 의미가 없기 때문에 시간이 많이 흘렀지만, 지난 나의 과거를 다시 되새기고 현재 내가 걱정하는 것과 두려워하는 것을 구체화시켜서 현재의 나를 좀 더 발전시켜 나가고자 한다.

우선 현재의 나는 프론트엔드 개발자로서 취업을 준비하고 있고, 내가 지원하고자 하는 포지션에서 필요로하는 기본적이고 중요한 기술적인 부분을 스스로 공부하며 자기개발을 해나가고 있는 중이다.

현재의 나에게 있어, 가장 큰 두려움은 제대로 된 개발자가 될 수 있을까?이다. 나에게 있어 제대로 된 개발자란, 자기개발을 꾸준히 하고, 견고한 어플리케이션 개발에 대해 끊임없이 고민을 하며, 내가 하는 일과 어플레케이션에 대해 자부심을 가지는 개발자가 되는 것이다.

나는 2018년 10월부터 2020년 4월 17일까지 짧다면 짧은 1년 반이라는 시간동안 일본에서 개발자로 일을 했었다. 그때 당시 내가 개발자로서 일을 하면서 느꼈고, 현재 내가 가지고 있는 두려움에 영향을 준 경험에 대해서 적어보며 직접 이 두려움에 직면해서 극복해보려고 한다.

Read More

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

프론트엔드 개발시 dummy 데이터 활용

만약 백엔드가 개발이 안된 상태에서 프론트엔드 개발을 진행해야 되는 경우라면 더미 데이터를 활용해서 우선적으로 프론트엔드 개발을 하도록 한다.
예를들어 로그인 화면을 만드는데, 로그인과 로그아웃등 상황에 따른 다른 프론트 페이지를 만들어야 한다면, 이 경우에 간단하게 더미로 상태 데이터를 만들어서 화면을 만들도록 한다.
실무에서는 Redux나 Mobx를 사용해서 dummy state를 만든다.

Container - Presenter 구조

이전에 클래스 컴포넌트로 작성을 했을때는 데이터를 받아서 로직을 처리하는 부분(Container)과 화면에 출력해주는 부분(Presenter)을 나눠서 구조를 짰는데, hooks가 도입된 이후에는 위와같이 구조를 나누는 것을 추천하지 않는다고 한다.

반복되는 작업은 처음만 수작업으로, 그 다음부터는 라이브러리 사용

수작업으로 만드는 하나 하나 만들어보는 것도 의미가 있다. 하지만 매번 하나 하나 만들어보는 것보다는 라이브러리를 사용해보는 연습을 하는 것도 중요하다. 실제 실무에서 모든 것을 수작업으로 만들지는 않기 때문이다.

자식 component에 props로 넘겨주는 함수의 경우에는 반드시 useCallback으로 감싸서 처리한다.

Re-rendering과 태그내에서의 인라인 스타일링

React에서는 VirtualDOM을 검사해서 이전 VirtualDOM 상태와 달라지는 부분이 있다면 해당 부분만 다시 렌더링한다. 렌더링을 최적화 시키기 위해서는 태그 내에서 인라인 스타일링하는 것을 지양해야 한다. 왜냐하면 태그내에서 스타일링을 해주는 경우 스타일을 객체 형태로 정의하게 되는데, 객체는 주소참조로, 값이 같더라도 서로 비교를 하면 다른 값으로 인식된다.
따라서 styled-components를 사용해서 스타일을 적용한 개별 컴포넌트로 생성을 하거나 useMemo를 사용해서 style을 별도로 정의해서 인라인 스타일로 정의해야 한다. useMemo는 값 자체를 캐싱하기 때문에 deps에서 설정한 값이 바뀌지 않는 한 재사용을 한다.

1
2
3
4
5

import styled from 'styled-components';

const wrapper = styled.div`
  margin-top: 10px;
`;

1
2

const style = useMemo(() => ({ marginTop: 10 }), []);
<div style={ style }>

Read More

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

React Router

React router의 React에서의 역할과 Website 개발시에 어떤 역할을 하는지에 대한 내용을 중점으로 내용을 정리해보려고 한다.

1

$ npm i react-router react-router-dom

react-router는 web/app에서 react-router를 사용하기 위한 기본 뼈대라고 이해하면 된다. 그리고 react-router-dom가 우리가 웹 개발시에 실제로 사용하는 것으로 react-router는 react-router-dom의 내부적으로 사용되는 것이다.

Read More

antd와 styled-components

antd 디자인을 사용해서 디자이너가 없어도 그럴듯하게 디자인을 할 수 있다. 다만 개성이 없어지는 특징이 있지만, 보통 실무에서 고객사 프로젝트를 할때에는 디자이너가 직접 커스텀 디자인을 하게 된다. antd 디자인을 사용하면 버튼이나 아이콘 등 질좋은 디자인 컴포넌트들을 사용할 수 있다.

https://ant.design/

styled-components와 emotion

react에서 css를 적용할때 전처리기(sass, less)를 사용하기도 하고, css를 적용해서 component를 생성할 수 있는 styled-components를 사용하기도 한다.
emotion은 styled-components와 매우 비슷하기 때문에 styled-components를 잘 익히고 나면 공식문서를 보고 바로 적용해서 쓸 수 있다. emotion은 SSR에 최적화해서 사용할 수 있다는 장점이 있기 때문에 시간날때 한 번 써보는 것을 권장한다.

Read More

useState에서 빈 배열([])로 초기화시키는 경우

typescript에서 useState hooks를 사용해서 초기 값을 빈 배열로 할 경우, 타입스크립트에서는 빈배열([])을 never type으로 인식하기 때문에 구체적인 타입을 지정해줘야 한다.

type 선언을 위해 사용한 interface는 같은 파일에서 정의를 하지 말고, 별도의 파일(types.ts)로 빼서 다른 파일에서 재사용 가능하도록 정의를 하는 것이 좋다.(코드의 가독성, 재사용성)
types.ts

1
2
3
4

export interface IDetailInfo {
  id: string;
  contents: string;
}

main.ts

1
2
3
4

import { IDetailInfo } from './types';
...
const [detail, setDetail] = useState<IDetailInfo[]>([]);
...

Read More

프로젝트 기본 구성

typescript, react, react-dom, webpack, webpack-cli 설치

1
2
3
4
5

$ npm i typescript
# 웹 환경에서는 react-dom, 모바일은 react-native
$ npm i react react-dom

$ npm i -D webpack webpack-cli

이전에 React에서 webpack + babel을 사용해서 JavaScript의 최신문법과 JSX 문법을 이전의 JavaScript 문법으로 변환해주었는데, 이번 TypeScript에서는 webpack + TypeScript 조합으로 변환을 해준다.

TypeScript는 자체적으로 babel처럼 최신문법이나 jsx 문법을 이전 문법(ES3 or ES5)으로 바꿔준다. 따라서 별도로 Babel을 사용할 필요는 없다. 하지만 TypeScript + Babel의 조합으로 사용하는 경우도 있기 때문에 이 부분을 알아두도록 하자.

Read More

NextJS 프로젝트 기본 설정

next v9

1

$ npm i next@9

package.json

1
2
3
4

"script": {
  "dev": "next",
  "build": "next build"
}

NextJS의 js파일에서는 import React from 'react';구문이 필요없다.

그 이유는 NextJS 프레임워크가 pages 폴더내의 js파일들을 code splitting된 개별적인 page component로 만들어주기 때문이다.

pages와 layout

React에서는 react-router로 routing 경로를 설정해줘야 했는데, NextJS는 front server를 가지고 있기 때문에 pages폴더내의 파일의 이름을 url로 자동 mapping 시켜준다.

pages/profile.js => /profile
pages/signup.js => /signup
pages/about/lee.js => /about/signup

Read More

SSR(Server-Side-Rendering)과 CSR(Client-Side-Rendering)의 차이

렌더링이란 요청받은 내용을 브라우저 화면에 표시하는 작업을 말한다. 그렇다면 SSR(Server Side Rendering)과 CSR(Client Side Rendering)은 어떤 차이가 있을까?
간단하게 동작방식을 노트에 그려보았다.

Read More