so woon!

학습일 : 2023. 04. 02 ReactJS는 자바스크립트의 실제 이벤트를 넘겨주는 것이 아니라 SyntheticEvent를 주는 것이다. SyntheticEvent 가이드는 아래 사이트에서 참고하면 된다. https://legacy.reactjs.org/docs/events.html#mouse-events SyntheticEvent – React A JavaScript library for building user interfaces legacy.reactjs.org

학습일 : 2023. 04. 01 이번에는 타입스크립트와 styled-components 테마를 연결해보고자 한다. 1. types/styled-components 설치 터미널에 npm install @types/styled-components 입력 => 타입스크립트에게 styled-components가 무엇인지에 대해 설명해주기 위해 설치 => https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-components 참고 2. styled.d.ts 파일 생성 declaration 파일(.d.ts) 을 만든다 (선언 파일) src폴더 밑에 styled.d.ts 라는 이름의 파일을 만들어준다. 그러고 나서 이 파일에 http..

학습일 : 2023. 04. 01 이번에는 리액트와 타입스크립트를 이용해 form을 구현하고 form에 타입을 적용해보고자 한다. event는 hover 해보면 any 타입이다. 하지만 타입을 지정해주도록 하자. event에 타입을 추가하는 방법은 아래와 같다. const onChange = (event: React.FormEvent) => {} 이렇게 작성해줌으로 인해 타입스크립트는 이 onChange 함수가 InputElement에 의해서 실행될 것임을 알게 되는 것이다. import { useState } from "react"; function App() { const [value, setValue] = useState(""); const onChange = (event: React.FormEve..

학습일 : 2023. 03. 31 이러한 코드가 있다고 치자 useState를 이용하여 초깃값을 1로 줘놓은 상태이다. function Circle({ bgColor, borderColor, text = "default text" }: CircleProps) { const[counter, setCounter] = useState(1); return ( {text} ); } export default Circle; setCounter를 hover 해보면 const setCounter: React.Dispatch 이 뜨는데 number를 이용하는 액션이란 것을 알 수 있다. 이것은 Typescript가 초깃값 useState(1); 을 가지고 추론한 것이다. 즉, useState(여기) 여기라고 적힌 곳에 ..

학습일 : 2023. 03. 31 interface를 만들면 반드시 required가 되어서 꼭 작성해주어야 하는데 (작성해주지 않으면 빨간줄이 뜨게 됨.) 그렇게 하고 싶지 않다면? 즉, 선택적으로 사용하고 싶다면 어떻게 해야할까? 바로 optional props로 만들면 되는데 적용방법은 아래와 같다. 이런식으로 interface 작성시 선택적으로 사용하고 싶은 borderColor옆에 ?를 붙여주면 된다. interface CircleProps { bgColor: string; // required. 필수적으로 사용해야함. borderColor?: string; // optional. 사용해도 되고 안해도 됨. } 전체코드 Container 컴포넌트 styled-component 정의해준 부분에서 ..

학습일 : 2023. 03. 30 이번에는 interface 를 사용해보고자 한다. interface는 타입스크립트 사용시 잘못 작성된 타입을 미리 알려주는 아주 멋진 기능이다. bgColor="어쩌고" 라는 prop을 작성해준다 import styled from "styled-components"; import Circle from "./Circle"; function App() { return ; } export default App; Circle() 안에 bgColor를 전달해주면 import styled from "styled-components"; const Container = styled.div``; function Circle({bgColor}) { return ; } export defa..

학습일 : 2023. 03. 30 타입스크립트 기반 새로운 리액트 프로젝트 시작을 위한 준비사항 몇가지가 있다. 1. 깃허브 새로운 repo랑 연동 2023.03.30 - [분류 전체보기] - github repository + VSC 연동방법 을 참고하면 되겠다. 2. 터미널에 npx create-react-app --template typescript . 입력 (마지막 . 찍어주는건 지금 위치한 경로에 설치하겠단 뜻임) 3. npm i --save-dev @types/styled-components 입력 후 설치 4. npm i styled-components 입력 typescript project 시작을 위한 준비 끝!

학습일 : 2023. 03. 29 Typescript는 Javascript를 기반으로 한 프로그래밍 언어이며 프로그래밍 언어가 작동하기 전에 타입을 확인하는 strongly typed 프로그래밍 언어이다. 예를들어 const user = { firstName: "Angela", lastName: "Davis", role: "Professor", } 이렇게 user가 정의되었는데 console.log(user.name) 을 하면 타입스크립트로 인해 이러한 에러가 뜨게 된다. Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'. 우리가 작성한 코드를 push 하기 전에 이러한 에러를 만날 ..