lyuna's story

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

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

리액트 함수 컴포넌트에서 가장 중요한 개념인 리액트 훅에 대해 알아봅시당.  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.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 내부..

1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖고있고, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉩니다. 원시 타입boolean : 참(true)과 거짓(false)만을 가질 수 있는 데이터 타입. 주로 조건문에서 많이 쓰인다.                   null : 아직 값이 없거나 비어 있는 값을 표현할 때 사용한다.undefined : 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값.number : (2^53-1) 과 2^53-1 사이의 값을 저장할 수 있다.string : 텍스트 타입의 데이터를 저장하기 위해 사용된다. ( '' , "" , `` ) 으로 표현할 수 있..

1.7.1 타입스크립트란? 타입스크립트 ㄴ기존 자바스크립트 문법에 타입을 가미한 것. 자바스크립트는 기본적으로 동적 타입의 언어이기때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점이 있다. typeof를 적용하여 문제점을 방지할 수 있지만 너무 번거롭고 코드의 크기를 과도하게 키우게 된다. 타입스크립트는 이러한 자바스크립트의 한계를 벗어나 타입 체크를 정적으로 런타임이 아닌 빌드 타임에 수행할 수 있게 해준다.   1.7.2 리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법 any 대신 unknown을 사용하자 any는 불가피할 때만 사용해야하는 타입. 타입을 any로 설정하면 타입스크립트가 에러를 발생시키지 않는다고 하더라도 실행 시 에러가 발생할 것이다.이는 타입스크립트를..

1.6.1 구조 분해 할당 구조 분해 할당배열 또는 객체의 값을 말 그대로 문해해 개별 변수에 즉시 할당하는 것이다.어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용한다. 배열 구조 분해 할당 배열의 구조분해 할당은 ,의 위치에 따라 값이 결정된다.const array = [1, 2, 3, 4, 5]const [first,second, third ...arrayRest] = array //first 1//second 2//third 3//arrayRest[4,5] 이 예제에서 중간 인덱스에 대한 할당을 생략하고 싶다면const array = [1, 2, 3, 4, 5]const [first, , , , fifth] = array first // 1fifth // 5이..

1.5.1 싱글 스레드 자바스크립트 자바스크립트는 싱글 스레드 언어이다.하나의 프로그램에는 하나의 프로세스만 할당되기 때문에 하나의 프로그램에서 동시에 여러 개의 복잡한 작업을 수행하기 위해 더 작은 실행 단위인 스레드(thread)가 탄생했다. 하나의 프로세스에서는 여러 개의 스레드를 만들 수 있다.스레드끼리는 메모리를 공유할 수 있어 여러 가지 작업을 동시에 수행할 수 있다.  자바스크립트가 싱글 스레드 라는 것은 ? 자바스크립트 코드의 실행이 하나의 스레드에서 순차적으로 이루어진다는 것  Run-code-completionㄴ 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는다. 자바스크립트의 모든 코드는 '동기식'으로 한 번에 하나씩 순차적으로 처리된다. '비동기' 란? async..