Front-end (31) 썸네일형 리스트형 type vs interface 차이점 1. 확장하는 방법 // interface interface PeopleInterface { name: string age: number } interface StudentInterface extends PeopleInterface{ school: string } // type type PeopleType = { name: string age: number } type StudentType = PeopleType & { school: string } 2. 선언적 확장 interface에서 할 수 있는 대부분의 기능은 type에서 가능 type은 새로운 속성을 추가하기 위해 같은이름으로 선언할 수 없음 interface는 항상 선언적 확장이 가능 // interface interface window.. Enum 정의 enum(열거형)을 사용하여 상수 집합을 정의할 수 있음 enum을 사용하면 의도를 문서화 하거나 별개의 사례 집합을 더 쉽게 만들 수 있음 numeric enums enum Direction { Up = 1, Down, Left, Right, } Up 은 1로 초기화 됨 나머지 초기화 되지 않은 멤버들은 auto-increment가 적용됨 Down = 2 Left = 3 Right = 4 enum Direction { Up, Down, Left, Right, } 초기화가 없을시 첫 멤버(Up)가 0으로 초기화됨 나머지는 auto-increment됨 Down = 1 Left = 2 Right = 3 auto-increment 동작은 멤버의 value가 중요하지 않지만 구별이 필요할때 유용함 Stri.. Typescript Core 기본 문법 1. 타입 주석 / 타입 추론 let n: number = 1 // type annotation let m = 2 // type interface 2. interface // 'Person'이라는 인터페이스를 생성. // Person은 name은 반드시 정의되어야 하며, // age는 optional(?)로 age를 가질 수 있지만 null, undefined가 허용된다. interface Person { name: string// 반드시 정의되어야 한다. age?: number// optional } // 'person'이라는 변수는 인터페이스에 의해 'Person'타입이다. name을 반드시 정의해야한다. let person: Person = {name: "Jane"} 3. tuple //.. Redux 동기 항상 변할 수 있는 상태를 업데이트하는 위치와 주체가 다르기때문에 ->상태를 언제, 왜 어떻게 업데이트 할지 제어하기위해 react 에서는 뷰레이어에서 비동기와 DOM 조작을 없애버렸음 → react에서는 데이터를 관리하는일에 관여하지 않음 redux는 상태변화가 일어나는 시점에 제약을 두어 상태 변화를 예측 가능도록함 react의 context API 에서 useReducer를 사용하면 유사함 다만, useReducer 가 존재하기도 전에 만들어져서 글로벌 상태관리로 많이 사용됨 redux vs context API 미들웨어 redux에만 존재함 미들웨어를 사용하여 action 객체가 reducer에게 처리되기 전에 특정 작업 수행 가능 ex) 특정 조건에 따라 action 무시, action 출.. Hook 정의 hooking - 소프트웨어 구성요소간 발생하는 함수호출, 메시지, 이벤트 등을 중간에 바꾸거나 가로채는 명령, 행위 hook - 이때의 함수호출, 이벤트 또는 메시지를 처리하는 코드를 hook 이라고 함 React에서의 hook 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수 props, state, context, refs, lifecycle 과 같은 react 개념에 좀더 직관적인 API 를 제공 컴포넌트 사이에서 상태 로직을 재사용 하기 위함 독립적인 테스트가 가능 class 컴포넌트 안에서는 동작하지 않음 class 컴포넌트의 단점 this 키워드의 작동이해가 되지 않으면 혼란을 줄수있음 코드의 최소화를 힘들게 만듦 Hook 사용 규칙(linter pl.. Next.js Pages Pre-rendering default 가 모든 페이지를 pre-render(각각의 페이지들을 HTML로 생성)함 아래 두가지 형태가 있고 HTML 생성 시점에 따라 다름 각 페이지 마다 다른 pre-render 방식을 절정하여 hybrid 한 app 을 만들 수 있음 Static Generation build 시점에 HTML을 생성하고 각 request마다 재사용됨 “next build”시 생성 static generation with data 해당 페이지에 외부에서 받는 데이터가 있는경우 같은 파일 내에 async 함수인 ‘getStaticProps’ 를 같은 파일 내에서 export 시킴 export default function Blog({ posts }) { // Render post.. React core JSX 정의 javascript 를 확장한 문법 React element를 생성 컴파일이 끝나면 JSX표현식이 정규 javascript 객체(React element)로 인식됨 표현식 const name = 'Josh Perez'; const element = Hello, {name}; 속성 정의 속성에 문자열 정의 const element = link ; 속성에 javascript 표현식 삽입 const element = ; !! JSX는 javascript 에 가깝기 때문에 속성(ex-class)을 프로퍼티(ex-className)처럼 camelCase로 정의 주입 공격 방지 JSX에 삽입된 모든 값을 렌더링 하기전에 escape 처리함 XSS 공격 방지 가능 Element rendering 브라우저.. 이전 1 2 3 4 다음
