Hello coding

① Frontend- 유저정보 수정 시 기존 데이터를 useEffect로 넣기 useEffect(() => { setFormData({ name: userData?.name || "", address: userData?.address || "", phonenumber: userData?.phonenumber || "", }); }, [userData]); - Data를 불러올 때 useEffect안에 함수를 작성하여 불러오기 useEffect(() => { const fetchUser = async () => { try { const responseData = await sendRequest( `${process.env..

① Frontend- Rating 기능 (with Flowbite-React) / Rating과 comment를 함께 form 형태로 전달 {[...Array(rating)].map((a, i) => ( setRating(i + 1)} /> ))} {[...Array(5 - rating)].map((a, i) => ( setRating(rating + i + 1)} /> ))} Leave a review  ② Backend- Controllerconst getProductReviews = async (req, res, next) =..

① Frontend- 전체 삭제는 Cart페이지에, 개별 삭제는 props Component에 구현 const deleteAllFromCart = async (evt) => { evt.preventDefault(); try { const responseData = await sendRequest( `${process.env.REACT_APP_BACKEND_URL}/carts/${userId}`, 'DELETE' ); alert("Delete All from a cart successfully"); window.location.reload(); } catch (err) { setIsError(true); ..

① Frontend- 상품 생성 시 JSON 대신 FromData 형식으로 전달 (image 때문에) const submitHandler = async (evt) => { evt.preventDefault(); try { const sendData = new FormData(); sendData.append('name', formData.name); sendData.append('description', formData.description); sendData.append('image', evt.target.image.files[0]); sendData.append('category', formData.category); sendData..

① Frontend- Context를 이용하여 App.js에서 모든 Route에 로그인 관련 정보를 제공하고 LocalStorage에 저장export const AuthContext = createContext({ isLoggedIn: false, isAdmin: false, switchAdmin: () => {}, login: () => {}, logout: () => {}}); const getLoginData = () => { const data = JSON.parse(localStorage.getItem("login")); if(!data) return false; return data; }; const getAdminData = () => { const d..

Controller의 자세한 내용들은 이후 게시물들에 있다. ① DB modelconst userSchema = new Schema({ name: { type: String, required: true }, email: { type: String, required: true, unique: true }, password: { type: String, required: true, minlength: 6 }, address: { type: String, required: true }, phonenumber: { type: String, required: true }, admin: { type: Boolean, required: true }, cart: [ { type: mongoose.Ty..

Tailwind CSS의 라이브러리인 Flowbite React를 주로 사용하여 클라이언트 화면을 구성하였다.Flowbite React는 디자인된 Component들을 import 한 번으로 쉽게 사용할 수 있어 매우 편리했다.Mern 풀스택을 처음부터 끝까지 스스로 만들어보는 것이 주 목적이기 때문에 디자인에 크게 신경 쓰지는 않았다.flex와 grid 다루는 것이 좀 힘들었던 것 빼면 무난하게 진행할 수 있었다. ① Layout Men's Fashion Home {!auth.isLoggedIn && ( Signup ..

MERN 풀스택을 공부하고 나서 어떻게 코드를 짜야할 지 틀을 잡을 수 있었다.공부한 내용으로 프로젝트 설계를 처음부터 다시 진행하기로 했다. 1. Database - Username, email, password, address, phone_number: Stringadmin: Booleancart, purchase_history: [ Product_id 연결 ]- Productname, description, image, category: Stringprice, stock: Number- Reviewcontent: Stringstar: Numberuser: User_id 연결product: Product_id 연결 2. Frontend - 사용자RouteContentIs login/Home (List..

처음으로 무작정 시작해 본 웹 프로젝트라서 어떻게 계획하고 시작해야 할 지 막막했었다.그래도 일단은 공부했던 내용을 바탕으로 nodejs서버를 구축하고 react로 쇼핑몰 페이지를 만들고 있었다.그러나 nodejs 따로 react 따로 공부했었기에 회원가입/로그인 기능을 만들면서 어떻게 frontend와 backend 연동해서 사용해야 하는지 고민이었다.구글 검색하면서 따라 하면 될 줄 알았는데 생각보다 잘 되지가 않았다. 그래서 어떻게 할지 고민하다가 udemy에서 React, NodeJS, Express 및 MongoDB 풀스택 가이드 강의를 찾았다.지금까지 내가 배운 것들을 모두 합친 강의였기에 지금 상황에 들어보기 적합한 강의라고 생각되었다.그래서 이 강의를 먼저 수강하고 프로젝트를 다시 시작하려..

웹 개발 공부 시작 글을 올린 후 지금까지 The Web Developer Bootcamp를 중심으로 여러 웹 개발 관련 정보를 습득하면서 지내왔다. 컴퓨터를 사용할 수 있는 시간이 충분하지 않아 개발을 공부하기에 어려운 환경이기는 했지만 나름 열심히 해온 것 같다. 얼마 전 The Web Developer Bootcamp를 완강한 후 2주 정도 나의 진로와 앞으로 공부해야 할 것들을 알아보고 정리하며 시간을 보내었다. 네트워크, 인프라, 클라우드, 보안 등 컴공의 다양한 길들을 찾아보았다. 그러면서 어느정도 앞으로의 계획이 정해진 것 같아 기록을 남긴다. 나는 일단은 백엔드 중심의 웹개발 공부를 이어나갈 것이다. 동시에 위에서 언급한 다양한 길들에 대해 더 알아가 보면서 진로를 구체화해보려고 한다. 지..