서버
-
Server MVC 패턴으로 분류하기Project/실시간 채팅 앱 2022. 9. 25. 17:12
express로 구현한 서버를 Model, View, Controller로 나누었다. 바로 코드를 살펴보자 View쪽을 담당하는 router.js이다. 기존 코드보다 가독성이 굉장히 향상된 모습이다. 각 요청에 따른 함수 이름역시 가독성을 높여주는데 큰 역할을 한다. Model을 담당하는 Data쪽이다. 메모리에서 실제 listsfksms Data를 가지고 있고, Controller에서 전달된 요청에 따라 해당 기능을 수행하고 Data를 Return해준다. 마지막으로 Controller측이다. Data측에 요청을 보내고 응답을 담당한다. MVC패턴으로 분류해놓고 나니 확실히 가독성이 올라가고 나중에 에러가 발생하면 어느 부분에서 발생하는지 바로 알 수 있을 것 같다. 기존에 작성되었던 코드들도 나름 깔끔..
-
Client측 Data클래스 간소화하기Project/실시간 채팅 앱 2022. 9. 25. 17:02
기존에 fetch로 서버에 요청을 보내는 클래스내에서 Content-type, res.json, throw Error 등 같은 코드들이 반복적으로 쓰여졌다. 따라서 코드 중복을 줄이고 이를 처리해줄 수 있는 network 클래스를 만들었다. HttpClient 클래스에서 baseURL로 서버를 받아오고 fetch라는 함수를 만들었다. 매게변수로 url과 옵션이 있는데 url은 GET, POST등에 따른 쿼리와 파라미터를 전달받고 options는 요청을 보낼 때 다른 옵션 과 header를 전달받았다. 이렇게 해서 들어온 data는 try와 catch로 전달해주었으며 원하는 statusCode가 아니더라도 Error가 발생하지 않으므로 if문으로 한번 더 에러처리를 해주었다. network클래스를 만들어주..
-
Back-end 스키마(Schema) 셋업하기Project/실시간 채팅 앱 2022. 9. 20. 17:58
스키마(Schema)란 무엇일까? 사전적 의미로는 "데이터베이스의 구조와 제약조건에 관한 전반적인 명세"를 뜻한다. 쉽게 말하면 DB에 어떤 구조로 데이터에 저장되는지를 나타내는 데이터베이스 구조를 스키마라고한다. 지금 내가 설계하고 있는 웹서비스에서 필요한 데이터는 User DB와 Chat DB이렇게 두 개이다. 그리고 서버와 통신할 때 내가 필요한 기능을 나열해보자면 아래와 같다. - 회원가입 // POST(/auth/signup) - 로그인, 아웃 // POST(/auth/login) - 토큰 확인하기 // GET(/auth/me) - 채팅목록 불러오기 // GET(/chat-list) - 선택한 채팅방 내 메세지 불러오기 // GET(/chat-list:idx/msgs) - 선택한 채팅방으로 메세..
-
CORS Policy 문제 Express로 바로 해결하기! - CodeHan의 코딩공부BackEnd/개념정리 2022. 9. 14. 12:05
CORS란? Cross-origin resource sharing의 약자로 한국말로 하면 교차 출처 리소스 공유를 뜻한다. 브라우저에서만 가지고있는 CORS 정책이다. 클라이언트와 서버가 같은 도메인에 있다면 정보를 주고 받는데 지장이 없지만 클라이언트와 서버가 다른 도메인이라면 원칙적으로 정보를 주고받는 것이 금지되어있다. 어려우니까 쉽게 설명하면 클라이언트랑 서버랑 도메인이 다르면 아무것도 주고받을 수 없다는 뜻이다. 따라서 가능하게하려면 Server에서 Header에 Access-Control-Allow-Origin을 첨가하여 보내주어야한다. Express에서 쓰는 법 App.use((req, res, next) => { Res.setHeader('Access-Control-Allow-Origin'..