본문 바로가기
728x90
반응형

CRA4

[Next] 타입 스크립트 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 Next에도 React의 CRA와 동일한 것이 존재합니다. 다음 명령어를 이용하면 Next에 타입 스크립트가 얹어있는 환경을 제공해주기는 합니다. $ npx create-next-app --ts {프로젝트 명} 하지만 저는 기본적으로 나만의 환경을 구축하는 것과 CRA 사용으로 몰랐던 여러 설정 방법을 경험하고 싶다는 이유 등으로 CRA를 사용하지 않고 프로젝트 개발 환경을 구축하고는 합니다. 저와 동일하거나 또는 다른 사유로 인해 CRA로 프로젝트를 생성하고 싶지 않으신 분들은 다음의 절차를 따라 환경을 세팅하시면 될 것 같습니다. [ 1. package.json.. 2021. 12. 30.
[React] CRA로 만들지 않았을 때 dotenv 사용 방법 (index.html 포함) 안녕하세요. J4J입니다. 이번 포스팅은 cra로 만들지 않았을 때 dotenv 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. dotenv란? dotenv는 리액트에서 사용할 수 있는 환경변수 파일로 개발에 사용되는 여러 key값들과 같이 중요하면서 동시에 민감한 정보들을 저장해두는 파일입니다. 파일명은 .env로 일반적으로 폴더 최상단에 위치합니다. (package.json과 동일 위치) 중요 정보들을 해당 파일에 저장하는 이유는 수정된 파일들을 git과 같은 코드 관리 도구에 올릴 때 .gitignore 파일에 등록하여 서버에 업로드되지 않도록 하기 때문입니다. 그러므로 외부에 노출되지 않게 되고 그에 따라 보안성이 높아지게 됩니다. CRA로 만들지 않았을 때 dotenv 사용 방법 일반적.. 2021. 11. 16.
[Svelte] 초기 환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 Svelte 사용을 위한 초기 환경 세팅에 대해 적어보는 시간을 가져보려고 합니다. Svelte에서도 React에서 기본 환경 세팅이 되어 있는 템플릿인 CRA와 같은 기능들이 존재합니다. 다만 어떤 번들러를 사용하냐에 따라 사용되는 명령어가 구분되어집니다. SPA기술들을 사용할 때 일반적으로 많이 사용되는 번들러는 Webpack이 있습니다. 그리고 최근에 관심도가 높아지고 있는 번들러 중에 Rollup이라는 것이 있습니다. Svelte에서 제공해주는 CRA기능에선 Webpack을 사용하냐 또는 Rollup을 사용하냐에 따라 명령어가 구분되고 그에 따라 사용하기 원하는 번들러에 맞게 명령어를 입력해주시면 됩니다. 번들러 사용에 있어 부가적인 정보를 더 드리자면 S.. 2021. 10. 4.
[React] CRA 없이 개발환경 구축하기 (webpack 구 버전 사용) 안녕하세요. J4J입니다. 이번 포스팅은 CRA 없이 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] $ npm init npm init을 입력하게 되면 아래와 같은 부가정보들을 입력해줘야 합니다. 각 행마다 원하는 정보들을 입력해주면 되고 괄호로 덮여있는 부분은 아무것도 입력하지 않고 엔터를 입력할 경우 괄호에 해당하는 값으로 지정되는 것을 의미합니다. package name: (init) react_init version: (1.0.0) description: react init description entry point: (index.js) index.jsx test command: git repository: keywo.. 2021. 7. 12.
728x90
반응형