감자튀김 공장🍟

리액트로만 만들어 놓은 프로젝트를 S3 추가 및 aws, ci/cd까지 연습해보려고 한다. 문제는 다량의 사진을 저장 + 그 사진 중에서 랜덤으로 사진을 2개 3개씩 띄워야하는데 S3에서 랜덤 이미지를 가져 올 수가 있나..? 그렇다고 사진 전체를 프론트에 넘겨주기에는 말이 안되는 것 같고 어떤 방법을 찾아야 할까.. s3에서 원하는 index를 선택할 수 있는지도 찾아봐야 할 것 같다.

HTTP Stateless (추가 예정) status나 info를 넣지 않고 request를 보냄 ㄴ 각 요청에 대한 연결을 재설정하는 데 소요되는 시간/대역폭을 최소화하기 위한 것임 ㄴ 서버가 누군지 알 수 있게 인증 절차를 거쳐야 한다 인증 및 인가 절차 기본 흐름 1. client > server 유저 정보를 서버에 보냄 2. server 유저 정보를 포함하는 토큰을 생성 3. server > client HTTP Response Header에 유저 정보를 저장한 토큰을 클라이언트에 보냄 4. client 받은 토큰 저장 5. client > server 토큰과 함께 요청을 보냄 6. server 서버가 토큰을 복호화 하여 유저 정보를 확인하고 요청 처리

1. 직렬화와 역직렬화 (JSON) 직렬화 (serialize): Object 값을 String 값으로 변환 (JSON.stringify) 역직렬화 (deserialize): String 값을 Object 값으로 변환 (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없다. 2. CORS (Cross Origin Resource Sharing) : 교차 출처 자원 공유 Same Origin Policy 정책 (내용 추가 예정)

1. Vite를 사용해 프로젝트를 생성한다. npm init vite 1-1. Vite란? 새로운 프런드엔드 툴이다. Vue 창시자 에반 유가 만들었으며 현재는 Vue, React, Svelte 등 여러 프레임워크에서도 사용 가능하다. Vite(비트)는 자바스크립트 네이티브 모듈을 기반으로 한 데브 서버이다. 현대 프런트엔드 개발 생태계는 웹팩을 중심으로 개발 환경이 구축되어 있다. Vite는 웹팩을 사용했을 때보다 더 빠르게 개발하고 배포할 수 있다. 자바스크립트 네이티브 모듈인 ESM이 등장하기 전까지는 자바스크립트 언어 레벨에서의 모듈화 방식은 없었다. require.js 같은 모듈 로더나 IIFE를 사용하지 않으면 모듈화가 불가능 했다. 커뮤니티 레벨의 라이브러리를 사용하다가 자바스크립트 언어에 ..

오늘 끝낼 수 있겠지..? ProductInfo F 제품의 상세페이지에서 Add to cart 버튼을 누르면 된다. dispatch(addtocart(제품의 id)) > actions에서 const request = axios.post(`${USER_SERVER}/addToCart`, body) 로 productId를 넘겨준다. B users.js user collection에 존재하는 해당 유저의 정보를 가져오기 위해 auth를 필요로 한다. router.post("/addToCart", auth, (req, res) => { findOne()을 통해 F에서 받은 req.id와 auth 속의 user id를 비교한다. req의 id가 user의 cart에 있다면 findOneAndUpdate()를 통해..

졸립다ㅎ LandingPage Filter F axios.post('/api/product/products', body) products을 모두 가져와 메인 화면에 띄워준다. B DAY 3의 /produdcts 참고 product collection에 들어있는 모든 상품 정보를 가져온다. FileUpload F axios.post('/api/product/image', formData, config) /image로 제품의 사진을 백엔드로 보낸다. B router.post('/image', (req, res) => multer를 사용해서 이미지를 저장한다. (업로드 페이지에서 multer로 이미지를 가져오는 것에 성공하면 바로 이미지가 저장된다.) DetailProductPage F axios.get(`/..

Logout F axios.get(`${USER_SERVER}/logout`) B actions const request = axios.get(`${USER_SERVER}/logout`) routes/user.js User.findOneAndUpdate({ _id: req.user._id }, { token: "", tokenExp: "" }, findOneAndUpdate를 사용하여 db에 저장된 id를 찾은 후 해당 유저의 token과 tokenExp를 공백(값을 초기화)으로 만들어 주면서 로그아웃을 시킨다. Product F body에 product의 정보들을 담아 제품을 업로드할때 axios를 사용한다. Axios.post("/api/product", body) B routes/product.js..

Register F email, lastName, name, password, confirmPassword를 입력, 저장되는 데이터는 email, password, name, lastname, image이다. dispatch를 사용해 registerUser 함수 사용 actions의 registerUser 함수에서 axios post를 사용해 데이터를 저장 B router/user.js router.post를 사용해 새로운 User 객체를 생성 후 객체를 데이터에 저장한다. Auth F src/hoc/auth.js 모든 route page에서 Auth(component, option, adminRoute) 를 사용한다. (로그인이 되어있는지 token 등을 확인) actions에 있는 auth()를 사용..

Redux 리덕스를 사용하게되면 리액트 앱의 상태는 하나의 저장소(store) 안에 있는 객체 트리에 저장된다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐이다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 리듀서(reducer)를 작성해야 한다. 액션은 특정 행동이 일어날때 어떻게 데이터를 가공하고 처리할 것인지를 구현해야하고 리듀서는 가공된 데이터를 어떻게 변경하여 상태 트리에 업데이트를 할 것인지 명시해야한다. Login F Formik과 Yup을 사용해 input validation을 간편하게 처리할 수 있다. [ dispatch 함수 > redux action에 정의된 로그인 함수 > 서버에 데이터를 보냄 ] 와 같은 방식으로 데이..