로그인 썸네일형 리스트형 [React] 로그인 기능 최종 구현 https://youtu.be/dFqb4KvRpNA?si=-2b0Bpht-CzUoqKA 본 포스팅은 John Ahn님의 유튜브 강의를 참고했습니다. 안녕하세요 오랜만에 왔네요 : ) 오늘은 로그인 기존에 만들던 로그인 기능을 마무리 해보려고 합니다. 먼저 코드를 보여드리고 해석해보겠습니다. import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { loginUser } from '../../../_actions/user_action'; import { useNavigate } from 'react-router-dom'; function LoginPage() { const dispatch = useD.. 더보기 [Node.js] 로그인 기능 https://youtu.be/HcAYHUHTNi4?si=_P73OEjAh9ODPZq1 https://youtu.be/yWRj4GxFcr8?si=Qf7vOOcYPnV1p9Mb 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 오늘은 로그인 기능을 구현해 보도록 하겠습니다. 먼저 로그인 Route를 server.js에서 만들어 줍니다. app.post('/login', (req,res)=>{ //로그인 데이터를 가져온다 }) 로그인을 하려면 3가지 단계가 필요합니다. 1. 로그인 하려는 이메일이 데이터베이스에 존재하는지 확인한다. 2. 이메일이 존재한다면 비밀 번호가 맞는 비밀번호인지 확인한다. 3. 비밀 번호가 맞다면 토큰을 생성한다. 먼저 첫 번째 단계부터 구현해 보도록 하겠습니다. Use.. 더보기 [React] 투두리스트 로그인 구현하기2 이번 시간에는 리액트 라우터 돔의 라우팅을 통해 메인페이지, 로그인, 회원가입 페이지를 분리해보도록 하겠습니다. 먼저 app.js에 루트(경로)들을 만들어 줍니다. import {BrowserRouter, Routes, Route} from "react-router-dom"; import를 해주고 function App() { return ( ); } 루트를 만듭니다. import React, { useState } from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; const TodoTemplateBlock = styled.div` width: 512px; height: 7.. 더보기 [React] 투두리스트 로그인 구현하기1 안녕하세요! 주말동안 갑자기 열이 나서 아무것도 못했습니다,, 오늘은 회원가입 페이지의 간단한 UI부분을 만들고 백엔드 쪽도 공부해서 로그인 기능까지 차근차근 구현해 보도록 하겠습니다. 베이스는 기존 투두리스트 웹을 이용하여 진행할 예정입니다. 기존 TodoTemplate을 이용하면 될 것 같습니다. import React from 'react'; import styled from 'styled-components'; const TodoTemplateBlock = styled.div` width: 512px; height: 768px; position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */ background: white; border-radius: 16px; .. 더보기 이전 1 다음
