728x90 배움 기록52 [TypeScript] Narrowing 정리 (typeof, instanceof, as...) Type 'string | number' is not assignable to type 'number'. 만약 위와 같은 에러 메세지를 본 적이 있다면, 이는 Type Narrowing이 필요하여 발생한 에러입니다. 📌 Type Narrowing ? : (위의 에러 메세지를 예로 들면) string | number 같은 union type에는 일반적으로 조작을 못하게 막아놨기 때문에 타입을 하나로 Narrowing(=좁히다) 해주거나 타입을 Assertion(=선언) 해주는 것이 필요하다. Narrowing으로 판정해주는 문법들 (대표 3개) typeof 변수 속성명 in 오브젝트 자료 오브젝트 instanceof 부모 class 📌 typeof 연산자 : 타입을 하나로 지정해주려면 if문 등으로 해줄 .. 2023. 1. 29. [CSS] flex 속성들 정리 (flex-basis, flex-grow, flex-shrink) flex-basis, flex-grow, flex-shrink에 대해서 정리해보겠습니다☺️ 📌 flex-basis ? flex-basis는 Flex 아이템의 기본 크기를 설정함 flex-direction이 row일 때는 width를 설정하고, column일 때는 height를 설정함 .container { display: flex; } .item1 { flex-basis: auto; /* 기본값 */ } → flex-basis의 기본값은 auto로 width를 따로 설정하지 않으면, 컨텐츠가 차지하는 width와 같은 값이 되고 width를 설정하면, 설정값과 동일한 값이 된다. → 만약 아이템에 (width를 적용하지 않고) flex-basis: 100px를 적용했을 때 아이템이 100px보다 작다면,.. 2023. 1. 15. [React] useEffect 총정리 React Hook인 useEffect에 대해서 정리해보겠습니다 📌 useEffect ? React Hooks 중 하나인 useEffect는 컴포넌트가 렌더링된 이후에 특정 작업을 실행할 수 있도록 하는 Hook이다. 왜 Effect라는 이름인가? 컴포넌트의 핵심 기능인 html 렌더링 이후에 동작하기 때문이다. 즉, 핵심 기능과 상관 없는 Side Effect(=함수의 핵심 기능과 상관 없는 부가기능)이라는 의미이다. useEffect( () => { 실행할 코드 }, [실행조건]); → 콜백 함수 안에 실행할 코드를 적고, 두 번째 파라미터로 배열 형태의 dependency를 넣을 수 있는데 dependency에는 변수나 state 같은 것들을 넣을 수 있다. 이는 실행조건이라고 보면 된다. 📌 Co.. 2023. 1. 8. [Next.js] _app.js와 _document.js에 대해서 Next.js의 _app과 _document에 대해서 알아보겠습니다 📌 _app 가장 먼저 실행되는 컴포넌트 → 모든 페이지는 _app을 통해 실행됨 → 모든 페이지에서 필요한 처리를 할 수 있음 각각의 페이지가 초기화될 때 로딩되는 파일 → 자신이 원하는 로직으로 페이지를 초기화할 수 있음 위와 같은 특징들로 인해 _app의 대표적인 사용 예는 다음과 같다. 각 페이지의 공통된 레이아웃 페이지 작성 전체 앱에 Global CSS 적용 Redux Provider 설정 import "../styles/globals.css"; import type { AppProps } from "next/app"; import Layout from "../components/layout"; function MyApp({ .. 2022. 12. 26. 이전 1 ··· 10 11 12 13 다음 728x90
