본문 바로가기

기타/마켓컬리 클론코딩

마켓컬리 클론코딩 1

'간단한 게시판 만들기'를 통해 큼직한 기능을 구현해보았으니 이번에는 좀 더 세부적으로 구현해보는데에 초점을 맞추려한다.

마켓컬리의 홈페이지를 최대한 비슷하게 구현해보기로 하였고, 아무래도 깊이 있게 알지 못하는 부분이 많기 때문에 일단 단순하게라도 만든 다음 할 수 있는대로 다양한 방식을 적용시켜보려한다.

 

https://github.com/ChangwooJ/kurly

 

GitHub - ChangwooJ/kurly

Contribute to ChangwooJ/kurly development by creating an account on GitHub.

github.com

 

프로젝트 기간 2024.03.07~2024.05.27
프로젝트 스택 FE React, JavaScript
DB Node+Express, MySql

(일단은 프론트엔드만 구현해보려 한다.)

 

백엔드도 다뤄보느라 조금 오래 걸렸지만, 그래도 다양한 기능을 맛볼 수 있었다.

크게 로그인, 회원가입, 메인, 상품 상세, 후기, 장바구니 페이지를 제작했고 정말 많이도 에러와 마주쳤다.

 

이 부분은 이미 클론코딩 포스팅이 끝나고 쓰는 것이지만, 여튼 그 과정을 서술하며 다시 한 번 코드에 대해 공부하는 시간을 가지려한다.

이 프로젝트의 목표는 프론트엔드: 가능한 비슷하게 디자인하고 활용가능한 라이브러리 등을 사용해보기, 함수를 활용해 간단한 작업 처리, 백엔드: DB작업 외에 데이터 작업 해보기 이다.

물론 중간에 필요에 의해 계획에 없던 것도 다루지만 중요한 건 이번에는 최대한 다른 코드를 참고하지 않고 내 스타일대로 작업하는 것이다.

 

 

https://memo-code.tistory.com/34

 

마켓컬리 클론코딩 2 - 메인페이지1

메인페이지 - 상단 헤더 부분 (로고, 검색창, 메뉴 등) 구조 import './App.css'; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; const App = () => { return( ); } export default App; import

memo-code.tistory.com