티스토리

lyuna's story

검색하기

블로그 홈

lyuna's story

lyuna29.tistory.com/m

려낭 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

15장 15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8 에서 최대 17.02로 올려두자 리액트 16.8에서는 훅이 소개됐고, 훅 덕분에 함수 컴포넌트의 개념이 정립됐기 때문에리액트 생태계의 판도를 바꿨다고 해도 과언이 아닐 만큼 중요한 업데이트라고 볼 수 있다. > 따라서 향후 원활한 지원을 위해 버전을 16.8.6 이상으로 맞추는 것이 좋고,17버전은 새로운 기능 출시 및 호환성이 개지는 변경 사항을 최소한으로 맞춘 업데이트이기 때문에가능하다면 17 버전으로 가는 것도 좋다. 기존에 클래스 형태로 작성한 컴포넌트를 함수 컴포넌트로 리팩터링 할 필요가 있을까 ? >> 굳이 그럴 필요는 없다.함수형으로 사고의 전환이 필요하고 함수형과 클래스.. 공감수 1 댓글수 2 2024. 12. 28.
12장 발표자료 12.1 웹사이트와 성능 리액트가 훌륭한 프레임워크라고 해도, 웹사이트 성능이 떨어지면 서비스 이용자들에게 좋은 평가를 받기 어렵다.모든 서비스와 마찬가지로 웹사이트의 성능은 사용자의 경험과 직결되며, 이는 개발자가 신경 써야 할 중요한 요소이다. 구글은 요즘의 웹사이트의 성능에 대해 다음과 같은 내용의 글을 남기기도 했다.전 세계 사용자의 대부분이 모바일을 3G가 아닌 4G로 사용하고 있음에도 불구하고, 대부분의 모바일 사이트는 여전히 느리고 너무 많은 요소 때문에 비대해졌다. 결국 웹사이트 성능은 조직의 목표 달성과도 연결되므로, 개발자는 이를 최우선 과제로 삼아야 한다. 12.2 핵심 웹 지표란? 핵심 웹 지표 (외국에서는 Core Web Vital로 알려져 있다) 란 구글에서 만든 지표로,웹사이.. 공감수 2 댓글수 1 2024. 12. 22.
12장 - 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 12.1 웹사이트와 성능 리액트가 아무리 좋은 프레임워크라고 해도,그 중요성을 제아무리 설파하더라도 웹사이트의 성능이 뒤떨어지면 개발자를 제외한 실제 서비스 이용자들의 호응을 얻기 어렵다. 모든 서비스가 그렇듯 웹 서비스도 마찬가지로 사용자가 느끼는 성능이 제일 중요하다. 구글은 요즘의 웹사이트의 성능에 대해 다음과 같은 내용의 글을 남기기도 했다.전 세계 사용자의 대부분이 모바일을 3G가 아닌 4G로 사용하고 있음에도 불구하고, 대부분의 모바일 사이트는 여전히 느리고 너무 많은 요소 때문에 비대해졌다. 웹사이트 개발자라면 웹사이트의 성능에도 주의를 기울여야 한다.웹사이트 성능 또한 개발자의 책임이며, 웹사이트의 성능은 조직이 이루고자 하는 목표와 직결된다고 봐도 무방하다. 12.2 핵심 웹 지표란.. 공감수 1 댓글수 1 2024. 12. 19.
11장 - Next.js 13과 리액트 18 11.1 app 디렉터리의 등장 Next.js의 아쉬운 점으로 평가받던 것 중 하나가 바로 레이아웃의 존재다.13버전 이전까지 모든 페이지는 각각의 물리적으로 구별된 파일로 독립돼 있었다. 페이지 공동으로 무언가를 집어 넣을 수 있는 곳은 _document 와 _app이 유일하다.그나마도 이 파일들은 서로 다른 목적을 지니고 있다. 이전의 Next.js 12 버전까지는 무언가 페이지 공통 레이아웃을 유지할 수 있는 방법은 _app이 유일했다. 그러나 이 방식은 _app에서밖에 할 수 없어 제한적이고, 각 페이지별로 서로 다른 레이아웃을 유지할 수 있는 여지도 부족하다. 이러한 레이아웃의 한계를 극복하기 위해 나온 것이 Next.js의 app 레이아웃이다. 11.1.1 라우팅 기존 /pages로 정의하던.. 공감수 0 댓글수 1 2024. 12. 13.
10장 - 리액트 17과 18의 변경 사항 살펴보기 10.1 리액트 17버전 살펴보기10.1.1 리액트의 점진적인 업그레이드 리액트 16에서 17로의 업데이트는 기존 16버전에서 더 이상 호환되지 않는 API가 있거나 새로운 리액트 17을 사용하는 데 있어 이전과 작동 방식이 달라질 수 있기 때문에 단행된 주 버전 업데이트다. 새로운 주 버전이 릴리스되면 이전 버전에서의 API제공을 완전히 중단해버리고, 전체 애플리케이션을 새롭게 업그레이드 하기를 요구한다. 그러나 이제 리액트 17 버전부터는 점진적인 업그레이드가 가능해진다.리액트 18로 업데이트 되어도 일부 기능에 대해서는 리액트 17을 사용하는 것이 가능해진다. 이러한 점진적인 업그레이드를 지원하기 위한 리액트의 일부 컴포넌트 변경이 리액트 17 업데이트의 주요 변경 사항 중 하나다. 10.1.2 .. 공감수 1 댓글수 1 2024. 12. 12.
9장 발표자료 9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기 npm init으로 package.json 만들기react, react-dom, next 설치하기devDependencies에 필요한 패키지 설치하기typescript, @types/react, @types/react-dom, @types/nodeeslint, eslint-config-next 9.1.2 tsconfig.json 작성하기 tsconfig.json에 타입스크립트 설정을 해준다. 작성하기 전에 이렇게 JSON 최상단에 값을 넣으면 해당 JSON파일이 무엇을 의미하는지,어떤 키와 어떤 값이 들어갈 수 있는지 알려준다. 올바른 값이 선언돼 있다면 VS Code나 웹스톰 같은 IDE에서.. 공감수 3 댓글수 2 2024. 12. 8.
9장 - 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기 npm init으로 package.json 만들기react, react-dom, next 설치하기devDependencies에 필요한 패키지 설치하기typescript, @types/react, @types/react-dom, @types/nodeeslint, eslint-config-next 9.1.2 tsconfig.json 작성하기 tsconfig.json에 타입스크립트 설정을 해준다. 작성하기 전에 이렇게 JSON 최상단에 값을 넣으면 해당 JSON파일이 무엇을 의미하는지,어떤 키와 어떤 값이 들어갈 수 있는지 알려준다. 올바른 값이 선언돼 있다면 VS Code나 웹스톰 같은 IDE에서.. 공감수 0 댓글수 0 2024. 12. 4.
4장 - 서버 사이드 렌더링 발표자료 4.1.1 싱글 페이지 애프리케이션의 세상 싱글 페이지 애플리케이션이란? 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식. 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. 페이지 전환 시 새로운 HTML페이지를 요청하는 게 X자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 HTTP요청으로 가져온 다음,그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로 페이지가 전환된다.전통적인 방식의 애플리케이션과 싱글 페이지 애플리케이션의 작동 비교 과거에는 페이지 전환이 발생할 때마다 새롭게 페이지를 요청, HTML 페이지를 다운로드해 파싱 하는 작업을 거쳤다.>> 페이지를 처음부터 새로 그려야 .. 공감수 3 댓글수 1 2024. 12. 1.
4장 - 서버 사이드 렌더링(2) 4.2.6 서버 사이드 렌더링 예제 프로젝트 index.tsx create-react-app의 index.jsx와 유사한 역할을 하는 애플리케이션의 시작점으로, hydrate가 포함돼 있다. 이 파일의 목적은 서버로부터 받은 HTML을 hydrate를 통해 완성된 앱 애플리케이션으로 만드는 것이다. hydrate는 서버에서 완성한 HTML과 하이드레이션 대상이 되는 HTML의 결과물이 동일한지 비교하는 작업을 거치기 때문에,이 비교 작업을 무사히 수행하기 위해 한 번 더 데이터를 조회한다. App.tsx 일반적으로 사용자가 만드는 리액트 애플리케이션의 시작점.todos를 props로 받는데, 이 props는 서버에서 요청하는 todos를 받는다.이 props.todo를 기반으로 렌더링하는 평범한 컴포넌트.. 공감수 0 댓글수 0 2024. 11. 29.
4장 - 서버사이드 렌더링 4.1.1 싱글 페이지 애프리케이션의 세상 싱글 페이지 애플리케이션이란? 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식. 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. 페이지 전환 시 새로운 HTML페이지를 요청하는 게 X자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 HTTP요청으로 가져온 다음,그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로 페이지가 전환된다. 전통적인 방식의 애플리케이션과 싱글 페이지 애플리케이션의 작동 비교 과거에는 페이지 전환이 발생할 때마다 새롭게 페이지를 요청, HTML 페이지를 다운로드해 파싱하는 작업을 거쳤다.>> 페이지를 처음부터 새로 그려야 .. 공감수 3 댓글수 3 2024. 11. 28.
크롬 개발자 도구를 활용한 애플리케이션 분석 7.1 크롬 개발자 도구란?크롬 브라우저에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 작업을 분석하고 디버깅할 수 있는 강력한 기능을 제공합니다. HTML, CSS, JavaScript를 포함한 다양한 요소를 실시간으로 확인, 수정하며 디버깅 과정을 간소화할 수 있어 웹 개발자들에게 필수적인 도구로 자리 잡고 있습니다. 7.2 요소 탭 (Elements)요소 탭은 현재 웹페이지를 구성하는 HTML과 CSS의 구조 및 스타일 정보를 제공하며, 이를 실시간으로 확인하거나 수정할 수 있는 공간입니다. 주요 기능 HTML 확인 및 수정: HTML 코드를 실시간으로 수정하여 변경사항을 바로 확인 가능.스타일 검사 및 수정: 특정 요소에 적용된 CSS 스타일 확인 및 수정.디버깅 지원: 중단점.. 공감수 3 댓글수 2 2024. 11. 23.
리액트 개발 도구로 디버깅하기 6.1 리액트 개발 도구란?리액트 개발 도구를 브라우저 확장 도구로 설치해 리액트 애플리케이션을 디버깅하는 방법을 살펴보자.! 6.2 리액트 개발 도구 설치 우선 브라우저에 리액트 개발 도구를 브라우저 확장 도구로 설치해야 한다.크롬, 파이어복스, 엣지 브라우저를 지원하며 개발자 본인이 주로 개발하는 브라우저에 설치하면 된다. 크롬 확장 프로그램을 설치하면 크롬 우측 상단에 잇는 확장 도구 모음에 리액트 로고가 표시된다. 리액트 로고가 회색으로 표시된다면 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이다. 리액트 애플리케이션을 개발 모드로 실행한 후 리액트 로고가 빨간색으로 표시된다면 정상적으로 실행된다는 뜻이다. 실제 프로덕션에 배포돼 있는 웹 애플리케이.. 공감수 0 댓글수 0 2024. 11. 19.
3장 발표자료 - 리액트 훅 깊게 살펴보기 리액트 함수 컴포넌트에서 가장 중요한 개념인 리액트 훅에 대해 알아봅시당. 3.1.1 useState 컴포넌트에서 상태를 관리하기 위해 사용하는 가장 기본적인 훅리액트 컴포넌트 내부에서 상태를 선언하고 업데이트컴포넌트에서 변하는 값을 리액트가 기억하고 관리할 수 있다기본 사용법const [state, setState] = useState(initialState) state 현재 상태 값을 저장하는 변수setState를 사용하여 값을 변경setState상태를 업데이트하는 함수호출하면 컴포넌트가 리렌더링 된다initialState상태의 초기값. 숫자, 문자열, 객체 등 어떤 값도 가능하다. useState는 클로저를 활용해 컴포넌트 렌더링 이후에도 상태와 상태 업데이트 함수를 기억하고 관리한다,! 게으른.. 공감수 1 댓글수 1 2024. 11. 17.
사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야할까? 3.2.1 사용자 정의 훅 사용자 정의 훅서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것.리액트에서만 사용할 수 있는 방식반드리 use로 시작하는 함수를 만들어야 한다.(해당 함수가 리액트 훅이라는 것을 인식할 수 있다)사용자 정의 훅으로 분리하지 않는다면 fetch로 API를 호출해야 하는 모든 컴포넌트 내에서 각각 선언해서 구현해야 할 것이다.useReducer을 사용하더라도 useEffect가 필요하기 때문에 훅을 중복해서 사용해야 할 것이다. 훅은 함수 컴포넌트 내부 혹은 사용자 정의 훅 내부에서만 사용할 수 있기 때문에 use로 시작하지 않거나 대문자로 시작하지 않는 함수 내부에서 훅을 호출한다면 에러가 발생한다. 3.2.2 고차 컴포넌트 컴포넌트 자체의 로직을 재.. 공감수 0 댓글수 1 2024. 11. 16.
리액트 훅 깊게 살펴보기(useReducer, useRef) 3.1.5 useRef useRef와 useState는 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있다. useState와 구별되는 큰 차이점 두 가지useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다.useRef로 useState를 흉내내도 렌더링이 되지 않는다. useRef가 왜 필요할까? useRef는 컴포넌트가 렌더링될 때만 생성되고, 컴포넌트 인스턴스가 여러 개라도 각각 별개의 값을 바라본다. useRef의 가장 일반적인 사용 예는 DOM에 접근하고 싶을 때 이다.function RefComponent () { const inputRef = useRef(.. 공감수 1 댓글수 7 2024. 11. 15.
리액트 훅 깊게 살펴보기(useState, useEffect, useMemo, useCallback) 리액트 함수 컴포넌트에서 가장 중요한 개념이 바로 훅이다.리액트 훅에 대해 알아보자. 3.1.1 useState useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅 useState 구현 살펴보기 기본적인 사용법import (useState } from 'react'const [state , setState ] = useState(initialState) useState의 인수로는 사용할 state의 초깃값을 넘겨준다. > 아무런 값을 넘겨주지 않으면 초깃값은 undefineduseState 훅의 반환 값은 배열이다.배열의 첫 번째 원소로 state 값을 사용할 수 있고 , 두번째 원소인 setState 함수로 state값을 변경할 수 있다. useState 내부.. 공감수 0 댓글수 0 2024. 11. 12.
1장 발표자료 1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖고있고, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉩니다. 원시 타입boolean : 참(true)과 거짓(false)만을 가질 수 있는 데이터 타입. 주로 조건문에서 많이 쓰인다. null : 아직 값이 없거나 비어 있는 값을 표현할 때 사용한다.undefined : 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값.number : (2^53-1) 과 2^53-1 사이의 값을 저장할 수 있다.string : 텍스트 타입의 데이터를 저장하기 위해 사용된다. ( '' , "" , `` ) 으로 표현할 수 있.. 공감수 1 댓글수 1 2024. 11. 10.
선택이 아닌 필수, 타입스크립트 1.7.1 타입스크립트란? 타입스크립트 ㄴ기존 자바스크립트 문법에 타입을 가미한 것. 자바스크립트는 기본적으로 동적 타입의 언어이기때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점이 있다. typeof를 적용하여 문제점을 방지할 수 있지만 너무 번거롭고 코드의 크기를 과도하게 키우게 된다. 타입스크립트는 이러한 자바스크립트의 한계를 벗어나 타입 체크를 정적으로 런타임이 아닌 빌드 타임에 수행할 수 있게 해준다. 1.7.2 리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법 any 대신 unknown을 사용하자 any는 불가피할 때만 사용해야하는 타입. 타입을 any로 설정하면 타입스크립트가 에러를 발생시키지 않는다고 하더라도 실행 시 에러가 발생할 것이다.이는 타입스크립트를.. 공감수 0 댓글수 0 2024. 11. 7.
리액트에서 자주 사용하는 자바스크립트 문법 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이.. 공감수 0 댓글수 0 2024. 11. 7.
이벤트 루프와 비동기 통신의 이해 1.5.1 싱글 스레드 자바스크립트 자바스크립트는 싱글 스레드 언어이다.하나의 프로그램에는 하나의 프로세스만 할당되기 때문에 하나의 프로그램에서 동시에 여러 개의 복잡한 작업을 수행하기 위해 더 작은 실행 단위인 스레드(thread)가 탄생했다. 하나의 프로세스에서는 여러 개의 스레드를 만들 수 있다.스레드끼리는 메모리를 공유할 수 있어 여러 가지 작업을 동시에 수행할 수 있다. 자바스크립트가 싱글 스레드 라는 것은 ? 자바스크립트 코드의 실행이 하나의 스레드에서 순차적으로 이루어진다는 것 Run-code-completionㄴ 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는다. 자바스크립트의 모든 코드는 '동기식'으로 한 번에 하나씩 순차적으로 처리된다. '비동기' 란? async.. 공감수 2 댓글수 0 2024. 11. 6.
리액트 개발을 위해 꼭 알아야 할 자바스크립트 - 클로저 1.4.1 클로저의 정의 MDN 의 클로저 정의 : 함수와 함수가 선언된 어휘적 환경의 조합 ㄴ 변수가 코드 내부에서 어디에 선언됐는지 클로저는 어휘적 환경을 조합해 코딩하는 기법이다. 1.4.2 변수의 유효 범위, 스코프 스코프는 변수의 유효범위이다. 전역 스코프전역 레벨에 선언하는 것이다.이 스코프에서 변수를 선언하면 어디서든 호출할 수 있다.var global = 'global scope'function hello() { console.log(global)}console.log(global) // global scopehello() // global scopeconsole... 공감수 0 댓글수 1 2024. 11. 6.
리액트 개발을 위해 꼭 알아야 할 자바스크립트 - 클래스 1.3.1 클래스란 무엇인가? 자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념이다.즉, 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이다. constructor생성자. 객체를 생성하는 데 사용하는 특수한 메서드이다.단 하나만 존재할 수 있고, 여러 개를 사용한다면 에러가 발생한다. 프로퍼티클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값을 의미한다.인스턴스 생성 시 constructor 내부에 빈 객체에 프로퍼티의 키와 값을 넣어 활용할 수 있다.#을 넣어 private를 선언할 수 있다.class Car { constructor(name) { // 값을 받으면 내부에 프로퍼티로 할당된다. this.name = name }}const myCa.. 공감수 10 댓글수 4 2024. 11. 5.
리액트 개발을 위해 꼭 알아야 할 자바스크립트 - 함수 1.2.1 함수란 무엇인가? 자바스크립트에서 함수란 '작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감사 실행 단위로 만들어 놓은 것 ' // 함수의 기본적인 형태function sum(a,b) { return a + b}sum(10,24) //34 function 뒤에 오는 것이 함수명함수수의 입력값으로 받는 a,b를 각각 매개변수라 하고, return으로 작성된 것이 반환값이다. 리액트에서 컴포넌트를 만드는 함수도 이러한 기초적인 형태를 따른다. function Component(props) { return {props.hello}} Component라고 하는 함수를 선언하고 매개변수로는 일반적으로 props라고 부르는 단일 객체를 받으며return 문으로 J.. 공감수 5 댓글수 3 2024. 11. 5.
자바스크립트의 동등 비교 1.1.1 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖고있고, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉜다. 원시 타입 boolean : 참(true)과 거짓(false)만을 가질 수 있는 데이터 타입. 주로 조건문에서 많이 쓰인다. null : 아직 값이 없거나 비어 있는 값을 표현할 때 사용한다.undefined : 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값.number : (2^53-1) 과 2^53-1 사이의 값을 저장할 수 있다.string : 텍스트 타입의 데이터를 저장하기 위해 사용된다. ( '' , "" , `` ) 으로 표.. 공감수 1 댓글수 1 2024. 11. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.