TIL

next.js / typeScript 사용 1. 체크된 상품의 productId 저장 const [checkItem, setCheckItem] = useState([]); 2. 체크박스의 체크상태를 관리 (초기에 모든 체크박스 상태는 ture) const [isChecked, setIsChecked] = useState(true); 3. 체크박스의 상태가 변경될 때 호출되는 함수 const handleCheckedBoxChange = (e: React.ChangeEvent) => { setIsChecked(e.target.checked); handleSingleClick({ checked: e.target.checked, productId: productId! }); }; e.target.value를 통..

cmder 이용 1. 초기 파일 만들기 yarn create react-app 파일이름 --template typescript 2. react router dom 설치하기 yarn add react-router-dom 타입스크립트를 이용함으로 types-react-router-dom 설치 필요 yarn add --dev @types/react-router-dom

1. cmder 이용해 폴더 만들기 yarn create next-app 파일이름 --typescript 마지막에 @/* 를 활성화 시킬때는 tap키를 눌러주면 활성화 가능

function object({a,b}:{a:number; b:number}): string { return `${a+b}` } 객체로 넘겨줄때 {객체 명시} : {객체 타입 명시} : return 타입 명시 1. 비동기함수에서 사용해 보기 async funciton getPerson() { const res = await fetch(`http://localhost.5000/people`); if(!res.ok) { throw new Error(); } return res.json(); } getPerson().then((res) => console.log(res)) 아래의 객체를 받는다고 했을때 [ {id:1, age:20, height:180}, {id:2, age:28, height:170}, {i..

필요한 파일 vite.config.ts tsconfig.json vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@", replacement: "/src" }, { find: "@page", replacement: "/src/page" }, ], }, }); { find: "@", replacement: "/src" }, 생성되는 파일은 src 아래에 존재할 것 이므로 "@" 는 " /src " 로 지정 { find: "@page", replace..

컴파일 단계에서 타입을 체크 컴파일러? : 타입검사해줌,다른 프로그래밍 언어로 변환하는 도 설치방법(cmder 사용중) yarn yarn create vite 프로젝트이름 --template react-ts yarn create react-app twitter --template typescript npm npm create vite@latest 프로젝트이름 -- --template react-ts 기본타입

hover 마우스가 해당 요소 위에 있을 때만 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen. active 마우스가 해당 요소를 클릭하는 순간에만 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen. focus 마우스가 해당 요소를 클릭하고 부터 다른 요소를 선택하기 전까지 계속 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen.

너무 간단해서 텍스트 쓸게 없지만.. import없이 환경변수 방법으로 가져와서 사용하면 된다!! 공식문서 https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev