레슨 7-1: Express와 React로 데이터베이스 활용하기(클라이언트에서 데이터베이스로 요청 전송)

데이터베이스를 업데이트하려면 어떻게 해야 할까요? 

저희가 만든 앱에서는 ChatGPT가 시키는 대로 handleSumit() 함수를 만들었습니다.

이제 아래 코드를 모두 복사해서 한 번 직접 물어보겠습니다.

좋아요, ChatGPT로 가서 한 번 물어볼게요.
‘클라이언트 측 코드가 아래 같을 때, 사용자 이름과 암호를 MongoDB 데이터베이스에 업데이트하려면 서버 측 코드는 어떻게구현해야 할까요? 최대한 상세히 알려줘’

이렇게 문의하면서, 클라이언트 측 코드와 관련된 내용을 설명하고 서버 측 코드에 대해 구체적인 설명을 요청할 수 있을 거예요.

뭐라고 나오는지 한 번 확인해볼까요?

"사용자 이름과 암호를 업데이트하는 서버 측 코드를 구현하려면 Express와 Mongoose를 설치해야 합니다." 
이렇게 나오죠. 우리는 이미 설치했으니까 괜찮아요. Express와 Mongoose를 사용하여 데이터베이스와 연결했으니까요.

또한, 이미 사용자 스키마도 만들었어요. 이런 작업도 이미 한 거거든요.

이제 복습 시간 같네요. "Express 서버에 업데이트 요청을 처리할 엔드포인트를 구성합니다. app.post('/', (req'... 이런 식으로 요청과 응답을 처리하는 구조를 만들었던 거죠. 사용자 이름과 암호를 저장했었어요. 물론 에러 처리도 했고요.

우리가 원하는 건 새로운 사용자를 만들고, 그 정보를 요청 본문(body)으로 보내는 거예요. 이 구조를 우리 코드에 활용할 수 있는지 살펴볼까요?

"4.Post 요청 처리"를 보면 app.post()는 요청을 만들어서 API로 보내는 역할을 합니다. 지금 우리의 API 위치는 어디일까요? 기본 위치인 슬래시(/)죠. test.users로 보낼 거고, 별도로 구성한 엔드포인트는 없으니까 홈페이지로 보낼 거예요. 그냥 '/'를 사용하면 될 거에요. 또한, 사용자 이름도 필요하죠. 그리고 req.body에서 해당 정보를 가져와야 해요. 이 정보는 입력 폼에서 받아오는 정보에요. 이 정보를 어디서 받아와야 하는지도 확인해야 해요.

뭐라고 나오는지 한 번 확인해볼까요?

이 정보를 받아와서 데이터베이스에 업데이트할 거에요. 
만약 오류가 발생하면 오류 코드를 보내고, 오류가 없다면 성공 메시지를 출력하고 성공 코드를 보내게 될 거에요.

이렇게 코드를 작성해보죠. 저와 함께 수정해나가면서 진행해봅시다. 이 코드는 GET 요청 아래에 작성할 거에요. 현재 작성 중인 코드도 요청과 관련된 내용이니까 이곳에 함께 두는 게 좋겠죠. 요청 코드는 아래쪽에 작성하면 됩니다.

함께 코드를 작성하고 이해해나가는 것도 좋은 방법이에요. 조금씩 수정하면서 진행해보죠. 궁금한 점이 있거나 도움이 필요하면 언제든지 말씀해주세요. 함께 답변해드릴게요.

연결은 맨 위에

리스너는 맨 밑에 있어요

좋아요. app.post() 메서드를 사용하여 요청을 만들어보겠습니다. POST는 데이터베이스에 정보를 업데이트하는 요청을 보내는 것이죠. 우리가 보낼 요청은 '/api/users'로 할 거에요. 이 요청에 대한 응답을 받을 거에요.

업데이트할 사용자 이름과 암호를 받을 겁니다. 이 정보는 요청의 본문(body)에서 가져올 거에요.

