뉴히의 개발 로그

Jest란?Jest는 페이스북에서 만든 JavaScript testing framework이다. config를 따로 설정하지 않아도 빠르게 테스팅 환경을 만들 수 있다는 것이 큰 장점이다. 2 장에서의 기본 개념과 코드는 코딩앙마님의 Jest 강의와 유데미의 JS 강의중 테스팅 모듈 파트를 참고하여 작성하였다.  1. Install Jestnpm install --save-dev jest개발자 도구이므로 개발환경에서만 사용할거기 때문에 --save-dev를 붙여 설치한다. 2. Test 실행package.json "scripts": { "test": "jest" },스크립트 test 부분을 'jest'로 변경해준다 3. 테스트 코드 작성 (파일 생성)파일명.test.js또는 __tests__ t..

Page.tsx 가 메인페이지 그를 감싸는 Layout.tsx 페이지생성은 src 아래 폴더생성(subpage)>page.tsx 파일생성하면 페이지 생성완료 ex) http://www.ddd.com/subpage subpage에 page.tsx는 같은 레벨에 layout파일이 있다면 layout으로 감싸지며 그상위 폴더에 layout파일이 또있으면 또 감싸지고 그상위 폴더에 layout파일로 또감싸진다 page router의 경우는 pages > index.tsx -> main pages폴더 아래 파일을 생성하면 페이지생성이 완료 된다. ex) pages>about.tsx --> www.ddd.com/about 다이나믹 라우팅의 경우 app 폴더아래 첫번빼 경로 폴더를 만들고 다이나믹하게 바뀌는 segm..

프로젝트 생성 node 먼저 설치가 되어있어야한다. // 최신 버전 설치 npx create-next-app@latest 프로젝트명 // start with typescript (tailwind, eslint도 한번에 설치) npx create-next-app@latest 프로젝트명 --typescript --tailwind --eslint // yarn yarn create next-app yarn create next-app --typescript 프로젝트 실행 cd 해당 프로젝트 npm run dev​ http://localhost:3000/에서 초기 화면 확인가능

npm create vite@latest 프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수도 있다. Vite + Vue 프로젝트를 만들고 싶다면 다음과 같이 입력 # npm 7+, '--'를 반드시 붙여주세요 npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app --template vue # bun bun create vite my-vue-app --template vue 그 외 템플릿 vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-sw..