이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)대시보드

안녕하세요 강사님.현재 axios 이용해서 백엔드로 이미지 전송하기 강의 수강 중npm i axios로 Axios 모듈 설치 후다음과 같이 코드 작성, npm run start 후 제출 버튼 누를 때 계속하여 새로고침이 됩니다.. ㅠ 원래라면 preventDefault로 새로고침이 되지 않아야 할텐데계속해서 새로고침이 되는 문제입니다. 혹시 문제가 뭘까요? ㅠ

ImageList 컴포넌트 안에 있는 useEffect 종속배열 안에 images를 넣게 되면 images가 변경될 때마다 get을 호출해서 사진을 불러오기 때문에 결과적으로 사진을 업로드하면 리스트에 바로 보여지긴 하는데 안 좋은 방법인가요? 선생님께서 ContextAPI를 사용해 관리하는 것과 제가 생각한 방법의 장단점이 궁금해요 const [images, setImages] = useState([]); useEffect(() => { axios .get("/images") .then((res) => setImages(res.data)) .catch((err) => console.log(err)); }, [images]); // images 추가!

사이트 열고 이미지 "처음" 올릴 때 이런 오류가 떠요,근데 그 이후로 사진 올리면 정상적으로 올라가요 저런 오류 안뜨고..이유가 뭘까요?ㅠ...코드 강의 제대로 다 했는데...

다른 모듈들은 정상적으로 사용이 가능한데 mime 모듈만 사용이 되지가 않아요..결과 값이 이렇게 저장이되는데 es6스타일로 사용이 안되는것인지요?  

리액트에서는 이미지 업로드하려고 할때 이미지를 미리보기로 가능한걸로 알고있는데 템플릿엔진 hbs에서도 이미지 파일 선택해서 이미지를 미리 볼수있도록 할수있나요? 

 nodejs, multer를 통해서 이미지를 업로드했습니다db에 해당 파일명uuid()를 통해서 저장을 했는데 이미지 주소복사 해서 검색해서 들어가면 이미지가 나오는데 검색해도 못들어가게 하려면 어떻게해야하나요? 또는 관리자만 들어갈수있게하려는데 방법이 있을까요

s3를 퍼블릭으로 두는것은 좋지 않다고 생각하는데,CDN 주소로 접근하는거면 s3는 private으로 하고 사용할수 있도록 설정이 가능할까요?

aws-sdk는 따로 설치를 안해도 괜찮도 하셔서 설치를 안했습니다. 하지만 Cannot find module 'aws-sdk' 에러가 발생합니다. 

"multer-s3": "^2.10", "@types/multer-s3": "^2.7.12",  버전은 위처럼 깔아주셔야 강의와 호환될것같습니다.

react-router-dom v6 이상에서는 useHistory 대신 useNavigate 를 사용하여야 합니다.v5import { useHistory } from "react-router-dom";const history = useHistory(); history.push("/");v6import { useNavigate } from "react-router-dom";const navigate = useNavigate(); navigate("/");

용량도 512로 늘리고 람다 시간도 20초로 늘렸는데 해당 에러가 뜹니다. REPORT RequestId: f67aee8b-17bc-4f08-9dc4-19b9cca9bec2 Duration: 1116.59 ms Billed Duration: 1117 ms Memory Size: 512 MB Max Memory Used: 144 MB Init Duration: 762.36 ms 이유가 무엇인가요?

일단 저는 공개/비공개는 제외하고 만들고 있었는데 ImageContext에서 prevDara를 추가한 이후로 첫 로드시에 첫번째 이미지 리스트들을 두번 호출하는데 어떤 방식으로 해결해야 할까요???옵저버가 발동 되면 두번째 페이지 리스트들은 한번만 호출이 되는데 첫번째 페이지에 해당되는 이미지들만 두번이 호출되버립니다 ㅠㅠ 깃허브에 임시로 올려두긴 했는데 다른 파일들은 문제가 없어 보이긴 합니다ㅠㅠuseEffect(() => { if(pastImageUrlRef.current === imageUrl) return; setImageLoad(true); axios .get(imageUrl) .then((result) => setImages((prevData) => [...prevData, ...result.data])) .catch((err) => { console.error(err); setImageError(err) }) .finally(() => { setImageLoad(false); pastImageUrlRef.current = imageUrl; }); }, [imageUrl]);

공부하던중 응용해보고 싶어서 업로드 하는 이미지들을 배열에 담아보려고 이런 스키마를 추가하여 여러가지 방법을 찾아가면서 시도를 해보다가 몇일째 진행이 안되어서 수업 내용에서는 벗어나지만 선생님께 도움 요청 드립니다 ㅠㅠ

