이미지 업로드를 위한 multer encType="multipart/form-data" 이미지를 올리게되면 multipart 라는 form-data로 데이터가 전송이 되게 됩니다. 하지만, 지금의 백엔드에서는 json 형식과 이미지나 비디오 같은 데이터를 받을 수 없는 일반적인 Form 데이터만 받을 수 있기 때문에 multer를 설치합니다. multer는 app.js에서 미들웨어로 전체 라우터에 연결해줄 수 있지만 어떤 게시글은 text, 이미지만 올릴 수 있기때문에 라우터에 적용합니다. storage: 파일이 저장될 위치를 설정함 diskStorage: 파일을 디스크에 저장함 destination: 파일이 어떤 디렉토리(폴더)에 저장될 것인지 설정하는 메서드 filename: 폴더 내 저장될 파일의 ..
Faker(페이커) 적용하기 이제 더미데이터를 페이커를 이용해서 랜덤하게 설정해줄 수 있습니다. npm으로 페이커를 설치하고, faker가 가지고 있는 함수를 통해 닉네임, 글, 이미지등을 가상으로 만들어줄 수 있습니다. 또한, 아래 링크를 통해 페이커 설치, 사용방법을 익힐 수 있습니다. www.npmjs.com/package/faker faker Generate massive amounts of fake contextual data www.npmjs.com 이제 페이커를 이용해서 generateDummyPost라는 더미데이터를 만들어주고, 글을 initialState의 mainPosts에 concat으로 글을 추가해줍니다. 이 코드는 generateDummyPost 함수를 이용해서 서버에서 데이터를 ..
PostCard 역시 큼직큼직하게 컴포넌트를 생각하고 기획하고, 기획을 하면 됩니다. 그리고 살을 붙이듯 구현을 해나가면 됩니다. post를 props로 데이터를 index.js에서 받아오기때문에 propTypes를 설정해주어야합니다. proptypes설정시 object 항목을 더 자세하게 적어주고 싶다면, shape({ }) 안에 넣어주면 됩니다. 또한, 옵셔널체이닝 연산자로 const id = me && me.id; 에서 const id = me?.id;로 변경할 수 있으며, 이또한 const id = useSelector((state) => state.user.me?.id) 처럼 사용할 수도 있습니다. state 값이 false일 때, 값을 true로 변경하거나 true값을 false로 변경하려면 ..
