Jieunny의 블로그

📣 CMarket의 상태를 Redux로 관리해보자 ✔️ Shopping Cart Actions ✓ addToCart는 ADD_TO_CART 액션을 생성해야 합니다 (4 ms) ✓ removeFromCart는 REMOVE_FROM_CART 액션을 생성해야 합니다 (13 ms) ✓ setQuantity는 SET_QUANTITY 액션을 생성해야 합니다 (2 ms) ✔️ Item Reducer ✓ ADD_TO_CART 액션에 따라 cartItems 상태가 변해야 합니다 (4 ms) ✓ REMOVE_FROM_CART 액션에 따라 cartItems 상태가 변해야 합니다 (2 ms) ✓ SET_QUANTITY 액션에 따라 cartItems 상태가 변해야 합니다 (2 ms) ✓ 리듀서는 다른 상태의 값을 보존해야 합니..

📣 장바구니 구현하기 ✔️ 장바구니에 추가 및 상품 개수 업데이트 1. 메인 화면에서 '장바구니 담기' 버튼을 누른 후, 장바구니 페이지로 이동하면 상품이 담겨있어야 한다. ➡️ ItemListContainer.js import React from 'react'; import Item from '../components/Item'; function ItemListContainer({ items, cartItems, setCartItems }) { const handleClick = (e, id) => { let addItem = { itemId: id, quantity: 1, } for(let i=0; i )} ); } export default ItemListContainer; ➰ App.js에서 it..

📣 자주 사용하는 UI를 Styled Component로 구현해보자 1️⃣ Modal ✔️ 조건 ✓ Modal 창을 띄워 줄 Open Modal 버튼이 있어야 합니다. (24 ms) ✓ 버튼을 클릭하면 Modal 컴포넌트 내부에 Modal배경, Modal창 div 엘리먼트가 렌더링되어야 합니다. (162 ms) ✓ Modal창이 렌더링 된 상태에서 버튼을 다시 클릭하면 Modal배경, Modal창 div 엘리먼트가 사라집니다. (84 ms) ✓ Modal 창 밖을 클릭하면, Modal배경, Modal창 div 엘리먼트가 사라집니다. (46 ms) ✔️ 구현 코드 import { useState, useRef, useEffect } from 'react'; import styled from 'styled-..

📣 피그마로 인스타그램 클론하기 ✔️ 기본적인 화면, 기능을 위주로 구현했다. ➰ 다음에 만들 땐 컴포넌트와 오토레이아웃 기능을 더 잘 활용하고 싶다. 1️⃣ main ✔️ 피드를 볼 수 있고, 좋아요를 누를 수 있다. ✔️ 스토리를 누르면 스토리가 오버레이로 나온다. ✔️ 하단 메뉴에서 돋보기나 내 프로필을 누르면 해당 페이지로 이동한다. ➰ 피드 하나를 컴포넌트로 만들어서 추가하는 형식으로 구현했는데, 이렇게 했더니 한 피드에 좋아요를 누르면 다른 피드의 좋아요도 같이 눌린다.. 시간이 없어 일단 다른 피드의 하트는 이미 눌러놓은 상태로 바꿔줬는데 피드를 컴포넌트로 만드려면 다른 방법으로 구현해야 할 것같다. 2️⃣ myProfile ✔️ 프로필을 누르면 스토리를 볼 수 있고, 오른쪽 상단 메뉴를 누..

📣 피그마로 자주 쓰는 UI 컴포넌트 구현하기 ✔️ 메뉴마다 페이지를 만들어줘서 GNB 각 메뉴를 누르면 그 페이지로 가게끔 Prototype의 interection을 넣어준다. ➰ Change to는 컴포넌트의 상태를 바꾸는 이벤트이고, Navigate to는 페이지를 이동하는 이벤트이다. 1️⃣ GNB ➰ 메뉴 버튼을 컴포넌트로 구현하고, 텍스트만 바꿔준다. ➰ active 상태에서는 밑줄이 있어야 하기 때문에 컴포넌트 상태를 2개로 둔다. 2️⃣ Modal ➰ 모달 버튼을 클릭하면 옆에 컴포넌트로 만든 오버레이가 나타난다. ➰ 오버레이 이벤트를 사용해서 구현한다. 3️⃣ Toggle ➰ 컴포넌트의 상태를 이용한다. ➰ 토글 버튼을 누르면 컴포넌트의 상태를 active로 바꿔준다. 4️⃣ Tap ➰ ..

📣 재귀로 Tree UI 구현하기 1️⃣ Test 조건 ✔️ 안에 tree view를 구성합니다. ✓ ul#root 엘리먼트가 존재해야 합니다. ✓ ul#root 엘리먼트 안에 tree view를 구현해야 합니다. ✔️ menu 데이터를 사용해 tree view를 구성합니다. ✓ ul#root 엘리먼트 안에 카테고리(음료, 음식, 굿즈, 카드)를 렌더링할 4개의 li 엘리먼트가 있어야 합니다. ✓ 카테고리(음료, 음식, 굿즈, 카드) 엘리먼트 안에는 각각 자식 노드를 보여주고 감춰줄 checkbox가 존재해야 합니다. ✓ 음료, 음식, 굿즈, 카드 카테고리 이름(name)을 span 태그로 감싸야 합니다. ✓ 자식 노드가 없는 데이터의 경우, li 엘리먼트 안에 단순히 이름(name)만 표시합니다. (c..