주어진 조건으로 최대의 효율을 낼 수 있도록 하는 것웹 개발에서의 최적화 : 주어진 조건 아래 최대한 빠르게 화면을 표시하도록 만드는 것최적화의 필요성 및 효과이탈률 감소이탈 : 방문자가 웹사이트의 첫 페이지에서 아무런 상호작용도 하지 않고 종료하는 것사이트의 페이지

입력장치컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치. 기본적으로 키보드, 마우스, 스캐너, 타블랫, 조이콘 등등 컴퓨터와 연결하여 무언가를 입력할 수 있는 장치를 말함.출력장치처리한 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인

어떠한 데이터를 기억하는 것은 아주 흔하면서도 중요한 일이다.유저의 이름을 기억한다던지, 유튜브에서의 볼륨 조정 값을 기억한다던지..여기, 브라우저가 우리에게 공짜로 무언가를 기억할 수 있게 해주는 기능이 있다.바로 Local Storage 이다!Local Storag

React가 버전 18로 업데이트 되면서 많은 부분이 변화하였는데, 가장 주목 할 만한 변화 사항은 React 18 버전이 더 이상 ReactDOM.render 을 지원하지 않는다는 것이다. 그 대신에 React 18 버전에서는 createRoot API 를 사용하게

useMemo는 렌더링 최적화를 위한 Hook 중 하나로, 특정 value값을 재사용하고자 할 때 사용하는 Hook이다.Calculator 컴포넌트는 props로 넘어온 value 값을 calculate 함수에 인자로 넘겨 result 값을 구한 후, div 엘리먼트로

Hooks는 함수 컴포넌트에서 사용하는 메서드를 뜻한다. Hooks에 대해 제대로 이해하려면, 우선 함수 컴포넌트(Function Component)와 그 이전 React 개발에 사용하던 클래스 컴포넌트(Class Component)를 비교할 필요가 있다. Clas

Virtual DOM > Real DOM (기존의 DOM) > * Real DOM (Virtual DOM과 비교하기 위해 이렇게 부른다) 이란, 브라우저가 트리 구조로 만든 객체 모델 > * 트리 구조이기 때문에

이제 본격적으로 리액트 웹앱을 번들링한 후, 배포까지 해보자! create-react-app 없이, 리액트를 웹 팩으로 빌드해보자 우선, 리액트로 개발하기 위해 필수적인 두 라이브러리를 설치한다 ` 번들링을 하는데 필요한 웹팩 관련 라이브러리 역시 설치해준다. 웹팩은

번들링(Bundling)여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위프론트엔드 개발자에게 번들링이란, 사용자에게 웹 애플리케이션을 제공하기 위해 파일을 묶어서 패키지로 제공하는 것!빌드(build) : 개발이 완료된 앱을 배포하기 위해 하나의 폴더로

Cookie \-> 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법 \-> 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.\-> 뿐만 아니라 클라이언트에서 서버로 다시 쿠키를 전송하는 것도 쿠키를 이용하는 것이다.Cookie 옵션

상태 변경의 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.이 Action 객체가 Dispatch 함수의 인자로 전달된다.Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다Reducer 함수는 Action 객체의

1. CDD > >CDD (component-Driven Dvelopment) CDD를 사용하면 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다. 이렇게 하면 여러 프로젝트 간에 같은 UI 컴포넌트를 사용할 수 있다. (재사용할 수 있는 UI 컴포넌트

StatesAirline Server API를 사용한다. (클라이언트에서 항공편을 조회할 때 사용되는 API)검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청하도록 한다. (fetch를 이용하여 getFlight 함수를 REST API 호출로 대신

sideEffect side Effect란, 순수 함수적인 특징에 위배되는 기능들을 말한다. > > 순수 함수? > * 어떤 값이 들어왔을 때, 일관된 값만 나와야 한다. > * 즉, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴되어야 한다. > * 그

React 먼저 컴포넌트 만들고 다시 페이지 조립해나가는 방식즉, 상향식 (bottom-up)으로 앱을 만든다React 컴포넌트자식 컴포넌트 바깥에서 props 이용해 데이터를 마치 전달인자, 속성처럼 전달받는다.이 때, 데이터를 전달하는 주체는 부모 컴포넌트이다.즉,

POSTMAN >* HTTP 요청을 테스트할 수 있는 API 테스트 도구 ->클라이언트 입장에서 서버 API를 테스트하거나 API를 만드는 과정에서 매우 유용하다 Postman _ Message States 요청 Message states Server에 다양한

REST는 “Representational State Transfer”의 약자로 직역하면 “대표 상태 전송” 이라는 뜻이다.REST API는 웹에서 사용되는 데이터나 자원(Resource)를 HTTP URI로 표현하고, HTTP 프로토콜을 통해서 요청과 응답을 정의하는

2티어 아키텍처 -> 리소스가 존재하는 곳(Server)과 리소스 사용하는 앱(Client)을 구분시킨 것클라이언트 사용자가 직접 눈으로 보고, UI를 클릭 또는 터치하는 등의 상호작용을 할 수 있는 앱종류 -> 플랫폼에 따라 구분 / 웹앱(웹 플랫폼), ISO&안드로

이제 본격적으로 state & props를 실습해보자. react twittler 스프린트의 어려웠던 부분을 다시 공부하면서 복습한다. state & props 활용해 tweet 전송 form 만들기 1. useState로 state 변수와 state 갱신 함수 만

props(property)?성별이나 이름처럼 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.부모 컴포넌트로부터 전달받은 값이며 객체 형태이다. (어떤 타입의 값을 넣어도 전달할 수 있다!)외부로 부터 전달받은 변하지 않는 값,