개발새발 로그

몽고DB의 주소나 외부저장소의 API 인증키같은 것들은 보안상으로 문제될 수 있어 깃허브에 올릴때 감춰야한다. 그래서 ENV 환경변수를 설정해놓아야 한다. 1. server에 깃허브에 올리지 않을 폴더를 하나 생성해준다 2. 환경 변수를 설정할 파일 key.js와 dev.js를 생성해준다. 3. key.js에는 배포 후 환경변수 설정파일과 개발 환경에서의 환경변수 설정파일을 따로 지정해준다. if (process.env.NODE_ENV === "production") { //배포상태라면 module.exports = require("./production.js"); } else { //개발상태라면 module.exports = require("./dev.js"); } 4. dev.js에는 개발환경에서의 ..

이미지를 서버쪽에 저장을하게될 때 만약 다른 환경에 배포해주어야 할 때 아래와 같은 이미지 경로는 배포환경에 맞게 변경을 해줘야한다. 또한 커뮤니티를 운영할 때의 이미지 저장은 여러 이용자들이 여러 이미지를 저장할 텐데 서버쪽의 이미지 폴더를 만들어서 저장하게 되면 서버에 부담이가게 되고 비용도 많이 들게 된다. 그래서 대부분의 서비스들은 외부저장소에 이미지를 저장한다. 이미지를 외부저장소에 저장하는 방법을 알아보자 우리는 네이버 클라우드를 이용해 볼 것이다. 네이버 클라우드는 결제를해야 이용할 수 있다! -위 이미지에 표시한 곳을 눌러서 사용하면 되는데 나는 결제를 하지 않았으므로 사용방식만 알아보자 네이버 클라우드 사용가이드 https://guide.ncloud-docs.com/docs/storage..

게시글을 작성하면서 이미지 파일도 올리고 싶다면 어떻게 해야 할까? 먼저 우리는 클라이언트에서 이미지를 넣으면 서버에 저장하는 방법을 알아보자 클라이언트에서 이미지를 올리면 서버에 저장하고 서버에 저장한 후 다시 저장한 이미지를 클라이언트에서 띄워주어야 한다. 작동 순서를 그림으로 그려보았다. 이미지 업로드 후 게시글 제출 이미지 DB에 저장 후 게시글 상세페이지에서 이미지 출력 📋작동순서 1. 이미지 업로드를 위한 컴포넌트생성 -이미지 input태그를 따로 컴포넌트에 만들어서 작성한다. (ImageUpload.js) -input태그에서 이미지만 선택할 수 있도록 하기 위해 속성 accept에accept="image/*"를 작성한다. 2. 이미지 컴포넌트에서 이미지를 업로드하면 onChange를 이용해 ..

우리가 서버측에 API를 작성하다보면 그 수가 점점 많아진다. 많아지게되면 관리하기가 어려워진다. 그래서 Express에서 제공하는 Router을 이용해 api별로 나눠주는 방법을 사용해보자 현재 아래와 같이 많은 API가 있는 것을 볼 수 있다. 공식문서 Express 공식문서에 가면 사용법이 나와있다. https://expressjs.com/ko/guide/routing.html Express 라우팅 라우팅 라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다. 라우팅에 대한 소개는 기본 라우팅을 참조하십시오. 다음 코드는 매우 기본 expressjs.com 📝작성 방법 1. 라우팅 폴더 생성 -post API가 모여있는 post.js를 생성하..

현재까지의 요청 순서를 그려보았다. 게시글 Create, Read, Update 순서 이제 여기서 삭제하는 방법을 알아보자 삭제하는 방식은 아주 간단하다. 삭제하는 순서를 그림으로 그려보았다. Delete 순서 📝실행순서 1. window.confirm을 이용해서 삭제요청 유무를 물어본다. 2. 확인버튼을 누르면 서버에 현재 게시글 postNum을 넘겨줘서 삭제요청을한다. 3.서버에서 deleteOne명령어로 몽고DB안의 postNum에 해당하는 게시글을 삭제한다.

이제 게시글 상세페이지에서 수정하기 버튼을 누르면 게시글 수정페이지로 가서 게시글을 수정할 수 있는 기능을 추가해보자 이때 수정할 때는 기존의 게시글내용을 온전히 수정페이지에 가져와야한다. 먼저 순서를 그려보았다. 1. 수정버튼을 누르면 게시글 수정 페이지로 이동 2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청) 3. 수정내용 작성 후 다시 서버에 수정API 요청 4. 수정내용 DB에 저장 5.수정완료후 해당 게시글 페이지로 이동 1. 수정버튼을 누르면 게시글 수정 페이지로 이동 -LInk로 수정페이지에 이동한다 -이때 수정페이지도 App.js에 Route에 추가해줘야한다. 2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청) postNum을 이용해서 해당 게시..

게시글들을 서버에 저장하고 만약 그 게시글들을 삭제하거나 수정 그리고 상세페이지로의 전환을 위해 게시글마다 특정한 아이디가 있어야한다. 그러면 우리는 게시글 마다 고유한 아이디를 부여해주어야한다, 고유한 아이디는 간단하게 숫자를 넣을 것이다, 먼저 순서를 그려보았다. 작동순서 1.고유한 번호를 만들기위한 counter DB생성을 위해 Counter 모델을 만들어줌 2. Counter모델을 생성하면 Counter DB가 생성됨 3. Counter DB에 수동으로 데이터를 만들어줌 4. 서버로 가서 만든 모델을 쓸수 있게 넣어줌 5. 이전에 만들었던 upload의 submit API를 수정해야됨(게시글마다 고유한 번호도 같이 저장되기위해) 6. 게시글을 생성하기 전에 Counter에 counter라는 이름의..

이제 DB에 저장된 데이터를 클라이언트에서 요청해 불러와보자 우리가 원하는 순서를 그려보았다, 작동순서 클라이언트에서 axios요청을한다. 서버에서는 해당하는 API를 만들고 DB에서 데이터를 몽구스의 find로 찾아서 postList라는 이름으로 저장한다. 다시 클라이언트에서 데이터를 받아 배열에 저장한다. 해당 배열을 map을 이용해 뿌려준다. 1.클라이언트에서 axios요청을한다. -클라이언트에서 useEffect를 이용해서 해당 컴포넌트가 렌더링되면 axios 요청을한다. 2. 서버에서는 해당하는 API를 만들고 DB에서 데이터를 몽구스의 find로 찾아서 postList라는 이름으로 저장한다. 3. 다시 클라이언트에서 데이터를 받아 배열에 저장한다. 4. 해당 배열을 map을 이용해 뿌려준다. ..