jyoon dev log

HTML, CSS 코드 최적화하기 HTML, CSS 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다. 1. HTML 최적화 방법 (1) DOM 가볍게 만들기 DOM트리가 깊고 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다. 복잡도가 클수록 DOM 트리가 변경되었을 때 개선해야 하는 것도 많아진다. HTML 요소에서 불필요하게 깊이를 증가시키는 요소가 있으면 삭제한다. // 수정 전 1st 2nd 3rd // 수정 후 : 불필요한 div 요소 제거 1st 2nd 3rd (2) 인라인 스타일 사용하지 않기 CSS 파일을 따로 작성하면 단 한 번의 리플로우만 발생하는데, 인라인 스타일은 리플로우를 계속해서 발생시켜 파일 크기를 증가시킨다. 애초에 인라인 스타일은 웹 표준에 맞지 않으므로 지양해야한다..

React Hooks 1. react.lazy(), suspense 를 사용해서 동적으로 리소스 받아오기 react.lazy()와 suspense 는 같이 사용해야 한다. (앱의 볼륨이 작으면 속도감이 안 올 수 있다, 대형 프로젝트에서는 빠른 속도 체감할 수 있다.) 동적 import를 사용해서 받아오고, 받아온 것들을 suspens 컴포넌트 안에서 실행시킨다. App.js /* react 메소드 사용할 때 import React, { Suspense } from "react" 불러오기*/ import React, { Suspense } from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import useFetc..

Hook이란? Hook은 React 16.8에 새로 추가된 기능. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다. Hook은 클래스형 컴포넌트에서는 동작하지 않는다. function으로만 React를 사용할 수 있게 해주는 것이다. Hook 사용 규칙 1. 리액트 함수의 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않는다. 컴포넌트 안에는 useState나 useEffect 같은 Hook 들이 여러번 사용될 수 있는데 React는 Hook을 호출되는 순서로 저장 해놓는다..

React가 DOM 트리를 탐색하는 방법 React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. 즉, 같은 레벨(위치)끼리 비교한다는 뜻으로 너비 우선 탐색(BFS)의 일종이라고 볼 수 있다. 다른 타입의 DOM 엘리먼트인 경우 DOM 트리는 각 HTML 태그마다 각각의 규칙이 있어 그 아래 들어가는 자식 태그가 한정적이라는 특징이 있다. 태그 밑에는 태그만 오고, 태그 안에 태그를 또 쓰지 못하는 것. 자식 태그의 부모 태그 또한 정해져 있다는 특징이 있기 때문에, 부모 태그가 달라진다면 React는 이전 트리를 버리고 새로운 트리를 구축한다. //부모 태그가 div에서 span으로 바뀝니다. 부모 태그가 바뀌어버리면, R..

Virtual DOM React에는 Virtual DOM 이라고 하는 가상의 DOM 객체가 있다. 이 가상의 DOM 객체는 실제 DOM의 사본 같은 개념으로, React 는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분만 적용할 수 있다. Virtual DOM이 나오게 된 배경 DOM을 RealDOM으로 부르는 이유는 버츄얼 돔과 구분하기 위해서다. Real DOM (DOM-Document Object Model) DOM은 문서 객체 모델을 의미한다. 문서 객체란 브라우저가 자바스크립트와 같은 스크립팅 언어 , , 와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미한다. 돔은 브라우저가 트리 구조..

브라우저란? HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램 브라우저의 특징과 웹의 동작 원리 브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작한다. 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력한다. DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색한다. 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달한다. 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성해 TCP 프로토콜을 사..

Cmarket (Hooks 버전) Hooks를 이용해 상태를 다루는 것이 목적입니다. 또한 컴포넌트끼리 상태를 주고받는 과정을 연습할 수 있습니다. TODO: 장바구니에 추가 및 상품 개수 업데이트 다음과 같이 작동해야 합니다. 메인 화면에서 [장바구니 담기] 버튼을 누른 후, 장바구니 페이지로 이동하면 상품이 담겨있어야 합니다. 내비게이션 바에 상품 개수가 즉시 표시되어야 합니다. App.js import React, { useState } from "react"; import Nav from "./components/Nav"; import ItemListContainer from "./pages/ItemListContainer"; import "./App.css"; import { BrowserRou..

Node.js는 HTTP 요청을 보내거나, 응답을 받을 수 있는 도구들을 제공합니다. HTTP 요청을 처리하고 응답을 보내 주는 프로그램을 웹 서버(Web Server)라고 부릅니다. HTTP 모듈 HTTP 요청과 응답을 다루기 위해 HTTP 모듈을 사용한다. 웹서버를 구동하기 위한 기본적인 웹 모듈이다. 서버 생성 모든 node 웹 서버 애플리케이션은 웹 서버 객체를 만들어야 한다. 이 때 createServer를 이용한다. 이 서버로 오는 HTTP 요청마다 createServer에 전달된 함수가 한 번씩 호출된다. HTTP 요청이 서버에 오면 node가 트랜잭션을 다루려고 request와 response 객체를 전달하며 요청 핸들러 함수를 호출한다. 모듈을 사용하기 위해 http 모듈을 require..

JSX 문법 1. html에 class 넣을 때는 className JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 사용할 수 없다. 그래서 class=" " 넣고 싶으면 className이라고 쓴다. 2. 변수를 html에 넣을 때는 {중괄호} 중괄호 안에 데이터바인딩하고 싶은 변수명만 담으면 된다. *데이터바인딩: 변수에 있던걸 html에 꽂아넣는 작업 3. html에 style속성 넣고싶으면 { 속성명 : '속성값' } 글씨 font-size 처럼 속성명에 대쉬기호를 쓸 수 없다. 대쉬기호 대신 모든 단어를 붙여써야한다. 붙여쓸 땐 앞글자를 대문자로 치환하여 카멜 케이스로 작성한다.

React를 쓰는 이유 💡 instagram 웹사이트로 들어가면 페이지 전환을 했을 때 새로고침 없이 부드럽게 동작한다. 이런 페이지를 Single Page Application라고한다. 1. html을 함수, array, object에 보관하고 재사용할 수 있어서 큰 프로젝트일 수록 html 관리 편리해짐 2. React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능함 💡 Single Page Application html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 바꿔서 보여준다. 그래서 부드럽게 동작한다.