미새문지

오늘 백엔드를 맡은 재희님과 api연동 및 기획 변경이나 추가할 점에 대해 회의했다.본인은 이번 회의로 각자 테스팅 방식이나 백엔드에서 서버를 띄워서 프론트도 테스팅이 가능하게 할 수 있냐 물어보려 했었는데, 전날 밤을 꼴딱 새서 디비랑 클라우드로 띄워 서버가 켜있는 동안 프론트도 테스팅이 가능하게 구현해놓았더라 역시 킹갓재희덕분에 오늘 회의가 짧을까 싶었는데 의외의 에러들 때문에 회의시간을 꽉꽉 채워버렸다 일단 백과 프론트가 처음에 기획을 할 때 전달받을 데이터가 어떤 값이 있는지, 어떻게 전달되는지 미리 결정하고 그대로 했었어야 했는데 기획할 때 이 부분이 진짜 어려운 것 같다.백은 백대로 erd를 구성하고 디비 설계를 하려면 초반 기획이 확실하게 정해져야 했고 프론트는 정해진 데이터 값을 토대로 코..

랭킹 페이지에서 UI로 만들어논 필터의 기능을 구현하려 코드를 봤는데 컴포넌트가 좀 깊게 들어가 있었다.ranking => rankingList => rankingFilter => main, subFilter까지 총 4중으로 깊게 들어가 있어 데이터를 어떻게 전달해야 할지 고민을 좀 많이 했다.구현은 props로 전달하는 방식으로 했지만 코드가 4중으로 컴포넌트를 타고 들어가는 방식이라 너무 조잡해보이긴 했다. 그래도 리덕스로 하지 않은 이유는 구글링하며 찾아봤더니 상태관리를 이용하면 코드를 타고가지 않아도 데이터값을 가져올 수 있지만 특정 값만 상태관리를 위해 리덕스로 구현하는건 props에 비해 클린 코딩이 되지 않는다고 하더라. import styled from "styled-components";..

루틴 페이지의 필터 드롭다운을 변경했다.어제 회의로 정렬 필터를 가격 오름차순, 내림차순, 평점 오름차순, 내림차순 총 4개를 적용하기로 했다.이 후 데이터에 따라 더 추가할 요소가 있으면 추가할 예정이고 이대로만 진행해도 크게 문제는 없을 것 같아 나중으로 미뤄두려고 한다.import "../../scss/about/filterList.scss";import sortFilter from "../../img/sort.png";import goodOff from "../../img/goodOff.png";import goodOn from "../../img/goodOn.png";import star from "../../img/star.png";import { items } from "../../data/..

오늘은 에러 수정이나 데이터 값 변경을 위한 코드 수정이 전부였다.회원가입에 닉네임 중복과 이메일 중복을 깜빡해서 오늘 재희님과 회의를 통해 추가해줬다.중복체크 버튼을 추가해주려고 했는데 기존의 구조가 좀 틀어질 것 같아 다음 페이지로 가는 버튼에 중복체크를 걸어서 해당 중복체크를 통과해야 넘어갈 수 있게 수정했다. 그러나 기존에 다음으로 넘어가던 버튼이 회원가입의 최상위 컴포넌트에 있기 때문에 코드를 하위 컴포넌트로 끌고와야 했다.import styled from "styled-components";import Signup1 from "../components/signup/signup1";import Signup2 from "../components/signup/signup2";import Signup..

useNavigate와 useLocation을 이용해 경로 연결을 해줬다. SPA의 경우에는 이동이나 뒤로가기가 직접 경로를 넣기에 좀 복잡할 수 있다고 useNavigate의 기능을 이용하면 편하다고 했다.import styled from "styled-components";import Signup1 from "../components/signup/signup1";import Signup2 from "../components/signup/signup2";import Signup3 from "../components/signup/signup3";import BackHeader from "../components/common/backHeader";import { useState } from "react";..

특정 루틴을 눌렀을 때의 루틴 페이지에 데이터를 받을 준비를 했다.import { useEffect, useState } from "react";import AboutHeader from "../components/common/aboutHeader";import DetailHeader from "../components/detail/detailHeader";import DetailInfo from "../components/detail/detailInfo";import axios from "axios";const DetailRoutine: React.FC = () => { const [data, setData] = useState(null); useEffect(() => { axios ..

어젠 잘 해결됐던 오류가 다시 생겼다갑자기 에러가 왜 다시 생겼는지 알 수 없지만 다시 구글링해본 결과 라이브러리의 버전에 영향이 있었다.jwtdecode의 현 버전은 4.0.0인데 블로그나 지피티에 올라온 건 그 이전 버전이여서 오류가 발생하는 것이였다.해결법은 기존의 import jwtDecode, { JwtPayload } from "jwt-decode";로 작성한 부분을 import { jwtDecode, JwtPayload } from "jwt-decode";로 괄호 안으로 넣어주면 해결된다고 하는데 이렇게 해결되는 이유가 라이브러리를 가져오는 import의 방식에 있다고 한다. 모듈의 기능이 중괄호에 들어가고 안들어가고 하는건 export 방식의 차이라고 해서 모듈을 배포하려면 export를 ..

타입 맞추는게 너무 거지같다. 로그인에서 계속 에러가 발생하는데 해결이 안되서 계속 붙잡다가 일단락은 됐다.import React, { useState } from "react";import "../../scss/login/emailLogin.scss";import CommonInput from "../common/commonInput";import PwVisible from "../common/pwVisible";import axios from "axios";import jwt_decode, { JwtPayload } from "jwt-decode";interface MyTokenPayload extends JwtPayload { exp: number; iat?: number; userId?: s..