로그인 썸네일형 리스트형 [Spring] 토이 프로젝트 - 로그인 구현 안녕하세요최근 2주일간 개인 프로젝트를 진행했고드디어 오늘 완성했습니다.내일까지 시간이 있어서 코드를 리뷰해보려고 합니다. 프로젝트의 이름은 Fish Dalle3입니다.배경 이미지를 Dall E 3를 사용해서 만들었기 때문에간단하게 지었습니다. 이미지 제공 ▼DALL·E 3 | OpenAI 먼저 로그인 화면을 보여드리겠습니다. ID와 PW로 로그인하는 간단한 로그인 기능입니다. div class = "title">Fish Dalle3div> jsp:include page="${lp }">jsp:include> div> Landing Page에 jsp의 내장 기능인 include를 사용해서로그인 폼을 구현 했습니다. %@ page language="ja.. 더보기 [HTML] 로그인 페이지 구현 이번 시간에는 HTML과 CSS를 사용해서로그인 페이지를 구현해보겠습니다.코드를 보면서 설명해드리겠습니다. html>head>meta charset="UTF-8"> link rel = "stylesheet" href = "css/whitepage.css"> head 태그 안에 link태그로 css를 불러와 줘야 css를 적용할수있습니다. head>body> div class = "title"> 회원가입 div> img src = "dust.png" class = "dust"> 이미지 태그를 사용해서이미지를 불러옵니다. div class = "input-section">form action = "http://localhost/Jan13_1_Servlet/Output2?">ID : input name = ".. 더보기 [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 다음
