본문 바로가기

전체 글233

브라우저의 랜더링에 대해 자세히 알아보자 목차 브라우저의 정의웹상에 존재하는 페이지들의 HTML 언어를 해석해서 사용자의 컴퓨터 화면에 출력해 주는 프로그램그렇다면 웹브라우저의 구조는 어떻게 되어있을까? 다음그림을 통해 쉽게 구조를 볼 수 있다.      사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시통 신: HTTP요청과 같은 네트워크 호출에 사용됨JS 엔진: 자바스크립트 코드를 해석하고 실행UI 백엔드: 기본적인 위젯(콤보 박스 등)을 그림자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스그 중 우리가 자세히 살펴볼 내용은 렌더링 엔진이다. 랜더.. 2024. 9. 14.
불변성이 중요해요! 그게 머죠? 너무 막연한데요.. 목차  오늘은 리액트에서 빠질 수 없는 불변성이라는 개념을 정리하고자 한다. 불변성의 정의 불변성의 의미는 상태를 변경하지 않는 것이라는 간단한 정의로 설명된다. 이렇게 말하면 정말 와닫지 않는다.그렇다면 불변성이 이야기하고 있는 상태의 변경이라는 것이 정확히 어떤 행위를 의미하는 것일까? 단순히 프로그램의 변수를 변경하거나 재할당 하지 않는 것을 이야기하는 것일까? 사실 불변성이 이야기하는 상태의 변경이라는 것은 단순한 변수의 재할당을 이야기하는 것이 아니다. 정확히 말하면 메모리에 저장된 값을 변경하는 모든 행위를 의미하며, 여기에 변수의 재할당과 같은 행위도 포함되는 것이다.   그렇다면 우리가 변수를 재할당하지만 않는다면 불변이라는 개념을 지킬 수 있는 것일까? 답을 알기 위해서는 다음의 개념을 .. 2024. 9. 14.
[프로젝트][React] 예약 사이트 기능 구현하기 (when to meet) 목차이번 기능을 구현하면서 비대화형 이벤트에 대해서 많이 알아갔다.또한 비대화형 이벤트가 생각이상으로 까다로워서 당황스러웠다... 그래서 이번 기회에 한번 정리해보려고 한다. 완성한 모습대충 주요 기능만 완성하였다... 구현 시 고민했던 부분들1. 컴포넌트의 merge 컴포넌트가 합쳐지는 것이 너무 까다로워서 display의 여부로 만들었고 첫인덱스의 배열크기를 늘렸다.처음에는 배열을 늘리고 줄이는 식으로 했는데 그렇게 하면 인덱스 다루는 것이 너무 까다로워 배열의 크기는 바꾸지 않는 선으로 다시 진행했다. 각 배열 아이템의 타입 정의export interface ReservationInterface { content: string; //내용을 담을 곳 time: number; display:.. 2024. 9. 12.
[React] Unit Test 에 대해 알아보자 목차 Unit Test란?단위 테스트(Unit Test)는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 여기서 모듈은 애플리케이션에서 작동하는 하나의 기능 또는 메소드로 이해할 수 있다. 예를 들어 웹 애플리케이션에서 로그인 메소드에 대한 독립적인 테스트가 1개의 단위테스트가 될 수 있다. 즉, 단위 테스트는 애플리케이션을 구성하는 하나의 기능이 올바르게 동작하는지를 독립적으로 테스트하는 것으로, "어떤 기능이 실행되면 어떤 결과가 나온다" 정도로 테스트를 진행한다.   Unit Test의 장점일반적으로 실무에서 테스트 코드를 작성한다고 하면 거의 단위 테스트를 의미한다. 통합 테스트는 실제 여러 컴포넌트들 간의 상호작용을 테스트하기 때문에 모든 컴포넌트들이 구동된 상태에서 .. 2024. 8. 30.
728x90

티스토리툴바