쭈

💥 장바구니 화면 구현하기- 장바구니 목록 요구사항  1) 사용자가 장바구니에 담은 내역 확인  2) 선택한 도서 아이템의 수량과 가격 합계를 표시  3) 장바구니 담은 도서 아이템을 삭제  4) 각 도서 아이템을 선택하여 주문서 작성 1. Cart.tsximport { 생략 }function Cart() { const { showAlert, showConfirm } = useAlert() const navigate = useNavigate() const { carts, deleteCartItem, isEmpty } = useCart() const [checkedItems, setCheckedItems] = useState([]) const handleCheckItem..

💥 도서 상세 화면 구현하기- 도서 상세 화면 요구 사항  1) 각 도서 상세 정보 노출  2) 좋아요 버튼 클릭 시, 좋아요 또는 취소 기능  3) 수량을 입력하여 장바구니 담기 1. BookDetail.tsximport { 생략 }const bookInfoList = [ { label: "카테고리", key: "category_name", filter: (book: IBookDetail) => ( {book.category_name} ) }, { label: "포맷", key: "form", }, { label: "페이지", key: "pages", ..

💥 비밀번호 초기화export interface SignupProps { email: string password: string}function ResetPassword() { const navigate = useNavigate() const showAlert = useAlert() const [resetRequested, setResetRequested] = useState(false) const { register, handleSubmit, formState: { errors }, } = useForm() const onSubmit = (data: SignupProps) => { if (resetReques..

💥 로그인/회원가입/비밀번호 초기화 API1) 로그인   =>   /login2) 회원가입    =>   /signup3) 비밀번호 초기화    =>   /reset💥 도서/장바구니/주문 API1) 도서 목록    =>   /books2) 도서 상세    =>   /books/{id}3) 장바구니    =>   /cart4) 주문서 작성    =>   /order5) 주문 목록    =>   /orderlist 이번엔 React Router 라이브러리를 사용해서 라우트를 작성해보려고 한다.npm install react-router-dom @types/react-router-dom --save 먼저 npm install을 해준 후, App.tsx 상단에 import를 꼭 해줘야한다.path는 "/" ..

💥 Title 컴포넌트 - Title.tsx color는 ? 을 붙여서 옵셔널로 지정했기 때문에 color가 없을 경우엔 undefined가 나올 수 있다.그래서 color가 없을 때의 경우도 따로 적어줘야 한다.그렇기 때문에 color ? theme.color[color] : theme.color.primary 라는 코드를 적어주었다. TitleStyle은 children, size, color 중 children은 사용하지 않을 예정이라 Omit 을 사용해서 빼주었다.import { render, screen } from '@testing-library/react'import { BookStoreThemeProvider } from '../../context/themeContext'import Ti..

💥 글로벌 스타일global = 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링 적용 💥 왜 일관된 스타일링을 위해서 이런 작업이 필요할까?1) user agent stylesheet 로 표시되는 브라우저의 기본 스타일이 차이를 만든다2) 브라우저 간의 스타일 차이를 극복하기 위해 사용 💥 다양한 해결책1) 에릭마이어의 reset css2) normalize.css3) sanitize.css 💥 스타일드컴포넌트최근 가장 많이 사용되는 css-in-js 중 하나이다. 💥 css-in-js의 필요성1) 전역 충돌2) 의존성 관리 어려움3) 불필요한 코드, 오버라이딩4) 압축5) 상태 공유 어려움6) 순서와 명시도7) 캡슐화 💥 테마(Theme) 사용의 이유1) UI, UX의 일관성 유지2) 유..

이전에 백엔드로만 제작해놨던 Book Store Project를 드디어 시작한다!이번엔 프론트 위주의 강의가 시작된다고 했다.디자인 하는 걸 좋아하는 1인으로썬 굉장히 설레고 기대되는데..Task app을 만들면서 굉장히 어렵게 느껴졌던 부분들이 꽤나 있었던 터라 걱정도 많은 편이다 ㅠㅠ.. 완성본은 이렇다고 한다!생각했던 것보다 굉장히 깔끔하고 가독성이 좋아서 기대된다.숫자가 중간에 안 맞춰진 게 조금 아쉽긴 하지만.. 이건 만들면서 내가 맞추든지 하면 될 것 같다🙄  사용할 프로젝트는 CRA 또는 Vite로 만들 예정이다.CRA는 현재 문제가 많은 걸로 알고 있어서 이번에도 Vite로 만들까한다. 💥 프로젝트 폴더(디렉토리) 구조1) pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)2) ..

2025.01.21 - [웹 개발 공부하기] - [01.20] 리액트를 이용한 Task 생성 앱 만들기2025.01.27 - [웹 개발 공부하기] - [01.21] 리액트를 이용한 Task 생성 앱 만들기 22025.01.28 - [웹 개발 공부하기] - [01.22] 리액트를 이용한 Task 생성 앱 만들기 3💥 Drag And Drop 기능우선, DragDrop 기능을 위해 react-beautiful-dnd 라이브러리를 설치했었다.하지만, 최근 React 버전이 바뀌게 되면서 새로운 오류들이 많이 나오고 있는 추세다.그 중, 하나가 react-beautiful-dnd 도 포함이었는데, 구글링을 해보니,react-beautiful-dnd 대신 @hello-pangea/dnd 를 많이 쓰는 걸 알게됐..

2025.01.21 - [웹 개발 공부하기] - [01.20] 리액트를 이용한 Task 생성 앱 만들기2025.01.27 - [웹 개발 공부하기] - [01.21] 리액트를 이용한 Task 생성 앱 만들기 2💥 Modal Edit 컴포넌트 생성, 기능 생성, 스타일하기const EditModal = () => { const dispatch = useTypedDispatch() const editingState = useTypedSelector(state => state.modal) const [data, setData] = useState(editingState) const handleCloseButton = () => { dispatch(setModalActive(f..

[1번 사진]에서 + 버튼을 누르면 [2번 사진]처럼 내가 원하는 이름으로 새로운 게시판을 만들게끔 만들려고 한다.즉, + 버튼을 누르면 저렇게 타자를 칠 수 있는 SideForm을 만들 것이다.그리고 [3번 사진]처럼 3개의 게시판 중 내가 클릭한 게시판은 Active한 스타일로 바뀌게끔 할 것이다.💥 Board List 생성&스타일하기type TBoardListProps = { activeBoardId: string setActiveBoardId: React.Dispatch>}const BoardList: FC = ({ activeBoardId, setActiveBoardId}) => { const { boardArray } = useTypedSelector(state =..