미새문지

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

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

국취제에서 거주지 변경으로 인해 재상담을 받게 되어 이동에 시간을 좀 쓰느라 UI를 끝내진 못했다.오늘은 루틴 등록 총 3페이지 UI를 완료했고 루틴 상세를 작성 중인데 다 완성을 못하여 내일 완료할 예정이다. 루틴 상세를 포함하여 남은 페이지는 제품, 제품 상세 총 3페이지가 남았다. 웬만하면 내일 UI를 끝내고 기능구현으로 들어갈 예정이며, 이제 백엔드에서 api를 받아와 통신해야 한다. 그리고 다른 정적인 기능도 구현해야 한다.다른 특정 부분은 없었고 3페이지의 경우 input이 아니라 textarea로 작성하게 되었는데 input이랑 다르게 ChangeEvent를 걸어줄 때 HTMLTextAreaElement로 작성해줘야 되더라 왜 에러나는지를 몰라서 지피티한테 물어봤었다;그리고 3페이지의 입력값..

본격적인 기능은 나중이지만 마이페이지와 장바구니 UI도 틀은 완성했다. 마이페이지 경우에는 기능 구현을 어디까지 할지는 모르겠지만 페이지의 구색은 갖춰야 하니 기획한 모든 메뉴는 만들어놨다. 여기서 추가할 게 있으면 추가하고 필요없는 부분은 추후에 수정할 계획이다.상단 3개 기능은 구현가능하지만 하단 4개 기능은 제대로된 서비스가 될 경우에 사용가능한 거라 이 부분은 페이지의 구색으로만 만들어놨다.import styled from "styled-components";import AboutHeader from "../components/common/aboutHeader";import Profile from "../components/mypage/profile";import Option from "../co..

캡슐화(Encapsulation) 캡슐화는 객체지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 데이터를 보호하고 객체의 내부 구현을 외부로부터 숨기는 방법을 의미한다.주요 특징데이터 보호캡슐화는 객체의 내부 상태를 보호하기 위해 데이터를 외부에서 직접 접근하지 못하게 하며, 이렇게 하면 데이터를 잘못된 방식으로 수정하거나 접근하는 것을 방지할 수 있다.정보 은닉객체의 내부 구현을 외부에 숨기고, 객체와 상호작용할 수 있는 공개된 메소드만을 통해 접근하도록 한다.이는 객체의 복잡성을 줄이고, 객체가 변경될 때 외부 코드에 미치는 영향을 최소화할 수 있다.인터페이스 제공캡슐화를 통해 객체는 내부 데이터를 직접 공개하지 않지만, 필요한 경우 데이터를 처리할 수 있는 메소드를 외부에 제공한다.이러한 메소드를 ..

회원가입 페이지가 총 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..

코드를 짜다보면 같은 UI를 가진 컴포넌트를 만들 때가 정말 많은 것 같다.  UI가 같지만 쓰는 페이지도 다르고 해서 처음에는 각 코드에 같은 css와 태그를 쑤셔넣었지만, 컴포넌트를 나누는 걸 익숙하게 느낄 때쯤 같은 코드를 반복하는게 뭔가 효율이 안 좋은 것 같아 공용 컴포넌트를 연습하게 되었다. 주로 UI가 겹치는 부분은 어느 페이지든 보이는 header와 footer, 그리고 로그인이나 회원가입같은 정보를 작성하는 input 태그, 해당 사이트의 컨셉을 가진 색상 div 등이 있는 것 같다.input 태그를 예시로 들어보자import styled from "styled-components";interface CommonInputProps { typeValue: string; placehold..