일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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코테
- 백준골드
- 코테
- 백준
- HTML5
- css기초
- 백준구현문제
- 프로그래머스JS
- 리액트커뮤니티
- 몽고DB
- 프로그래머스코테
- CSS
- 프로그래머스
- 백준구현
- 백준js
- 익스프레스
- 리액트
- JS프로그래머스
- 자바스크립트
- 백준알고리즘
- 포이마웹
- 코딩테스트
- 다이나믹프로그래밍
- JS
- 리액트댓글기능
- 알고리즘
- HTML
- dp알고리즘
- 백준nodejs
- Today
- Total
목록리액트 (16)
개발새발 로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/UZDrq/btslvxkafEH/Op2PYztQkxPg0vwjjM4hY1/img.png)
유저인증에 파이어베이스를 사용하는 이유 우리가 Express와 몽고DB를 가지고 유저정보를 구현할 수 있긴 하지만 (자바스크립트 웹토큰 라이브러리) 회원가입을 하거나 로그인을 할 때 비밀번호를 DB에 plain text로 저장하면 안된다 반드시 보안규칙을 거쳐야 한다. 즉 사용자가 회원가입을 했을 때 비밀번호는 암호화 과정을 거쳐서 DB에 저장해야하고, 로그인 했을 때 비밀번호도 암호화 과정을 거쳐서 DB에 있는 암호화과정을 거친 비밀번호와 비교를 로그인을 해야한다. 그래서 이러한 복잡한 과정을 도와주는 것이 파이어베이스이다. 유저인증과 관련된 서비스는 firebase를 사용한다 파이어베이스는 어플리케이션의 빌드부터 배포까지 도와주는 유용한 툴이다. 파이어베이스에서 Authentication(유저인증)이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GhYyA/btsla0sSjMk/1ORkeK3qTSShol1n8WN5u0/img.png)
게시글을 작성하면서 이미지 파일도 올리고 싶다면 어떻게 해야 할까? 먼저 우리는 클라이언트에서 이미지를 넣으면 서버에 저장하는 방법을 알아보자 클라이언트에서 이미지를 올리면 서버에 저장하고 서버에 저장한 후 다시 저장한 이미지를 클라이언트에서 띄워주어야 한다. 작동 순서를 그림으로 그려보았다. 이미지 업로드 후 게시글 제출 이미지 DB에 저장 후 게시글 상세페이지에서 이미지 출력 📋작동순서 1. 이미지 업로드를 위한 컴포넌트생성 -이미지 input태그를 따로 컴포넌트에 만들어서 작성한다. (ImageUpload.js) -input태그에서 이미지만 선택할 수 있도록 하기 위해 속성 accept에accept="image/*"를 작성한다. 2. 이미지 컴포넌트에서 이미지를 업로드하면 onChange를 이용해 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bwVkYI/btslboApHB6/ZwFfpNWjdUpDi6sI91gKC0/img.png)
현재까지의 요청 순서를 그려보았다. 게시글 Create, Read, Update 순서 이제 여기서 삭제하는 방법을 알아보자 삭제하는 방식은 아주 간단하다. 삭제하는 순서를 그림으로 그려보았다. Delete 순서 📝실행순서 1. window.confirm을 이용해서 삭제요청 유무를 물어본다. 2. 확인버튼을 누르면 서버에 현재 게시글 postNum을 넘겨줘서 삭제요청을한다. 3.서버에서 deleteOne명령어로 몽고DB안의 postNum에 해당하는 게시글을 삭제한다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cNgtzO/btsk9iOsQA2/lH2sJrY9I21gV21RXbeqrK/img.png)
이제 게시글 상세페이지에서 수정하기 버튼을 누르면 게시글 수정페이지로 가서 게시글을 수정할 수 있는 기능을 추가해보자 이때 수정할 때는 기존의 게시글내용을 온전히 수정페이지에 가져와야한다. 먼저 순서를 그려보았다. 1. 수정버튼을 누르면 게시글 수정 페이지로 이동 2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청) 3. 수정내용 작성 후 다시 서버에 수정API 요청 4. 수정내용 DB에 저장 5.수정완료후 해당 게시글 페이지로 이동 1. 수정버튼을 누르면 게시글 수정 페이지로 이동 -LInk로 수정페이지에 이동한다 -이때 수정페이지도 App.js에 Route에 추가해줘야한다. 2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청) postNum을 이용해서 해당 게시..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/OCI3l/btslbQwgyAP/7w1n4ER2IKJvkGqzvg4FkK/img.png)
게시글들을 서버에 저장하고 만약 그 게시글들을 삭제하거나 수정 그리고 상세페이지로의 전환을 위해 게시글마다 특정한 아이디가 있어야한다. 그러면 우리는 게시글 마다 고유한 아이디를 부여해주어야한다, 고유한 아이디는 간단하게 숫자를 넣을 것이다, 먼저 순서를 그려보았다. 작동순서 1.고유한 번호를 만들기위한 counter DB생성을 위해 Counter 모델을 만들어줌 2. Counter모델을 생성하면 Counter DB가 생성됨 3. Counter DB에 수동으로 데이터를 만들어줌 4. 서버로 가서 만든 모델을 쓸수 있게 넣어줌 5. 이전에 만들었던 upload의 submit API를 수정해야됨(게시글마다 고유한 번호도 같이 저장되기위해) 6. 게시글을 생성하기 전에 Counter에 counter라는 이름의..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sMuXc/btsla00hJgB/MTZqIpe3B8mrJUDmZxdNtK/img.png)
이제 DB에 저장된 데이터를 클라이언트에서 요청해 불러와보자 우리가 원하는 순서를 그려보았다, 작동순서 클라이언트에서 axios요청을한다. 서버에서는 해당하는 API를 만들고 DB에서 데이터를 몽구스의 find로 찾아서 postList라는 이름으로 저장한다. 다시 클라이언트에서 데이터를 받아 배열에 저장한다. 해당 배열을 map을 이용해 뿌려준다. 1.클라이언트에서 axios요청을한다. -클라이언트에서 useEffect를 이용해서 해당 컴포넌트가 렌더링되면 axios 요청을한다. 2. 서버에서는 해당하는 API를 만들고 DB에서 데이터를 몽구스의 find로 찾아서 postList라는 이름으로 저장한다. 3. 다시 클라이언트에서 데이터를 받아 배열에 저장한다. 4. 해당 배열을 map을 이용해 뿌려준다. ..
![](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/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 타이핑(인텔리센스 / 자동 완성)을 ..