Ryong Note

[ TS ] Functions

🔴 Call Signatures // 함수를 작성할 때, argument의 타입을 지정하고, // return 값은 유추시키는 방식을 사용했으나 const add = (a: number, b: number) => a + b; // 미리 타입을 지정하면 type Add = (a: number, b: number) => number; // argument에 직접 타입을 적어주지 않아도 된다. const add: Add = (a, b) => a + b; 🟠 Overloading ⚪ 오버로딩은 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생한다. type Add = { (a: number, b: number) : number (a: number, b: string) : numbe..

[ React ] Props

⚪ 컴포넌트에 추가한 argument들은 컴포넌트에 Object로 전달되며, 이를 Destructing 하여 원하는 속성만 적을 수 있다. ⚪ 부모 컴포넌트의 어떠한 state 변화가 생기면 자식 컴포넌트들은 모두 리렌더링된다. ⚪ 따라서, props가 변하지 않는 컴포넌트까지 모두 리렌더링되며, 이는 성능 저하의 원인이 될 수 있다. ⚪ 이를 방지하기 위하여 memo를 사용하여 리렌더링 할 필요가 없는 컴포넌트들을 최적화시킬 수 있다. ⚪ 리액트 js는 컴포넌트 타입에 대해 오류를 출력하지 않는다. 따라서, prop-types 라이브러리를 통해서 타입과 필요성을 명시할 수 있다. const Btn = ({ text, fontSize }) => { return ( {text} ); } const Memo..

[ CSS ] Grid

🔴 Why Grid? ⚪ 격자 무늬로 동일한 상하좌우 간격을 두고 아이템을 배치하고 싶을 때, flex를 사용하면 개별적으로 설정해줘야 하는 요소들이 너무 많으며, 아이템을 추가할 때마다 css를 추가해줘야 하는 번거로움이 있다. 🟠 CSS Grid Basic Concepts .father { display: grid; grid-template-columns: 250px 250px 250px; grid-template-rows: 100px 50px 300px; column-gap: 5px; row-gap: 10px; } 🟡 Grid Template Areas .grid { display: grid; grid-template-columns: auto 200px; grid-template-rows: 100p..

[ CSS ] Flexbox

🔴 Wrapper 속성 display: flex; flex-direction: row | column | row-reverse | column-reverse; justify-content: flex-start; align-items: flex-start; /* 한 줄인 아이템의 수직 정렬 */ align-content: flex-start; /* 두 줄 이상인 아이템의 수직 정렬 */ /* flex는 기본적으로 아이템을 한 줄에 배치시킨다. */ /* 아이템들이 한 줄에 들어가기 어려우면 크기를 변경시킨다. */ flex-wrap: nowrap | wrap; /* wrap 속성 적용 시, 아이템의 크기를 유지한다. */ 🟠 Child 속성 /* 수직 방향으로 하나의 child만 가운데 정렬 */ alig..

[ TS ] What is TypeScript?

🔴 Why not JavaScript // 이상해!! [1, 2, 3, 4] + false // '1, 2, 3, 4false' // 이상해!! function divide(a, b) { return a / b; } divide("xxxxx"); // NaN => 왜 Error를 출력하지 않지? 🟠 Implicit Types vs Explicit Types let a = "hello" let b : boolean = false // But, TypeScript가 추론하도록 하는게 낫다. 🟡 Types of TS part One type Name = string; type Age = number; type Player = { name: Name, age?: Age // 선택적 타입 } const playe..

[ JS ] Generators and Maps

🔴 Generators const friends = ["Jeong", "Seung", "Ryong", "Hello", "World"]; function* friendTeller() { for (const friend of friends) { yield friend; } } const friendLooper = friendTeller(); > friendLooper.next() // { value: "Jeong", done: false } > friendLooper.next() // { value: "Sueng", done: false } > friendLooper.next() // { value: "Ryong", done: false } > friendLooper.next() // { value: "He..

[ JS ] Symbol, Set and Map

🔴 Symbols const user = { [Symbol("ryong")]: { age: 28 }, [Symbol("ryong")]: { age: 32 }, hello: "bye" }; console.log(Object.keys(user)); // ["hello"] console.log(Object.getOwnPropertySymbols(user)); // [Symbol(ryong), Symbol(ryong)] ⚪ symbol 내부에 description 파라미터가 서로 같더라도 서로 다른 symbol을 리턴한다. const numberArr = [1, 3, 3, 5, 7]; const objectArr = [ { name: 'Harry', age: 20 }, { name: 'Kim', age: 30 ..

[ JS ] Classes

🔴 Introduction to Classes class User { constructor(name) { this.username = name; } sayHello() { console.log(`Hello, my name is ${this.username}`); } } const myUser = new User("Ryong"); myUser.sayHello(); // Hello, my name is Ryong 🟠 Extending Classes class User { // this => User constructor(name, lastName, email, password) { this.username = name; this.lastName = lastName; this.email = email; thi..

[ JS ] Async / Await

🔴 Async Await // using then, catch const getMoviesPromise = () => { fetch("https://yts.am/api/v2/list_movies.json") .then(response => { console.log(response); return response.json(); }) .then(json => console.log(json)) .catch(error => console.log(error)); }; // using async, await const getMoviesAsync = async () => { // then => await const response = await fetch("https://yts.am/api/v2/list_movies..

[ JS ] Promises

🔴 Using Promises const test = new Promise((resolve, reject) => { // If Promise ends successfully, setTimeout(resolve, 2000, "Promise end successfully!"); // === resolve("Promise end successfully!"); // If Promise return error setTimeout(reject, 2000, "Promise return error!"); }); test.then(result => console.log(result)) // resolve => then❗ .catch(error => console.log(error)); // reject => catch❗..