devlog_zz

Vite + React + Typescript + Jest 환경 구성 vite + React project 생성 npm create vite@latest jest 를 사용하기 위해 필요한 라이브러리를 설치합니다. npm i -D jest @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer jest 실행을 위해 package.json 에 명령어 추가하기 "scripts":{ ... "test": "jest" } npm run test 실행하면 아래와 같은 결과가 나온다. Jest 설정파일 추가 루..

setState() 후 state값을 바로 API 파라미터로 호출할 때 주의점 사용자가 화면에서 값을 클릭하면 API 를 호출하여 선택한 값의 내용을 가져오는 기능을 구현해봅시다. 아래와 같은 순서로 구현할 것입니다. 구현해보며 주의점을 설명하겠습니다. 화면에서 값을 클릭하여 setState()를 한다. state값을 가져와 API 호출을 한다. 결과를 보여준다. 먼저 리스트를 보여주고 값을 클릭하면 그 값을 화면에 보여줍니다. 예시코드 import {useEffect, useState} from 'react'; import axios from 'axios'; import './App.css'; function App() { const foods = ['pizza', 'chicken', 'hamburge..

방법 1 split() 활용하기 let str = 'aaabbbcccddd' str.split('a').length -1 // 3 방법 2 match 정규식 활용하기 일치하는 값이 없을 때 `undefined` 가 나온다는 점 주의하기 일부 특수문자를 정규표현식에서 찾으려면 아래와 같이 \ 를 앞에 써줘야 한다는 점 주의하기 let str = 'aaabbbcccddd' str.match(/d/g)?.length //3 let str = 'aa.ab.bbnc,ccd,,d,,,dddddd' str.match(/\,/g)?.length // 6

length 배열의 길이 구하는 함수 const arr = [1,2,3,4] arr.length // 4 concat() 두 개 이상의 배열을 병합하는 데 사용 기존 배열을 변경하지 않고, 새 배열을 반환합니다. const arr1 = [1,2,3,4] const arr2 = [5,6,7,8] arr1.concat(arr2) // [1,2,3,4,5,6,7,8] 💡 또 다른 배열 병합 방법 spread operator spread operator : 개별 요소로 분리 const arr1 = [1,2,3,4] const arr2 = [5,6,7,8] [...arr1, ...arr2] // [1,2,3,4,5,6,7,8] // spread 하지 않는다면 [arr1,arr2] // [[1,2,3,4],[5,6..

vue3 CLI 설치 중 오류 해결 설치 // Vue CLI 설치 npm install -g @vue/cli // Vue 프로젝트 생성 vue create vue-tutorial 에러 발생 Vue CLI v5.0.8 ? Please pick a preset: Default ([Vue 3] babel, eslint) Vue CLI v5.0.8 ✨ Creating project in /~~/vue/vue-tutorial. 🗃 Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... npm ERR! code EEXIST npm ERR! syscall rename npm ERR! path /~~/.npm/_cacach..

toUpperCase() 문자열 전체를 대문자로 변환 toLowerCase() 문자열 전체를 소문자로 변환 let word = 'Hello World! 12345' word.toLowerCase() // 'hello world! 12345' word.toUpperCase() // 'HELLO WORLD! 12345' 대문자, 소문자 판별 // 대문자인지 판별하는 함수 const isUpper = (str) => { return str === str.toUpperCase() } // 소문자인지 판별하는 함수 const isLower = (str) => { return str === str.toLowerCase() } isUpper('ABCDE') // true isUpper('A') // true isUp..

charAt() 문자열에서 지정된 인덱스에 존재하는 문자를 찾아서 반환하는 함수 ◦ index 범위 밖의 숫자가 입력되면 빈 문자열('')이 리턴 index 형식 배열의 index 형식으로 가져오기 • 문자열의 index를 벗어나는 값이 index값으로 지정되면 'undefined'가 리턴 let text = 'abcde' text[0] // 'a' text.charAt(0) // 'a' let emptyText = '' emptyText[0] // undefined emptyText.charAt(0) // '' undefined가 나오면 안되는 경우 charAt() 함수를 사용하는 것이 좋다.

vite 란 ? Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다. 개발 시 네이티브 ES Module을 넘어 Hot Module Replacement (HMR) 제공합니다. 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. vite의 장점 콜드-스타트(최초로 실행되어 이전에 캐싱한 데이터가 없는 경우)방식으로 개발 서버를 구동할 때, 번들러 기반의 도구의 경우 ..