문미새 개발일지

랭킹 페이지에서 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/..

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를 ..

타입스크립트를 쓰는 순간부터 모든 값에 타입을 명시해줘야 하는데 아직 익숙하지 않은 것 같다.회원가입 3페이지에는 생일, 성별, 피부타입, 퍼스널컬러, 피부 고민  이렇게 총 5개의 작성칸이 있는데 본인은 api로 백엔드에 데이터를 보내줄 때 각각 다른 값으로 전달하는 줄 알고 있었다.생일과 성별은 그렇다고 치고 피부 타입과 퍼스널 컬러는 radio버튼이라 선택지 중 하나만 선택할 수 있기 때문에  이것도 선택된 값으로 보내주고 제일 하단의 피부 고민만 checkbox여서 이 값만 배열로 선택해 보낼 예정이였지만, 오늘 재희넴과 작업 현황을 공유하며 회의를 한 결과 피부, 컬러, 고민 셋 다 한 배열로 받는걸로 정해졌다. const handleSkinTypeChange = (e: React.Change..

redux toolkit을 설치해서 사용해봤는데, 확실히 예전에 redux가 너무 어려워서 못썼던거와는 달리 코드가 간편해져서 사용하기 좋아진 것 같다. 사용은 회원가입에 사용했는데 회원가입이 총 3페이지로 구성되어 있어 리덕스를 써서 전역으로 데이터를 관리할 상황이 생겨 사용하게 되었다.toolkit은 redux를 사용하기 위한 코드들을 압축시켜 사용할 수 있게 해줬다. import { configureStore } from "@reduxjs/toolkit";import signupReducer from "./slice/signupSlice";const store = configureStore({ reducer: { signup: signupReducer, },});export type Roo..

랭킹 페이지와 랭킹 상세 페이지 UI를 구현했다. 이제 UI는 다 구현했지만, 아직 기획에 안들어간 페이지도 몇 있고 기능 구현에 맞춰서 수정해야 하는 UI도 있기에 디테일한 부분은 나중에 구현하고 기능부터 구현을 들어갈 예정이다. import styled from "styled-components";import AboutHeader from "../components/common/aboutHeader";import MainHeader from "../components/common/mainHeader";import SearchBar from "../components/ranking/searchBar";import RankingList from "../components/ranking/rankingLis..