새벽코딩

보통 리액트 앱을 생성할 때, 아래와 같은 명령어로 생성을 한다. npx create-react-app my-app 오늘은, Vite 라는 툴을 이용해서, 다른 방법으로 리액트 앱을 생성해보려고 한다. Vite 란? 프랑스어로 rapid 또는 quicky 라는 뜻으로, React 외에도 vue, svelte 등 의 프로젝트를 빌드할 수 있게 도와주는 툴 중 하나이다. https://ko.vitejs.dev/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 프로젝트 생성 1. 프로젝트 생성하고하자는 폴더로 이동하여, npm create vite@latest 2. 아래와 같이 선택해 주면, 프로젝트를 생성한다. 3. 생성된 프로젝트 (first-react-app)으로 이동하..

Input 태그는 사용자가 입력을 할 수 있는 태그이다. 아래와 같이 여러 종류의 input이 존재한다. - input에 뭔가 입력시 코드를 실행하려면, onChange 또는 onInput 과 같은 event handler를 사용한다. { 실행할코드 }}/> 그 외에, onMouseOver = { }# 이 요소에 마우스를 댔을 때 안의 코드 실행 onScroll = { } # 이 요소를 스크롤했을 때 안의 코드를 실행 등등 많이 존재한다. - input에 입력한 값 가져오는 방법 { console.log(e.target.value) }}/> onChange 안에 함수에 파라미터로 e를 추가해주고, e.target.value라고 적으면 현재 에 입력된 값을 가져올 수 있습니다. 참고로 e.target 이러..

똑같은 html 이 반복적으로 출현하면, 반복문을 이용해서 코드를 간단하게 만들 수 있다. 단, 흔히 사용하는 for 반복문은 JSX 중괄호 안에서 사용할 수 없어서 map() 함수를 대신 사용한다. -. 자바스크립트 map 함수 쓰는법 모든 array 자료 우측에 map() 함수를 붙일 수 있다. 1) array 자료 갯수만큼 함수안의 코드를 실행해준다. [1,2,3].map(function(){ console.log(1) }) 위에 array에는 3개의 자료가 들어있다. (1, 2, 3) 그래서 console.log(1) 에 의해서, 1이 세번 출력이 된다. 2) 함수의 파라미터는 array안에 있던 자료를 하나씩 불러온다. [1,2,3].map(function(element){ console.log..

아래와 같은 반복되는 div를 component로 만드는 과정 {shoes[0].title} {shoes[0].price} {shoes[1].title} {shoes[1].price} {shoes[2].title} {shoes[2].price} // 참고로 위에 shoe변수는 아래와 같이 state로 만들어져있고, data는 json 형태 let [shoes] = useState(data) let data = [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : ..