본문 바로가기

개발 TIL

24.09.06 day62 작업 일지 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";.. 더보기
24.09.05 day61 작업 일지 특정 루틴을 눌렀을 때의 루틴 페이지에 데이터를 받을 준비를 했다.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 .. 더보기
24.09.04 day60 jwt 오류 해결, 카카오 로그인 구현 중 어젠 잘 해결됐던 오류가 다시 생겼다갑자기 에러가 왜 다시 생겼는지 알 수 없지만 다시 구글링해본 결과 라이브러리의 버전에 영향이 있었다.jwtdecode의 현 버전은 4.0.0인데 블로그나 지피티에 올라온 건 그 이전 버전이여서 오류가 발생하는 것이였다.해결법은 기존의 import jwtDecode, { JwtPayload } from "jwt-decode";로 작성한 부분을 import { jwtDecode, JwtPayload } from "jwt-decode";로 괄호 안으로 넣어주면 해결된다고 하는데 이렇게 해결되는 이유가 라이브러리를 가져오는 import의 방식에 있다고 한다. 모듈의 기능이 중괄호에 들어가고 안들어가고 하는건 export 방식의 차이라고 해서 모듈을 배포하려면 export를 .. 더보기
24.09.03 day59 작업 일지 타입 맞추는게 너무 거지같다. 로그인에서 계속 에러가 발생하는데 해결이 안되서 계속 붙잡다가 일단락은 됐다.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.. 더보기
24.09.02 day58 작업 일지 타입스크립트를 쓰는 순간부터 모든 값에 타입을 명시해줘야 하는데 아직 익숙하지 않은 것 같다.회원가입 3페이지에는 생일, 성별, 피부타입, 퍼스널컬러, 피부 고민  이렇게 총 5개의 작성칸이 있는데 본인은 api로 백엔드에 데이터를 보내줄 때 각각 다른 값으로 전달하는 줄 알고 있었다.생일과 성별은 그렇다고 치고 피부 타입과 퍼스널 컬러는 radio버튼이라 선택지 중 하나만 선택할 수 있기 때문에  이것도 선택된 값으로 보내주고 제일 하단의 피부 고민만 checkbox여서 이 값만 배열로 선택해 보낼 예정이였지만, 오늘 재희넴과 작업 현황을 공유하며 회의를 한 결과 피부, 컬러, 고민 셋 다 한 배열로 받는걸로 정해졌다. const handleSkinTypeChange = (e: React.Change.. 더보기
24.08.30 day57 작업 일지 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.. 더보기
24.08.29 day56 작업 일지 랭킹 페이지와 랭킹 상세 페이지 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.. 더보기
24.08.28 day55 작업 일지 모든 UI를 끝내려 했으나 제품랭킹 페이지의 UI를 다 구현하지 못해서 루틴 상세 페이지만 먼저 올린다.시간상 랭킹페이지까지 구현할 수 있었으나 css에서 막힘이 좀 있었다.해당 페이지는 scss의 기능을 활용해 작성할 예정이었으나 사용을 잘못한 부분이 있어서 해결하느라 시간이 걸렸다.더보기.detailInfoWrapper { width: 90%; margin: 0 auto; h4 { font-size: 24px; font-weight: bold; margin: 10px 0; } // 제목과 평점 css .detailTitleReview { display: flex; flex-direction: row; img { width: 15px; mar.. 더보기

티스토리툴바