전체 글74 [Next.js] Next.js 알아보기 Next.js 알아보기 # Next.js란 Next.js는 React를 효율적으로 이용할 수 있도록 도와주는 React의 프레임워크이다. Next.js 서버 측에서 React 코드를 실행한 뒤 pre-rendering하여 HTML을 생성하여 브라우저에게 보낸다. 그 후 브라우저에서 React를 사용해 웹 페이지를 완성하는 과정으로 작동한다. Next.js의 특징을 살펴보며 어떤 장점이 있는지 알아보자. # Next.js 특징 1. SSR (Server Side Rendering) CSR 방식으로 렌더링되는 React와는 다르게, Next.js는 SSR 방식으로 렌더링할 수 있게 해준다. CSR은 첫 로딩 시간이 길고 SEO(검색 엔진 최적화)에 불리하다는 단점이 있는데, SSR을 이용하면 웹 페이지 접속.. 2022. 12. 8. [JavaScript] 자바스크립트의 비동기 처리 자바스크립트의 비동기 처리 callback, Promise, async/await # 동기, 비동기란? 동기(synchronous)란 동시에 일어나는 것, 비동기(Asynchronous) 동시에 일어나지 않는 것이라는 의미이다. 동기와 비동기란 일을 처리하는 순서라고 해석할 수 있다. 예를 들어, 청소를 한다고 치자. 세탁기와 청소기를 돌려야 한다. 어떻게 해야 하는가? 세탁기 작동 버튼을 눌러놓고 세탁이 끝날 때까지 기다렸다가 청소기를 돌려야 하는가? 그건... 너무 비효율적이지 않은가?🤔 세탁기 작동 버튼을 눌러 놓고 세탁기가 돌아가는 동안 청소기를 돌리면 된다. 세탁기와 청소기는 각자 돌아가니까! 여기서 동기, 비동기 개념이 나온다. 하나가 끝나야 그 다음 일을 하는 것을 동기적 처리라고 한다. 세.. 2022. 12. 5. [React] 가상 DOM 가상 DOM # 가상 DOM의 등장 이유 React 가장 큰 특징은 가상 DOM을 사용한다는 것이다. 가상 DOM을 사용하는 이유를 알기 위하여 우선 브라우저 렌더링 과정을 이해해야 한다. 브라우저는 서버에게 렌더링에 필요한 리소스를 받고, 이를 이용하여 DOM을 생성한다. DOM은 렌더 트리를 구성하고, 이 렌더 트리를 기반으로 HTML 요소가 페인팅된다. 즉, DOM 트리 생성, 렌더 트리 생성, 레이아웃 계산(리플로우), 화면에 그리기(페인트) 과정을 거쳐 화면이 완성되는 것이다. 자세한 내용 : 브라우저 렌더링과 DOM https://inthedev.tistory.com/16 그러나 웹 페이지는 사용자와 상호작용한다. 따라서, DOM은 자주 변화한다. DOM의 변화 하나하나마다 계속해서 페이지를 .. 2022. 12. 5. [React] React Hooks와 useState, useEffect React Hooks와 useState, useEffect # React의 클래스형 컴포넌트와 함수형 컴포넌트 React의 컴포넌트를 작성하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 생명 주기 관련 기능을 사용할 수 있다. 함수형 컴포넌트는 상태값과 생명 주기 관련 기능을 사용할 수 없지만, Hook을 이용하여 이를 해결한다. 클래스 방식보다 함수 방식이 선언이 더 쉽고 메모리를 덜 사용한다는 장점이 있어서 현재는 함수형 컴포넌트 방식을 많이 사용한다. (React 공식 문서에서도 함수형을 권장하고 있다.) # React Hooks 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있도록 추가된 자바스크립트 함수이다. React.. 2022. 12. 4. [WEB] SPA, MPA와 CSR, SSR, SSG SPA, MPA와 CSR, SSR, SSG 1. SPA와 MPA 예전에는 웹 사이트를 만들 경우, 여러 페이지를 만들 때는 각각에 해당하는 html 파일을 만들었다. a페이지를 보여주기 위해서는 a.html을 만들고 b페이지를 보여주기 위해서는 b.html을 만든다. a페이지를 보다가 b페이지를 보고 싶으면 페이지를 새로 렌더링 했다. 이렇게 각 페이지에 해당하는 html을 다 따로 만들어서 페이지를 접속할 때마다 새로 렌더링해서 새로 html 페이지를 보여주는 전통적인 웹 페이지 방식, 이를 MPA(Multi Page Application)이라고 한다. 그러나 점차 웹 사이트의 규모가 커지고 데이터가 많아지면서 페이지를 바꿀 때마다 페이지를 새로 렌더링하면 속도가 느려지는 등의 문제가 생겼다. 따라서 .. 2022. 11. 29. [WEB] 브라우저 렌더링과 DOM 브라우저 렌더링과 DOM # 브라우저 렌더링 과정 우리는 웹 페이지를 어떻게 보게 되는가? 클라이언트가 서버에게 웹 페이지를 요청하면 서버는 그에 대한 응답으로 클라이언트에게 웹 페이지의 HTML, CSS, 자바스크립트로 구성된 텍스트 문서를 준다. 이 문서를 브라우저가 파싱(해석)하여 렌더링(시각적으로 출력)하는 과정을 거쳐 우리에게 보여지게 된다. 대략적인 과정은 다음과 같다. 1) 브라우저는 HTML, CSS, 자바스크립트 등 렌더링에 필요한 리소스를 서버에게 요청하고, 응답을 받는다. 2) 브라우저의 렌더링 엔진이 HTML을 파싱하여 DOM을 생성하고, CSS를 파싱하여 CSSOM을 생성한다. 3) DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 4) 브라우저의 자바스크립트 엔진이 자바스크립.. 2022. 11. 9. 이전 1 ··· 7 8 9 10 11 12 13 다음
