열이의 개발블로그

✅ Interface란? 인터페이스는 object(객체) 모양을 특정해주기 위한 것 interface Player { nickname: string, team: Team, health: Health } type Player = { nickname: string, team: Team, health: Health } 타입과 같이 인터페이스는 객체의 형태를 특정해주는 역할을 합니다. ✏️ 타입과의 차이점 type(타입)은 모든 타입의 모양을 설명하는 역할을 할 수 있지만 interface(인터페이스)는 object(객체)의 모양만을 설명하는 역할만 할 수 있습니다. // 에러 interface Hello = string; 위와 같은 코드는 사용할 수 없습니다. ✅ interface 상속 interface Us..

✅ Static 클래스를 통해 인스턴스를 생성할 필요 없이, 클래스의 속성 또는 메소드를 사용하는 방식 class Player { static firstName: string = "GilDong"; static hello() { return "hello" } } Player.firstName; Player.hello(); 위의 예시처럼 속성과 메소드에 static 키워드를 붙이면 클래스의 인스턴스를 생성하지 않고 속성과 메소드를 사용할 수 있습니다.

타입스크립트 타입의 확장된 문법을 확인해봅시다. ✅ Type Aliases(타입 별칭) type Nickname = string; type Health = number; type Friends = Array; type Player = { nickname: Nickname; healthBar: Health; }; const nico: Player = { nickname: "nico", healthBar: 10, }; type Food = string; const kimchi: Food = "delicious"; type alias를 이용하여 타입스크립트에서 만들고 싶은 무수히 많은 종류의 타입을 설명해주면 원하는 타입을 만들 수 있습니다. ✏️ 지정된 옵션 사용 type Team = "red" | "blu..

타입스크립트에서의 클래스를 알아봅시다. ✅ Class(클래스) 타입스크립트도 객체지향 프로그래밍 언어이기 때문에 객체를 생성하는 클래스 기능을 사용할 수 있습니다. Javascript class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 자바스크립트에서는 contructor 메서드를 만들고 그 안에서 this.height = height this.width= width 와 같은 식으로 작성해야 합니다. Typescript class Player { constructor( private firstName: string, private lastName: string, public nickName:..

타입스크립트의 함수에 대해서 알아봅시다. ✅ Call Signatures 함수 위에 마우스를 올렸을 때 보게 되는 것 type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 함수의 타입을 만들어두고 함수를 구현하기 전에 함수가 어떻게 작동하는지 서술해둘 수 있는 것을 call signatures라고 합니다. ✅ Overloading 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생시킴 type Add = { (a: number, b: number): number (a: number, b: string): number } const add: Add = (a, b) => { if (typeof..

create-react-app을 통해 프로젝트를 생성하고 useState를 작성하면 자동으로 react에 있는 useState를 import 해줍니다. import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => { setValue((prev) => prev + 1); }; return ( {counter} click me ); } export default App; counter를 만들고 버튼을 클릭하면 counter가 증가하는 로직을 작성해봅시다. function App() { const [counter, setValue] = useState(0); const..

React를 사용하면서 컴포넌트에 CSS를 적용하는 방법에 대해 단계별로 알아봅시다. ✅ 전역으로 CSS 설정 /* styles.css */ button { color: white; background-color: tomato; } src 폴더 안에 styles.css라는 파일을 생성한 뒤 button 태그의 스타일을 지정해줍시다. // index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./styles.css"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ..

쉽게 React 프로젝트를 만들기 위해서는 create-react-app을 사용하여 많은 스크립트들과 많은 사전설정들을 미리 설정할 수 있도록 하는 것이 좋습니다. ✅ create-react-app 설치 node.js를 설치한 뒤 터미널에서 create-react-app을 통해 프로젝트를 생성합니다. $ npx create-react-app 프로젝트명 ✏️ npm과 npx의 차이 npm은 node.js의 의존성과 패키지 관리를 위한 패키지 매니저입니다. 프로젝트의 패키지를 설치할 때 npm install을 실행함으로써 package.json 파일에 있는 패키지들을 지정할 수 있다는 것을 의미합니다. 또한, 버전 관리를 지원하여 패키지의 버전을 명시해 원하는 버전을 설치하도록 할 수 있습니다. npx는 n..

✅ Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 ✏️ Props가 필요한 이유 예제를 통해서 알아봅시다. function SaveBtn() { return ( Save Changes ); } function ConfirmBtn() { return ( Confirm ); } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); 위의 코드는 SaveBtn 컴포넌트와 ConfirmBtn 컴포넌트가 존재하는 코드입니다. 두 개의 컴포넌트는 각각 버튼을 나타내고 다른 점이라고는 버튼 안에 있는 텍스트의 내용 뿐입니다. 이런 버튼들이 필요할 때마다 ..

✅ Select 태그 값에 따라 변하는 컴포넌트 웹을 개발하다보면 select 태그 값에 따라 변하는 내용을 만들어야 할 때가 있습니다. React에서는 변하는 내용을 컴포넌트화하여 select 값에 따라 다른 컴포넌트를 렌더링하는 방식을 사용합니다. 먼저 가장 Root 컴포넌트인 App에서 select 태그를 만들어봅시다. function App() { const [index, setIndex] = React.useState("xx"); const onSelect = (event) => { setIndex(event.target.value); }; console.log("render w/ ", index); return ( Super Converter Select your units Minutes & ..