본문 바로가기

스터디7

모던 리액트 딥다이브 - 13회차 [8-1, 8-2] 8. 좋은 리액트 코드 작성을 위한 환경 구축하기좋은 코드를 작성하기 위한 ESLint와 리액트 테스트 라이브러리를 알아보자8.1 ESLint를 활용한 정적 코드 분석✨ JS 생태계에서 가장 많이 사용되는 정적 코드 분석 도구 ESLint에 대해 알아봅세~8.1.1 ESLint 살펴보기🔖 ESLint 어떻게 이렇게 쌈@뽕하게 JS 코드를 분석하는 걸까?JS코드를 문자열로 읽는다.JS 코드를 분석 가능한 파서(parser)로 코드를 구조화한다.구조화한 AST(Abstract Syntax Tree)라 하고, 이를 각종 규칙과 대조한다.규칙 위반 코드를 알리거나 수정한다.🖥️ 코드 변환 톺아보기const handleCancelClick = () => { setIsEditing(false); setRen.. 2024. 7. 12.
모던 리액트 딥다이브 - 11회차 [6-1, 6-2, 6-3, 6-4] 6. 리액트 개발 도구로 디버깅하기리액트 개발 도구를 이용해 디버깅 및 리액트 앱의 정보를 파악하자6.1 리액트 개발 도구란?✨ 브라우저 확장 프로그램을 사용해 'react-dev-tools' 를 사용해보자6.2 리액트 개발 도구 설치✨ 크롬 확장 프로그램 기준 react-dev-tools설치 후 리액트 로고가 회색이 아닌 푸른색으로 표시된다면 '프로덕션', 붉은색으로 표시된다면 '디벨롭' 모드로 실행되고 있다는 뜻이다.예시로 든 토스 홈페이지는 현재 프로덕션 모드로 진입했으므로 푸른색이고, Next.js 로 개발되었으므로 리액트 개발 도구 또한 사용 가능하다.6.3 리액트 개발 도구 활용하기✨ Component, Profiler 두가지 도구를 이용해 리액트 앱의 작동을 알아보자6.3.1 컴포넌트🔖 이.. 2024. 7. 11.
모던 리액트 딥다이브 - 10회차 [5-1, 5-2] 5. 리액트와 상태 관리 라이브러리상태 관리는 왜 필요하고 어떻게 작동하는가5.1 상태 관리는 왜 필요한가?✨ 웹 내부에서 상태란 어떠한 의미를 지니고 지속적으로 변경되는 값을 의미상태는 웹의 발전에 따라 다양해지고 있으며 이를 효율적으로 관리하는 방법을 고민해야 한다.5.1.1 리액트 상태 관리의 역사🔖 Flux 패턴의 등장Context API 가 나오기 전까지는 이렇다할 상태관리에 관련된 기능이 없었다.웹 앱이 발전함에 따라 복잡성이 증가했고, 이러한 문제의 원인이 '양방향 바인딩' 으로 귀결되었다.❗뷰(HTML)과 모델(JS) 서로가 서로를 변경 가능하여 데이터의 복잡성과 관리 난이도가 증가때문에 이를 완화하고자 단방향 데이터의 흐름을 제안하였다. (Flux 패턴)액션(action) : 작업 처리.. 2024. 6. 30.
모던 리액트 딥다이브 - 8회차 [4-1, 4-2] 4.1 서버 사이드 렌더링이란?✨ 서버 사이드 렌더링이 SPA보다 더 복잡할 수 있음에도 불구하고 각광받는 이유는?4.1.1 싱글 페이지 애플리케이션의 세상🔖 싱글 페이지 애플리케이션은 무엇일까렌더링 및 라우팅에 필요한 대부분의 기능을 브라우저의 JS에 의존하는 것하나의 페이지에서 모든 작업을 처리하므로 SPA라고 지칭바디 태그 내부의 내용을 JS로 삽입 후 렌더링 하므로, 실제 코드상으론 빈 태그만 존재요청 및 결과를 바탕으로 내부 DOM을 추가, 수정, 삭제하므로 첫 로딩 시에는 느릴 수 있으나, 다음 렌더링부턴 매우 빠르게 동작 가능🏷️ 전통 방식과 SPA의 비교기존의 방식은 페이지가 전환될 때마다 페이지의 정보가 담긴 HTML 코드를 요청하므로, 페이지를 HTML 단계부터 다시 그려내게 된다... 2024. 6. 25.
모던 리액트 딥다이브 6회차 [2-3, 2-4, 2-5] 2.3.1 클래스 컴포넌트🔖오래된 코드의 유지보수나 라이브러리 사용을 효율적으로 하기 위해선 역사의 뒤안길로 사라진 클래스형 컴포넌트를 알 필요가 있다.기본적으로 클래스 컴포넌트는 클래스 선언과 extends 키워드를 통한 컴포넌트 상속으로 이루어진다.클래스 컴포넌트를 만들기 위해 extends 하는 컴포넌트이고, shouldComponentUpdate 컴포넌트를 다루는데서 둘의 차이가 생긴다.React.ComponentReact.PureComponent// 사용 예시import React from "react";class Sample extends React.Component { render() { return Hi~; }}컴포넌트를 만들 때 사용하는 props, state, 메서드의 정의i.. 2024. 6. 17.
모던 리액트 딥다이브 - 4회차 [1-6, 1-7] 1.6 리액트에서 자주 사용하는 자바스크립트 문법자바스크립트 문법을 이해한다면 리액트의 작동 방식 또한 이해할 수 있다.🔖 항상 새로운 버전이 나오는 JS의 문법을 숙지하고, 사용자의 입장도 고려하여 개발해야한다.👍 이를 위해 사용하는 것이 바로 트랜스파일러인 "바벨"이다.1.6.1 구조 분해 할당🔖 배열이나 객체의 값을 분해해 개별 변수에 바로 할당하는 것을 의미🏷️ 배열 구조 분해 할당배열의 구조를 분해하여 개별 변수에 할당하는 것","을 이용하여 값을 결정// 스프레드 연산자 활용 예시const arr = [1, 2, 3, 4, 5];const [first, second, third, ...arrayRest] = arr;// 1 2 3 [4, 5]/.. 2024. 6. 8.