개발새발 로그

서버에 몽고DB를 연결했으면 클라이언트를 통해서 데이터를 DB에 저장해보자 우리가 작성할 로직의 순서이다. 순서 제출버튼을 누르면 axios사용해 서버로 데이터를 보낸다. 서버는 데이터를 받아서 몽고DB에 저장할 수 있도록 model화 한다. model화를 하고 save()통해 DB에 저장한다. 1. 제출버튼을 누르면 axios사용해 서버로 데이터를 보낸다. -제목과 내용에 대한 useState를 선언한다. -form의 input 또한 알맞게 지정해준다. -제출 버튼에 onclick에 onsubmit 함수를 추가해준다. -onsubmit에서 axios.post요청을한다. 2. 서버는 데이터를 받아서 몽고DB에 저장할 수 있도록 model화 한다. -Post모델 확인(몽고DB는 모델이 있어야한다.) -서버..

1. 부트스트랩 사이트에 가서 사용법을 가져온다. https://react-bootstrap.netlify.app/docs/getting-started/introduction Introduction | React Bootstrap Learn how to include React Bootstrap in your project. react-bootstrap.netlify.app 2. 설치하기 npm install react-bootstrap bootstrap 첫 번째는 react-bootstrap/button에서 한가지의 Button을 가져오는 것이고, 두 번째는 react-bootstrap에서 여러가지가 export되는데 거기서Button을 선택해서 가져오는 것이다. 3. 클라이언트인 react에서 pub..

몽고DB는 Nosql이지만 몽고DB만의 규칙이 따로 있다. 서버에서 몽고DB에 데이터를 넣을려면 Mongoose Model을 생성해줘야한다. 1. mongoose 모델을 작성할 폴더와 파일을 생성해줘야한다. ->sever폴더에 Model/Post.js 을 만들어준다. 2. Mongoose 공식사이트에서 사용법을 가져온다. https://mongoosejs.com/docs/index.html Mongoose v7.2.4: Getting Started First be sure you have MongoDB and Node.js installed. Next install Mongoose from the command line using npm: $ npm install mongoose --save Now sa..

클라이언트는 3000번포트로 열려있고, 서버는 5000번 포트로 연결되어있다고 가정하자. 이렇게 서로다른 포트들끼리 통신을 하면 CORS이슈가 나온다. 다른 포트에서 온 데이터에 대해서 어떤 보안적인 규칙을 지켜야한다라는 뜻이다. 먼저 CORS이슈가 나오는지 확인해보기 위해 클라이언트에서 axios로 데이터를 보내보자 1. axios 설치 npm i axios --save 2. axios 사이트에서 사용법 보기 https://axios-http.com/kr/docs/example 기본 예제 | Axios Docs 기본 예제 Axios를 사용하기 위한 기본 예제 참고: CommonJS 사용법 require()를 이용한 CommonJS를 사용하는 동안 TypeScript 타이핑(인텔리센스 / 자동 완성)을 ..

https://www.mongodb.com/ko-kr MongoDB: 애플리케이션 데이터 플랫폼 업계 최고의 최신 데이터베이스를 토대로 구축된 애플리케이션 데이터 플랫폼을 사용해 아이디어를 더욱 빠르게 실현하세요. MongoDB는 데이터를 손쉽게 처리할 수 있도록 지원합니다. www.mongodb.com 1. 몽고DB사이트에 들어가서 회원가입후 클러스터 create 클릭 2. username과 password 입력후 추가 3. 0.0.0.0/0 (모든 IP에서 접속가능) IP 리스트 추가 ->보안상 권장안함 4.클러스터 생성완료 클릭 5.생성된 클러스터 connect클릭 6. 설정 후 주소 복사 7. 주소에서 password부분 아까 추가했던 user 비밀번호로 바꿔줌 8. Mongoose 라이브러리 설..

Express 설치 https://expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save expressjs.com 1. 빈 폴더에 npm init으로 pagkage.json파일 설치 -y를 붙여 추가적인 설정없이 바로 설치가능 $ npm init -y 2.Express 설치 $ npm install express --save 3. Express예제를 보면서 서버환경 구축 https://expressjs.com/ko/starter/hello-world.html Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작..