그래서 이 정보는 별도로 입력받아야 해요. 그 다음에 사용자 객체를 만들 거에요. 

new User()에... 원래는 여기서 이렇게 했었어요.

하지만 이번에는 데이터를 고정하는 대신에 'username'과 'password'를 입력할 거에요. 이 정보는 요청의 본문(body)에서 받을 거니까요. 그리고 이전에 정보를 저장할 때 했던 것과 동일한 방식으로 처리하면 되겠죠.

그냥 user.save()를 사용하면 돼요. findOneAndUpdate()를 호출하는 대신에요. 이렇게 하면 됩니다. 화살표 함수로도 작성할 수 있어요. 참고로 GPT에게 물어보면서 진행해도 돼요. GPT에게 사용법이나 오류를 확인할 수도 있거든요.

오류가 발생했을 때는 어떻게 해야 할까요? 응답으로 '가입 실패'라는 메시지와 상태 코드 500, 그리고 오류를 보내게 됩니다. 오류가 발생하면 이렇게 처리하고요.

하지만 오류가 없다면 모든 게 정상이라고 할 수 있으니까 응답을 '가입 성공'으로 보내고 종료 됩니다.

이렇게 해서 데이터베이스 업데이트를 위한 POST 요청을 양쪽에 추가했습니다. 이 부분만 있으면 데이터베이스를 업데이트할 수 있게 됩니다.

이제 교차 출처(Cross Origin) 문제를 고려해야 합니다. 교차 출처 문제는 localhost 환경에서 발생하는 문제입니다. 우리는 HTTP를 사용하고 있는데요, 이는 'http://localhost:3000'에 저장된 페이지를 의미합니다.

HTTPS가 아니라 HTTP를 사용하고 있어요. 이럴 때 교차 출처 문제가 생길 수 있습니다. 또한, 지금처럼 멀티 호스팅을 사용할 때도 교차 출처 문제가 발생할 수 있습니다.

지금처럼 localhost:3001에서 3000으로 보내면 교차 출처 요청으로 인한 문제가 발생할 수 있습니다. 이 문제는 'CORS'라는 라이브러리로 해결할 수 있습니다. CORS는 교차 출처 문제를 해결하기 위해 개발된 라이브러리로, Chrome에서 발생하는 교차 출처 문제를 해결하기 위해 사용됩니다. CORS를 설치하기 위해 터미널을 열고 'npm i cors' 명령을 실행하면 됩니다. 이 작업은 fullstack-app 디렉토리에서 수행해야 합니다.

이제 서버의 노드 모듈로 가보겠습니다. 이때 my-app과 헷갈리지 마세요. my-app은 닫고 아래에 있는 node_modules에서 확인해야 합니다. 여기를 보시면 'cors'가 있죠. 좋아요.

이제 익스프레스 서버에서 cors를 가져오도록 하겠습니다. 
이렇게 작성하면 됩니다: 'const cors = require('cors');'와 아래에 'app.use(cors());'를 입력하세요.

그리고 이번에도 JSON Content-type을 사용할 거에요. 그래서 여기서도 express.json()을 사용할 거예요. 이 기능은 Express에 이미 내장되어 있어요. 따로 가져올 필요가 없습니다. 'app.use(express.json());'로 설정하면 됩니다.

좋아요. 이제 서버를 다시 실행해야 해요. 서버가 수신 대기 중인 곳으로 돌아갈게요. 
'Ctrl + C' 키를 눌러 서버를 멈췄다가 다시 실행하겠습니다. 'node server.js'라고 입력하면 되요.

서버는 현재 3000번 포트에서 요청을 수신하고, MongoDB와 연결되어 있으며 새로운 사용자를 추가했어요. 
그런데 같은 사용자가 다시 추가되었습니다. 만약 이렇게 동작한다면, 
브라우저로 데이터베이스를 새로고침하면 두 명의 사용자가 나타날 거에요. 
이 두 사용자는 같은 사람일 가능성이 높으며, 페이지를 새로 고칠 때마다 John Doe가 추가될 것입니다.

