lyuna's story

4.2.6 서버 사이드 렌더링 예제 프로젝트 index.tsx create-react-app의 index.jsx와 유사한 역할을 하는 애플리케이션의 시작점으로, hydrate가 포함돼 있다. 이 파일의 목적은 서버로부터 받은 HTML을 hydrate를 통해 완성된 앱 애플리케이션으로 만드는 것이다. hydrate는 서버에서 완성한 HTML과 하이드레이션 대상이 되는 HTML의 결과물이 동일한지 비교하는 작업을 거치기 때문에,이 비교 작업을 무사히 수행하기 위해 한 번 더 데이터를 조회한다. App.tsx 일반적으로 사용자가 만드는 리액트 애플리케이션의 시작점.todos를 props로 받는데, 이 props는 서버에서 요청하는 todos를 받는다.이 props.todo를 기반으로 렌더링하는 평범한 컴포넌트..

4.1.1 싱글 페이지 애프리케이션의 세상 싱글 페이지 애플리케이션이란? 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식. 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다.  페이지 전환 시 새로운 HTML페이지를 요청하는 게 X자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 HTTP요청으로 가져온 다음,그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로 페이지가 전환된다. 전통적인 방식의 애플리케이션과 싱글 페이지 애플리케이션의 작동 비교 과거에는 페이지 전환이 발생할 때마다 새롭게 페이지를 요청, HTML 페이지를 다운로드해 파싱하는 작업을 거쳤다.>> 페이지를 처음부터 새로 그려야 ..

7.1 크롬 개발자 도구란?크롬 브라우저에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 작업을 분석하고 디버깅할 수 있는 강력한 기능을 제공합니다. HTML, CSS, JavaScript를 포함한 다양한 요소를 실시간으로 확인, 수정하며 디버깅 과정을 간소화할 수 있어 웹 개발자들에게 필수적인 도구로 자리 잡고 있습니다.  7.2 요소 탭 (Elements)요소 탭은 현재 웹페이지를 구성하는 HTML과 CSS의 구조 및 스타일 정보를 제공하며, 이를 실시간으로 확인하거나 수정할 수 있는 공간입니다.  주요 기능 HTML 확인 및 수정: HTML 코드를 실시간으로 수정하여 변경사항을 바로 확인 가능.스타일 검사 및 수정: 특정 요소에 적용된 CSS 스타일 확인 및 수정.디버깅 지원: 중단점..

6.1 리액트 개발 도구란?리액트 개발 도구를 브라우저 확장 도구로 설치해 리액트 애플리케이션을 디버깅하는 방법을 살펴보자.!  6.2 리액트 개발 도구 설치 우선 브라우저에 리액트 개발 도구를 브라우저 확장 도구로 설치해야 한다.크롬, 파이어복스, 엣지 브라우저를 지원하며 개발자 본인이 주로 개발하는 브라우저에 설치하면 된다.  크롬 확장 프로그램을 설치하면 크롬 우측 상단에 잇는 확장 도구 모음에 리액트 로고가 표시된다. 리액트 로고가 회색으로 표시된다면 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이다. 리액트 애플리케이션을 개발 모드로 실행한 후 리액트 로고가 빨간색으로 표시된다면 정상적으로 실행된다는 뜻이다.  실제 프로덕션에 배포돼 있는 웹 애플리케이..

HTTPS는 암호화된 통신을 제공하지만 HTTP는 그렇지 않는다. 만약 프론트가 HTTPS로 제공되는데, 백엔드가 HTTP로 제공된다면 이를 "Mixed Content"로 간주하여 요청을 차단한다.  현재 리액트에서의 yarn dev시 테스트 환경은 http://localhost:3000/ 이라이걸 https 로 변경해서 테스팅 해보려한다. mkcert로 localhostSSL 인증서를 생성한다. mkcert는 개발환경에 SSL 인증서를 만들어주는 라이브러리 이다. 우선 터미널에서 brew로 mkcert를 설치한다.brew install mkcert  React 어플리케이션 루트 폴더로 들어가 mkcert를 실행하고 localhost SSL 인증서를 만들어준다. mkcert -install mkcert..

