FrontEnd/Deep Dive

FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(7) 렌더링 & 메모이제이션
리액트에서 렌더링 과정에 대해 알아보자. 브라우저에서의 렌더링 브라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 의미한다. 사용자가 결국 보게되는 최종 결과물을 만드는 작업이기때문에 중요한 과정이며 렌더링 방식이 성능에도 크게 작용하게 된다. 리액트의 렌더링 리액트에서도 렌더링이 존재한다. 리액트의 렌더링은 DOM트리를 만드는 과정이다. 리액트의 렌더링과 브라우저의 렌더링은 조금 다르므로 명확히 정의하고 넘어갈 필요가 있다. 브라우저의 렌더링 : HTML,CSS로 웹 브라우저를 만드는 것 리액트의 렌더링 : 컴포넌트들이 어떻게 UI를 구성하고 어떤 DOM결과를 브라우저에 제공할지 계산하는 과정 렌더링 시나리오 리액트에서 렌더링이 발생하는 시나리오는 아래와..
→2023.12.20
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(6) 클래스형&함수형 컴포넌트
함수형 컴포넌트는 리액트 0.14버전부터 있었던 생각보다 오래된 문법이다. var Aquarium = (props) -> { var fish = getFish(props.species) return {fish} } var Aquarium = ({species}) => {getFish(species)} 이당시 함수형 컴포넌트는 클래스형 컴포넌트에서 별다른 생명주기 메서드나 상태가 없이 단순히 render를 하는 경우에만 사용되었다. 함수형 컴포넌트에 훅이 등장하면서 점점 복잡한 클래스 컴포넌트보다 함수형 컴포넌트가 사용되었다. 이 과도기에서 문제도 많았고 과연 함수형 컴포넌트와 클래스형 컴포넌트의 차이가 무엇인지 알 필요도 있다. 클래스형 컴포넌트 리액트 16.8 미만으로 작성된 코드는 대부분 클래스형 컴..
→2023.12.19
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(5) 가상 DOM & 리액트 파이버
리액트의 가장 큰 특징중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다! 이러한 가상 DOM은 왜 만들어졌고 실제 DOM과는 어떤차이가 있는지 알아보자. DOM(Document Object Model) 웹페이지에 대한 인터페이스로 브라우저가 웹 페이지의 콘텐츠와 구조를 어떠한 방식으로 보여줄지에 대한 정보가 담겨있다. 브라우저가 웹 사이트 접근 요청을 받고 화면은 그리는 일은 아래의 순서대로 일어난다. 1. 브라우저가 URL에서 HTML파일을 다운로드 2. HTML을 파싱하여 DOM 트리를 만든다. 3. (2)번과정 진행중 CSS파일을 만나면 CSS파일을 다운로드 4. CSS를 파싱하여 CSSOM을 구성 5. (2)번 DOM노드를 순회한다. (display : none 과 같은 사용자에게 안..
→2023.12.18
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(4) JSX
이제 리액트의 핵심 요소들을 하나씩 알아보자. JSX(JavaScript XML) 많은 프론트엔드 개발자들이 착각하는 것은 JSX가 리액트의 전유물이라는 것이다. 물론 JSX가 리액트가 등장하며 소개된 구문인점은 맞지만 리액트와는 독립적으로 동작하는 문법이다. JSX는 ECMAScript 자바스크립트 표준의 일부는 아니기 때문에 해당 코드를 바로 실행하면 에러가 발생한다. 따라서 JSX를 활용하려면 트랜스파일러를 거쳐서 의미있는 JS 코드로 변환하는 작업이 필요하다. JSX의 주 목적중 하나는 HTML이나 XML을 JS내부에 표현하는 것이다. 그 외에도 JSX내부에 트리구조로 표현하고 싶은 다양한 것들을 작성하고 이를 JS가 이해할 수 있는 코드로 변경하는 것이 주된 목적이라고 할 수 있다. JSXEle..
→2023.12.18
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(3)타입스크립트
최근 대다수의 자바스크립트 프로젝트는 타입스크리트 기반으로 작성되는 경우가 많다. 코드 작성환경에서 타입을 체크할 수 있는 타입스크립트는 코드를 더욱 안전하게 짤 수 이쎅 도움을 주고 잠재적인 버그들 또한 줄여주기 때문이다. 타입스크립트 ? TypeScript is JavaScript with syntax for types. 기존 자바스크립트 문법에 타입을 가미한 것 JS는 기본적으로 동적 타입언어이다. 이는 편리하기도 하지만 대부분의 에러를 코드를 실행하는 단계에서 알 수 있다라는 단점이 있어 프로젝트 규모가 커질수록 발목을 잡게 된다는 단점이 존재한다. 아래 함수를 한번 보자. function test(a,b) { return a/b } test(5,2) // 2.5 test('안녕하세요','하이')..
→2023.12.15
FrontEnd/Deep Dive
[React] DeepDive 모던리액트(2) 동등 비교
자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 가지고 있으며 원시타입과 객체 타입으로 나누어져 있다. 원시타입 : boolean,nulll,undefined,number,string,symbol,bigint 객체타입 : object 이 데이터 타입 중에서 true,false이외에도 조건문에서 마치 true와 false처럼 동작하는 truthy,falsy값이 존재함을 알아두자. false,0,-0,0n,0x0n,NaN,"",'',``,null,undefined 위 값들이 JS에서 falsy로 동작되게 된다. Number 정수,실수를 구분하는 일반적인 언어와는 달리 자바스크립트는 모든 숫자를 하나의 타입에 저장했었다. 지금은 보다 큰 숫자를 다룰 수 있는 BigInt 자료형이 추가되었다...
→2023.12.14

• 이전
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• ···
• 14
• 다음