[웹 풀사이클 데브코스 TIL] 15주차 Day 3 - 리액트 폴더구조와 TSC, global style

일반적인 프로젝트 폴더(디렉토리) 구조

1. pages - 라우트에 대응 하는 페이지 컴포넌트(컨테이너)
   이 페이지가 렌더링 되어 화면에 보여집니다
2. components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트를 분리해서 넣습니다
   ex) common > Header ,  user > Profile
3. utils - 유틸리티
   유틸리티 함수와 간단한 도우미 함수들을 포함하며, 이 함수들은 여러 컴포넌트나 모듈에서 공통적으로 사용할 수 있습니다
   ex) formatDate.js (날짜를 특정 형식으로 포맷하는 함수), capitalizeString.js (문자열을 대문자로 변환하는 함수)
4. hooks - 리액트 훅
   커스텀 리액트 훅 함수들을 포함합니다. 이러한 훅들은 컴포넌트 로직을 재사용 하기 위해 만들어집니다.
   ex) useLocalStorage.js (로컬 스토리지와 상호작용 하는 훅), useAPI.js (외부 API 와 통신하는 훅)
5. model - 모델(타입)
   애플리케이션에서 사용되는 데이터 모델을 정의합니다. 주로 데이터 구조를 표현하고 유효성 검사나 변환을 수행할 수 있습니다
   User.js, Post.js (주로 interface를 포함)
6. api - 외부 API와의 통신을 관리하는 코드를 포함. 주로 API 요청을 보내고 응답을 처리하는 함수들이 위치합니다
   userService.js, postService.js (사용자, 게시물 관련 API 요청을 처리하는 모듈)

 

타입 오류를 체크하는 CLI 명령어 설정

package.json 파일의 scripts 객체 안에 명령어 추가

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "typecheck": "tsc --noEmit --skipLibCheck"
  },

 

터미널에서 `npm run typecheck` 명령어를 실행합니다 ( ᵔ ᗢ ᵔ )

 

>> TypeScript  컴파일러 (TSC)란 ?

TypeScript는 JavaScript에 정적 타입을 추가한 언어로, TypeScript 코드를 JavaScript로 변환하기 위해서는

TypeScript 컴파일러인 `tsc`를 사용해야 합니다.

 

1. tsc 명령어란?

tsc 명령어는 TypeScript 파일을 컴파일하여 JavaScript 파일로 변환하는 데 사용됩니다. TypeScript 컴파일러는 TypeScript 코드를 분석하고 해당 코드를 JavaScript로 변환합니다.

2. tsc 명령어의 사용법

tsc 명령어는 다음과 같은 기본적인 사용법을 가지고 있습니다.

tsc [옵션][파일...]

 

예를들어 `app.ts` 라는  TypeScript 파일을 컴파일 하여 `app.js` 파일로 생성하려면 다음과 같이 명령어를 실행할 수 있습니다.

tsc app.ts

3. tsc 명령어의 옵션

tsc 명령어는 다양한 옵션을 제공하여 컴파일 과정을 제어할 수 있습니다. 주요 옵션은 다음과 같습니다:

• --target: ECMAScript 대상 버전을 지정합니다. 예를 들어, --target ES5는 ECMAScript 5로 컴파일합니다.
• --outDir: 출력 디렉토리를 지정합니다. 컴파일된 JavaScript 파일이 저장될 디렉토리를 지정할 수 있습니다.
• --watch: 파일 변경을 감지하여 자동으로 다시 컴파일합니다.
• --strict: 엄격한 타입 검사를 활성화합니다.
• --esModuleInterop: CommonJS 및 ES 모듈 간의 상호 운용성을 허용합니다.

예를 들어, --target ES6, --outDir dist, --watch와 함께 사용하여 ECMAScript 6로 컴파일하고 결과 파일을 dist 디렉토리에 저장하며 파일 변경을 감지하여 자동으로 다시 컴파일할 수 있습니다.

 

+ 추가로 앞에서 typecheck를 위해 사용된 명령어 옵션에 대해서 알아보겠습니다.

• --noEmit: 이 옵션은 JavaScript 파일로의 변환을 하지 않도록 설정합니다. 즉, TypeScript 파일을 JavaScript 파일로 변환하지 않습니다. 단순히 타입 체크만을 수행합니다.
• --skipLibCheck: 이 옵션은 라이브러리 파일의 타입 체크를 건너뛰도록 설정합니다. 보통 라이브러리 파일에 대해서는 타입 체크를 할 필요가 없으므로, 이 옵션을 사용하여 불필요한 타입 체크 시간을 절약할 수 있습니다. (외부 라이브러리는 타입체크를 하지 않게 하는 명령어)

 

global style

1. global = 전역(프로젝트 전체에 적용) = 프로젝트에 일관된 스타일링을 적용합니다
2. `user agent stylesheet`로 표시되는 브라우저의 기본 스타일이 차이를 만듭니다
3.  브라우저 간의 스타일 차이를 극복하기 위해 사용합니다

• 에릭마이어의 reset css
  기본 스타일을 초기화하여 각 요소의 스타일을 일관되게 만드는 스타일 시트입니다
  reset css를 사용하면 모든 브라우저에서 동일한 시작점을 갖게 되어 스타일링을 시작할 떄 일관성 있는 결과를 얻을 수 있습니다.
• normalize.css
  브라우저 간의 스타일 차이를 보완하고 일관된 스타일을 제공하는 스타일 시트입니다.
  reset css와 달리 요소의 스타일을 완전히 초기화 하지 않고, 브라우저 간 일관성 있는 스타일을 유지하면서 기본 요소의 스타일을 보정합니다.
• sanitize.css ✔️ (프로젝트에 적용)
  모든 요소의 스타일을 초기화하지 않고 일부 요소의 스타일만 리셋하는 스타일 시트입니다.
  주요 목표는 콘텐츠의 가독성과 사용자 경험을 향상시키는 것입니다. sanitize.css는 normalize.css와 유사하지만, 
  더 가볍고 필요한 최소한의 스타일만을 제공합니다.