동탁의 개발자취

담당하여 구현한 기능 회고 - 로그인 import React, { useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; import FloatingLabel from "react-bootstrap/FloatingLabel"; import axios from "axios"; const LoginForm = () => { const [email, setEmail] = useState(""); const [password, ..

1. 로그인 로그아웃 관리자 계정 로그인 ! 현재 로직은 보안상 아주 위험한 로직이지만 우선적으로 기능 구현 후 리팩토링 할 예정입니다. 로그인 시 ID가 관리자의 ID인 경우 localstorage에 key와 value를 role과 admin으로 값을 저장 아닐 경우 (일반 유저) 백엔드로 부터 JWT 토큰을 발급 받아 localstorage에 저장 해당 로직 완성 전 마주친 에러와 해결한 방법 1. 로그인 완료후 navigate로 메인페이지로 이동하자 새로고침이 생기지 않아서 localstorage에 token을 가지고 있는 status가 인식되지 않음 2. 따라서 window.location.href로 전체 페이지 새로고침으로 유저의 token status를 인식시킴 (로그아웃도 마찬가지로 wind..

이틀에 걸쳐 로그인 구현을 마쳤다. 내가 구상한 로그인 로직은 이러하다. 1. 회원가입과 동일하게 form을 통하여 input값을 받는다. 2. axios의 post를 통하여 id , password를 보낸다. 3. JWT 토큰을 백으로부터 발급 받는다. 4. JWT 토큰을 프론트단에서 보관한다. 5. 토큰이 있으면 로그인 상태, 토큰이 없다면 비로그인 상태 이 중 3번까지는 쉽게 완료가 되었으나 4번이 어려웠다... JWT 토큰을 보관하기 위하여 local storage / session / cookie 3가지의 방법이 있었으나, 이미 팀원분이 local storage에 상품을 담는 방법을 어느 정도 구현을 하시고 계셔서 같이 local storage에 jwt토큰을 저장하기로 하였다. 이에 따라 두가지..

오늘은 하루종일 정보수정 로직을 수정하고 테스트 해보았다. 해당 로직에서 특이점이 있었는데 1. 정보가 수정되긴 하지만 userId 21가 아닌 userId 14 (리스트의 최상단 ID) 의 값이 수정된다. 2. 백으로부터 res프론트에서의 then문이 실행 되지 않는다. 따라서 오늘은 하루 종일 해당 로직을 프론트 , 백 두가지에서 수정을 진행하였다. 1. 정보가 수정되긴 하지만 userId 21가 아닌 userId 14 (리스트의 최상단 ID) 의 값이 수정된다. -> User.findOne이 name인데 name을 전송하고 있지 않아서 온갖 방법을 다해봤는데 아직은 방법을 못찾았다... 혹시나 해서 email을 일치하게 해서 post보냈는데도 변경 되지 않는다. 추후 백엔드와 같이 얘기해서 해결해 ..

get 하는 중 생긴 여러 error에 대한 회고 1. Page에서 get요청을 여러번 보냄 2. 정상적으로 요청이 완료 되었음에도 catch alert 출력 3. backend에서 받은 데이터 출력 1. Page에서 get요청을 여러번 보냄 useEffect, reactstrictmode 제거해서 해결 get요청을 Page내에서 3번씩 보내서 해당 방법으로 해결 하였으나, reactstricmode를 제거 함으로 어떤 문제가 생기는지는 추후 개발하면서 더 공부해봐야 할 예정 2. 정상적으로 요청이 완료 되었음에도 catch alert 출력 catch 안에서 error를 변수로 받지 않고 바로 alert을 출력하여 발생 .catch도 일종의 .then으로 작동하는것으로 추측 만약 error를 받도록 설정..

Submit 후 백엔드 서버에 전달하는 로직 작성 후 지속적으로 post요청을 보냈으나 post는 되지만 막상 백엔드 db에는 등록이 되지 않는 문제 발생 여러 에러 파악 후 백엔드와 프론트엔드간 주고 받는 인터페이스가 일치 하지 않았음을 알게 되었고 프론트에서는 formdata로 묶어서 보냈지만 백엔드에서는 formdata로 받기로 되어 있지 않다는 것을 알고 formdata를 구조분해해서 전달 후 통신 성공. 그러나 백엔드 db문제로 db에 작성되는 것에는 실패 하였다. 추가로 test용 console.log와 alert을 작성하여 어디까지 성공하였는지 체크하는 메커니즘 작성 백엔드와 상의 후 주고 받는 인터페이스 정의해서 명세 받기로 결정 하였다.

1. UI 대부분 구현 완료 - 시간 잡고 더 만들기 X, 각자 기능 파트 맡았을 때 필요한 화면 각자 구현 2.프론트엔드 - 이제부터 로직에 집중 대부분 로직 구현해놔야 테스트나 구글링으로 발전이 가능 3. 백엔드 - 불러올 api 구현 -> 포스트맨 , 스웨거 중에서 명세 작성

1. 로그인 CSS 변경 로그인 UI 변경 이유 - 사용자가 보기에 회원가입 페이지와 로그인 페이지의 차이점이 보이도록 onClick의 action 변경 - 버튼을 회원가입 버튼과 동일하게 변경하여 로그인에서 회원가입 페이지로 이동 시 회원가입 페이지 내에서 회원가입 후에도 동일한 버튼을 누르면 작동함을 인식 시킴 2. 유저 정보 페이지 초안 회원 정보 수정 및 회원 탈퇴 사이에 주문 내역 버튼 삽입 예정 회원 탈퇴 이외의 버튼은 색상 동일하게 설정 다른 페이지와 통일성을 위해서 버튼은 flex-end로 정렬 예정 내용들은 get으로 백에서 불러오기 3. 회원가입 로직 빌드업 회원가입 flow 구상 1. Form 구조 안에서 input 받기 1) useState 선언 2) Form.Control 태그안에..

1. 깃으로 시간 뺏기지 않게 여러번 확인 후 푸쉬 2. 프론트엔드 개발 방향 - UI부분 먼저 구현 3. 목표 - 프론트엔드 : 라우터 연결 제외하고, 필요한 페이지 오늘 전체 구현 - 백엔드 : 로그인 회원가입 기능이 급하므로, 오늘부터는 속도 내기, 로그인 api는 오늘 안에 나오게 4. 오늘 나의 개발 목표 - 유저 상세 페이지 , 장바구니 UI / 로그인 회원가입 db연결 전까지 완전히 익히기 로그인 api나오면 바로 구현 가능하게

1. git 커밋 규칙 설정 ex) fix: 로그인 로직 수정 , feat: 로그인 UI 개발 2. 기타 회의 사항 - 버젼 전체 맞추기 - Node는 18.13.0 - 프론트는 리액트랑 기타 라이브러리 버젼들 확인하며 진행 - nvm으로 버젼 변경 - 작업 전 버젼 확인 필수