React를 공부하기위해 그리고 React 포트폴리오가 하나쯤 있으면 좋겠다싶어서 프로젝트 한개를 만들고 ReadMe에도 개발 방법 및 개발 히스토리를 작성 하고있다.
잘 작성 하면 자연스레 문서 작성 스킬이 늘어나지 않을까 싶다. 이미 정형화된 문서에서 작성하는것보다 내가 하고싶은대로 하고 그중에 효율적인 방식을 찾아 적용하는것도 즐거울것 같다.
'그러다 문득 블로그에도 꾸준히 글을 써보자!' 라는 생각을 하게되었고 나는 초보니까 앞으로 마주할 에러나 초보적인 실수로 인한 런타임에러등을 작성하면 누군가에겐 조금 더 도움이 되지 않을까 싶은 마음이 들었다.
그렇게 무겁지도 않으면서 아주 가볍지만은 않은 마음으로 리액트 카테고리를 추가했다.
React는 프로젝트를 생성하는 방법이 크게 어렵지 않다.
이 글에서는 node.js를 설치 하고 npm 또는 yarn이 설치되어있는 경우를 상정하고 작성될 예정이다!
!!! 참고로 편집기는 VSCode를 사용한다 !!!
만약 npm이 아직 설치가 되지 않은 상황이라면 아래의 글 초반에서 node.js설치 방법을 따라하면 쉽게 설치 할 수 있다.
(백엔드에 관련된 내용이긴하지만 node.js를 설치하는 과정자체는 동일하다!)
[NestJS] NestJS환경 설정 및 프로젝트 생성하기
오늘은 NestJS기반 환경을 만들기 위한 내용을 작성해 보려고 한다. 내가 사용해보고 익히려는 NestJS라는 녀석은 Node.js를 기반으로 만들어져 있기에, Node.js를 우선 설치를 해야 한다. Node.js는 아래
chobodeveloperkk.tistory.com
우선 프로젝트를 설치하고자 하는 폴더를 만든다.
폴더를 만들고 VSCode를 켜면 연 폴더의 경로가 자동으로 잡힌다.
만약에 경로가 폴더 바깥으로 되어있다면 프로젝트를 만들고자하는 폴더까지 이동한다.
이동을 완료 하였으면 여기서 두가지 갈림길이 있다.
1. 일반적인 React 프로젝트를 생성하는 방법
2. TypeScript를 적용한 React프로젝트를 생성하는 방법
우선 1번은
$ npx create-react-app ${원하는 프로젝트명} // 생성 코드
$ cd ${원하는 프로젝트명} // 디렉토리 이동
$ npm start // 실행 명령어위의 명령어의 첫번째줄을 입력하면 프로젝트가 생성된다.
이런 설치 내용들이 나오면서 프로젝트가 설치된다. 잠시 기다리자!😊
잠시 기다리면 기본적인 프로젝트의 뼈대가 생성된다.
두번째, 세번째줄의 명령어는 프로젝트로 이동하고 프로젝트를 구동시키는 명령어이다.
아무 조작도 하지 않은 뒤에 저 명령어들을 실행시키면 아주 기본적으로 제공되는 main화면이 출력된다.
TypeScript가 적용되는 프로젝트 생성도 과정은 동일하다. 출력되는 화면도 동일하다!
단, 설치명령어가 다르고 개발할 때 작성하는 코드의 규칙이 약간 다르다.
TypeScript가 뭔지는 앞으로 나도 공부를 해야해서 적을 수 없다.... 공부 열심히 해야지....
실행방법은 동일한 명령어를 쓰지만 설치명령어만 다르기에 설치명령어만 적어보자면
$ npx create-react-app ${원하는 프로젝트명} --template typescript
또는
$ yarn create react-app ${원하는 프로젝트명} --template typescript패키지 매니저를 어떤거를 쓰냐에 따라 접두어만 다를 뿐이고 둘중 하나면 입력하면된다!
기본적인 리액트를 설치하는 경우 App파일의 확장자가 App.jsx로 되어있고 TypeScript를 적용한 경우는 App.tsx로 되어있다. 물론 App파일뿐만 아니라 앞으로 생성하는 jsx파일을 모두 tsx로 입력해야한다! 그래야 TypeScript의 기능을 제대로 쓸 수 있다.
프로젝트도 만들었으니 여러가지 웹 기능들을 잘 공부하고 구현해봐야겠다!
댓글