코딩하는라민

[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias) 📌 객체 타입 원시 타입을 제외하고 가장 많이 등장하는 타입. 객체는 프로퍼티를 가지는 자바스크립트 값이다. 객체를 정의하려면 해당 객체의 프로퍼티들과 각 프로퍼티의 타입을 나열하면 된다. const info = { name: 'ramin', favoriteNumber: 7, }; info.name; // 타입: string info['favoriteNumber']; // 타입: number info 가 가지고 있는 속성 외의 이름으로 접근하려고 하면 '타입 오류'가 발생한다. 📌 객체 생성 방법 - 객체 리터럴 객체 리터럴(Object Literal)은 중괄호({})를 사용하여 객체를 생성하는 것을 말한다. 속성값..

[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란? 📌 구조적 타이핑의 정의 구조적 타이핑은 객체나 데이터의 구조에 기반하여 타입 호환성을 결정하는 타입 시스템 구조적 타이핑은 객체가 특정한 타입으로 정확히 명시되어 있지 않아도, 객체의 구조가 타입과 일치하는지를 확인하여 타입 호환성을 결정한다. 즉, 객체의 속성 구조와 타입이 일치한다면 타입 호환성이 성립된다. 이러한 특성은 코드의 재사용성과 유연성을 높일 수 있다. 📌 구조적 타이핑 예시 type Cafe = { menu: string; } type Home = { todo: string; } // 특정 타입으로 정확히 명시되어있지 않더라도 const homeCafe = { menu: "cake", todo: "sleep..

[TypeScript] 리터럴 타입(literal types) 📌 리터럴 타입(literal types) 특정한 값 자체를 타입으로 지정하는 기능이다. 리터럴 타입은 값의 정확한 타입을 나타내기 위해 사용된다. const friends = "dana"; friends = "udin"; // ❌ error: Cannot assign to 'friends' because it is a constant. 변수 frineds 는 "dana" 만 값으로 가질 수 있다. 다른 문자열들은 friends 와 호환되지 않는다. 문자열 뿐만아니라 숫자, 불리언, 객체 등의 다양한 값에 대해 사용할 수 있다. type MyFavoriteNumber = 3; type MyBoolean = true; type MyInfo = ..

[TypeScript] 유니언 타입(Union Type)과 내로잉(narrowing) 📌 타입스크립트의 추론 유니언(union) : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(narrowing) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것 📌 유니온 타입 둘 이상의 타입을 허용하는 타입. 함수 매개변수 또는 반환 타입으로 여러 타입을 허용하고자 할 때 유니언 타입을 사용할 수 있다. function yourMenu(menu: boolean | string) { console.log(`menu: ${menu}`); } menu 매개변수에는 불린 또는 문자형을 받을 수 있다. 예를 들어 yourMenu(false) 이 될 수도 있고, yourMenu("..

[TypeScript] 타입 애너테이션(Type annotation) 📌 타입의 종류 타입스크립트의 타입은 자바스크립트의 기본 원시 타입과 일치한다. null undefined boolean string number bigint symbol 📌 오류의 종류 오류의 종류 설명 구문 오류 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우 타입 오류 타입 검사기에 따라 일치하지 않는 것이 감지된 경우 📌 타입 애너테이션 초깃값을 할당하지 않고도 변수 타입을 선언할 수 있는 구문을 말한다. 진화하는 any : 초기 타입을 유추할 수 없는 변수 let name: string; name = "ramin"; 📌 불필요한 타입 애너테이션 타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션을 사용할 수 있다. 하..

[React] React router 와 React router dom 에 대해 📌 React router 와 React router dom ? 리액트 팀 프로젝트를 하고있을 때였다. 리액트 라우터로 SPA(Single Page Application) 를 구현했다. 그러던 중 package.json 에 아래의 사진처럼 react-router 와 react-router-dom 이 두 가지가 설치되어 있는 것을 발견했다. 왜 두가지나 있는거지? 하고 구글링을 했다. 요약하면, React Router는 라우팅을 처리하는 핵심 라이브러리이고, React Router DOM은 React Router를 웹에서 사용하기 쉽도록 확장한 라이브러리이다. 즉 React Router DOM 은 React Router 을 포..

[React] React.lazy 코드 스플리팅으로 프로젝트 성능 개선하기 📌 React.lazy 함수를 사용하게 된 이유 리액트 프로젝트를 진행하면서 중간중간 Light House 를 이용해 성능 검사를 진행했다. 다른 점수는 항상 90점 이상으로 나왔는데 '성능' 점수만 항상 주황색으로 60~70점 정도가 나왔다. 이 6, 70점도 잘나온 편이었고 정말 성능이 좋지 않은 페이지의 경우에는 4, 50점대까지 나왔다. 성능 최적화는 코드를 작성하고 나서 수행해야 하기 때문에 일단 프로젝트에 집중했고, 추가적으로 성능 개선을 진행하였다. 📌 React.lazy 함수란? React.lazy() 는 동적으로 코드를 로드하고 렌더링할 수 있게 해주는 React의 기능 중 하나이다. 이 기능을 사용하면 일반적인 ..

[React] useLayoutEffect 는 언제 사용할까? 📌 useEffect 이란? [React] Hooks - useEffect ( ) [React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 ramincoding.tistory.com 앞의 포스팅에서 알아본 바와같이 useEffect 는 클래스형 컴포넌트 생명주기의 componentDidMount, componentDidUpdate, componentWillUnmount 훅을 하나의 API 로 합친 것으로 의존성 배열 deps..

[React] React Router 📌 라우팅 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 여러 페이지로 이루어진 웹 애플리케이션을 만들 때 페이지별로 컴포넌트를 분리해서 프로젝트를 관리하기 위해 라우팅이 필요하다. 리액트 라우터는 라우팅 시스템으로 가장 많이 사용하는 인기있는 라이브러리이다. 리액트 라우터를 사용하면 SPA(Single Page Application) 를 구현할 수 있다. 📌 Single Page Application(SPA, 싱글 페이지 애플리케이션) SPA 는 한 개의 페이지로 이루어진 애플리케이션이다. 리액트 라우터는 여러 페이지로 이루어진 프로젝트를 만들 수 있는 것이라고 했다. 그런데 왜 싱글 페이지 애플리케이션이라고 하는 것일까? ✅ MPA(Multipage ..

[React] Hooks - useMemo (최적화하기) 📌 컴포넌트는 언제 렌더링되는가 컴포넌트는 자신의 state 가 변경되거나, 자신의 props 가 변경되거나, 상위 컴포넌트가 리렌더될 때 렌더링이 일어나게 된다. 📌 useMemo 를 사용하는 이유 ✅ 리액트는 다시 렌더링될 때마다 구성요소의 전체를 다시 실행한다. 위에서 본 바와 같이 컴포넌트의 렌더링은 한번이 아닌 계속해서 일어날 수 있다. 상위 컴포넌트가 리렌더링되거나 자신의 props, state 가 변경되었을 때 리렌더링된다. 이렇게 매번 리렌더링이 일어날 경우 간단한 구조라면 렌더링이 빠르겠지만, 무거운 페이지 전체를 리렌더링한다는 것은 성능 측면에서 좋지않다. 따라서 데이터의 변경이 없는 경우라면 리렌더링하지 않고, 데이터의 변경이 ..