리액트 함수 컴포넌트에서 가장 중요한 개념인 리액트 훅에 대해 알아봅시당.  3.1.1 useState 컴포넌트에서 상태를 관리하기 위해 사용하는 가장 기본적인 훅리액트 컴포넌트 내부에서 상태를 선언하고 업데이트컴포넌트에서 변하는 값을 리액트가 기억하고 관리할 수 있다기본 사용법const [state, setState] = useState(initialState) state 현재 상태 값을 저장하는 변수setState를 사용하여 값을 변경setState상태를 업데이트하는 함수호출하면 컴포넌트가 리렌더링 된다initialState상태의 초기값. 숫자, 문자열, 객체 등 어떤 값도 가능하다. useState는 클로저를 활용해 컴포넌트 렌더링 이후에도 상태와 상태 업데이트 함수를 기억하고 관리한다,!  게으른..

3.2.1 사용자 정의 훅 사용자 정의 훅서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것.리액트에서만 사용할 수 있는 방식반드리 use로 시작하는 함수를 만들어야 한다.(해당 함수가 리액트 훅이라는 것을 인식할 수 있다)사용자 정의 훅으로 분리하지 않는다면 fetch로 API를 호출해야 하는 모든 컴포넌트 내에서 각각 선언해서 구현해야 할 것이다.useReducer을 사용하더라도 useEffect가 필요하기 때문에 훅을 중복해서 사용해야 할 것이다. 훅은 함수 컴포넌트 내부 혹은 사용자 정의 훅 내부에서만 사용할 수 있기 때문에 use로 시작하지 않거나 대문자로 시작하지 않는 함수 내부에서 훅을 호출한다면 에러가 발생한다.  3.2.2 고차 컴포넌트 컴포넌트 자체의 로직을 재..

3.1.8 useImperativeHandle 실제 개발 과정에서는 자주 볼 수 없는 훅으로 널리 사용되지는 않는다. useImperativeHandle를 이해하기 위해서는 먼저 React.forwardRef에 대해 알아야 한다. forwardRef 살펴보기ref는 useRef에서 반환한 객체로, 리액트 컴포넌트의 props인 ref에 넣어 HTMLElement에 접근하는 용도로 흔히 사용된다.ref를 상위 컴포넌트에서 하위 컴포넌트로 전달하고 싶다면? 그러나 직접 props로 넣어 사용할 수 없다면? forwardRef를 사용하면 네이밍의 자유가 주어진 props보다 더 확실하게 ref를 전달할 것임을 예측할 수 있고,사용하는 쪽에서도 안정적으로 받아 사용할 수 있다. const ChildCompone..

3.1.5 useRef useRef와 useState는 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있다. useState와 구별되는 큰 차이점 두 가지useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다.useRef로 useState를 흉내내도 렌더링이 되지 않는다.  useRef가 왜 필요할까? useRef는 컴포넌트가 렌더링될 때만 생성되고, 컴포넌트 인스턴스가 여러 개라도 각각 별개의 값을 바라본다. useRef의 가장 일반적인 사용 예는 DOM에 접근하고 싶을 때 이다.function RefComponent () { const inputRef = useRef(..

리액트 함수 컴포넌트에서 가장 중요한 개념이 바로 훅이다.리액트 훅에 대해 알아보자. 3.1.1 useState useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅 useState 구현 살펴보기 기본적인 사용법import (useState } from 'react'const [state , setState ] = useState(initialState) useState의 인수로는 사용할 state의 초깃값을 넘겨준다. > 아무런 값을 넘겨주지 않으면 초깃값은 undefineduseState 훅의 반환 값은 배열이다.배열의 첫 번째 원소로 state 값을 사용할 수 있고 , 두번째 원소인 setState 함수로 state값을 변경할 수 있다.  useState 내부..