Bin's Blog

1️⃣ UseEffect 안에 JSX 🤔 문제 UseEffect return 문 안에 JSX를 조건문을 이용해서 사용하고 싶었는데... 함수 자체가 돌아가지 않는 문제가 발생했다. 📝 원인 UseEffect에서 return 문은 오직 cleanup()함수를 이용할 때만 쓸 수 있다. 컴포넌트 렌더링을 할 때 아무런 영향을 주지 않는다. 🛠️ 해결 useEffect가 아닌 함수 안 return문에 작성해서 해결했다. 2️⃣ 비동기 호출과 UseState() && rendering 과정에서 router.push() 사용 🤔 문제 Warning: Cannot update a component (Router) while rendering a different component (RequireAuth). To l..

📚 타입스크립트로 HTML 변경과 조작할 때 주의점 👉 h4 안의 글자를 바꿔보자 안녕하세요 👉 selector로 html을 찾으면 타입이 Element | null이기 때문에 html을 찾지 못하면 null이 되기 때문에 이 부분을 해결해줘야한다. 1️⃣ 해결책 (Type Narrowing) let 제목 = document.querySelector("#title"); if (제목 !== null) { 제목.innerHTML = "반가워요" } 2️⃣ 해결책 (instanceof) if (제목 instanceof Element) { 제목.innerHTML = "반가워요" } 3️⃣ 해결책 (as) // 이 요소는 element라고 사기쳐주세요 // null이 들어와도 element type가능 // 비상..

1️⃣ 함수에 type alias 지정하는 법 👉 arrow function 활용 👉 예시(함수 파라미터에는 string만 들어오고 return은 number 형태만 올 수 있다. ) type 함수타입 = (a :string) => number; let 함수 :함수타입 = function () { } 2️⃣ method에 type alias 지정하는 법 👉 예시 type 회원 = { name : string, age : number, plusOne : (x :number) => number, changeName : () => void, } let 회원정보 :회원 = { name : 'kim', age : 30, plusOne (x){ return x + 1 }, changeName : () => { co..

❗️❗️ 오늘은 React에서 TypeScript를 쓰는 법에 대해서 알아보겠다. 👉 기본설치 npx create react-app 프로젝트명 --template typescript 👉 기존 프로젝트에 typeScript를 더하고 싶을 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 👉 일반변수, 함수 만들 때 타입 지정을 잘하자 👉 JSX를 표현하는 타입(JSX.Element) let 박스 :JSX.Element = ; 👉 component 만들 때 타입지정은 파라미터 & return 값 function Profile() :JSX.Element{ return ( 프로필입니다. ) } 👉 compon..

🤔 Literal Types 👉 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type 이라고 부른다. 👉 예시 let 이름 : "kim" 👉 이렇게 하면 이름이라는 변수에는 무조건 kim이라는 글자만 들어올 수 있다. 👉 type이 자동으로 완성된다. 👉 literal type은 const 변수의 업그레이드 버젼이라고 보면 되는데 const 변수는 값을 바꿀 수 없는 변수다. 👉 그래서 변하는 중요한 정보를 저장하고 싶을 땐 const가 무쓸모다. 예를 들어, 변수가 "kim" 또는 "park"만 가질 수 있는 이런 식의 엄격한 변수는 못 만든다. 👉 그럴 때 아래처럼 literal type 쓰면 된다.(이런 식의 문법은 자바스크립트에 없다) const 이름 = "kim" | "p..