지금 서버 코드가 그렇게 설정되어 있어서요. 실제로 동작하는 것을 확인하고 싶다면 Chrome 브라우저를 열고, 리액트 클라이언트 측의 localhost 페이지로 이동해보세요.

여기에 사용자 이름과 암호를 입력하고 전송했을 때, 모든 것이 예상대로 진행된다면 데이터베이스에 데이터가 업데이트될 것입니다.

사용자 이름을 'Mason'으로 설정하고, 암호를 'Handsome'으로 설정해봅시다. 이제 전송 버튼을 클릭해보세요. 이때 어떤 결과가 나올까요?

이번에는 오른쪽 콘솔 창을 확인해보세요. 거기에 어떤 내용이 나타날까요?

서버에서 '가입 성공, 상태 코드: 201' 메시지가 나타납니다. 상태 코드가 정상인 201이라는 것을 확인할 수 있어요. 이는 오류 코드인 500이나 400이 아니라는 뜻이에요. 우리의 코드가 잘 동작했다는 것을 알 수 있습니다.

Axios를 사용했기 때문에 AxiosHeaders를 통해 헤더가 설정되었어요. 콘텐츠 길이는 '27'이고 콘텐츠 타입은 'application/json'입니다. 이렇게 설정된 헤더를 통해 요청이 제대로 동작했는지 확인할 수 있을까요? 정말로 확인하고 싶다면 데이터베이스를 새로 고쳐보세요. 그러면 결과를 알 수 있을 거에요. 쿼리 결과는 총 3개로 나올 것입니다

정말로 멋진 일이에요! Mason이 우리 앱에 성공적으로 가입했어요. 
이것은 데이터베이스와의 실제 연결 및 작동을 의미합니다. 
지금까지 우리가 지시한 모든 단계를 정확하게 따라왔고 오류 없이 성공적으로 실행했음을 의미합니다. 
이제 실행 중에 발생한 오류가 없는지 다시 한 번 확인하고, 새로 추가한 서버 및 앱 코드를 다시 확인할 시간입니다.

실제로 우리는 두 가지 주요 작업을 수행했습니다. 우선, 교차 출처 문제 때문에 Axios를 사용하여 요청을 보냈습니다. 
서버 쪽에서도 동일한 요청을 보내고, 이를 차례대로 실행하여 데이터베이스로 전달했습니다. 
이러한 방식으로 오류가 발생하더라도 문제를 해결할 수 있는 방법을 알아내고 대처할 수 있습니다. ChatGPT에게 문의하여 디버깅 방법을 알아보세요. ChatGPT는 오류 해결에 도움을 줄 수 있을 거예요. 함수를 복사하고 ChatGPT에게 질문을 해보세요!

‘왜 아래 코드가 MongoDB 데이터베이스로 POST 요청을 보내지 못하는 건가요?’
적은 뒤 아래에 복사한
코드를 붙여 넣고 엔터를 치면
제 건 잘 동작하니까
다른 대답을 내놓을 거예요

사실상 구글에서 검색하는 것과 비슷한데, 거기에 머신러닝이 더해진 겁니다

이런 이유 때문에 발생할 수 있어요. 이 답변을 자세히 읽고, 여러분이 알고 있는 지식과 기술을 합치면 어떤 수준의 개발자든 코딩 실력이 크게 향상될 거에요. 정말 유용한 개발 도구가 하나 더 생긴 거죠.

다음 시간에는 애플리케이션에 라우팅 설정을 해보려고 해요. 백엔드에서 라우팅을 받아들이게 하고, 그 다음으로는 게임으로 넘어갈 거에요. 라우팅 설정을 마치면 게임을 만들게 되는 거죠. 정말 멋지죠!

그럼 다음 시간에 또 만나요. 수고 많으셨어요!