package.json 파일 모든 Node.js 프로젝트는 루트 디렉터리에 package.json 파일이 있다. 리액트 프로젝트도 Node.js 프로젝트라서 package.json 파일이 있는 걸 확인할 수 있다. ----------------------------------------------------------------------------- { "name": "ch01_5", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@type..

npm npm(Node Package Manager)은 Node.js 프로젝트에서 다양한 오픈소스 라이브러리를 쉽게 설치하게 해준다. npx Node.js 패키지 중에서 라이브러리가 아니라 독립적으로 실행할 수 있는 프로그램이 있다. 이처럼 프로그램 형태로 동작하는 패키지는 원래 npm i -g형태로 설치해야 하지만 계속 업데이트되어서 최신 버전을 유지하기가 번거롭다. npx는 이런 번거로움을 해결하기 위해 만들어졌다. npx는 패키지들의 가장 최신 버전을 찾아내 npm i -g 명령으로 설치해주는 프로그램이다. 리액트 프로젝트 생성(타입스크립트) 리액트 웹 어플리케이션은 CRA라는 프로그램으로 Node.js 프로젝트를 생성한다. 다음 명령어로 타입스크립트용 리액트 프로젝트를 생성하다 이 명령은 npx를..

프로그램 설치 목록 - 프리티어 ( 코드정렬) - 테일윈드CSS ( CSS 스타일링 ) - 헤드윈드 ( 테일윈드 CSS 클래스 분류기 ) - 포스트CSS ( CSS 구문 강조 표시 ) 색 테마 변경 VSCode의 테마 변경 방법은 [File -> Preferences -> Color Theme ] 한국어 언어팩 설치 마켓플레이스에서 Korean을 검색하고 한국어 언어 팩을 설치 후 VSCode를 다시 시작하면 된 편집기 설정 [파일 -> 기본 설정 -> 설정] 메뉴에서 소스 코드의 탭 크기를 기본값 4에서 2로 바꾼다. VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해 놓는다. ctrl + shift + p 버튼을 누르고 user settings를 입력하면 [기본설정:사용자..

윈도우에서 개발환경 만들기 설치할 개발 도구 - Node.js - VSCode - scoop - Homebrew - touch - Chrome scoop 윈도우용 설치 프로그램으로 brew나 apt 같은 방식으로 명령 줄에서 프로그램을 쉽게 설치하게 해준다. scoop로 설치한 도구들은 파워셀에 scoop update * 명령으로 한번에 update 할 수있다. - 윈도우 시작 단추를 마우스 오른쪽 클릭후 [Window PowerShell] 선택 - 환경변수 설정 $env:SCOOP='C:\Scoop' [Environment]::SetEnvironmentVariable('Scoop', $env:SCOOP, 'User') - 윈도우 실행 규칙 변경 Set-ExecutionPolicy -ExecutionPo..

리액트 프레임워크는 가상 DOM과 JSX라는 새로운 방식을 동작하는 프레임워크다. SPA란? 브라우저에서 서버로 요청을 보내고 서버는 요청에 맞는 데이터를 응답해줘서 응답한 데이터를 화면에 나타내는데 이것을 렌더링이라고 한다. 이렇게 화면에 나타내고 다음 요청에 대한 응답데이터를 또 받으면 그전에 렌더링 한 내용을 모두 지우는데 이때 깜박거림(새로고침)이 생긴다. 웹 브라우저에서 주소창으로 다양한 요청하는 방식은 깜박임 현상을 피할 수 없다. 깜박거리지 않으려면 요청하는 자원이 하나만 있어야한다. 리액트는 index.html파일 한개로 동작한다. 그래서 서버에 자원을 한 번만 요청해서 깜박이는 현상이 없는거다. 즉 백엔드에서 받은 json 데이터를 해석해서 화면의 새로 요청한 부분만 동적으로 화면을 생성..