profile
superfly

object와 array비교

js에서 typeof arr === typeof object그렇다면 object와 array의 타입 구분을 어떻게 할 것인가?

2020년 11월 25일
·
0개의 댓글

쿠키/세션/캐시

클라이언트 - 서버 간 통신 규칙을 Http라 할 수 있다.HTTP의 특징은 2가지로 볼 수 있는데 다음과 같다.1\. Stateless서버는 클라이언트의 상태를 기억하고 있을 필요가 없다.데이터를 주고 받았어도, 그 다음 통신에서는 이전 데이터나 상태를 기억할 필요가

2020년 11월 17일
·
0개의 댓글

function arguments

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

2020년 11월 17일
·
0개의 댓글

localStorage/sessionStorage

HTML5에서 등장localStoragesessionStorageIE8+이상의 모든 브라우저에서 지원기존의 쿠키보다 훨씬 안전하다 / 개발자 도구의 application에서 수동으로 삭제 하거나 브라우저 캐시 삭제를 하지 않는 한, 인터넷 다시 켜도 남아있다오리진(or

2020년 10월 21일
·
0개의 댓글

@apollo/client

ExchangeRates component within your App component from the previous example, you'll first see a loading indicator on the page, followed by data when i

2020년 10월 18일
·
0개의 댓글

graphQL클라이언트

GraphQL 클라이언트 라이브러리 GraphQL은 프론트엔드 개발자에게 특히 편리합니다.왜냐하면 REST API를 사용하면서 겪을 수 있는 Under/Overfetch를 비롯한 많은 불편함과 단점들을 해소시켜주기 때문입니다. 복잡성은 막중한 연산 작업을 모두 감당할

2020년 10월 18일
·
0개의 댓글

graphQL 쿼리 작성

쿼리 - 클라이언트가 무슨 데이터가 필요한지 알려주는 객체와 비슷한 형식의 정보클라이언트는 단 하나의 엔드포인트를 통해 데이터를 가져오고 이 구조는 클라이언트가 원하는 유연한 구조를 취할 수 있다.위의 쿼리문은 데이터베이스에 현재 저장된 모든 도시의 정보(이름/나이)을

2020년 10월 18일
·
0개의 댓글

graphQL

1.REST api를 대체하는 새로운 api표준(facebook이 개발/유지)API 클라이언트가 서버로부터 데이터 받아오는 방법을 정의GraphQL의 핵심은 클라이언트가 필요한 데이터를 정확히 가져올 수 있다는 것,서버에서는 단 하나의 api만 노출2.API에 대한 쿼

2020년 10월 18일
·
0개의 댓글

async/await룰

함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 단, 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다. 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반

2020년 10월 16일
·
0개의 댓글
post-thumbnail

Infinite Scroll

Intersection Observer APIreact hooks (useState,useEffect,useRef)스크롤 이벤트 발생시마다 eventListener를 발생시키는 것은 javascript의 main thread에 계속 성능상 영향을 줌,따라서 특정 요소가

2020년 10월 5일
·
0개의 댓글
post-thumbnail

여러 개의 state를 useReducer로 관리

실행 결과다음과 같은 화면이 출력

2020년 10월 2일
·
0개의 댓글

useReducer

useState의 대체 함수로, 하나의 컴포넌트에서 여러 개의 state를 다룰 때 사용(state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환initalState에 넣어준 값 ===

2020년 10월 2일
·
0개의 댓글

propTypes

PropTypes 컴포넌트에서 전달받은 props의 타입을 확인가능하게 함 컴포넌트 파악에 도움이 된다 설치 리액트에 내장 되어 있기에 리액트만 설치되어 있다면 설치 필요X 사용 import PropTypes from "prop-types"; Greeting.js

2020년 10월 1일
·
0개의 댓글

react 컴포넌트 작성규칙

다음과 같은 컴포넌트를 통해 컴포넌트 작성시 권장되는 것들을 알아보려 합니다.이 코드를 하나씩 뜯어보자면

2020년 9월 30일
·
0개의 댓글
post-thumbnail

React Context과 useContext

React Context는 전역 데이터를 담고 있는 하나의 저장 공간

2020년 9월 30일
·
0개의 댓글

리액트 가상돔과 리액트 요소

브라우저의 돔을 변경하는 것은 많은 자원이 필요한 일 따라서 리액트는 메모리에 가상돔을 올려놓고 이전과 비교하여 변경된 부분만 브라우저의 돔에 반영한다. 즉, 변경한 요소의 이전 DOM을 삭제하고 새로운 상태의 DOM을 생성하여 붙인다. 컴포넌트 삭제(unmount)

2020년 9월 28일
·
0개의 댓글

훅의 사용

다음을 지켜야 리액트가 각 Hook의 상태를 제대로 기억하고 사용규칙 1: 하나의 컴포넌트에서 훅을 사용하는 순서는 항상 같아야 한다,if문 안에서 훅 쓰지 말것 => 실행 안 될수도 있기에for문 안에서 훅 쓰지 말것 => for문 조건 따라 실행 횟수 달라지고 실행

2020년 9월 28일
·
0개의 댓글
post-thumbnail

리액트의 배열 반환

별 건 아니지만,리액트가 배열을 요소로 반환할 수 있다는 걸 처음 알게 되었다.대신 key값은 꼭 주기 ``를 쓰면 그 안에 있는 요소의 순서가 키의 역할을 하기에 key값을 따로 줄 필요 X

2020년 9월 27일
·
0개의 댓글
post-thumbnail

React.memo를 이용한 컴포넌트 렌더링

부모컴포넌트 Counter.js / 자식: Title.js부모컴포넌트<Counter/>의 state 변화시, 자식 컴포넌트<Title />도 렌더링된다. 그러나 <Title title={Clicked ${count2-10} times} />과 관련있는

2020년 9월 27일
·
0개의 댓글

e.currentTarget vs e.target

currentTarget => 이벤트가 등록되어 있는 요소를 가리킴,target => 이벤트가 실제 일어나는 요소를 가리킴

2020년 9월 25일
·
0개의 댓글