반응형 리액트6 [React] Vite로 React 프로젝트 세팅하기 강의를 듣고 세팅하는 방법을 기록해두는 포스팅.. Vite는 프론트엔드 개발을 더 용이하게 해주는 일종의 개발 툴이라고 할 수 있다. vite는 go로 작성된 esbuilder를 사용하기 때문에 매우 빠른 빌드 속도를 자랑한다. 먼저 새로운 vite 프로젝트를 생성해보자 npm create vite@latest 터미널을 열고 위 명령어를 실행한다. 프로젝트 이름을 정하고 프레임워크를 선택하라고 나오는데 나는 React를 선택할 거니까 React를 골라준다. 그 다음엔 자바스크립트를 사용할지 타입스크립트를 사용할지 고르라는 선택지가 나오는데 난 Rust typescript 컴파일러인 SWC가 포함된 두번째 옵션을 선택했다. 그럼 프로젝트가 생성이 되었다. 위 설명대로 프로젝트 경로로 이동해서 패키지들을 설.. 2023. 11. 17. [React]React + TypeScript 시작하기 https://bk0625.tistory.com/2 [React]리액트란? 리액트란 페이스북에서 개발한 유저 인터페이스 라이브러리이다. 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해주는데 페이스북, 인스타,넷플릭스 등 많은 큰 서비스에서 사용하고 있 bk0625.tistory.com https://bk0625.tistory.com/18 [TypeScript] 타입스크립트란? 타입스크립트란? 타입스크립트는 마이크로소프트에서 구현한 JavaScript의 슈퍼셋 프로그래밍 언어로 정적 타입을 명시 할 수 있다는게 순수 자바스크립트랑 가장 큰 차이점이다. 따라서 개발자 bk0625.tistory.com 리액트는 페이스북에서 개발한 유저 인터페이스 라이브러리이다. 개발자로 하여금 재사용 가능한 UI를 .. 2023. 4. 25. [React]TS/JS 버전 에러 Type 'string' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher. 사이드 프로젝트를 개발하다가 string to array를 하기 위해 spread를 사용하였다. 그런데 에러 발생! 왜 에러가 났는고 하니 바로 사용하는 자바스크립트 버전이 낮아서 생긴 문제이다. 이는 tsconfig 파일로 가서 컴파일옵션에 target을 변경해주면 된다. 기존에는 target이 es5로 되어있다. es2015나 그보다 높은 버전을 사용해야하니 ES2016으로 변경하니 잘 동작한다! 공부하면서 정리한 내용입니다. 모든 지적 감사히 받겠습니다:) 2023. 4. 5. [React]TS로 개발할 때 input 값 여러 개 받기 리액트로 사이드 프로젝트를 개발하던 도중 input 값을 여러 개 받아야 되는 경우가 생겼다. 해당 항목마다 state를 만들고 onChage 함수도 따로 만들어 각각 달아주는 방법도 있지만 중복 코드도 많고 쓸 데 없는 작업이 많아지기 때문에 별로 좋은 방법이라고 생각되지 않았다. 따라서 state 하나에 onChange 함수 하나를 만들어 여러개 input 값을 받는 방법을 포스팅한다. return ( ID onChangeUserInfo(e)}/> PW onChangeUserInfo(e)}/> NAME onChangeUserInfo(e)} /> School onChangeUserInfo(e)} /> Mother email onChangeUserInfo(e)} /> console.log(user)} l.. 2023. 3. 23. 이전 1 2 다음 반응형
