사이트는 이미 배포했지만... 그동안 [42byte]를 제작하면서 배운 내용들을 차근차근 업로드해보고자 한다. 제작하면서 그때그때 업로드 했으면 정말 좋았겠지만 🥲 지금이라도 늦지 않았어...!

[42byte]는 프론트의 기초를 나름 배워버린 나의 첫~! 프로젝트였다. 휴파님의 권유로 타입스크립트를 사용하게 되었는데, 처음 사용해보는 거라 정말 별의 별일이 다 있었다. 이번 포스트에서는 리액트와 타입스크립트로 프로젝트를 시작하는 데 필요한 단계들을 정리해보려고 한다.

1. TypeScript란 무엇인가?

그에 앞서 먼저 타입스크립트가 무엇인지에 대해 알아보자. 이름에서 알 수 있듯이 타입스크립트는 자바스크립트 기반에 타입 문법을 추가한 프로그래밍 언어이다. 자바스크립트 기반인 만큼, 타입과 관련된 문법만 익히고 나니 금방 적응할 수 있었다. 타입스크립트의 특징에는 크게 세 가지가 있다.

1. 컴파일 언어, 정적 타입 언어
   동적 타입의 인터프리터 언어인 자바스크립트에 반해 타입스크립트는 정적 타입의 컴파일 언어이다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환되는데, 런타임에서 오류를 발견하는 자바스크립트와 다르게 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다.
   
   
2. 자바스크립트 슈퍼셋(Superset)
   타입스크립트는 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이기 때문에 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.
   
   
3. 객체 지향 프로그래밍 지원
   타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

타입스크립트의 단점은 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고, 타입이 추가됨으로 코드량이 증가하며, 컴파일 시간이 오래 걸린다는 것이다. 그럼에도 불구하고 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다는 커다란 장점이 있기 때문에 널리 사용되고 있는 것 같다.

2. 프로젝트 시작하기

react

1. 설치

npx create-react-app <appname> --template=typescript

2. 사용

import React from 'react';

react-router-dom

1. 설치

npm install react-router-dom

2. 사용

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

styled-components

1. 설치

npm install styled-components

2. 사용

import styled from 'styled-components';

이번 프로젝트에서는 styled-components를 스타일링 프레임워크로 사용했다. 컴포넌트에 이름을 붙여 특정 스타일링을 할 수 있어서 재사용성을 더 높일 수 있다는 장점이 있지만, 함수의 구조를 알아보기 힘들다는 단점도 있었던 것 같다. 다음 프로젝트에서는 scss도 사용해보고 싶다.

typescript

1. 설치

npm install -g typescript
npm i --save-dev @type

2. 사용
   Menubar(예시) 라는 폴더를 만들어서 그 안에 파일을 만든다.
   

• Menubar.tsx
  tsx 확장자 : jsx 문법 함께 사용
  ts 파일에서 styled-components를 import 해서 사용한다.

import { Container, List } from './styled';

• styled.ts

import styled from 'styled-components;

export const Container = styled.div``;
export const List = styled.div``;

ESLint(Ecma Script Lint)

: 자바스크립트 문법 에러를 표시해주는 도구이다.

1. 설치

npx eslint --init

2. 설정

   ✔ How would you like to use ESLint? · style
   ✔ What type of modules does your project use? · esm
   ✔ Which framework does your project use? · react
   ✔ Does your project use TypeScript? · No / Yes
   ✔ Where does your code run? · browser
   ✔ How would you like to define a style for your project? · guide
   ✔ Which style guide do you want to follow? · airbnb
   ✔ What format do you want your config file to be in? · JSON

npm i -D eslint-config-airbnb-base
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-prettier eslint-config-prettier

여기까지 간단한 설치 목록을 정리해봤다. 다음 포스트엔 무엇을 올릴지... 고민해봐야겠다. 😂

3. 참고자료

https://www.samsungsds.com/kr/insights/TypeScript.html