Firebase Auth를 사용하여 사용자 아이디를 데이터 베이스에 저장해 보도록 하겠습니다.먼저 Firebase 프로젝트를 생성하고, React 프로젝트에서 Firebase DB에 데이터를 저장하겠습니다.프로젝트 설정을 클릭한 후 하단에 있는 firebaseConfi

Firebase Realtime DB를 통해서 CRUD하는 작업을 해보겠습니다.시작하기 전에는 어려워서 시도 조차 못할거라는 두려움이 있습니다.하지만 생각보다 어렵지 않습니다. 아래 내용만 잘 따라가면 Firebase Realtime DB로 CRUD 쉽게 가능합니다.출

제목 그대로 git bash 에서 yarn을 글로벌로 설치한 후 yarn 버전을 확인했을 때 yarn이 없다는 경우가 있습니다.이는 yarn이 설치가 안되었거나 또는 yarn의 환경변수를 설정하지 않아서 발생하는 문제입니다.이미 yarn을 글로벌로 설치했는데도 yarn

개인 포트폴리오 사이트를 만들면서 글자에 타자기 효과를 주고 싶은 경우가 종종 있습니다.이때 이번에 소개할 라이브러리를 사용하면 쉽게 타자기 효과를 낼 수 있습니다.현재 리액트 최신 버전인 18버전에서도 잘 동작하는 것을 확인했습니다. 그러므로 손쉽게 타자기 효과를 사

개인 프로젝트나 팀 프로젝트를 할 때 ReadMe.md 파일에서 위의 그림처럼 프로그래밍 언어를 표시하고 싶을 때가 있습니다.Q. 어떻게 만들 수 있을까요?우선 shields.io 사이트에서 markdown badges를 생성할 수 있습니다.프로그래밍 언어마다 고유의

자주 사용하는 기능 몇 가지 중에 테이블만 확인할 것입니다. 다 읽는데 정확히 5분 걸립니다. 갑시다.

redux-toolkit을 이용해서 비동기 데이터 처리하는 방법에 대해서 알아보겠습니다.비동기 처리는 createAsyncThunk함수를 사용합니다. 이 함수를 사용하는 방법을 알아보고 어떤 기능이 있는지 확인해 보겠습니다.

이번 장에서는 react에서 react-redux과 redux-toolkit을 사용하는 방법을 알아보도록 하겠습니다.이 모듈을 사용하면 데이터를 중앙에 저장할 수 있습니다.또, 원하는 컴포넌트에서 원본 값을 가져와서 사용할 수 있고 조작할 수 있게 됩니다.지역에서 데이

React에서 TypeScript를 적용해서 Todo 앱을 만들어 보겠습니다. 본론에서는 파일마다 코드가 바뀌는 스냅샷을 두었습니다. 정리란에는 각 파일의 코드를 넣었으니 코드를 참고하면 좋습니다.

value에 값을 지정하면 input 태그가 읽기 모드가 됩니다. 더 이상 input 태그 내용을 수정할 수 없게 됩니다. 만약에 초기값을 두고 input 태그의 데이터를 수정하려면 defaultValue 속성을 사용하라고 합니다.오류나 경고문 없이 input 태그 안

이번 장에서는 아래에 게시된 과일 데이터 베이스를 만들어 보겠습니다.firebase를 이용해서 서버데이터를 저장하고 react로 가져와서 사용하는 작업을 하겠습니다.저는 CSS 파일은 생성해 놓았지만, CSS 코드는 적용하지 않았습니다. 기호에 맞게 CSS를 적용하시면

이번 장에서는 Firebase에 대해서 알아보겠습니다.Firebase를 이용해서 프로젝트를 생성하고 어플리케이션을 등록하겠습니다.그리고 React에서 DB를 연결하고 데이터를 조작해 보겠습니다.구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다.백엔드 서버 기능을 클라

이번 장에서 리액트 라우터에 대해서 알아보겠습니다.라우팅에 대한 자세한 설명과 예시를 보면서 이해하도록 하겠습니다.초기 웹 사이트각 화면에 해당하는 웹 문서를 일일이 제작서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발서버 사이드 렌더링(Server Sid

리액트에서 Context를 사용해서 상태관리 할 수 있는 방법을 알아보도록 하겠습니다.Context는 컴포넌트가 중첩되어 있는 상황에서 상태 값을 전달하기 편리합니다.예시를 살펴보면서 Context 개념에 대해서 자세히 보겠습니다.어플리케이션에서 전반적으로 사용할 값을

React에서 useState 대신 상태관리를 할 수 있는 useReducer를 이용한 실습문제를 풀어보겠습니다.실습 문제를 풀면서 useReducer를 어떻게 사용하는지 알아보겠습니다.😀CSS styling은 본인의 취향에 맞게 적용하시면 됩니다. 없어도 무방합니다

useReducer()는 컴포넌트의 상태를 관리할 때 사용하는 Hooks 입니다.특징컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능합니다.다른 컴포넌트에서도 해당 로직을 재사용 가능합니다.useReducer() 사용 방법state : 컴포넌트에서 사용할 상태 값d

React의 Hook 중에 useState와 useEffect, useRef를 이용한 실습 문제를 풀어보도록 하겠습니다.문제를 풀면서 useEffect의 사용방법을 살펴보겠습니다.useRef를 이용했을 때 어떠한 효과를 누릴 수 있는지도 알아보겠습니다.변수를 저장할 s

이번 시간에는 React에서 state와 event를 실습할 수 있는 문제를 풀어보도록 하겠습니다.React에서 변수를 저장할 때 useState를 이용해서 저장하고, state값을 바꿔주는 함수를 이용해서 state값을 바꾸는 방식을 살펴보겠습니다.부모 컴포넌트에서

자바스크립트를 이용해서 숫자, 시간, 날짜 형식을 간결하게 나타내고 싶은 경우가 많습니다.이때 자바스크립트 내장 객체(Intl)을 사용하면 좋습니다.Intl 객체는 문자열 비교, 숫자 형식, 날짜 및 시간 형식을 제공하는 ECMAScript 국제화 API의 네임스페이스

프로젝트를 시작할 때 깃허브로 협업하는 과정을 간단하게 알아보겠습니다.먼저, 기존에 존재하는 저장소를 fork를 한 후, 내가 fork한 저장소를 내 컴퓨터에 clone 합니다.upstream 키워드를 통해서 push/pull할 저장소를 설정합니다.