미새문지

주말과 추석을 쭉 쉬고 블로그 쓰려니까 너무 힘들다. 다시 열심히 해야될듯..프로젝트를 슬슬 마무리를 지으려고 해서 추석 때 틈틈히 작업을 좀 해두었고  오늘부터 다시 재희님과 작업을 병행하며 데이터를 연동했다.먼저 휴일에 메인페이지 하단의 배너 슬라이드 부분을 구현했다.import { useEffect, useState } from "react";import styled from "styled-components";import ad1 from "../../../img/adBanner/1.jpg";import ad2 from "../../../img/adBanner/2.jpg";import ad3 from "../../../img/adBanner/3.jpg";import ad4 from "../../....

오늘 백엔드를 맡은 재희님과 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/..

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