개발을 하기 전 왜 이 기술들을 사용하는지 먼저 알아보는 것이 중요하다고 생각한다. 각 기술들에 대해 정리를 한 후 틱택토 만들기를 시작할 것이다.
React
1.Virtual DOM 사용
기존의 웹사이트 구현 방식은 웹 브라우저가 웹사이트의 텍스트 문서를 읽어서 DOM이라는 트리 구조로 바꾸어 사용자에게 보여주고, 웹 개발자는 사용자들에 반응에 따라 웹사이트를 갱신하는 방식이다. 하지만 작은 변화들을 매번 갱신하는 것은 효율적이지 못하고 성능에 좋지 않다. 이러한 문제를 해결하기 위해 React는Virtual DOM을 사용하여 개발자들이 변화를 주고 싶은 부분만Virtual DOM에서 수정하고 원래 DOM과의 차이점을 비교해 그 차이점만 반영하며 성능을 향상 시킨다.
2. 기존 DOM의 문제를 해결하기 위해 나온 기술들 중 유일하게 라이브러리임 사실 기존의 DOM의 방식에 한계를 느껴 Vitual DOM을 적용한 것은 React만이 아니다. React를 제외하고 대표적으로 Angular.js와 Vue.js가 있다. 근데 이들보다 React를 많이 사용하는 이유는 무엇일까? Vue와 Angular는 프레임워크인 반면 React는 라이브러리이기 때문이다. 전체적인 구조와 규칙이 강하게 정해져 있어 그들의 규칙을 따라야하는 프레임워크에 비해 기존 자바스크립트 기반의 문법을 사용할 수 있는 React를 더 선호하는 것이다.
대표적인 부분만 설명하고 넘어가겠지만 이것 이외에도 컴포넌트 기반 아키텍처를 채택하여 컴포넌트를 쉽게 재사용하여 코드를 짜는 과정에서의 효율을 높여주는 것이나 리액트 네이티브의 강점 등 개발자들이 React를 채택한 이유는 정말 많고 다양하다.
TypeScript
타입스크립트란 자바스크립트 기반의 정적 타입 문법을 추가한 프로그래밍 언어이다. 더 자세히 말하자면 자바스크립트의 상위 확장자로 자바스크립트의 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍 할 시 자바스크립트로 컴파일하여 실행할 수 있도록 만들어진 언어이다.
동적으로 타입을 지정하는 자바스크립트의 문제를 해결하고자 나온 언어이며 타입스크립트를 사용하며 컴파일 에러를 예방하고 손쉽게 디버깅을 할 수 있다. 그리고 자바스크립트의 슈퍼셋 즉 상위 확장자 이기 때문에 모든 자바스크립트 프로젝트를 커버할 수 있기 때문에 타입스크립트를 사용하는 것이다.
이러한 타입스크립트가 장점만 있는 것은 아니다. 매번 타입 지정을 해야하기에 이 과정에서 발생하는 에러를 해결하며 시간을 뺏기는 등의 생산성 저하가 발생할 수 있다. 근데 이를 해결하기 위한 방법 중 하나가 컴포넌트 기반 개발을 지원하는 라이브러리나 프레임워크를 사용하는 것인데, React가 바로 컴포넌트 기반 개발을 지원하는 라이브러이이다.
▷ extends (type에서도 비슷한 기능 존재 >> type 이름 = 기존에 있던 타입 $ {})
interface 이름 extends 기존에 만든 타입 {}
위와 같이 적어서 기존에 있던 타입을 불러올 수 있다. 이 경우엔 중괄호 안에 아무것도 적지 않아도 된다. 추가된 변수가 있다면 적어준다.
▷ Omit
기존에 지정한 타입에서 어떤 것을 뺴고 싶을 때 사용한다.
export type 이름 = Omit<기존 타입, 빼고 싶은 변수 이름>
interface 이름 extends Omit<기존타입, 빼고 싶은 변수이름> {}
▷ Pick
원하는 것만 선택하여 가져오고 싶을 경울 사용
export type 이름 = Pick<타입 이름, 가져오고싶은 변수이름>
▷ API로 호출한 데이터에 타입 지정 (제네릭 문법 활용)
export type 이름<T>{
data: T[ ],
같이오는 값 변수 : 타입,
...
}
위처럼 지정한 후 API로 데이터를 호출할때 T부분에 불러오는 데이터 타입을 적어주면 된다.
emotion
왜 이모션을 사용하는지에 대해 몇가지를 알아봤다.
className이 자동으로 부여되기 때문에 스타일이 겹칠 염려가 없다.
재사용이 가능하다.
styled component 사용방식과 css prop 기능을 지원하여 확장에 용이하다.
React 사용하기 위해 @emotion/react를 설치하고 styled component를 사용하기 위해@emotion/styled를 설치한다.
styled component보다 파일 사이즈가 작고, SSR시 서버 작업이 필요없다.
보통styled component랑 비교를 많이 하는데styled component보다 크기가 작고 SSR 서버 작업 없이 할 수 있다는 것에서styled component에 비해 메리트가 있다고 생각했다. 그리고 className이 자동 부여되어 겹치는 것을 방지할 수 있는 것도 유용하기에 emotion을 사용하는 것 같다.
- emotion 사용 방법
설치
CSS Props
yarn add @emotion/react
(사용 예시 1)
/** @jsxImportSource @emotion/react */
//React의 jsx() 함수를 사용하지 말고 Emotion의 jsx() 함수를 사용한다.
import { css } from "@emotion/react";
css style = css`
color: hotpink;
`
const SomeComponent = ({ children }) => (
<div css={style}>
Some hotpink text.
{children}
</div>
);
const anotherStyle = css({
textDecoration: 'underline'
});
const AnotherComponent = () => (
<div css={anotherStyle}> Some text with an underline. </div>
)
render(
<SomeComponent>
<AnotherComponent/>
</SomeComponent>
)
