본문 바로가기

코딩 정보/React36

[React][Virtual Dom][Fiber]에 대해 알아보자 목차 이전걸 참고하면 이해하는데 도움이 됩니다.참고https://be-senior-developer.tistory.com/189 브라우저의 랜더링에 대해 자세히 알아보자목차 브라우저의 정의웹상에 존재하는 페이지들의 HTML 언어를 해석해서 사용자의 컴퓨터 화면에 출력해 주는 프로그램그렇다면 웹브라우저의 구조는 어떻게 되어있을까? 다음그림을 통해 쉽be-senior-developer.tistory.com virtual Dom이란? DOM을 추상화한 가상의 객체로, Virtual DOM은 Real DOM 객체와 동일한 속성을 가지고 있는 가벼운 사본이다.  주요한 특징으로는 다음과 같다.React에는 모든 DOM 객체에 대응하는 가상의 DOM 객체가 있다.React는 실제 DOM 객체에 접근하여 조작하는 대.. 2024. 9. 16.
불변성이 중요해요! 그게 머죠? 너무 막연한데요.. 목차  오늘은 리액트에서 빠질 수 없는 불변성이라는 개념을 정리하고자 한다. 불변성의 정의 불변성의 의미는 상태를 변경하지 않는 것이라는 간단한 정의로 설명된다. 이렇게 말하면 정말 와닫지 않는다.그렇다면 불변성이 이야기하고 있는 상태의 변경이라는 것이 정확히 어떤 행위를 의미하는 것일까? 단순히 프로그램의 변수를 변경하거나 재할당 하지 않는 것을 이야기하는 것일까? 사실 불변성이 이야기하는 상태의 변경이라는 것은 단순한 변수의 재할당을 이야기하는 것이 아니다. 정확히 말하면 메모리에 저장된 값을 변경하는 모든 행위를 의미하며, 여기에 변수의 재할당과 같은 행위도 포함되는 것이다.   그렇다면 우리가 변수를 재할당하지만 않는다면 불변이라는 개념을 지킬 수 있는 것일까? 답을 알기 위해서는 다음의 개념을 .. 2024. 9. 14.
[React] Unit Test 에 대해 알아보자 목차 Unit Test란?단위 테스트(Unit Test)는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 여기서 모듈은 애플리케이션에서 작동하는 하나의 기능 또는 메소드로 이해할 수 있다. 예를 들어 웹 애플리케이션에서 로그인 메소드에 대한 독립적인 테스트가 1개의 단위테스트가 될 수 있다. 즉, 단위 테스트는 애플리케이션을 구성하는 하나의 기능이 올바르게 동작하는지를 독립적으로 테스트하는 것으로, "어떤 기능이 실행되면 어떤 결과가 나온다" 정도로 테스트를 진행한다.   Unit Test의 장점일반적으로 실무에서 테스트 코드를 작성한다고 하면 거의 단위 테스트를 의미한다. 통합 테스트는 실제 여러 컴포넌트들 간의 상호작용을 테스트하기 때문에 모든 컴포넌트들이 구동된 상태에서 .. 2024. 8. 30.
[React][TypeScript] 타입스크립트에 대해 알아보자 목차 타입스크립트가 무엇이고 왜 써야하는지 그리고 활용 방법에 대해 알아보자  타입스크립트란?타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어(static type language)이다.자바스크립트가 확장된 언어이기 때문에 기존 자바스크립트의 기능을 모두 사용할 수 있고 브라우저에서 실행하기 위해서 컴파일(complile)이라는 변환 과정을 거쳐야 한다.  타입스크립트는 왜 써야 하는거지?1. 에러의 방지// jsfunction sum(a, b) { return a + b;}// tsfunction sum(a: number, b: number) { return a + b;} number 타입에 문자열을 할당할 수 없다고 에러가 발생하게 되어 의도하지 않은 코드의 동작을 예방할.. 2024. 8. 28.
728x90