[React] 직접 제작한 리액트-타입스크립트-보일러플레이트 소개

[React] 직접 제작한 리액트-타입스크립트-보일러플레이트 소개

글 작성자: 주인 빠리 택시 운전사

👋 들어가며

오늘은 필자가 간단한 프로젝트를 시작할때마다 사용하는 React 와 TypeScript 를 이용한 보일러플레이트를 소개하고자한다. 해당 보일러플레이트의 링크는 다음과 같다.

🏗기본구조

기본은 create-react-app의 타입스크립트 템플릿

기본적으로 create-react-app의 타입스크립트 템플릿 기반입니다.

npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript

global-styles.ts

전역으로 쓰이는 CSS 파일은 global-styles.ts 라는 파일로 관리하고 있다. 해당 파일에는 각종 전역스타일과 웹상의 CDN 파일을 불러온다. 불러오는 CDN 종류는 다음과 같다.

normalize.css - 전역 CSS를 normalize한다. (reset과 다른 역할이다.)

Font Awesome - 각종 아이콘을 사용할 수 있다..

각종 웹 폰트 - 구글 웹폰트에서 가져오며 현재 배달의민족 도현, 송명, 나눔고딕, 나눔명조, 나눔손글씨 펜, 검은고딕를 사용중이다.

import { createGlobalStyle } from './typed-components'; import { fontSize, color, media } from './config/_mixin'; export const GlobalStyle = createGlobalStyle` /* normalize.css - https://necolas.github.io/normalize.css/ */ @import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"); /* Fontawesome - https://fontawesome.com/ */ @import url("https://use.fontawesome.com/releases/v5.11.2/css/all.css"); /* Web Fonts from Google Fonts 배달의민족 도현 - https://fonts.google.com/specimen/Do+Hyeon 송명 - https://fonts.google.com/specimen/Song+Myung 나눔 고딕 - https://fonts.google.com/specimen/Nanum+Gothic 나눔 명조 - https://fonts.google.com/specimen/Nanum+Myeongjo 나눔손글씨 펜 - https://fonts.google.com/specimen/Nanum+Pen+Script 검은고딕 - https://fonts.google.com/specimen/Black+Han+Sans Use the following CSS rules to specify these families: font-family: 'Black Han Sans', sans-serif; */ @import url("https://fonts.googleapis.com/css?family=Nanum+Gothic|Black+Han+Sans|Do+Hyeon|Song+Myung|Nanum+Myeongjo|Nanum+Pen+Script"); * { box-sizing: border-box; } body{ font-family: 'Nanum Gothic', sans-serif; font-size: ${fontSize.normalFontSize}; /* background-color: ${color.default.bgColor}; color: ${color.default.fontColor}; */ background-color: ${color.darkmode.bgColor}; color: ${color.darkmode.fontColor}; ${media.giant} { /* Giant View */ } ${media.desktop} { /* Desktop View */ } ${media.tablet} { /* Tablet View */ } ${media.phone} { /* Phone View */ } } a{ text-decoration: none !important; &:hover{ color: ${color.default.mainColor}; color: ${color.darkmode.mainColor}; } } button{ cursor: pointer; background-color: white; outline: none; border: none; &:active { outline: none; border: none; } } /* animations */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeIn { 0%{ opacity: 0; } 100%{ opacity: 1; } } `;

추가된 라이브러리

styled-components

개인 작업을 할 시 스타일과 로직이 분리되면 작업속도가 현저히 줄어든다. CSS상에서 컴포넌트상의 state 를 사용하고도 싶기도하고, 그렇다면 styled-components 를 사용하는 것이 좋다.

각종 포메터

기존에 사용하던 프로젝트와 코딩 경험을 동일하게 유지하기위해 2개의 포메터를 사용한다.

eslint

각종 eslint 와 관련된 패키지를 깔고 설정을 하여 사용중이다.

// .eslintrc { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], "plugins": ["react", "@typescript-eslint", "prettier"], "env": { "browser": true, "jasmine": true, "jest": true }, "settings": { "react": { "pragma": "React", "version": "detect" } }, "parser": "@typescript-eslint/parser" }

prettier

Visual Studio Code의 Prettier 확장프로그램과 함께 사용하고 있다.

// .prettierrc { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, "arrowParens": "always", "orderedImports": true }

버전관리

.nvmrc

.nvmrc 파일을 이용해 해당 프로젝트의 노드 버전을 통일하고 있다. 주로 노드의 LTS 버전을 사용하고 있다.

// .nvmrc 13.0.1

package.json

버전 관리를 위해 역시 package.json을 사용한다.

