Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

비전공 프론트엔드 개발자

React 설치 및 환경 구축 실습 본문

카테고리 없음

React 설치 및 환경 구축 실습

JJ_hyun 2022. 3. 3. 15:58

리엑트는 현재 8.5.2 버전을 설치하였다. 이전 버전에서 새로운 버전이 나왔길래 연습해볼겸 그냥 다시 받았다. 

그리고 node.js 는 17.6.0 버전이다. 

일단 둘다 설치를 완료 하였다. 이 후 터미널 창에서 

1. npm install -g create-react-app 입력 

( * -g = 어디든지 ( global ) ) => 요것만 뭐지? 했던 기억이....

 

2. npx create-react-app 

=>npm 에 필요한 것들을 설치하는 것이다. 

( 생활코딩에서는 npm 으로 진행되지만 왠지 모를 오류로 난 진행이 불가했다.

 npx 방법을 스스로 터특해버렸다..)

=> npx create-react-app 파일이름 입력하니 쉽게 해결 되었다. 머지..? 이게 더 쉬운거 같은데...? 

=> npx는 일회용처럼 한번만 사용하는 프로그램이다. 

npx를 사용하면 좋은점

1. 컴퓨터의 불필요한 용량을 줄인다.

2. 매번 설치해야 하니, 최신 버전을 사용 할 수 있다. 

 

3. 원하는 위치에 파일을 만든다. 

=> 이 파일은 react 로 개발할 파일을 만들기 위해서이다. 

이제 필요한건 create-react-app 에게 파일 경로를 알려주고 거기에 환경을 구축해달라고 하면 된다. 

 

4. cd ( 파일 경로 ) ** 

=> 이때 cd 치고 파일을 드레그 드롭하면 알아서 경로가 설정됨.

 

5. 현위치에서 개발환경을 구축

=> create-react-app . => 입력하면 react 가 알아서 열심히 일해준다. 이때 개발에 필요한 파일이 설치된다. 

( 이때 create-react-app 은 기본적인 파일 몇가지를 만들어 주는데, 중요한건 public 이랑 src ! ! ) 

 

 

이제 react 실습할 준비가 어느정도 끝났다. 

 

React 는 라이브러리 라고 한다. 즉, 기능이 많지는 않으나 필요하면 만들어서 사용할 수 있다고

생각하면 될 것! 

 

,

,

 

요즘은 생활코딩을 보면서 React 공부를 하고 있다.

( 벌써 2번째 듣는중.. ) 

 

직접 써보니 진작 배울껄,, 개꿀이네,, 생각이 들었다.

클론 코딩을 하면서 겨우 한 페이지 였지만 많은 노동이 들어갔고, 

특히나 정리를 한다고 했으나 코드가 많아서 찾는게 일이였다.

 

React 를 사용해서 보기 편하고 수정하기도 편하게 했다면,, 내가 들였던 시간을

반으로 줄일 수 있었을 텐데 라는 생각을 했다. 

 

배움이 참 중요하다. 얼른 React기초를 떼고 포트폴리오에 사용해 보고 싶다. 

 

다음엔 vscode 안에서 npm 을 시작하고, 안에 있는 파일들을 정리하고 조금씩 이해해보려 한다. 

틀린 내용이 분명 있겠지만, 차차 나중에 확인해 보는걸로 하고 

 

일단 환경구축하고 알아보는게 우선! 배움의 깊이가 깊어질수록 더 잘 다루고 내가 무엇이 틀렷는지

알게 되는 날이 올것이다.