리액트 lazy
웹 애플리케이션의 초기 로딩 속도를 개선하는 핵심 전략 중 하나는 필요한 코드만을 적절한 시점에 로드하는 것이다. Reac.lazy는 이러한 코드 분할(Code Spliiting)을 효과적으로 구현할 수 있게 도와주는 도구다. 이 글에서는 React.lazy의 동작 원리와 사용 방법을 살펴 보겠다. 동적 import의 이해 모듈을 동적으로 불러오는 imp…
모듈 페더레이션 타입 힌트와 로깅
타입 힌트로 더 안전하게 이번 새로운 모듈 페더레이션은 타입 힌트 제공이라는 편의를 제공한다. 원격 모듈을 사용하는 애플리케이션을 흔히 호스트(또는 소비자)라고 부른다. 만약 호스트를 타입스크립트로 개발한다면, 원격 모듈의 타입 정보를 제공받는 것은 큰 장점이 된다. 이번 모듈 페더레이션은 원격 모듈과 호스트 간에 타입 정보를 동기화하여, 더 안전하고 예…
[HTTP] 6편. 성능
6편 소개 브라우져가 웹 페이지를 렌더링할 때 발생하는 HTTP 요청을 효율적으로 제어하는 다양한 기법 16장. 렌더링 최적화: 외부 리소스의 로드 시점을 제어해 웹 성능을 최적화하는 기술 17장. 캐시: 서버와 브라우저가 HTTP 헤더를 통해 캐싱 정책을 주고받아 성능을 최적화하는 메커니즘 16장. 로딩 최적화 16.1 렌더링 과정 DSN 질의 HTML…
[HTTP] 5편. 보안
5편 소개 브라우져 보안과 함께 HTTP 통신을 더 안전하게 만드는 TLS 13장. 브라우져 보안: XSS(크로스 사이트 스크립팅)와 같은 공격 기법과 이를 방지하기 위한 브라우저 보안 정책 14장. CORS: 외부 도메인의 자원을 안전하게 활용하기 위한 CORS 정책과 적용 방법 15장. HTTPS: HTTPS가 네트워크 보안을 강화하는 방식과 TLS의…
[HTTP] 4편. 추가 프로토콜
4편 소개 HTTP의 비연결성을 극복하는 다양한 기술 9장. 폴링: 클라이언트가 주기적으로 서버에 요청을 보내서 새로운 데이터를 확인하는 방법 10장. 롱 폴링: 폴링 보다 호율적인 통신 기법 11장. SSE: 서버가 클라이언트로 실시간 데이터를 푸시하는 방법 12장. 웹 소켓: 클라이언트와 서버 간의 양방향 통신 프로토콜 9장. 폴링 9.1 구조 지속적…
[HTTP] 3편. AJAX
3편 소개 직접 만들 수 있는 HTTP 요청 6장. AJAX 요청과 응답: fetch 함수로 AJAX 요청과 응답을 다루는 법에 대해 7장. AJAX 진행율과 취소: AJAX 진행율을 계산하는 방법과 요청을 취소하는 방법에 대해 8장. AJAX 라이브러리: fetch와 XHR 객체 기반의 주요 AJAX 라이브러리 6장. 업로드와 응답 6.1 AJAX Fr…
[HTTP] 2편. 브라우져
2편 소개 웹 브라우져가 HTTP를 어떻게 사용하는지 이해할수 있습니다. 3장. 컨텐츠 협상: 웹브라우져가 서버와 데이터를 주고 받을 때 최적의 형태로 만들기 위한 매커니즘을 이해하실 수 있습니다. 4장. 쿠키: 서버가 웹 브라우져를 식별하기 위한 방법인 쿠키에 대해 배우실 수 있습니다. 5장. 네트워크 요청: 웹 브라우저에서 발생할 수 있는 HTTP 요…
[HTTP] 1편. HTTP 기본
1편 소개 1장. HTTP 시작: 웹의 탄생 배경과 역사에 대해 알 수 있습니다. 2장. HTTP 메시지: HTTP의 주요 요소에 대해 배우실 수 있습니다. 1장. HTTP 시작 1.1 문서 배포 웹 어플리케이션의 동작 원리와 HTTP의 역할 HTTP로 전하는 강의 간단한 강의 제공 애플리케이션 구현 1.2 더 많은 문서 더 많은 수업 자료를 여러 페이지…
리액트19 베타
마침내 npm에서 리액트 19 베타를 사용할 수 있다. 관련한 문서에서는 액션이라는 새로운 개념과 파생된 리액트 훅을 소개한다. 그동안 사용했던 API를 더 편하게 바꾸거나 일부 라이브러리 기능을 대체하는 개선사항도 있다. 이 문서를 통해 앞으로 정식 버전이 될 리액트 19의 변경사항을 미리 살펴보자. Action과 useActionState 액션(Act…
컨텐츠 협상
서버는 다양한 클라이언트로부터 요청을 받는다. 같은 내용이라도 클라이언트마다 필요한 문서 형식이 다르다. 압축한 문서를 읽을 수도 있지만 그렇지 못한 경우도 있다. 한국어나 영어처럼 클라이언트가 선호하는 언어가 다르기도 하다. 각양각색의 클라이언트에게 적합한 자원을 제공하는 것 또한 서버의 역할이다. 클라이언트와 함께 서로의 입장 차이를 줄여나가며 거래할…
VIDEOS
리액트 1부: 만들면서 학습하는 리액트
2021년 05월 | 인프런프론트엔드 개발환경의 이해와 실습
2020년 03월 | 인프런Express.js 코드리딩
2019년 03월 | 유투브트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
2018년 11월 | 인프런견고한 JS 소프트웨어 만들기
2018년 06월 | 인프런Node.js 기반의 REST API 서버 개발
2018년 04월 | T아카데미실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
2018년 01월 | 인프런테스트주도개발(TDD)로 만드는 NodeJS API 서버
2017년 03월 | 인프런AngularJS 기본 개념과 To-Do 앱 만들기 실습 - 앵귤러 강좌
2016년 07월 | 유투브