일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프로그래머스JS
- 코딩테스트
- 안드로이드 스튜디오
- dp알고리즘
- JS
- 알고리즘
- 익스프레스
- 백준nodejs
- HTML5
- 프로그래머스
- 백준알고리즘
- HTML
- 리액트댓글기능
- js코테
- 포이마웹
- 코테
- 백준구현문제
- css기초
- CSS
- 백준js
- 몽고DB
- 리액트커뮤니티
- JS프로그래머스
- 백준
- 백준골드
- 다이나믹프로그래밍
- 프로그래머스코테
- 백준구현
- 리액트
- 자바스크립트
- Today
- Total
목록MERN (30)
개발새발 로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cogT9M/btslaQXOPvR/SY3n05FPg2cKGhL5giI3CK/img.png)
서버에 몽고DB를 연결했으면 클라이언트를 통해서 데이터를 DB에 저장해보자 우리가 작성할 로직의 순서이다. 순서 제출버튼을 누르면 axios사용해 서버로 데이터를 보낸다. 서버는 데이터를 받아서 몽고DB에 저장할 수 있도록 model화 한다. model화를 하고 save()통해 DB에 저장한다. 1. 제출버튼을 누르면 axios사용해 서버로 데이터를 보낸다. -제목과 내용에 대한 useState를 선언한다. -form의 input 또한 알맞게 지정해준다. -제출 버튼에 onclick에 onsubmit 함수를 추가해준다. -onsubmit에서 axios.post요청을한다. 2. 서버는 데이터를 받아서 몽고DB에 저장할 수 있도록 model화 한다. -Post모델 확인(몽고DB는 모델이 있어야한다.) -서버..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qoYRS/btsjQiU7CN8/KTyRIRnswGO61Q5JvbNA5K/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/VleMF/btsjS4ofAWI/D4ADKbEEhd7rkKk3rlvc30/img.png)
몽고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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cE7sP1/btsjO9dBH1p/lKxulSeaYp0VcXaxncK0v0/img.png)
클라이언트는 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 타이핑(인텔리센스 / 자동 완성)을 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nDvQF/btsjO8ewi9Z/KEPsjq3GuZonoGNUa8hwQ1/img.png)
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 라이브러리 설..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dg5tiN/btsjJV7HLBU/i3mjSrJgI0BiZ1RdjziD9K/img.png)
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 예제 기본적으로 이 앱은 여러분이 작..