전체 글101 모던 리액트 딥다이브 - 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. 모던 리액트 딥다이브 - 12회차 [7-1 ~ 7-7] 7. 크롬 개발자 도구를 활용한 애플리케이션 분석일반적인 웹 애플리케이션의 디버깅 수행을 위해 범용적인 도구인 개발자 도구를 사용해보자7.1 크롬 개발자 도구란?✨ 크롬에서 제공하는 개발자 도구로, 크롬 브라우저에서 웹 페이지의 거의 모든 상황을 볼 수 있는 강력한 도구마우스 우클릭 후 검사, 혹은 F12 버튼을 통해 들어갈 수 있다.만약 확장 프로그램 등 다른 외부 요소에 영향을 받고 싶지 않다면 시크릿 모드로 들어가는 것을 권장한다.7.2 요소 탭✨ 현재 웹페이지를 구성하는 HTML, CSS 등의 정보를 확인 가능7.2.1 요소 화면🔖 원하는 태그를 클릭하거나 맨 왼쪽 화살표창 버튼을 클릭 후 화면 상의 요소를 직접 클릭해 찾는 것도 가능하다.직접 코드를 수정해서 웹 페이지 상에 적용된 요소들의 체.. 2024. 7. 11. 모던 리액트 딥다이브 - 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. 모던 리액트 딥다이브 - 9회차 [4-3] 4.3 Next.js 톺아보기✨ 리액트 서버 사이드 렌더링 프레임워크로서 최전성기를 달리고 있는 Next.js 를 살펴보자4.3.1 Next.js란?🔖 Next.js는 서버사이드 렌더링을 염두에 두고 PHP를 대체하기 위해 만들어진 리액트 프레임워크다.기존 리액트에서 진행했던 프로젝트인 react-page 에서 영감을 받은 디렉토리 기반 라우팅을 지원한다.4.3.2 Next.js 시작하기🔖 create-next-app을 사용하여 프로젝트를 시작할 수 있다.npx create-next-app@latest --tsnpm 을 통해 구동하므로 기본적인 package.json 을 통해 대략적인 파악이 가능하다.next.config.js 파일을 통해 Next.js의 환경 설정을 할 수 있다.🏷️ pages 폴.. 2024. 6. 25. 모던 리액트 딥다이브 - 8회차 [4-1, 4-2] 4.1 서버 사이드 렌더링이란?✨ 서버 사이드 렌더링이 SPA보다 더 복잡할 수 있음에도 불구하고 각광받는 이유는?4.1.1 싱글 페이지 애플리케이션의 세상🔖 싱글 페이지 애플리케이션은 무엇일까렌더링 및 라우팅에 필요한 대부분의 기능을 브라우저의 JS에 의존하는 것하나의 페이지에서 모든 작업을 처리하므로 SPA라고 지칭바디 태그 내부의 내용을 JS로 삽입 후 렌더링 하므로, 실제 코드상으론 빈 태그만 존재요청 및 결과를 바탕으로 내부 DOM을 추가, 수정, 삭제하므로 첫 로딩 시에는 느릴 수 있으나, 다음 렌더링부턴 매우 빠르게 동작 가능🏷️ 전통 방식과 SPA의 비교기존의 방식은 페이지가 전환될 때마다 페이지의 정보가 담긴 HTML 코드를 요청하므로, 페이지를 HTML 단계부터 다시 그려내게 된다... 2024. 6. 25. 이전 1 2 3 4 5 6 ··· 17 다음