// package.json { "name": "react-typescript-boilerplate", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.11.0", "react-dom": "^16.11.0", "react-router": "^5.1.2", "react-scripts": "^3.3.0", "styled-components": "^4.4.0" }, "devDependencies": { "@testing-library/react": "^9.3.0", "@types/jest": "24.0.20", "@types/node": "12.11.7", "@types/react": "^16.9.11", "@types/react-dom": "16.9.3", "@types/react-router": "^5.1.2", "@types/styled-components": "^4.1.19", "@typescript-eslint/eslint-plugin": "^2.5.0", "@typescript-eslint/parser": "^2.5.0", "eslint": "^6.8.0", "eslint-config-react": "^1.1.7", "eslint-loader": "^3.0.2", "tslint": "^5.20.0", "typescript": "^3.6.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

from http://geonlee.tistory.com/204 by ccl(A) rewrite - 2020-03-15 22:54:14

댓글

댓글 쓰기

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅) 안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다. 사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다. $ yarn create react-app build-test $ cd build-test $ yarn build 그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다. 프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로, 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다. 그리고, 기본적으로 yarn create react-app으로 프로젝트를 만들면 로고 이미지 파일이 포함되었죠? 그런 이미지, 사운드 같은 정적 파일이 있다면 해당 파일을 위한 경로도 생성됩니다. 실제로 저 static 폴더를 열어 보면, js, css로 나뉘어 수많은 자바스크립트 파일이 하나로 합쳐지고, css 파일들도 하나로 합쳐지게 됩니다. 이러한 작업을 해주는 것이, 리액트를 처음 사용할 때 만났던 웹팩이라는 것인데요. 웹팩 설정에서 Chunks 기능이 작동하여 여러 파일들을 따로 분리시켜 효율적으로 캐싱해 줍니다. 실제로 static을 열어보면 자주 바뀌는 코드, main 코드 등등이 알아서 나뉘어 효율적으로 분리되어 있을 것입니다. 이렇게 파일을 분리하는 작업을 '코드 스플리팅'이라고 합니다. 지금은 CRA(create-react-app)으로 만들어진 아주아주 작고 기본적인 코드만 빌드되었기 때문에 파일의 크기가 아주 작습니다만, 프로젝트의 규모가커지면 A페이지에서 B,C,D 페이지에서 사용할 정보까지 모두 로드하면서 파일 크기가 ...
자세한 내용 보기

React에서 웹팩 설치하기

React에서 웹팩 설치하기 create-react-app을 하면 자동으로 웹팩 설정을 해주기 때문에 웹팩을 그다지 신경쓰지 않았지만 그래도 웹팩을 설치하는 방법을 알아야 한다. 세부적인 컨트롤과 개인화, 오류 수정 등의 문제가 존재하기 때문이다. 우선, 웹팩을 다루기 위해서는 node를 어느 정도 알아야 한다. React할 때 node를 알아야 한다는 이유가 웹팩을 활용하기 위해서이다. from http://darrengwon.tistory.com/177 by ccl(A) rewrite - 2020-03-21 05:20:13
자세한 내용 보기

스토리북에서 스토리를 작성하는 방법

스토리북에서 스토리를 작성하는 방법 스토리북은 스토리의 집합이다. 각각의 스토리는 컴포넌트의 하나의 시각적 상태를 나타낸다. 기술적으로 얘기하면 스토리는 스크린에 렌더링될 수 있는 어떤것을 리턴하는 함수이다. 기본 스토리 버튼 컴포넌트의 스토리에 대한 기본 예제이다. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Button', }; export const text = () => Hello Button; export const emoji = () => ( 😀 😎 👍 💯 ); named export(text, emoji)를 하게 되면 스토리북에서 스토리로 정의된다. default export는 스토리 그룹(Button)에 대한 메타데이터를 정의한다. export default { component: Button, title: 'Button', }; 위에서 이런 메타데이터를 정의했는데 이러한 포맷을 CSF(Component Story Format)이라고 한다. 링크 타이틀은 유니크해야한다. 스토리북 5.2 버전 이전에는 스토리를 정의하기 위해서 storiesOf API를 사용했어야 했다. 하지만 이제는 리액트 네이티브를 제외하고 모든 프레임워크에서 CSF 포맷을 사용할 수 있게 되었다. 스토리의 위치 • └── src └── components └── button ├── button.js └── button.stories.js 유지보수를 쉽게 하려면 스토리북 파일 (.stories.js)을 컴포넌트의 위치와 동일하게 하는게 좋다. 다른 방법도 두개 더 소개하고 있는데 그냥 이렇게 하는게 젤 깔끔한것...
자세한 내용 보기