react 12

[쇼핑몰 구현 프로젝트] End. 회고/후기

그동안 강의를 보면서 공부하다가 이번에 처음으로 모르는 게 있으면 검색해보고 오류가 뜨면 고쳐보고 하면서 스스로 풀스택 웹을 만들어 보니까 그동안 강의로 배운 것이 내 것으로 만들어지는 느낌을 받았다.비록 웹사이트가 굴러가기만 하게 간단한 기능들만 만들어 본거지만 강의를 들으며 공부할 때 느낀 아리까리한 기분들을 해결할 수 있었다.역시 코드는 직접 짜봐야 제맛이다. 프로젝트를 진행하면서 느낀점1. 보안문제보안 관련 코드를 작성하면서 어떤 걸 어떻게 막아야 할지 감이 잘 잡히지 않았다.특히 Frontend와 Backend가 연동되어 있어 중복으로 막는 작업을 하기가 쉽지가 않았다.이 문제는 앞으로 공부하면서 유저들의 변칙적인 사용으로 인한 보안문제 사례들을 많이 접해보고 보안 관련 코드를 짜는 경험들을 쌓..

[쇼핑몰 구현 프로젝트] 09. 사용자 관련 기능

① 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..

[쇼핑몰 구현 프로젝트] 05. 회원가입/로그인

① 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..

[쇼핑몰 구현 프로젝트] 04. Backend, Database 틀잡기

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..

[쇼핑몰 구현 프로젝트] 03. Frontend 틀잡기

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