본문 바로가기

TiL

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.. 더보기
24.08.27 day54 작업 일지 국취제에서 거주지 변경으로 인해 재상담을 받게 되어 이동에 시간을 좀 쓰느라 UI를 끝내진 못했다.오늘은 루틴 등록 총 3페이지 UI를 완료했고 루틴 상세를 작성 중인데 다 완성을 못하여 내일 완료할 예정이다. 루틴 상세를 포함하여 남은 페이지는 제품, 제품 상세 총 3페이지가 남았다. 웬만하면 내일 UI를 끝내고 기능구현으로 들어갈 예정이며, 이제 백엔드에서 api를 받아와 통신해야 한다. 그리고 다른 정적인 기능도 구현해야 한다.다른 특정 부분은 없었고 3페이지의 경우 input이 아니라 textarea로 작성하게 되었는데 input이랑 다르게 ChangeEvent를 걸어줄 때 HTMLTextAreaElement로 작성해줘야 되더라 왜 에러나는지를 몰라서 지피티한테 물어봤었다;그리고 3페이지의 입력값.. 더보기
24.08.26 day53 작업 일지 본격적인 기능은 나중이지만 마이페이지와 장바구니 UI도 틀은 완성했다. 마이페이지 경우에는 기능 구현을 어디까지 할지는 모르겠지만 페이지의 구색은 갖춰야 하니 기획한 모든 메뉴는 만들어놨다. 여기서 추가할 게 있으면 추가하고 필요없는 부분은 추후에 수정할 계획이다.상단 3개 기능은 구현가능하지만 하단 4개 기능은 제대로된 서비스가 될 경우에 사용가능한 거라 이 부분은 페이지의 구색으로만 만들어놨다.import styled from "styled-components";import AboutHeader from "../components/common/aboutHeader";import Profile from "../components/mypage/profile";import Option from "../co.. 더보기
24.08.22 day51 작업 일지 회원가입 페이지가 총 3페이지로 나누어져 있어서 카운트 변수를 만들어 해당 변수값에 따라 컴포넌트를 보여주기로 했다.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";const Signup: React.FC = () => { const [step, setS.. 더보기
24.08.21 day50 공용 컴포넌트 작성 방식 코드를 짜다보면 같은 UI를 가진 컴포넌트를 만들 때가 정말 많은 것 같다.  UI가 같지만 쓰는 페이지도 다르고 해서 처음에는 각 코드에 같은 css와 태그를 쑤셔넣었지만, 컴포넌트를 나누는 걸 익숙하게 느낄 때쯤 같은 코드를 반복하는게 뭔가 효율이 안 좋은 것 같아 공용 컴포넌트를 연습하게 되었다. 주로 UI가 겹치는 부분은 어느 페이지든 보이는 header와 footer, 그리고 로그인이나 회원가입같은 정보를 작성하는 input 태그, 해당 사이트의 컨셉을 가진 색상 div 등이 있는 것 같다.input 태그를 예시로 들어보자import styled from "styled-components";interface CommonInputProps { typeValue: string; placehold.. 더보기
24.08.20 day49 로그인 UI 처음에 소셜로그인과 이메일 로그인 router를 같은 걸로 지정해서 해당 버튼을 클릭 시 이동 시키려고 했는데 모션비트 프로젝트를 진행했을 때 경로가 같을 시 뒤로가기를 적용하기가 좀 까다로웠어서 코드를 좀 수정한 기억이 있었다. 그래서 경로를 각각 소셜, 이메일 로그인으로 나눴다.import { BrowserRouter, Routes, Route } from "react-router-dom";import styled from "styled-components";import Main from "./pages/main";import AboutRoutine from "./pages/aboutRoutine";import SocialLogin from "./pages/socialLogin";import Emai.. 더보기

티스토리툴바