Front-End Study89 모던 리액트 딥다이브 - 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. 모던 리액트 딥다이브 - 7회차 [3-1, 3-2, 3-3] 3. 리액트 훅 깊게 살펴보기함수 컴포넌트가 상태 사용 및 생명주기 메서드 대체를 위해 사용하는 것이 바로 훅(hook) 이다.3.1 리액트의 모든 훅 파헤치기✨클래스 컴포넌트만 영유하던 리액트의 핵심적인 기능들을 함수 컴포넌트가 사용할 수 있게 하여 함수의 시대를 열어준 귀중한 친구.3.1.1 useState🔖 함수 컴포넌트 내부에서 상태를 정의 및 관리할 수 있게 해주는 훅// 기본적인 형태const [num, setNum] = useState(0);setNum(1);구조분해할당을 통해 가져오며, 첫번째 원소는 state 값 자체, 두번째 요소는 state를 변경하는데 사용하는 setter 함수를 가진다.❗만약 useState 의 형태를 사용하지 않는다면?기본적으로 리액트는 "상태 변화"를 감지하고.. 2024. 6. 19. 이전 1 2 3 4 5 6 ··· 15 다음
