본문 바로가기

전체 글

서비스 운영을 위한 패키지[morgan,express-session,시퀄라이즈,cross-env, sanitize-html, csurf] 지금까지는 서버 개발을 localhost에서 진행했습니다. 별다른 설정 없이 서버 작업 결과를 볼 수 있어 편리하긴 하지만, 혼자만 볼 수 있다는 문제가 있습니다. 배포시에는 다른 사람이 사용하는 서비스이므로 개발 환경과 동일하게 진행할 수는 없습니다. 서버도 멈추지 않게 유지해야 하고, 에러 내역도 관리해야 합니다. 또한, 각종 보안 위협에도 대처해야 합니다. 이러한 작업을 쉽게 해주는 패키지도 알아볼 것입니다. morgan과 express-session 현재 익스프레스 미들웨어 중 일부가 개발용으로 설정되어 있습니다. 이 미들웨어들을 배포용으로 설정할 것입니다. process.env.NODE_ENV는 배포 환경인지 개발 환경인지를 판단할 수 있는 환경 변수입니다. 저는 주로 배포 환경일 때는 morg.. 더보기
디자인 시스템을 만드는 이유 그리고 Component UI Component에 대한 개념, 그리고 Figma의 Component 기능을 사용하는 이유 Figma의 Component 기능 마스터하기 컴포넌트를 등록하기 위해서는 그 오브젝트가 하나의 레이어여야 한다. 에셋에서 컴포넌트가 잘 등록 되었는지 확인(드래그 앤 드롭으로 인스턴스로 사용가능) 본체로서의 컴포넌트로 잘 등록 되었는지 확인(다이아몬드 모양) 본체 컴포넌트 변경하는법 본체로부터 인스턴스 분리하는법(커스텀 마이징을 위해) 컴포넌트들이 많을때 정리하는법 / 사용해서 폴더식으로 정리 하기 그럼 아래와 같이 폴더 처럼 정리가 된다. 위와 같은 방식으로 컴포넌트를 폴더로 저장하놓은 것들 토대로 다른 컴포넌트로 변경 가능 라이브러리와 팀 라이브러리 기능 이전 시간 등록한 컴포넌트들은 파일 내에서 등록된.. 더보기
디자인 시스템을 만드는 이유, 그리고 Style[텍스트, 컬러, 이펙트, 그리드] Good에서는 일관적인 텍스트 사이즈를 가지고 있으며 버튼의 크기 또한 일관적인 사이즈를 가지고 있다. 스타일 기능 1. 텍스트, 컬러 왼쪽과 같이 앞으로 쓸 텍스트의 규격을 적어 놓고 가운데와 같이 추가 하여 오른쪽과 같이 다른 텍스트를 쓸경우 (아래와 같이)다시 그 규격에 맞게 사용할 수 있다. 위와 같은 과정으로 이전에 만들어 놓은 규격들이 적용된 모든 텍스트 들 또한 변경할 수 있다. 색깔도 텍스트와 같이 자주 사용하는 색을 저장 가능 위와 같이 지정한 컬러들 적용 가능 스타일 기능 2. 이펙트, 그리드 이전에 배운 drop-shadow 또한 저장이 가능. 그리드도 저장 가능 위와 같이 적용 더보기
스케쥴링 구현 및 프로젝트 마무리 [흐름만 보기] 카운트다운이 끝나면 더 이상 경매를 진행할 수는 없지만, 아직 낙찰자가 정해지지 않았습니다. 경매 종료를 24시간 후로 정했으므로 경매가 생성되고 24시간이 지난 후에 낙찰자를 정하는 시스템을 구현해야 합니다. 이럴 때 node-schedule 모듈을 사용합니다. npm i node-schedule schedule 객체의 scheduleJob 메서드로 일정을 예약할 수 있습니다. 첫 번째 인수로 실행될 시각을 넣고, 두 번째 인수로 해당 시각이 되었을 때 수행할 콜백 함수를 넣습니다. 경매 모델에서 가장 높은 가격으로 입찰한 사람을 찾아 상품 모델의 낙찰자 아이디에 넣어주도록 정의했습니다. 또한, 낙찰자의 보유 자산을 낙찰 금액만큼 뺍니다. {컬럼: sequelize.literal(컬럼 - 숫자)}는 시.. 더보기
서버센트 이벤트 사용하기 [흐름만 보기] 경매는 시간이 생명입니다. 특히 온라인 경매이므로 모든 사람이 같은 시간에 경매가 종료되어야 합니다. 따라서 모든 사람에게 같은 시간이 표시되어야 합니다. 하지만 클라이언트의 시간은 믿을 수 없습니다. 너무나도 손쉽게 시간을 변경할 수 있기 때문입니다. 따라서 서버 시간을 받아오는 것이 좋습니다. 폴링이나 웹 소켓을 통해서 서버 시간을 받아올 수도 있지만, 이번 예제에서는 서버 센트 이벤트를 사용해서 서버의 시간을 받아올 것입니다. 주기적으로 서버 시간을 조회하는 데는 양방향 통신이 필요하지 않기 때문입니다. 웹 소켓도 사용합니다. 웹 소켓은 경매를 진행하는 동안에 다른 사람이 참여하거나 입찰했을 때 모두에게 금액을 알리는 역할을 할 것입니다. 서버 센트 이벤트와 웹 소켓은 같이 사용할 수 있습니다. S.. 더보기
프로젝트 구조 갖추기 [흐름만 보기] 기본 패키지 구성 기본 폴더구조 구성 npx sequelize init 사용자 모델은 이메일(email), 닉네임(nick), 비밀번호(password), 보유 자금(money)으로 구성됩니다. 사용자가 입찰을 여러 번 할 수 있으므로 사용자 모델과 경매 모델도 일대다 관계입니다. 상품 모델은 상품명(name), 상품 사진(img), 시작 가격(price)으로 구성됩니다. 사용자 모델과 상품 모델 간에는 일대다 관계가 두 번 적용됩니다. 사용자가 여러 상품을 등록할 수 있고, 사용자가 여러 상품을 낙찰 받을 수도 있기 때문입니다. 등록한 상품과 낙찰 받은 상품, 두 관계를 구별하기 위해 각각 Owner, Sold로 관계명을 지정했습니다. 이는 각각의 OwnerId, SoldId 컬럼으로 상품 모델에 추가.. 더보기
이미지를 포함한 채팅 마지막으로 GIF 이미지를 전송하는 것을 구현해보겠습니다. 프론트 화면에서 이미지를 선택해 업로드하는 이벤트 리스너를 추가합니다. POST /room/{{room._id}}/gif 주소에 상응하는 라우터를 작성합니다. 9장의 이미지 업로드와 방식이 같습니다. uploads 폴더에 사진을 저장하고, 파일명에 타임스탬프(Date.now())를 붙이고, 사이즈를 제한했습니다. 파일이 업로드된 후에는 내용을 데이터베이스에 저장하고, 방 안에 있는 모든 소켓에 채팅 데이터를 보냅니다. 이제 이미지를 제공할 uploads 폴더를 express.static 미들웨어로 연결해봅시다. 핵심 정리: • 웹 소켓과 HTTP는 같은 포트를 사용할 수 있으므로 따로 포트를 설정할 필요가 없습니다. • 웹 소켓은 양방향 통신이므.. 더보기
채팅 기능 구현하기 프런트에서는 서버에서 보내는 채팅 데이터를 받을 소켓 이벤트리스너가 필요합니다. chat.html 파일에추가합니다. socket에 chat 이벤트 리스너를 추가했습니다. chat 이벤트는 채팅 메시지가 웹 소켓으로 전송될 때 호출됩니다. 채팅 메시지 발송자(data.user)에 따라 내 메시지(mine 클래스)인지 남의 메시지 (other 클래스)인지 확인한 후 그에 맞게 렌더링합니다. 채팅을 전송하는 폼에 submit 이벤트 리 스너도 추가했습니다. 채팅은 여러 가지 방식으로 구현할 수 있습니다. 현재 GIF 채팅방의 경우에는 채팅 내용을 데이 터베이스에 저장하므로 라우터를 거치도록 설계했습니다. 이제 방에 접속하는 부분과 채팅을 하는 부분을 만들어보겠습니다. 먼저 enterRoom 컨트롤러에서 방 접.. 더보기

티스토리툴바