# CRA

117개의 포스트
post-thumbnail

create-react-app에서 Tailwind CSS 적용해보기

필자는 create-react-app 과 Tailwind를 사용하는 방식에 맞게 작성하였다.create-react-app을 사용하여 기본적인 개발환경을 직접 구축할 필요없이 편리하게 사용하겠다.css framework인 tailwind를 사용하기위해 필요한 패키지들을

약 17시간 전
·
0개의 댓글

Create React App(CRA)으로 만든 리액트 프로젝트 절대경로 import 설정 (vscode)

Create React App(CRA)로 프로젝트로 구성하면 다른 컴포넌트, css 등 파일등을 import 할 때 ../../../......으로 표현해야 하는데, 코드를 짜거나 나중에 프로젝트를 이해할 때 힘들다.CRA로 만든 프로젝트는 webpack 설정이 숨겨져

1일 전
·
0개의 댓글
post-thumbnail

React Intro

2010년 Google에서 개발한 Framework. TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장되어있다. 무겁고 배우기 어렵다는 단점이 있다.2014년 Evan You라는 개인이

2022년 5월 9일
·
0개의 댓글
post-thumbnail

2. CRA(JS) -> CRA(TS) 변환 실습

테스트 CRA JS : npx create-react-app test TS: npx create-react-app testts —template typescript [프로젝트 구조] [package.json] [tsconfi

2022년 4월 29일
·
0개의 댓글
post-thumbnail

1. 배경 및 변환 전략

내 지난 포스팅 React-Storybook 0. 프로젝트 생성 및 스토리북 등록 에서 나는 앞으로 내가 만들게 될 리액트 컴포넌트 들을 최대한 재사용성을 높여서 등록하고, 그것들을 모아두겠다고 말했었다. 그렇게 CRA를 이용하여 프로젝트를 만들어 봤었다. 그런데 여기

2022년 4월 28일
·
0개의 댓글
post-thumbnail

리액트 프로젝트 초기 설정: vite vs cra

이번 자율프로젝트를 리액트로 하면서 기존처럼 cra를 사용할지 vite를 사용할지 고민하게 되었다. vite와 cra에 대해서 간략하게 알아보자

2022년 4월 25일
·
0개의 댓글
post-thumbnail

별 건 아니지만 빌드 파일 배포 시 업데이트가 안되는 건에 대해

정적 파일 캐쉬로 인해 배포 업데이트가 적용이 안될 때

2022년 4월 25일
·
3개의 댓글
post-thumbnail

CRA + TS 절대경로 설정

CRA에서는 기본적인 webpack설정이 숨겨져있는데, 절대경로를 사용하기 위해서는 tsconfig.json과 더불어 webpack의 설정을 변경해주어야 한다.이를 위해서는 eject로 숨겨진 webpack 설정을 바꾸어주어야 한다.eject?해당 프로젝트에 숨겨져 있

2022년 4월 24일
·
0개의 댓글
post-thumbnail

[React] CRA 개발환경 설정하기 - ESLint, Prettier

ESLint ES(EcmaScript) 재단에서 명시한 문법에 부합하는지 검사해주는 도구 현재 Typescript도 지원한다. > 💡 CRA는 eslint가 기본 설치되어있기 때문에, 따로 설치 없이 초기 설정부터 진행한다 :) 초기 설정 여러 옵션에 대한 선택

2022년 4월 11일
·
0개의 댓글

🔯 create-react-app(1) 브라우저 및 문법 지원

리액트를 프로젝트를 구성할 때 항상 cra(creat react app)패키지를 사용하였다. 하지만 문득 무지성으로 사용하고 있는건 아닌가 라는 생각이 들어 오늘은 cra에 대해 알아보고자 한다. CRA(create-react-app) 지원 브라우저 및 특징 지원

2022년 4월 2일
·
0개의 댓글
post-thumbnail

[React] CRA 개발환경 설정하기 - Typescript

CRA 설치 시 옵션으로 typescript를 설정할 수 있다.Typescript 설정 파일 설명은 해당 링크에서 볼 수 있어요 :)tsconfig.json 파일을 수정해서 기본 경로를 설정path와 alias 설정은 따로 하지 않을 거라, webpack config를

2022년 3월 30일
·
0개의 댓글
post-thumbnail

[React] CRA 분석하기 - tsconfig.json

CRA + Typescript CRA + Typescript 를 설치했을 때, 무심코 지나갔던 tsconfig.json default 설정에 대한 해석을 작성한다. compilerOption > 컴파일 과정에 관련된 옵션 target : string 컴파일할 EC

2022년 3월 29일
·
0개의 댓글
post-thumbnail

[TypeScript][React] CRA(Create React App)

※ node 버전 14 이상 필요CRA 설치CRA 이용CRA 진행 시작React App 실행http://localhost:3000/ 접속참고 글https://create-react-app.dev/docs/getting-started/

2022년 3월 23일
·
0개의 댓글
post-thumbnail

왜 Create React App 대신 Vite일까

초보 개발자든, 숙련된 개발자든, 대부분의 개발자들은 Create React App(CRA)을 이용하여 리액트 프로젝트를 생성했을 거예요. CRA는 리액트 팀이 추천하는 공식 리액트 보일러 플레이트이기도 하고, HMR(Hot Module Replacement)과 같은

2022년 3월 20일
·
0개의 댓글

CRA 가장 쉽고 빠른 서버 세팅

들어가기 전,Rakei 폴더 생성 후 VSC로 폴더를 열어준다.(현재 위치 ~/Rakei/) 초기화 실행yarn init npm init(현재 위치 ~/Rakei/) package.json이 형성된다.server가 쓸 패키지들을 따로 관리하는 곳(현재 위치 ~/Rake

2022년 3월 19일
·
0개의 댓글
post-thumbnail

[React] 리액트 하기 전 Node.js 알아보기, + CRA

리액트를 공부하기 전에 이해하고 가야할 두가지가 있다. JavaScript와 Node.js이다. 왜냐? 리액트는 Node.js 기반의 JavaScript UI 라이브러리이기 때문이다! 여기서 Node.js에 대해서 간단히 짚고 넘어가겠다. 🙋‍♀️ Node.j

2022년 3월 18일
·
0개의 댓글
post-thumbnail

CRA: dotenv 사용하기

create-react-app에는 node.js에서의 환경 처럼 dotenv를 설치할 필요가 없다.package.json파일과 같은 레벨 상에 .env파일을 생성한다. .env 파일 안의 변수명에 REACT_APP\_을 붙여 준다.개발 환경이라면 .env.develop

2022년 3월 13일
·
0개의 댓글
post-thumbnail

CRA: 같은 코드인데 다른 기기에서 npm run start가 안돼요!

이전에 node를 설치했던 데스크탑에서 아래와 같은 오류가 발생했다.이유npm이 예전 버전이라서 그렇다. 코드를 짠 노트북 버전과, git clone 해온 데스크탑의 npm 버전이 달랐다. 해결방법해결!

2022년 2월 28일
·
0개의 댓글
post-thumbnail

React Basic : Husky

이번 글에서는 CRA 세팅과 관련하여 Git hooks를 다룰 수 있는 husky를 다뤄볼 생각입니다. 앞서 소개한 ES Lint나 Prettier처럼, CRA 개발 환경이 아니더라도 매우 유용한 패키지입니다.

2022년 2월 21일
·
0개의 댓글