혼자 적어보는 노트

✅ 오늘의 학습 📌 React (2) - 컴포넌트 스타일링 / emotion - useMemo, useCallback - React.memo - Custom Hooks - Storybook emotion : CSS in JS의 종류중 하나이며 프레임워크에 구애받지 않고 사용하는 방식과 React에서 사용하는 방식이 있다. React에서 사용할 것이기 때문에 React방식으로만 적을 예정이다. emotion 공식 문서 기본 사용 방법에는 CSS 함수를 사용하여 작성하는 방법과 styled component방식으로 작성하는 방법이 있다. CSS 함수 방식 import { css } from "@emotion/react"; const style = css` color: pink; `; const SomeCom..

✅ 오늘의 학습 📌 React (1) - CRA / JSX - 컴포넌트 이론 - useEffect - useRef - pagination 재사용성이 좋은 컴포넌트 만들기? UI를 추상적으로 바라보기! 추상적으로 바라보려면 ? 공통점을 찾아보자 -> 공통적으로 활용할 수 있는 부분을 찾아보고 공통점에 맞게 컴포넌트를 구성해보기. ❗❗ 다만 너무 추상적으로 바라보면 이후에 구분하기 더 어려울 수 있다. 강의에서 아토믹 디자인 패턴이라는 키워드를 던져주셔서 검색해보고, 강사님의 글을 읽어보았다. 아토믹 디자인 패턴 이름에서 유추할 수 있듯 가장 작은단위의 컴포넌트를 원자로 설정하고, 이를 바탕으로 상위 컴포넌트를 만들어서 코드 재사용을 최대화 하는 방법론이다. 작은 단위의 컴포넌트 Paragraph.js im..

5월 18일부터 5월 24일까지 일주일간의 복습기간(방학)이 주어졌었다. 밀려오는 과제와 강의를 견뎌낸 사람들에게 주는 휴식과도 같은 기간이었다..😅 곧 진행할 팀 프로젝트를 위한 재정비 기간이기도 했고, 그간 학습을 하면서 시간이 부족해서 놓쳤던 부분들을 다시 한번 짚어보는 시간이라고 생각했다. 하지만.. 맘 편히 잠을 좀 많이 잤던 것이 가장 기억에 남는다... ✍ 복습기간 동안 한 것 1. 타입스크립트 학습 우리 팀은 최종 프로젝트에서 타입 스크립트를 적용해보기 위해 복습기간 동안 타입스크립트를 학습하기로 했었다. 원래는 곧 있을 중간프로젝트에 타입스크립트를 적용해보기로 했지만 어제 있었던 멘토님과의 커피챗에서 이번 팀 프로젝트에서는 최소한의 요구사항을 우선적으로 하고 이후에 적용하고 싶다면 프로젝..

React에서 Typescript를 사용하기 위한 기본 세팅을 진행해보려고 한다. 참고 : 웹 게임을 만들며 배우는 React에 TypeScript 적용하기 🔨기본 세팅 Typescript, React, Webpack 설치 npm i typescript npm i react react-dom npm i webpack webpack-cli -D typescript로 만들어진 패키지의 경우는 그냥 사용해도 되지만 react, react-dom은 javascript로 되어있어서 타입이 지정되어 있지 않다. 이렇게 타입이 없는 것들은 커뮤니티에서 만들어 놓은 타입인 패키지를 설치한다. npm i @types/react @types/react-dom 💡 본 패키지와 types로 받은 패키지와 버전이 크게 달라지면..

제네릭에 대해 알아보자. 제네릭(Generics) 제네릭은 재사용성이 높은 컴포넌트를 만들기 위해 활용된다. 아래와 같이 함수에 세부적인 타입을 미리 지정해버리면 해당 함수는 무조건 number값만 받아야 하고 재사용성이 떨어지게 된다. function returnText(text: number): number{ return text; } 다른 타입의 값도 받고 싶다면 any를 사용해야 하는데 any를 사용할 경우 함수의 인자로 어떤 타입이 전달되었는지 알 수 없고 어떤 값이 반환되는지 알 수 없다. 이 때 ✨제네릭을 사용해서 재사용성을 높일 수 있다. 제네릭 기본 문법 function returnText(text: T): T{ return text; } returnText('Hello'); return..

인터페이스(Interface) 상호간의 정의한 약속 또는 규칙을 의미한다. 미리 내부를 정의해 두는 것 interface User { name: string; age: number; } function printUser(user: User) { console.log(user.name, user.age); } const user = { name: 'jay', age: 22 }; printUser(user); 옵션 속성 (Optional) 일부 속성을 사용하지 않을 경우 ?을 사용하여 옵션 속성을 지정할 수 있다. interface User { name: string; age?: number; } function printUser(user: User) { console.log(user.name); } con..

enum 특정 값들의 집합을 의미하는 자료형 => 상수를 정의할 때 사용한다. enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } 초기 값을 넣어주지 않으면 0부터 차례대로 증가한다. enum Direction { Up, // 0 Down, // 1 Left, // 2 Right, // 3 } enum의 문제점 변수에 타입을 지정한 후 값을 변경해도 에러가 발생하지 않는다. let position:Direction = Direction.Left position = Direction.Up; position = 10 // 에러가 발생하지 않는다. console.log(position) // 10 💡 union으로 대체하여 ..

기본 타입(타입주석) const num: number = 3; const str: string = "하이"; const boal: boolean = false; let age: number | undefined; let person: string | null; function find():number | undefined{ return undefined; } let name:'Jay' = 'Jay'; // 값으로 지정할 수도 있다. // 가능하면 쓰지 말기 3종 let empty: null let notSure: unknown = 0; let anything: any = 0; // object = {} = [] // 이런 식으로 쓰지 말고 object는 정의해서 쓰자 let obj: object; 함수 ..