안녕하세요 반갑습니다
벌써 새해가 오면서 날씨가 엄청나게 추워지는게 느껴집니다
이번주부터 엄청난 한파로 온몸이 얼어붙을 정도로 추워지던데요
어쩌면 12월에 오지 않았던 한파가 몰아서 한번에 오고 있는 게 아닐까 싶습니다
요즘 감기가 굉장히 유행이라고 합니다
모두 감기에 걸리지 않도록 조심하시고 건강하시길 바라겠습니다
지난 포스팅은 REACT의 유래에 대해서 알아 보았습니다
REACT라는 프레임 워크를 사용을 하게 된 배경과 장점 그리고 사용을 하는 이유에 대해서 알게 되었습니다
더 정확한 내용을 알고 싶으시다면 이전 블로그를 참고 해주세요!
React의 배경과 시작
안녕하세요 반갑습니다오늘은 React의 배경과 장점 특징 등에 대해서 알아보려고 합니다React의 프로젝트를 바로 시작하기보다react 프레임워크가 생성된 배경과 특징을 더 정확히 알고 있다면 활
devtrek.tistory.com
그럼 정확하게 사용을 할 때 참고하기 좋은 사항들을 알게 되었으니
이제는 직접 REACT를 활용해서 하나의 사이트를 만들어 보아야겠죠
그래서 이번 시간은 REACT 프레임 워크를 활용한 생성 및 컴포넌트 파일까지 한번 만들어 보도록 하겠습니다
REACT 시작하기
REACT 프레임 워크의 시작은 사실 엄청나게 간단합니다
저희가 자주 사용하는 VISUAL STUDIO에서 로컬 폴더를 하나 생성하고
그 후 명령어를 몇 가지 입력을 하면 REACT를 시작하기 위한 준비가 완료됩니다
1. REACT의 시작 명령어
하지만 REACT를 만드는 명령어를 사용할 때 2가지의 명령어를 사용할 수 있습니다
저는 해당 내용을 나누기 위해서 명령어 첫 번째 멘트를 따와서
NPX 스타일/YARN 스타일
이라고 나눠 보았습니다
1-1. NPX 스타일
명령어 코드
npx create-react-app <프로젝트 이름>
npx 스타일 이란?
Node.js의 패키지 관리자인 npm과 함께 제공되는 명령어입니다.
npx를 사용하면, 패키지를 컴퓨터에 설치하지 않고도 바로 실행할 수 있습니다.
즉, 특정 툴이나 라이브러리를 일회성으로 사용하기에 매우 편리한 명령어입니다
NPX 스타일의 특징
1. 로컬 설치 없이 실행 가능
react를 사용하기 위해서는 react 파일 안에 들어있는 패키지에 툴을 설치를 해야 합니다
하지만 npx 명령어를 사용한다면 툴을 따로 설치를 하지 않아도 바로 실행이 가능합니다
2. 최신 버전 사용
npx는 항상 최신 버전으로 설치를 해주기 때문에
프로젝트 생성 시 항상 새로운 버전으로 생성이 됩니다
이로 인해 구버전 패키지로 이미 만들어진 프로젝트를 넣는다면 충돌이 생길 수 있죠
3. 패키지 실행 후 자동 제거
프로젝트를 생성하고 나면 생성을 위해서 사용했던 패키지를 자동 삭제하여 용량을 확보시킵니다
4. 신속한 개발 환경 구축
매번 패키지를 설치할 필요 없이 바로 실행할 수 있어
개발 초기 단계에서 더 빠르게 작업을 시작할 수 있습니다.
자주 사용하게 되는 프로젝트 예시
1. 다양한 프레임 워크 및 라이브러리 프로젝트
React, Vue, Next.js 등 다양한 JavaScript 프레임워크 및 라이브러리
프로젝트를 신속하게 시작할 때. 자주 사용합니다
2. 설치 없이 패키지 실행
특정 패키지를 설치하고 싶지 않거나 일회성 실행이 필요한 경우 사용을 자주 합니다
가벼운 코딩을 보여주거나 불필요한 패키지 설치를 하여 파일을 무겁게 하고 싶지 않을 때 사용합니다
1-2. YARN 스타일
yarn create react-app <프로젝트 이름>
YARN 스타일 란
Yarn은 Facebook에서 개발한 npm의 대안으로, 패키지 관리와 설치 속도를 개선하기 위해 나온 도구입니다
Yarn을 사용하면, npx와 마찬가지로 React 프로젝트를 빠르고 쉽게 시작할 수 있습니다
YARN 스타일의 특징
1. 속도 개선
Yarn은 패키지를 병렬로 설치하고,
캐시를 사용하여 이전에 다운로드한 패키지를 재사용함으로써 패키지 설치 속도가 빠릅니다
특히 대규모 프로젝트에서 npm보다 설치 속도가 빠르게 느껴지기도 한다고 합니다
2. 일관성 있는 의존성 관리
Yarn은 yarn.lock 파일을 사용하여 프로젝트의 의존성 버전을 고정시킬 수 있습니다
팀의 다른 개발자가 같은 의존성 버전을 사용하도록 보장할 수 있으며
npm의 package-lock.json과 유사한 기능을 가지고 있습니다
3. 오프라인 설치
Yarn은 패키지를 한 번 다운로드한 후 로컬에 캐시를 저장해두므로,
인터넷 연결 없이도 캐시된 패키지를 사용할 수 있습니다.
이는 반복적인 패키지 설치 시 매우 유용합니다.
자주 사용하게 되는 프로젝트 예시
1. 팀 프로젝트에서 일관성 유지
여러 개발자가 함께 작업하는 프로젝트에서 의존성 버전을 동일하게 유지하려면 Yarn이 유리하기 때문에
많은 팀원들과 함께 작업을 하는 프로젝트라면 yarn을 활용하는 것이 더욱 좋다
2. 빠른 설치가 필요한 경우
대규모 프로젝트에서 패키지 설치 속도가 중요한 경우 Yarn의 병렬 설치 기능을 활용할 수 있습니다
빠르게 패키지 설치를 하여 개발 환경을 만들 수 있어 굉장히 유용하게 사용할 수 있습니다
3. 오프라인 작업이 필요한 환경
네트워크 연결이 불안정한 환경에서도 작업해야 할 때, Yarn을 활용할 수 있습니다
NPX의 경우 인터넷이 존재하지 않으면 설치가 되지 않거나 테스트가 원활하지 않을 수 있습니다
그러나 YARN을 사용하면 한번 설치 후 오프라인 환경이라도 테스트가 가능합니다
결론
이렇게 npx 스타일과 YARN 스타일을 활용한 react 시작 명령어들을 알아보았습니다
시작을 하기 위해서 사용하는 명령어들도 전부 상황에 따라서 변경이 될 수 있다는 사실을 알 수 있죠?
NPX 스타일은 단기적 프로젝트나 솔로 프로젝트 또는 가볍게 테스트를 위한 용도로 사용하고
YARN 스타일의 경우 대규모 프로젝트, 많은 팀원들과 오프라인 환경이 잦은 곳에서 사용하는 점
참고하여 앞으로 저희가 프로젝트 기획이 진행이 될 때 참고하여 활용하면 좋겠습니다
오늘 포스팅은 여기까지입니다
다음 시간에는 react를 시작하여 컴포넌트를 생성하는 작업을 알아보도록 하겠습니다
긴 글을 봐주신 여러분 너무 감사합니다
추가적으로 저의 내용에 부족한 내용이 있거나 잘못된 내용이 있다면 댓글을 달아주시면
빠르게 수정하겠습니다
그럼 다음 포스팅으로 돌아오겠습니다!!