post-thumbnail

HTTP Cache

웹 사이트와 애플리케이션의 이전에 fetch한 자원을 재사용하는 것으로 성능 향상을 기대할 수 있습니다. 자원을 재사용하는 웹 캐시는 latency와 network traffic을 줄여서 웹 사이트를 더 responsive하게 만들어 줍니다.HTTP cache에는 sh

2022년 5월 15일
·
0개의 댓글
post-thumbnail

Web Worker

웹 워커는 싱글 스레드로 동작하는 JavaScript를 보완하기 위해서 브라우저가 제공하는 기능입니다. 아래는 Web Worker와 관련한 간단한 워크플로우입니다.Web Worker를 사용하지 않았을 때에는 UI 동작과 데이터 핸들링이 순차적인 방식으로 처리가 되는 반

2022년 4월 21일
·
0개의 댓글
post-thumbnail

React - batch

React에서는 setState() 또는 hook을 사용하여 컴포넌트의 state를 변경합니다. 그리고 state가 변경되면 리렌더링이 발생합니다. 그러면 react는 리렌더링의 비용을 줄이기 위해서 어떤 방법을 사용하고 있을까요?먼저, state 변경 API는 비동기

2022년 4월 10일
·
0개의 댓글
post-thumbnail

CSR, SSR

개발 패러다임이 변화하면서 최근에 많이 사용되는 SPA(Single Page Application)에서는 웹 페이지에 포함된 적은 양의 HTML로 DOMContentLoaded, load 이벤트가 일찍 발생할 수 있으나, 이벤트가 발생한 이후에도 수많은 스크립트 실행으

2022년 4월 3일
·
0개의 댓글
post-thumbnail

프론트엔드 성능 최적화

웹 사이트를 만드는건 누구든지 할 수 있는 일 입니다. 하지만 웹 사이트를 최적화하고 효율적으로 만드는 것은 개발자만이 할 수 있습니다. 그러면 프론트엔드 성능 최적화를 위해서 개발자는 무엇을 해야 할까요?먼저, 프론트 엔드 성능은 로딩과 렌더링으로 크게 2가지로 나눌

2022년 3월 27일
·
0개의 댓글

자바스크립트 엔진 최적화 기법

자바스크립트를 사용하여 코딩을 하면서 항상 가지고 있던 질문이 있습니다.어떻게 코딩을 해야 효율적인 자바스크립트 코드를 작성할 수 있을까?결론부터 말하자면, 정적타입 언어로 생각하고 코딩하면 됩니다. 자바스크립트는 타입을 가지고 이지 않는 동적언어 타입이며 컴파일 동작

2022년 3월 19일
·
0개의 댓글

CORS 란?

🚨 Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-A

2022년 3월 12일
·
0개의 댓글
post-thumbnail

Virtual Dom이란? Reconciliation 이란?

시장의 수요로 대부분 React을 공부해야 합니다. React는 기존 DOM을 제어하는 Vanilla JavaScript와 달리 Virtual DOM을 사용해서 라고 합니다.그럼, 왜 Vritual DOM을 제어하는게 DOM을 제어하는 것보다 좋을까요?virtua DO

2022년 3월 5일
·
0개의 댓글
post-thumbnail

인증과 인가

컴퓨터 네트워크를 제어하고 추적하기 위한 AAA framework가 존재합니다.AAA는 각각 Authentication, Authorization, Accounting를 의미하며 Authentication과 Authorization은 컴퓨터 네트워크를 제어하기 위해서

2022년 2월 26일
·
0개의 댓글

8. 스프린트 회고

스프린트 회고

2022년 2월 16일
·
0개의 댓글

7. 수영장 검색과 debounce

수영장 검색과 debounce

2022년 2월 16일
·
0개의 댓글

6. Pool 컴포넌트와 Request 모듈(2/2)

Pool 컴포넌트와 Request 모듈(2/2)

2022년 2월 16일
·
0개의 댓글

5. Pool 컴포넌트와 Request 모듈

Pool 컴포넌트와 Request 모듈

2022년 2월 16일
·
0개의 댓글

4. Footer 컴포넌트와 grid

2022년 1월 25일
·
0개의 댓글
post-thumbnail

3. Header 컴포넌트와 테스트

Header 컴포넌트와 테스트

2022년 1월 23일
·
0개의 댓글

2. React Router

React router dom

2022년 1월 23일
·
0개의 댓글

1. 함수형 컴포넌트와 클래스 컴포넌트

프로젝트 시작, React 함수형 컴포넌트와 클래스 컴포넌트

2022년 1월 23일
·
0개의 댓글
post-thumbnail

[Deep Deive][44장] REST API

Representational state transfer(REST)는 World Wide Web(WWW)를 효율적으로 사용하기 위해서 만들어진 소프트웨어 아키텍쳐 스타일 입니다. REST는 6개의 제약(constraints)이 있으며 이런 제약들을 따르는 Web API

2022년 1월 22일
·
0개의 댓글
post-thumbnail

[Deep Dive][40장] 이벤트

Event propagation이란 DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파(propagation)되는 것을 이야기 합니다.아래 그림을 보겠습니다.위 그림은 파란색으로 색칠된 <td> 태그에서 이벤트가 발생했을 떄의 이벤트가 발생하는 그림입니

2022년 1월 13일
·
0개의 댓글

[Deep Dive][33장] 7번째 데이터 타입 Symbol

Symbol은 ES6에 새로 도입된 primitive 값 입니다. Symbol의 유일한 값을 가질 수 있게 해주며 property를 숨길 수 있는 기능을 제공해줍니다. 그럼 이 기능들을 어떻게 제공해줄까요?Symbol값은 아래와 같이 생성할 수 있습니다.Symbol 값

2022년 1월 8일
·
0개의 댓글