리액트

JSX는 자바스크립트 확장 문법이다. 이 형식으로 작성된 코드는 브라우저에서 실행되기 전 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환된다. 감싸인 요소컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. virtual

컴포넌트를 선언하는 방식은 2가지이다. 하나는 함수형 컴포넌트이고 또 다른 하나는 클래스형 컴포넌트이다. 이 둘의 차이점은 클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메소드를 지정할 수 있다는 것이다. 함수형

HTML에서 DOM 요소에 이벤트 설정하는 방법은 다음과 같다. onclick, onmouseover 등의 이벤트를 실행하고, " " 사이에 자바스크립트 코드를 작성한다. 리액트에서 이벤트를 다룰 때는 이와 비슷하면서도 약간 다르다. 이벤트 이름은 카멜 표기법으로 작성

HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 이렇게 하면 특정한 id에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. 이처럼 리액트에서도 DOM을 선택해 직접 접근하기 위

배열 객체의 내장 함수인 map을 사용해 반복되는 컴포넌트를 렌더링할 수 있다. callback \- currentValue : 현재 처리 중인 요소\- index : 현재 처리 중인 요소의 인덱스\- array : 현재 처리 중인 원본 배열 thisArgcallbac

모든 리액트 컴포넌트에는 라이프 사이클이 존재한다. 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 Hooks 기능을 사용해 비슷한 작업을 처리할 수 있다. 라이프 사이클은 마운트, 업데이트, 언마운트 카테고리로 나눈다. 마운트 :

Hooks는 리액트 v16.8에 새로 도입된 기능으로, 기존 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 실습 진행을 위해 새로운 프로젝트를 생성하자. useState는 가장 기본적인 Hook으로 함수형 컴포넌트에서도 가변적인 상태를 지닐 수

pagination콘텐츠를 여러 개 페이지에 나눠서 보여주는 UI이다. 구현 요구사항 글을 10개 단위로 끊어 페이지에 출력시킨다. 이전, 이후, 숫자 버튼을 클릭하면 해당하는 번호의 게시물을 보여준다.포커싱 된 인덱스의 버튼은 빨간색으로 표시된다.한 번에 보이는 숫자

리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 일반 css컴포넌트를 스타일링하는 가장 기본적인 방법Sasscss pre-processor 중 하나로 확장된 css 문법을 사용해 css 코드를 쉽게 작성할 수 있다. CSS Modulecss 클래스

리렌더링함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링된다. 부모 컴포너트로부터 받는 props이 변경될 때 리렌더링된다.부모 컴포넌트의 상태가 변경되면 리렌더링 된다. (부모 컴포넌트가 리렌더링 될 때)forceUpdate 함수가 실행될 때 React.memo 함수

다음과 같이 React 프로젝트를 생성하면서 Storybook을 설치해보자..storybook 폴더와 stories 폴더가 생성되는데, .storybook 폴더 내부의 파일들은 전역적인 설정 관련된 것들, stories 폴더 내부에는 예시가 되는 컴포넌트와 스토리들이

g

📄 프로젝트 생성 및 라이브러리 설치 라이브러리 node-sass, classnames, react-iconsreact-icons 라이브러리를 사용하면 SVG 형태의 아이콘을 리액트 컴포넌트처럼 쉽게 사용할 수 있다. 📄 prettier 설정 앞에서 배웠던 Pret

기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 HTML을 받아 오고, 이 페이지 로딩할 때마다 서버에서 리소스를 전달받아 화면에 보여주었다. 즉, 사용자에게 보이는 화면을 서버 측에서 준비했다. 요즘은 웹에서 제공되는 정보가 매우 많아 서버 측에서 모든 뷰를 준

지금까지 배운 내용을 활용하여 뉴스 뷰어 프로젝트를 진행할 것이다. https://newsapi.org/에서 제공하는 API를 사용해 데이터를 받아오고 styled-components 를 활용해 스타일링 할 것이다.

프로젝트에서 환경설정, 사용자 정보와 같은 전역적으로 사용할 데이터의 상태 관리는 어떻게 해야할까? 리액트 앱은 컴포넌트 간의 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트 App의 state에 넣어 관리한다.

리덕스는 리액트 생태계에서 가장 많이 사용하는 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트들의 상태 업데이트 관련 로직을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있으며 전역 상태 관리도 쉽게 할 수 있다. 이전에 배운 Context API를 사용해도

리덕스를 사용하면 리액트 앱에서 리덕스를 사용하면 상태 업데이트 관련 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드의 유지, 보수에 도움이 된다. 여러 컴포넌트에서 동일한 상태를 공유해야 할 때도 유용하다.실제 업데이트가 필요한 컴포넌트만

브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면 (view)에 표시해주는 작업을 말한다. 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이다.이러

Node.js 환경에서 웹 서버를 구축할 땐 보통 Express, Koa, Hapi 등 웹 프레임워크를 사용한다. Koa는 Express 개발팀이 개발한 새로운 프레임워크이다. Node.js 설치 확인프로젝트 생성 먼저 서버를 여는 방법부터 알아보자. src 디렉토리를

REST는 Representational State Transfer 의 약자로 2000년에 로이 필딩 박사의 논문에서 최초로 소개되었다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹 (HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에

데이터베이스로 웹 서비스에서 사용되는 데이터를 저장하고 효율적으로 조회 및 수정할 수 있다. 기존에는 MySQL, OracleDB 같은 관계형 데이터베이스를 자주 사용했다. 관계형 DB의 한계스키마가 고정적스키마는 DB의 구조와 제약 조건에 관한 전반적인 명세를 정의한

https://www.themoviedb.org/?language=ko 회원가입상단의 ‘프로필’ 클릭 → ‘설정’ 클릭 → 좌측 메뉴의 ‘API’ 클릭 후 정보 입력 후 발급받기API 키 (v3 auth)에 해당하는 키 값 복사 후 .env파일에 저장API 키