5_Clock

환경 OS: macOS IDE: vs code node: v20.6.0 library: redux-toolkit Redux는 자바 스크립트 앱 내에서 상태관리를 해주는 라이브러리이다. React에서는 상태관리를 부모에서 자식으로 내려주는 방식으로 사용하고 있다. 하지만 여기서의 문제점은 한 컴포넌트에 달려있는 자식이 너무 많아진다면, 상태 관리가 복잡해진다는 점에 있다. 따라서 이러한 코드의 복잡성을 해결하기 위해서 Redux를 사용할 수 있다. 우선 Redux는 상태를 저장하는 저장하는 Store와 그 저장소에 운반될 데이터인 Action, 마지막으로 Store에 Action을 전달할 Reducer 세 가지의 개념이 존재한다. 0. Installation 이 글에서는 redux-toolkit을 사용하도..

앞선 포스팅에 이어지는 글입니다. https://dolgogae.tistory.com/71 React, Next.js, Firebase를 사용한 Google 소셜 로그인(2) - 이메일/비밀번호 앞선 포스팅에 이어지는 글입니다. https://dolgogae.tistory.com/70 React, Next.js, Firebase를 사용한 Google 소셜 로그인(1) - 환경세팅 들어가기 전 firebase 연동을 주로 한 포스팅이라 react와 next.js 세팅은 앞선 dolgogae.tistory.com 환경 OS: macOS IDE: vs code node: v20.6.0 firebase로 만드는 구글로그인도 매우 간단하니 이전 글을 참고하면 쉽게 이해가 가능할 것이다. 따라서 코드만 첨부하도록 ..

앞선 포스팅에 이어지는 글입니다. https://dolgogae.tistory.com/70 React, Next.js, Firebase를 사용한 Google 소셜 로그인(1) - 환경세팅 들어가기 전 firebase 연동을 주로 한 포스팅이라 react와 next.js 세팅은 앞선 포스트인 https://dolgogae.tistory.com/65 [React / Next.js] 프로젝트 생성 환경 OS: macOS IDE: vs code node: v20.6.0 1. 일반 폴더 생성 대부 dolgogae.tistory.com 환경 OS: macOS IDE: vs code node: v20.6.0 0. firebase 설치 npm install firebase 1. 회원가입 로그인에 앞서 회원가입을 만들수..

들어가기 전 firebase 연동을 주로 한 포스팅이라 react와 next.js 세팅은 앞선 포스트인 https://dolgogae.tistory.com/65 [React / Next.js] 프로젝트 생성 환경 OS: macOS IDE: vs code node: v20.6.0 1. 일반 폴더 생성 대부분의 react 프로젝트를 생성할 때 처럼 기본 폴더를 생성해준다. 그리고 현재 나의 환경에서 vs code를 사용하고 있기 때문에 폴더를 vs code로 dolgogae.tistory.com 를 참고해주면 좋을 것 같다. 환경 OS: macOS IDE: vs code node: v20.6.0 1. 시작하기 우선 구글에서 제공하는 서비스이기 때문에 구글 계정이 있어야 한다. https://firebase...

classNames는 SCSS에서 className들을 조합해주는 역할을 한다. className은 SCSS에서 CSS를 각 tag들에 적용해주는 역할을 한다. 우선 classNames를 사용하기 위해서는 classnames라는 패키지를 설치해줘야 한다. $ npm install classnames 가장 먼저 classNames를 import 해줘야 한다. import classNames from 'classnames' 그리고 각각 필요한 CSS들을 조합해 줄 수 있다. classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ foo: true }, { bar: false }..

환경 OS: macOS IDE: vs code node: v20.6.0 1. UI 생성하기 react-next에서 src/app 밑에 폴더 생성후 page.jsx(page.tsx)를 통해서 라우팅이 가능했다. 하지만 바로 page.jsx에서 페이지를 생성하게 되면 react의 state를 사용하지 못한다. useState등의 react state는 client에서만 사용이 가능하다. page.jsx는 일반적으로 next.js의 서버에 해당된다. 따라서 아래처럼 'use client' 키워드를 이용해야 한다. LoginClient.jsx 'use client' import React, { useState } from 'react' const LoginClient = () => { const [email, ..