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

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

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

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

HTML index.html 파일에 Button Element 제어를 위한 데이터 속성을 지정숫자 / 연산 기호 / 지우기 / 초기화 버튼 관련된 요소끼리 그룹핑하여 HTML 엘리먼트 요소 구현Javascript index.js 파일을 생성하고 파일에서 계산 기능에 대

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

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

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

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

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

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

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

g

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

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

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

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

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

class는 객체를 생성하기 위한 템플릿 (특별한 함수)이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이, class 문법도 class 표현식, class 선언 두 가지 방법을 제공한다. Hoisti

1\. id or class 값을 사용 2\. name 값을 사용 id, class 속성은 웹 개발에 css를 사용하기 시작하면서 등장했지만, name 속성은 자바스크립트에서 폼 요소를 구별하고 접근할 수 있도록 HTML 초기부터 사용하던 방법이다. 이 방법을 사용하려