장바구니 아래에 로그인 되어있다면 계산하기 버튼만 , 로그인 하지 않았다면 로그인 버튼이 보이게 하고싶다.     import React, { useEffect } from 'react'import { useAppDispatch, useAppSelector } from '../../../hooks/redux'import styles from './Checkout.module.scss'import { Link } from 'react-router-dom';import { getTotalPrice } from '../../../store/cart/cart.slice';import { useAuth } from '../../../hooks/useAuth';//장바구니 하단에 합계랑 로그인버튼const Chec..

1. initialState 설정cart.slice.js에서import { createSlice } from "@reduxjs/toolkit";const initialState = {    products:[],    totalPrice:0,    userId:""}export const cartSlice = createSlice({    name:"cart",    initialState,    reducers:{    }})export default cartSlice.reducer; 보통 initialState에서 products랑 userId는 로컬스토리지에 넣어둔다.그래서 만약 로컬스토리지에 있으면 그거를 initial로 가져오도록 하자const initialState = {    products..

1. 제네릭1-1. 제네릭의 사용type User = {    id: number;    name: string;}type Address = {    zipcode: string;    address: string;}function pipeOne(value: any): any {    return value;}  넣은걸 그대로 반환하는 함수이다.이건 잘못 넣으면 당연히 잘못 나오게 된다. pipeOne 함수는 전달된 값을 그대로 반환하지만, any 타입을 사용하기 때문에 정확한 타입 검사가 이루어지지 않습니다.잘못된 타입을 입력해도 에러가 발생하지 않아, 타입 안전성이 보장되지 않습니다. function pipeTwoT>(value: T): T {    return value} T 라는 타입으로 들어오면..

이렇게 카테고리를 만들었는데특정 카테고리를 클릭 했을때는 카테고리에 맞는 상품만 가져와야한다.CardList 컴포넌트가 카테고리 선택에 따라 적절한 제품 목록을 요청하고 렌더링하는 방식이다. 1. CardList 컴포넌트에서 Redux 상태 가져오기  import React, { useEffect } from 'react'import { useAppDispatch, useAppSelector } from '../../../hooks/redux'import CardItem from '../card-list/card-item/CardItem'import styles from '../card-list/CardList.module.scss'import { fetchProducts } from '../../../..

구글링해봐도 잘 적용이 되지 않았다ㅠㅠ Redux Toolkit의 configureStore를 설정할 때 devTools 옵션을 활성화해야 하는데 1. store.js에서 configureStore 설정 확인하기configureStore 함수에서 devTools: true 옵션을 추가해 Redux DevTools를 활성화할 수 있다.import { configureStore } from "@reduxjs/toolkit";import userReducer from "./user/user.slice";import categoriesReducer from "./categories/categories.slice";import productsReducer from "./products/products.slice"..

드디어 데이터를 가져와보자.. https://fakestoreapi.com/ Fake Store APIFake store rest api for your ecommerce or shopping website prototypefakestoreapi.com 이걸 사용해서 가져올거다. 1. CardList 컴포넌트 생성 import React, { useEffect } from 'react'import { useAppDispatch, useAppSelector } from '../../../hooks/redux'import CardItem from '../card-list/card-item/CardItem'import styles from '../card-list/CardList.module.scss'cons..

이 중에 맨 상단에 카테고리 탭을 구현할 것이다. 1. 카테고리 슬라이스 생성카테고리 폴더안에 파일을 만들어준 뒤export const CategoriesName = {    All:"",    Electronics:"Electronics",    Jewelry:"Jewelery",    MensClothing:"Men's clothing",    WomensClothing:"Women's clothing"} type 파일을 만들고,  import { createSlice } from "@reduxjs/toolkit";import { CategoriesName } from "./categories.type";const initialState = CategoriesName.All;   //초기에는 "" c..

문제 상황다른 팀원이 작업한 내용을 PR로 올려서 머지하였고, 그 후 새로운 이슈를 위한 브랜치를 생성하려 했으나, develop 브랜치로 체크아웃할 때 충돌이 발생했다. ㅠㅠ충돌은 최신 커밋을 기준으로 충돌이 발생이 난다고 생각했는데.....바로 직전에 머지된 내용과 과거(3~4일 전)에 작업한 내용 간의 충돌이었고 이전 작업들이 병합 편집기에 불러지는 현상이 있었다.그래서 직전 머지한 내용 이외에도 다른 부분에서 전부 과거내용과 충돌이 일어났다...해결 상황어떻게 해결했냐며뉴ㅠGit 로그 확인: git log 명령어로 커밋 로그를 확인했을 때, 로컬의 develop 브랜치가 최신 커밋을 가리키지 않고 있었다.소스 제어 그래프 확인: VS Code의 소스 제어 그래프에서 로컬 develop 브랜치가 한..

https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com 1. useFormform 을 만들기 위해서는  useForm을 사용해야한다. const { register } = useForm({ mode: 'onSubmit', reValidateMode: 'onChange', defaultValues: {}, resolver: undefined, context: undefined, criteriaMode: "firstError"..

❓왜 로그인, 회원가입을 리덕스로 해야하나앱 전반에서 인증 상태와 사용자 정보를 일관되게 관리할 수 있기 때문이렇게 store 폴더안에 폴더파일들을 미리 다 만들어준다. 1. 스토어 생성configureStore함수를 이용해서 생성해준다.store 폴더 바로아래의 index.js에서import  {configureStore} from "@reduxjs/toolkit";import { userSlice } from "./user/user.slice";export const store = configureStore({    reducer:{        userSlice    }}) 리듀서를 만들어야하는데 그래서 슬라이스를 하나 만들어보자  1-2. 슬라이스 import { createSlice } from..

맵드 타입을 이용하면 중복을 피하기 위해서 다른 타입을 바탕으로 새로운 타입을 생성할 수 있습니다.Mapped type을 사용하는 것은 type이 다른 type에서 파생되고 동기화 상태를 유지해야 하는 경우에 특히 유용하다.//현재 사용자의 구성 값type AppConfig = { username:string; email:string};//사용자에게 구성 값을 변경할 수 있는 권한이 있는지 여부type AppPermissions = { changeUsername :boolean; changeEmail : boolean;};여기서 Appconfig 와 AppPermissions사이에 암시적 관계가 있기 때문에 문제가 있다.새 구성 값이 AppConfig에 추가될때마다 AppPermission에 해당..

ExtendsExtends 키워드는 자바스크립트에서도 사용할 수 있으며 부모 클래스에 있는 프로퍼티나 메소드를 상속해서 사용할 수 있게 만들어준다.ImplementsImplements 키워드는 새로운 클래스의 타입체크를 위해서 사용되며, 그 클래스의 모양을 정의할때 사용한다.(부모 클래스의 프로퍼티와 메소드를 상속받아서 사용하는게 아님!!!!)class Car{ mileage =0 ; price =100; color ='white'; drive(){ return 'drive!'; } brake(){ return 'brake'; }}class Ford extends Car{ }const myFordCar = new Ford();myFordCar.color여기서 아래부분을 imp..

Utility Typepartial파셔 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.interface Address{ email:string; address:string;}const all: Address = {email:"asd@asd.com",address:'john'};//const you = {email:"asd@asd.com"};//all과 다르게 속성이 둘다 있지않아서 Address타입 사용불가 -> 파셔 사용해보자const you:Partial = {email:"asd@asd.com"};const me:Partial = {};pick픽 타입은 특정 타입에서 몇개의 속성을 선택하여 타입을 정의한다.interface Todo{ title: string; descript..

함수 오버로딩두 함수를 하나로 만들어 주려면?function saySomething(word:string | string[]):string{ if(typeof word ==="string"){ return word; }else if(Array.isArray(word)){ return word.join(" "); throw new Error("unable to say something"); //string,string[] 타입이 둘다아니면 undefined 오류가 나서 throw처리 } 이렇게 할 수 있지만 함수 오버로딩을 사용해보자함수 오버로딩은 type선언와 함수구현이 나눠진다.function saySomething(word: string):stringfunction say..

🐳Type Alias , Interfacetype alias타입 별칭과 interface는 타입의 이름을 지정하는 방법으로 매우 유사하며 대부분의 경우 자유롭게 선택할 수 있다.interface People { name : string age : number}const me: People ={ name: 'john', age:50,}💥차이점- interface 확장 : extends 사용interface Animal { name : string;}interface Bear extends Animal { honey:boolean;}const bear1:Bear = { name:'honey bear', honey:true}- type 확장 : intersection 사용type Animal..