![]()
이 글은 리액트에서 Firebase로 이메일-패스워드 로그인을 구현하는 방법에 대해 정리한 글이다. 소셜로그인 구현은 다른 글로 차후에 작성할 예정이다. Firebase 계정이 있다고 가정하고 글을 시작한다. 계정이 없다면 아래 링크(Firebase 홈페이지)에서 구글계정으로 계정을 활성화하고 시작하면 된다. https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com Firebase 프로젝트 추가 Firebase 로그..
이 글은 Vite를 이용하여 생성한 리액트 프로젝트에서 상대 경로를 절대 경로로 대체하는 방법에 대해 소개한다. 상대 경로를 사용하든, 절대 경로를 사용하든 동작에는 문제가 없지만, 프로젝트의 규모가 커질수록 상대 경로의 깊이가 깊어지기 때문에 경로가 복잡해진다는 문제가 발생할 수 있다. 이러한 문제를 해결하기 위해 상대 경로를 절대 경로로 대체하는 방법에 대해 알아보고자 한다. 상대 경로를 절대 경로로 대체하기 tsconfig.json 파일과 vite.config.ts 파일을 수정하여 상대 경로를 절대 경로로 대체할 수 있다. vite.config.ts 파일 수정 vite.config.ts 파일은 아무것도 수정하지 않았다면, 아래와 같이 구성되어 있다. import { defineConfig } fro..
이 글에서는 react-router-dom을 사용하여 리액트에서 페이지 이동을 처리하는 방법에 대한 포스팅이다. 이 글에서 사용한 react-router-dom의 버전은 v6( v6.21.3 )이다. 라우팅이란? 라우팅(routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 때, 최적의 경로를 선택하는 과정을 의미한다. 여기서 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는 가장 적은 시간 안에 전송할 수 있는 경로이다. 웹에서 혹은 앱에서 라우팅의 의미는 사용자가 원하는 URL에 따라 알맞은 화면(페이지)을 보여주는 것이라고 생각할 수 있다. 리액트에서 SPA(Single Page Application)를 구현하기 위해 라우팅을 사용하게 되며, 라우팅을 구축하기 위해서는 크게 React Rou..
![]()
이 글에서는 CSS가 아닌 styled-components 라이브러리를 이용해 리액트 어플리케이션의 스타일링 방법에 대해 알아본다. styled-components란 무엇인가 styled-components는 리액트의 디자인을 보다 쉽게 하기 위해 개발된 패키지로, 별도의 CSS 파일을 이용하여 스타일을 적용하는 것이 아니라 컴포넌트 내에서 스타일을 지정할 수 있도록 도와주는 패키지이다. 리액트와 같은 프레임워크는 재활용 가능한 컴포넌트 단위로 분할하여 개발이 이루어지고 있는데, 리액트에서는 이미 HTML은 JSX를 이용하여 포함하고 있으며, styled-components 패키지를 이용하면 CSS 역시 별도의 CSS 파일이 아닌 JavaScript(JSX) 혹은 TypeScript(TSX) 내에 포함하..
![]()
이 글에서는 creat-react-app와 다른 방법으로 리액트 프로젝트를 생성하는 Vite(비트)를 설치하고 리액트 프로젝트를 생성하는 방법에 대해 정리할 예정이다. Vite 설치하기 Vite는 Node.js 버전 18+ 혹은 20+를 기본 요구사항으로 하고 있다. 먼저 Node.js가 설치되어 있지 않다면 설치를 진행하고, 설치가 되어있다면 버전을 확인하자. node -v 버전이 낮거나 설치가 되어있지 않다면 아래 사이트로 이동해서 설치를 진행하면 된다. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Vite 프로젝트 생성하기 프로젝트 생성은 아..
