개요 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때끝난다. 컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이러한 경우들에 컴포넌트의 라이프사이클 메서드를 사용한다. 라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다. ( 함수형 컴포넌트에서는 Hooks 기능을 사용해서 비슷한 기능을 처리하는데, 여기서는 다루지 않겠다. ) 본론 라이프사이클 메서드 이해 라이프사이클 메서드 종류는 총 9가지이다. will 접두사가 붙은 메서드 👉 어떤 작업을 작동하기 전에 실행 Did 접두사가..

async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다. 기본적인 사용법을 알아봅시다. function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙여주세요. 그리고 Promise 의 앞부분에 await 을 넣어주면 해당 프로미스가 끝날때까지 기다렸다가 다음 작업을 수..

프로미스는 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능입니다. 이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리를 해야 했었는데요, 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었습니다. 한번 숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현해봅시다. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0,..

AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. 동기, 비동기 flow 비동기 방식이란 99geo.tistory.com/64 비동기 프로그래밍 ( Asynchronous ) ? 비동기 프로그래밍 ( Async..

렌더링이란 ? 웹페이지 접속시 페이지를 화면에 그려주는 것 SSR Server side Rendering (서버사이드렌더링) 요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다. 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 페이지를 보여주는 방식 기술의 발전으로 웹에서 제공되는 정보량이 많아지고, 여러 문제점이 발견되면서 SPA가 등장하게 된다. CRS & SPA SPA는 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션을 의미한다. 이러한 방식을 클라이언트사이드 렌더링(CRS) 방식이라고 한다. 전통적인 SSR은 SPA에 비해 성능이 뒤떨어져있다. 주의할점 CRS != SPA 전통적인 웹페이지 렌더링 방식 != SSR 전통적인 웹..

SPA 중심에는 대표적인 라이브러리/프론트프레임워크 React, Vue/Angular가 있다. 1. SPA란? SPA란 Single Page Application의 약자이다. 단일 페이지 어플리케이션(SPA)는 현재 웹개발의 트랜드이다. 기존 웹 서비스는 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다. SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. 전통적인 페이지 vs 단일 페이지 어플리케이션 비교 예전부터 개발자들은 지속적으로 웹서비스와 개발방식을 발전시켜왔다. CSS, JS 리소스 등을 cdn형태로 캐싱 및 압축하고, View에서 템플릿엔진 들을 사용하고, 초기의 SPA 개념인 Backb..