리덕스를 프로젝트에 사용하기 전에, 꼭 알아야 할 3가지 규칙!하나의 애플리케이션에서는 단 한개의 스토어를 만들어서 사용해야한다.여러개의 스토어를 사용해도 되지만, 상태 관리가 복잡해져 가급적이면 권장하지 않는다.(예외로 특정 업데이트가 너무 많거나, 애플리케이션의 특

✔️ Typescript Typescript 은 자바스크립트 기반으로 만들어진 프로그래밍 언어!자바스크립트 말고 타입스크립트로 넘어온 이유는...정확히 말하자면... 타입 정확성!쉽게 말하면 에러나 버그가 자바스크립트에 비해 덜 생긴다더 나은 구조와 간결함으로 생산성이

#30 다양한 사람들과 만나보자! 리덕스에서 사용되는 키워드 숙지하기

✔️ 자바스크립트 복습!노마드 코더 과정를 통해서 자바스크립트를 완전히 통달하자!자바스크립트 프로젝트는 주로 한 파일로 구성된 코드의 집합체가 아니라 여러 파일들의 코드들를 내보내고 가져오는 형식으로 되어있다.이 때, module 의 import 과 export 를 사

✔️ 자바스크립트 복습!자바스크립트 입문 코스에서 중요한 역할을 맡고 있어서 완벽히 이해하자!시작하기 앞서, 객체 생성자라는 것을 알아볼텐데...함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해준다.일반적으로 객체 생성자를

TIL DAY 178 .jpg) 오늘 배운 일 ✔️ Django 웹 개발 1. 페이지네이션(Pagination) 구현하기 > 이번에는 저번에 배운 페이지네이션에 명령어들을 이용해서 직접 페이지네이션을 구현해보도록 하겠다. 들어가기 앞서 먼저 전체 구현 과정을

#29 유연한 사고를 갖자! 서브라우트 서브라우트, 즉 라우트 내부의 라어트를 만드는 것을 의미한다. > 이 작업은 복잡하지 않아서 그냥 컴포넌트를 만들어서 그 안에 또 Route 컴포넌트를 렌더링하면 된다. ※ 서브 라우트 만들어보기 우선 src 에 Prof

#28 새로운 환경에 적응하기 react-router 를 이용한 리액트 싱글 페이지 애플리케이션 만들기 SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자이다. 말 그대로, 1개인 어플리케이션이란 뜻을 의미한다. 전통적인

이번에는 리액트의 Context 와 API 연동을 함께하는 방법에 대해 알아보도록 하겠다.컴포넌트에서 필요한 외부 데이터들은 컴포넌트 내부에서 useAsync 같은 Hook 을 사용해서 작업을 해도 충분하지만, 가끔씩 특정 데이터들은 다양한 컴포넌트에서 필요하게 될 때

이번에는 react-async 라는 것을 배울건데 지난번에 만들었던 useAsync 와 비슷한 함수가 들어있는 라이브러리이다.이 라이브러리 안에 들어있는 함수 이름도 useAsync 인데, 약간 사용법이 다르다.매번 프로젝트마다 요청 상태 관리를 위한 커스텀 Hook

우리는 데이터를 요청해야 할 때마다 리듀서를 작성하는 매우 번거로운 일이다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook 을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법에 알아보자!우선, src 디렉토리에 useAsync.js 파일을 생성하고, 다음

이번에는 리액트 애플리케이션에서 애플리케이션에서 API 를 연동하는 방법을 배우게 될 것이다.우리가 앱 애플리케이션을 만들면 데이터를 브라우저에서만 들고 있는게 아니라, 데이터를 보존시키고 다른 사람들도 조회 할 수 있게 하려면 서버를 만들고 서버의 API 를 사용해서

우리는 Context 를 만들었으니, 이제 Context 와 연동을 하여 기능을 구현해보자!Context 에 있는 state 를 받아와서 렌더링을 하고, 필요한 상황에는 특정 액션을 dispatch 하면 된다.TodoHead 에서는 done 값이 false 인 항목들의

우리가 만든 투두리스트 애플리케이션에서 상태 관리를 진행한다면 다음과 같은 구조로 구현 할 수 있다.출처 : 벨로퍼트와 함께하는 모던 리액트App 에서 todos 상태와, onToggle, onRemove, onCreate 함수를 지니고 있게 한 다음, 해당 값들의 p

#21 잘가라 내 청춘 ~ 컴포넌트 만들기 이번에는 리액트를 이용해서 밑에 있는 투두리스트를 만들어보겠다. 출처 : 벨로퍼트와 함께하는 모던 리액트 투두리스트의 기능을 구현하기 전에, 우리 프로젝트에서 필요한 모든 컴포넌트들의 UI 를 미리 만들어보겠다. 새로

#20 잠깐이나마 한 소중한 경험! styled-components 이번에는 CSS in JS 라는 기술이다. 이 문구가 뜻하는 대로, 이 기술은 JS 안에 CSS 를 작성하는 것이다. 우리는 해당 기술을 다뤄보는 라이브러리인 styled-components 를 알

이번에는 CSS Module 이라는 기술에 대해 알아보자!우리가 리액트 프로젝트에서 컴포넌트를 스타일링 할 때, CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 막을 수 있다.프로젝트에서 CSS Module 을 사용할 때, CSS 확장자 파일

#18 벌써 리액트 입문이 끝나다?! 이 시리즈를 통해서 우리는 리액트의 기본적인 것들을 대부분 배웠다. 이 정도면 리액트가 어떻게 작동하는지 충분히 이해했다고 볼 수 있다. 앞으로 남은 것들은 지금까지 배운 것들을 어떻게 활용할 지, 그리가 다른 라이브러리들과 어떻

저번에 이어서 오늘은 componentDidCatch 라는 생명주기 메서드를 사용해서 리액트 애플리케이션에서 발생하는 에러를 처리하는 방법을 알아보도록 하겠다.이 튜토리얼을 진행하기 앞서 새로운 프로젝트를 생성해준다.다 생성이 완료되면, 해당 디렉토리를 열고 개발 서버

#16 바뀌어 버린 나 자신 LifeCycle Method LifeCycle Method 는 한국말로 "생명주기 메소드" 라고 부른다. 생명주기 메소드는 컴포넌트가 브라우저 상에 나타나고 업데이트되고 사라질 때 호출되는 메소드이다. 그리고 추가로 컴포넌트에서 에러가