오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

import React, { Component } from 'react' class Test extends Component { componentWillMount() { console.log('class => componentWillMount') } componentDidMount() { console.log('class => componentDidMount') } shouldComponentUpdate(nextProps, nextState) { console.log('class => shouldComponentUpdate') return true } componentWillUpdate(nextProps, nextState) { console.log('class => componentWillUpdate'..

자주 사용되는 Status Code만 정리해 보았다. 100단위 : Information responses(요청을 받았으며 프로세스를 계속 진행합니다.) 1로 시작하는 경우 서버가 요청을 받았으며 서버에 연결된 클라이언트는 작업을 계속진행한다는 의미 합니다 해당 코드는 HTTP 1.0에서 지원되지 않습니다. 100 Continue 진행 중임을 의미하는 응답코드입니다. 현재까지의 진행상태에 문제가 없으며, 클라이언트가 계속해서 요청을 하거나 이미 요청을 완료한 경우에는 무시해도 되는 것을 알려줍니다. 102 Processing(WebDAV) 이 응답 코드는 서버가 요청을 수신하였으며 이를 처리하고 있지만, 아직 제대로 된 응답을 알려줄 수 없음을 알려줍니다. 200 OK 요청이 성공적으로 되었습니다. 성공..

HTTP에서 교환하는 정보는 HTTP 메시지라고 불린다. HTTP 메시지는 크게 구분하면 메시지 헤더와 메시지 바디로 구분합니다. 메시지 헤더: 서버와 클라이언트가 꼭 처리해야 하는 리퀘스트와 리스폰스 내용과 속성등 메시지 바디: 꼭 전송되는 데이터 그 자체 메시지 헤더 개방 문자 메시지 바디 리퀘스트 메시지와 리스폰스 메시지의 구조 리퀘스트 라인 상태 라인 리퀘스트 헤더 필드 리스폰스 헤더 필드 일반 헤더 필드 일반 헤더 필드 엔티티 헤더 필드 엔티티 헤더 필드 그외 그외 (좌)리퀘스트 메시지의 메시지 헤더 (우)리스폰스 메시지의 메시지 헤더 리퀘스트 라인 리퀘스트에 사용하는 메소드와 리퀘스트 URI와 사용하는HTTP 버전이 포함됩니다. 상태 라인 리스폰스 결과를 나타내는 상태 코드와 설명, 사용하는 ..

전체적인 변수의 값을 확인할 수 있습니다. 값을 임의적으로 변경할 수 있습니다. 전체적인 것을 확인하지 않고 관심있는 것을 확인하는데 사용됩니다. 변수에 대해서 알 수 있을 뿐만 아니라 result === 3인지 아닌지에 대해서도 알 수 있습니다. 함수가 어떤 순서대로 진행이 되었는지 알 수 있습니다. 로딩된 모든 스크립트를 확인할 수 있습니다. 우리가 걸어둔 브레이크 포인트를 볼 수 있습니다. 부분적으로 브레이크 포인트를 해제하려면 체크를 해제해주면 됩니다. 왼쪽부터 계속(F5): 바로 그 다음 브레이크 포인트로 실행 단위 실행(F10) : 코드를 한 줄 한 줄씩 실행합니다. 단 함수를 호출하는 경우 그 함수는 한번에 호출합니다. 단계 정보(F11) : 단위 실행과 비슷하지만 내부에 함수가 호출되면 함..

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection내의 변화를 비동기적으로 관찰하는 방법입니다. 일반적으로 알려진 해결방법은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기때문에 좋지 못한 사용자 경험을 낳습니다. 일반적인 방법의 문제점 과거에 intersection 감지를 구현하면 영향을 받는 모든 요소를 알기 위해서 Element.getBoundingClientRect()와 같은 메서드를 호출하는 여러 이벤트 핸들러와 루프가 얽혀있었습니다. 모든 코드가 메인 스레드에서 실행되기 때문에, 이 중 하나라도 성능 문제를 일으킬 수 있습니다. intersection 정보는 아래와 같은 여러가지 이유 때문에 필요..

Redux Redux를 사용하기 위해서는 Action, Reducer, Dispatch, Store, view 등에 대한 개념을 알아야한다. 주요 개념 Action Redux에서 Action은 state를 바꾸는 방식이다. 액션 객체를 가지고 있고, 반드지 type 필드가 있어야 한다. Dispatch Action을 발생시키는 것으로 action 객체를 파라미터로 받는다. Reducer 변화를 일으키는 함수로 Action의 결과로 state를 어떤 식으로 바꿀지 구체적으로 정의하는 부분이다. 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아서 새로운 상태로 반환해준다. 리듀서는 파라미터 외의 값을 의존하면 안되고, 이전 상태는 건드리지 않은 상태로 새로운 상태 객체를 만들어 반환하는 순수 함수여..

npx create-next-app@latest --ts # or yarn create next-app --typescript # or pnpm create next-app -- --ts npm install bootstrap npm install react-bootstrap bootstrap npm install --save @types/bootstrap or yarn add bootstrap yarn add react-bootstrap bootstrap yarn add --save @types/bootstrap // _app.tsx import '../styles/globals.css' import type { AppProps } from 'next/app' import { useEffect } fr..

어떠한 nav바를 클릭했을 시 다른 상태를 보여줘야 한다고 생각합니다. 어떻게 할 수 있을까요? 일일히 버튼이 에스프레소 버튼, 프라푸치노 버튼이 클릭될 때마다 이벤트를 줘야할까요? $('americano').addEventListener('click', e => { ... }) $('frappuccino').addEventListener('click', e => { ... }) $('blended').addEventListener('click', e => { ... }) 이렇게 한다면 굉장히 비 효율적일 것입니다. 이럴 때 이벤트 위임을 이용할 수 있습니다. 이벤트 위임에는 이벤트 버블링과 캡쳐링이 있습니다. 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의..

// store.ts import { createStore } from 'redux' import rootReducer from '../reducers' const store = createStore(rootReducer) export type RootReducerType = ReturnType export default store reducers/addAllergy.ts interface IntialState { data?: string[] } const initialState: IntialState = { data: [], } type addAllergy = { type: 'addAllergy' payload: string[] } const AddAllergy = (state = initialStat..

TypeScript 4.5에는 @type/support의 작동 방식과 유사한 방식으로 특정 기본 제공 lib를 재정의하는 방법이 도입되었습니다. TypeScript에 포함되어야 할 lib 파일을 결정할 때 먼저 node_modules에서 범위가 지정된 @typescript/lib-* 패키지를 찾습니다. 예를 들어, lib의 옵션으로 dom을 포함할 때 TypeScript는 node_modules/@typescript/lib-dom에 있는 형식을 사용합니다. 그런 다음 패키지 관리자를 사용하여 지정된 lib를 대신할 특정 패키지를 설치할 수 있습니다. 예를 들어, 오늘날 TypeScript는 DOM API의 버전을 @type/web에 게시합니다. 예를 들어, 오늘날 TypeScript는 DOM API의 버..