선생님 안녕하세요.이번 강의에서 사용된 Promise.all이 뭔지 몰라서찾아보니 async-await를 사용하면 비동기 동작의 상태가 완료될 때까지 기다린 후 다음 코드를 순차적으로 읽어나가다보니 이렇게 기다리는 시간을 개선하기 위해 Promise들을 병렬로 처리해 주는 것으로 확인됩니다.근데 이번 강의에서 Promise.all을 빼고 이미지를 업로드해보면 아래의 사진처럼 네트워크의 preview에서 아무 값도 담기지 않게 됩니다.Promise.all이 처리속도를 개선해 주기 위한 기능이라면 Promise.all을 사용하지 않아도 우선 값은 담겨야 하는게 아닐까 하는 생각이 드는데 왜 값이 담기지 않게 되는지 궁금합니다.

안녕하세요 선생님.이번 세션 강의가 조금 저에겐 어렵게 다가오는 부분이 있네요.궁금한게, 여러번 로그인을 하게 되면 세션이 여러개 생성되는데, 로그아웃 할 때는 저희가 입력한 sessionid만 사라지는 것을 볼 수가 있습니다.그러면 나머지 sessionid는 현재 저장되어 있는 상태인데, 이렇게 없애지 않는 sessionid가 있어도 보안상 괜찮은건가요~?

안녕하세요. 먼저 좋은 강좌 만들어 주셔서 감사드립니다.아래 코드에서 "async"부분은 없어도 괜찮지 않나요?promise.all의 매개변수는 Promise 객체의 배열이면 조건에 만족하는 것으로 알았었습니다. async를 해줘야 하는 이유가 있나요? const UploadForm = () => { const { setImages, setMyImages } = useContext(ImageContext); const [files, setFiles] = useState(null); const [previews, setPreviews] = useState([]); const [percent, setPercent] = useState([]); const [isPublic, setIsPublic] = useState(true); const [isLoading, setIsLoading] = useState(false); const imageSelectHandler = async (event) => { const imageFiles = event.target.files; setFiles(imageFiles); const imagePreviews = await Promise.all( [...imageFiles].map(async (imageFile) => { return new Promise((resolve, reject) => { try { const fileReader = new FileReader(); fileReader.readAsDataURL(imageFile); fileReader.onload = (e) => resolve({ imgSrc: e.target.result, fileName: imageFile.name }); } catch (err) { reject(err); } }); }) ); setPreviews(imagePreviews); };위 코드에서 아래 부분입니다. (질문드리는 부분): ... map(async (imageFile).....const imagePreviews = await Promise.all( [...imageFiles].map(async (imageFile) => { return new Promise((resolve, reject) => { 

안녕하세요!이미지를 불러온다는것이 DB에 이미지를 주소를 저장하고, 서버를 통해 클라이언트는 이미지를 불러 오는데cdn 을 사용하게되면 이미지 불러오는 주소가 변경되는것 같습니다.그럼 이때 DB에 이미지 저장시 CDN 주소도 같이 넣어줘야 하나요? 아니면 서버나 클라쪽에서 불러온 s3 이미지 주소를 cdn 이미지 주소로 가공해야하나요? 감사합니다.

안녕하세요. 2틀동안 검색하고 연구했지만, 답이 안나오네요. 리액트/몽고디비를 이용하여, todolist를 만들고 있습니다. (글작성, 글목록보기, 삭제)까지는 잘돌아가는대요. 특정페이지 불러오기가 어렵네요.리액트 리액트 import React, { useEffect, useState } from 'react' import axios from 'axios' import { useParams } from 'react-router-dom' const ShowPage = () => { const [post,setPost] = useState(""); const {id} = useParams(""); const getPost=(id)=>{ axios.get(`/users/register/${id}`).then((response)=>{ setPost(response.data); }) } useEffect(()=>{ getPost(id); },[]) return ( <div>{post.title}</div> ) } userRouter export default ShowPage userRouter.get("/register/:userId", async (req, res) => { try { const { userId } = req.params; console.log('userId',userId); if (!mongoose.isValidObjectId(userId)) return res.status(400).send({ err: "invalid userId" }); const user = await User.find().populate("writer") .exec((err,user) => { if(err) return res.status(400).json({success:false, err}) return res.status(200).json({success:true, user}) }) } catch (err) { console.log(err); return res.status(500).send({ err: err.message }); } // console.log(req.params); }); _id 는 오브젝트 아이디 이고, 클라이언트에서 불러오는건 string인가 해서 찾아봐도 답이안나오네요가르쳐주세요. 부탁드립니다.

천천히 따라 하고 있는데 $사용시 함수 호출이 안되는것으로 확인됩니다.

안녕하세요. 먼저 좋은 강의 감사드립니다.아래에서 useEffect() 안에서 받은 setInterval()의 retrun 값으로 받은 intervalId는 함수 Scope를 벗어나면 없어지는데, 다음에 들어온 상태에서... else if(!isError && intervalId) clearInterval(intervalId)...위 부분이 정상적으로 동작할 수 있나요? 함수 Scope에 상관없이 메모리가 존재하려면 useRef나 다른 방법을 사용하여 intervalid 변수가 살아 있도록 해야하지 않나요?