5_Clock

앞선 포스팅에 이어지는 글입니다. 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로 만드는 구글로그인도 매우 간단하니 이전 글을 참고하면 쉽게 이해가 가능할 것이다. 따라서 코드만 첨부하도록 ..

환경 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, ..

환경 OS: macOS IDE: vs code node: v20.6.0 생성된 앱의 src/app 폴더 밑에 global.css에서 전역 스타일링의 적용이 가능하다. :root 에서는 전체적으로 많이 쓰이는 색상을 미리 지정해 두어 다른 파일에서 --var(변수 이름)과 같이 불러와서 쓸 수 있다. :root { --font-family: sans-serif; --dark-blue: #0a1930; --light-blue: #1f93ff; --light-gray: #E7E7E7; --dark-gray: #767676; --border-gray: #CCCCCC; --table-border-gray: #EEE; --color-white: #FFFFFF; --color-primary: #0074e9; --co..

환경 OS: MacOS IDE: VS code Node: v20.6.0 1. 폴더 구조 react-next로 앱을 생성하게 되면 기본적으로 src/app 폴더가 생성된다. 해당 폴더에서 라우팅하고 싶은 url 경로명의 폴더를 생성해준 뒤에 page.jsx(page.tsx)를 생성해주면 해당 페이지로 라우팅이 된다. 다음처럼 src/app 폴더 하단에 test 폴더와 page.jsx 파일을 생성한 뒤에 간단한 페이지를 생성해주면, localhost:[포트]/test로 접속을 해보면, Test라는 컴포넌트에 작성한 내용을 확인 할 수 있다. React-next를 사용하게 되면 이전에 react만 사용했을때 처럼 복잡한 라우팅에 대한 코딩은 없어지게 된다.