카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고

📝 Create React App

• Babel을 사용하여 트랜스파일링하고, Webpack으로 파일들을 번들링 하는 구조
  • 자바스크립트 기반으로, 최근에는 다양한 언어를 이용하여 자바스크립트의 한계를 극복하는 번들러와 트랜스파일러가 등장하고 있다. 자바스크립트는 싱글 스레드 언어로, 프로젝트 규모가 커지면 빌드 시간이 증가하여 개발 생산성이 저하될 수 있다.
  • 이러한 문제를 해결하기 위해 새로운 도구들이 등장하였다.
• 번들러 Webpack > Vite
  • 개발 단계에서는 esbuild를 통해 빌드하고, 프로덕션에서는 rollup을 통해 번들링 한다. 현재는 rollup을 통해 프로덕션 빌드를 진행하지만, 추후 esbuild가 발전하면 프로덕션 빌드도 esbuild를 이용할 계획이다. esbuild는 Go 언어로 작성되었으며 병렬 처리가 가능해 매우 빠른 속도를 가진다.

---

프로젝트 생성

• 요구 조건에 맞추어 Create React App을 사용하여 TypeScript 템플릿 기반으로 새로운 React 프로젝트를 생성한다.
• npx create-react-app . --template typescript
• Webpack과 Babel을 직접 설정하는 것은 번거로운 일이지만, Create React App을 사용하면 이 과정을 간단하게 해결할 수 있었다. 그러나 직접 환경을 구성하며 어떤 과정을 거쳐 빌드가 이루어지는지 이해해보고 싶은 마음도 있다.

 

📝 Typescript

장점

• 객체 지향 프로그래밍 지원: TypeScript는 클래스, 인터페이스, 상속 등 객체 지향 프로그래밍 개념을 지원해 코드를 구조화하고 재사용성을 높일 수 있다. JavaScript를 사용하면서 타입 정의가 부족해 코드의 기능이 명확하지 않고, 재사용성과 가독성이 떨어진다는 단점을 느꼈다. TypeScript는 이러한 문제를 해결하는 데 큰 도움이 된다.
• 정적 타입 검사: TypeScript는 정적 타입 언어로 컴파일 시 타입 검사를 수행해 타입 관련 오류를 사전에 감지할 수 있다. JavaScript를 사용하다 보면 타입 오류를 쉽게 범할 수 있는데, 이런 오류를 놓치는 경우가 많다.
• JavaScript와의 호환성: JavaScript만 사용해 프로젝트를 진행한 경험이 있지만, TypeScript를 한번 접해본 사람들은 다시 JavaScript로 돌아가지 않는다고들 한다. 나도 TypeScript를 맛보기 정도로 접해봤지만, 타입을 입력하는 과정이 조금 번거로워도 더 많이 사용해보고 싶다.

 

📝 import alias 설정 - craco

경로 설정 파일 생성

• 코드에서 경로가 너무 길어지는 문제를 해결하기 위해 경로 별칭(alias)을 설정한다.
  • 다른 해결방법 : VSCode와 같은 에디터의 자동완성 기능
• tsconfig.paths.json 파일을 만들어 경로 별칭을 정의한다.

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@api/*": ["api/*"],
      "@assets/*": ["assets/*"],
      "@components/*": ["components/*"],
      "@fonts/*": ["fonts/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@recoil/*": ["recoil/*"],
      "@styles/*": ["styles/*"],
      "@/types/*": ["types/*"]
    }
  }
}

• 코드를 작성할 때 경로 별칭(alias)을 사용하도록 수정할 예정이다.

---

tsconfig.json 확장

• TypeScript가 설정한 경로 별칭을 인식하도록 하기 위해 tsconfig.json 파일을 수정하여 tsconfig.paths.json 파일을 포함한다.

{
  // ...
  "extends": "./tsconfig.paths.json"
}

---

웹팩 설정 확장

• 기본 설정을 유지하면서도 필요한 설정을 추가하기 위해 craco 라이브러리를 사용한다.
• craco 라이브러리를 설치함.

 

• CRA의 기본 설정을 건드리지 않고 추가적인 설정을 부여할 수 있다.

npm install @craco/craco

  

•  

• tsconfig-paths-webpack-plugin을 설치하여 TypeScript 경로 별칭 설정을 웹팩에서도 적용한다.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  webpack: {
    alias: {
      plugins: [new TsconfigPathsPlugin({ /* options: see below */ })]
    }
  }
};

 

• package.json의 스크립트를 수정하여 react-scripts 대신 craco 명령어를 사용하도록 한다.

"scripts": {
  "start": "craco start",
  "build": "craco build"
}

 

• 하지만, craco가 deprecated 상태라는 것을 알게 되었다. 이는 조금 고민스러운 부분이다. 다른 방법으로는 react-app-alias가 있어 대안으로 고려할 수 있다. 현재 아직 많은 블로그에서 craco에 대해 다루고 있다. 현재 상황에서 craco를 계속 사용해도 되는지에 대한 질문이 있다.
• [답변] 27일의 클론코딩 강의 시간에, craco는 현재 cra 버전과 호환 가능하다는 답변을 받았습니다. 그러나 앞으로 개발을 진행하면서 버전 충돌이 발생할 가능성이 있기 때문에 대안 패키지를 찾아보도록 권장받았습니다.

 

📝 Daily Scrum 이후

• 이번 스터디(과제) 진행 중에 팀원들과 기본 환경 설정에 대해 이야기를 나눴다. 파일 및 폴더 구조, 코드 포맷팅 도구(ESLint, Prettier), Git flow 전략, PR(풀 리퀘스트), 변수명 기준 설정 등이 필요하다는 의견이 나왔다. 이런 사항들을 더 구체적으로 정해야 할 것 같다.
• 팀원들에게 craco 사용 여부를 물어봤는데, 아직 진행하지 못했다는 답변을 받았다. 초기 세팅인 만큼, 좀 더 독려할 필요가 있을 것 같다.

 

😋 Today 회고

• Webpack에 대해 여전히 피상적으로만 이해하고 있는 것 같다. 📚 공식 문서를 읽어보니 여러 파일을 하나로 잘 묶어준다는 건 알겠지만, 완전히 이해한 건 아니다. 직접 환경을 만들어 빌드를 하고, 화면에 "Hello, World"가 뜨는 순간을 경험해보고 싶다. 이렇게 하면 빌드 과정이 어떻게 이루어지는지 더 잘 이해할 수 있을 것 같다.
• craco를 사용해 절대경로를 설정하는 방법을 배웠다. 이 방법은 상대경로를 없앨 수 있어서 좋았고, 특히 ../가 사라지면서 코드 가독성이 훨씬 좋아질 것 같다. 👀 설정하는 데 10분도 채 걸리지 않는데, 길게 개발할 프로젝트라면 절대경로 설정을 적용하는 것이 더 효율적일 것 같다.

 

➡️ 참고 링크

https://velog.io/@k0310kjy/React-typescript-Path-alias-%EC%84%A4%EC%A0%95

React + typescript Path alias 설정

https://portfolio-mrbartrns.vercel.app/posts/is-create-react-app-still-usuable

create-react-app은 더 이상 최선의 선택이 아닐 수 있다. - Benlog