React

본격적인 프로젝트를 시작하기 전에 리액트에 대한 개념이 부족하다고 느껴 스터디 첫번째 시간으로 개념을 정리해보도록 하겠다. React Component 컴포넌트Rendering 렌더링리액트 라이브러리가 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할

개발환경 정보 Visual Studio Code React Node.js yarn Node.js 자바스크립트 런타임 환경을 위해 페이스북

자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반자바스크립트 형태의 코드로 변환된다.보기 쉽고 익숙하다.활용도가 높다.컴포넌트에 여러 요소가 있다면 반드시 부모

리액트의 컴포넌트 선언방식은 두가지로 나뉜다. 첫번째는 클래스형 컴포넌트, 두번째는 함수형 컴포넌트이다.이제 이 두가지 선언방식에 대해서 알아보자.클래스형 컴포넌트에서는 Component를 상속받아야하고 render() 함수가 필수적으로 있어야한다.state와 Life

Hooks는 리액트 V16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.리액트에

: useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을때 사용하는 Hook이다.useState를 사용할때는 컴포넌트 업데이트 로직을 컴포넌트 내부에서 이루어졌어야했는데 useReducer는 컴포넌트 바깥으로 빼낼 수 있고

: 저장공간또는 DOM요소에 접근하기 위해 사용하는 Hook이다. 자바스크립트에서 특정 DOM을 선택할땐 querySelector, getElementById 등의 함수를 사용해서 접근하는데 리액트에서는 useRef를 사용해 접근한다.useRef는 current 속성을

: 디바이스 종류에 따라 웹페이지가 자동적으로 재조정되는 것을 말한다.어떠한 환경에서도 그에 맞게 사이즈를 변화시켜 사용자가 보기 편리하게 만드는것이 반응형 웹이다.단말기의 종류에 따라 각각 다른 스타일을 적용시켜줄 수 있었던 미디어 타입이라는 것에서 더 발전시켜 좀

저번시간에 했던 media query로 반응형웹을 만드는건 html과 css만으로 구현이 가능한것이다. 반응형 웹을 만들때 디자인뿐만 아니라 구조나 기능을 다르게 해야하는 경우가 있는데 react-responsive라는 라이브러리를 통해 반응형 웹을 구현할 수 있다.e

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록

: 서버에서 만들어진 HTML파일을 받아와 페이지 전체를 렌더링하는 방식이다. 클라이언트가 초기 화면을 로드하기 위해 서버에 요청을 보낸다.서버는 화면을 그리는데 필요한 데이터와 CSS를 모두 적용해 HTML과 JS코드를 브라우저에 전달한다.브라우저에서는 전달받은 페이

쉽게 말해서 클라이언트에서 모두 처리하는 것이다.서버에서 전체 페이지를 렌더링하여 보여주고 사용자가 요청할때마다 리소스를 서버에서 제공받아 클라리언트가 해석하고 렌더링하는 방식이다. SSR과 달리 서버에 HTML를 요청하는게 아니라 브라우저에서 자바스크립트로 렌더링하는

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작한다. 예를 들어, 아래의 순수한 HTML에서 아래의 폼은 name을 입력받는다.이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다.리액트 포탈은 리액트 라이브러리에서 제공하는 기능 중 하나로, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 해준다. 이 기능을

@keyframes는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다.keyframes 리스트가 유효하려면 0% ~ 100%와 같은 시간에 대한 규칙을 포함해야 한다. 만약 이 타임 오프셋이 정해져 있지 않으면 parser가 인