반응형 자바스크립트6 [ React ] Vite 프로젝트 생성하고 실행하기 0. 명령어 정리아래 명령어를 통해 vite 프로젝트를 생성하고 실행합니다.# vite 프로젝트 설치 명령어$ npm create vite# 폴더 이동 명령어$ cd vite-project# npm 설치 명령어$ npm i# vite 프로젝트 실행 명령어$ npm run dev 1. vite 설치해당 명령어를 통해 vite 프로젝트를 생성합니다.$ npm create vite 2. Project-name 입력프로젝트의 폴더명을 입력합니다. 3. 프레임워크 설정위, 아래 키보드를 사용하여 프레임워크를 설정합니다. 4. 언어 설정위, 아래 키보드를 사용하여 프로젝트의 프로그래밍 언어를 설정합니다. 5. 프로젝트 생성 완료프로젝트 생성이 완료되었습니다. 6. npm 설치프로젝트 폴더로 이동하여 명령어를 통하.. 2024. 10. 24. [JS] Promise 동작 방식 : 아주 쉽게 그림으로 정리 ※ 이 글은 Promise의 동작 방식에 초점을 두었습니다. Promise에 대한 정확한 설명 혹은 문법은 캡틴 판교 님의 글을 보시면 매우 도움이 되실 겁니다.Promise란?Promise(프로미스)는 JavaScript 비동기 처리에 사용되는 객체입니다. Promise의 3가지 상태Prmoise의 동작 방식을 알기 전, Promise의 3가지 상태에 대해 필수로 알아야 합니다.Promise는 Promise 객체가 생성하고 종료될 때까지 3가지 상태를 갖습니다.Pending(대기): 비동기 처리 로직이 완료되지 않은 상태Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태 Promise의 동작 방식🟢 .. 2024. 10. 21. [React] input 소문자를 대문자로 변환하는 방법 다음 예제를 통해 input 값을 어떻게 대문자만 입력받을 수 있는지 살펴봅시다.다음은 HTML의 Form과 input을 사용해서 대문자만 입력받는 페이지입니다. 1. HTML 구조 설계divforminput / buttonJSX 문법 특성상 최상위 요소는 태그를 사용합니다.그리고 명확하게 하기 위해 시맨틱 태그인 요소를 사용합니다.그 안에 input 요소와 button 요소를 사용하여 HTML 구조를 설계합니다.아래 그림을 참고해 주세요. 생성 2. state 변수 추가input의 value 값을 관리하는 state 변수를 추가합니다.const [value, setValue] = useState(""); 3. handleInputChange 함수 개발handleInputChan.. 2024. 10. 2. [ React ] Warning: Each child in a list should have a unique "key" prop. 오류 해결 방법 💥 React 실행 후 발생한 에러 메시지Warning: Each child in a list should have a unique "key" prop.Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.❓에러 발생 이유React의 리스트 엘리먼트 요소에 key 값이 없어서 발생하는 오류입니다.React는 가상 DOM을 사용하여 Diffing 작업을 수행합니다.하지만 key 값이 없으면 각각의 리스트 요소를 구분할 수 없기 때문에 발생하는 오류 에러 메시지입니다.참고로 key 값은 유니크해야 합니다. 추가로 아래는 React 공식문서로 key에 대한 설명글입니다.https://re.. 2024. 7. 12. 이전 1 2 다음 반응형
