본문 바로가기

전체 글

(177)
[8주차] [20221231] 실전 프로젝트 기획 어제(12/30)부터 드디어 대망의 실전 프로젝트가 시작되었다. 우리팀 디자이너분께서도 아주 열정적으로 아침부터 밤까지 회의에 참여하면서 다 같이 머리를 맞대고 기획회의를 진행했다. 여러 아이디어가 나왔지만, 이미 누군가가 했거나, 우리가 해야 할 메리트를 찾지 못해서 폐기하고 폐기하다가, 결국 우리는 게임을 만들어 보기로 선택했다. 개발자 취업에 도움이 되는 주제로 실시간 대전 게임을 만들어보기로 한 것이다. 자세한 기획 내용은 스포가 될 수 있으므로 생략하도록 하고... 그래도 다행히 다 같이 어느정도 만족하는 내용으로 기획의 방향이 잡힌 것 같아 안심되었다. 뭔가 우리가 하고 싶은 기능들을 잔뜩 늘어놓긴 했는데, 3주라는 시간동안 해당 기능을 모두 개발할 수 있을지는 잘 모르겠다..ㅋㅋㅋ 기획한 기..
[7주차] [20221229] 1주일 notion clone 챌린지 회고 1주일간 노션 클론 챌린지를 진행했다. 프론트 개발을 맡은 팀원들이 많이 고생했고, 덕분에 성공적으로 프로젝트가 마무리되었다. 조금 아쉬운 부분은, 1시간마다 서버에서 페이지 정보를 자동 저장하고, 프론트에서 브라우저의 페이지를 자동 갱신해줘야 하는데, 이부분은 시간이 없어서 제대로 구현하지 못했다. 서버에서는 누가 socket에 접속을 했든 안했든 상관 없이 매 1시간마다 최신 document를 setInterval 함수 안에서 db에 자동 저장하고, 저장 직후에는 document를 null로 할당하는 구조였다. 그런데, 문제는 document를 null로 할당할 때, 서버에서 일어나는 이 이벤트를 감지해서 접속한 모든 socket의 페이지에 반영을 해줘야 하는데, 그게 안된다는 것이었다. socket..
[7주차] [20221228] queue 자료구조를 이용하여 autoSave 구현 이번 주차에 진행한 노션 클론 챌린지에서는, 1시간 단위로 페이지에 있는 글을 자동 저장하고, 이후 6시간 동안만 조회가 가능하도록 구현하기로 했다. db에는 항상 총 6개의 페이지가 저장되고, 1시간이 지날때마다, 가장 오래 된 페이지를 삭제하고 새로운 페이지를 저장하는 식이다. Fist In Firts Out의 queue 형태로 구현을 하였다. // app.js에서 setInterval이 발동될 때, date 객체를 생성하고 이를 ISO string으로 변환하여 저장 const currentDate = new Date(); const createdAt = currentDate.toISOString(); // db에서 pageData 조회 const pageData = await redisClient...
[7주차] [20221227] Redis Node.js에서 활용하기 Redis 설정하기 require('dotenv').config(); const { createClient } = require('redis'); console.log(process.env.REDIS_USERNAME); const redisClient = createClient({ url: `redis://${process.env.REDIS_USERNAME}:${process.env.REDIS_PASSWORD}@${process.env.REDIS_HOST}:${process.env.REDIS_PORT}/0`, legacyMode: true, // 반드시 설정 !! }); redisClient.on('error', err => { console.error('Redis Client Error', err); ..
[7주차] [20221226] Notion clone 프로젝트 DB 설계 1주일 노션 클론 팀 챌린지 1주일 내에 완성하기 위해 프로젝트 스코프를 최대한 간결하게 잡았다. 소켓 사용을 주 목적으로 하여, 다른 것은 다 빼고, 실시간 통신 기능을 구현하는데 초점을 맞추기로 했다. 도메인으로 접속하는 모든 사용자를 소켓으로 연결해 한 명의 유저가 페이지에 입력하는 내용을 실시간으로 다 함께 볼 수 있고, 편집할 수 있는 기능을 만들고자 기획하였다. 구현 기능 1. 입장하는 유저에 랜덤 닉네임 부여 -> 사이드바에 현재 접속자 닉네임 띄우기 2. 페이지 상단에 실시간으로 입장 공지 띄우기 3. 페이지에 사용자가 텍스트를 입력하면 이를 감지하여 서버로 전송 -> 서버에서는 접속한 모든 소켓에 보내어, 실시간으로 페이지에 반영 4. 퇴장 유저의 닉네임 제거 사실상, 백에서는 소켓을 핸..
[WIL] [6주차] 2022.12.19 ~ 2022.12.25 회고 (feat. 미니프로젝트 완료 후기) 미니프로젝트 주차에는 정신이 없었다. 프로젝트를 시작하는 시점에 아직 레이어드 아키텍처로 서버 개발을 하는 것이 익숙하지 않은 팀원도 있었고, 첫 협업이다보니, 협업 툴을 사용하는 점이라던가, 공동으로 폴더구조를 만들고 시작해야 한다던가 하는 많은 것들이 쉽지 않았다. 특히, 프론트 사람들은 git을 사용한 헙업이 거의 처음이라 할 수 있었기 때문에, github에서 이슈를 생성하고 PR을 날리고, Project 보드에 연동해서 워크플로우를 함께 보고 하는 것들을 하나씩 알려주고 또, 이를 사용하도록 설득해야 했다. 내 개발을 모두 마치고, 도커로 자동배포에 도전해보려 했지만, 그 또한 쉽지 않았다. 왜냐하면, 프론트 분들은 계속 나에게 개발에 대한 소통을 요청해왔고, 또, 백엔드 팀원들의 코드리뷰를 계..
[6주차] [221222] 미니프로젝트 회고 이번 주차에는 첫 FE - BE 협업을 도전했습니다. [BE] 에러 로거 적용 도커 이미지 파일 만들어서 repo에 푸쉬까지 했지만, 최종 서버에는 도커 파일로 배포하지 못했음 https로 서버 열기(사실상 동석님이 해주심 [FE] aws R3 이미지 서버를 프런트에서 만들고 관리함 트러블 슈팅 [트러블 슈팅보다는 헤프닝...] 기존에 잘 작동하던 api서버가 업데이트 이후 이상해졌다!! 게시글을 포스팅하면, 내 아이디가 아닌 test1이라는 동일한 아이디로 포스팅이 된다!!(두둥) 무슨 문제인지 알아보기 위해, 백엔드 서버 사용자 인증 미들웨어에 토큰 값을 콘솔로 찍어보았다. 프런트에서 req.headers에 authentication으로 토큰 값을 담아 보내기로 했는데, tokens 값은 undefi..
[6주차] [20221220] 오늘은 팀원들을 도와 3 레이어드 아키텍처를 적용해서 공통의 에러핸들링을 하는 방식, 각각의 레이어별로 로직을 나누는 방식을 알려주고, 팀원들이 푸쉬하는 코드를 리뷰하며 하루가 다 지나갔다. 프런트 파일을 별도의 서버에서 배포하고 백 서버 origin에 api 요청을 하기 때문에, CORS 응답이 가능하도록 하는 것과, HTTPS로 req 요청을 보내기 때문에, 백 서버도 HTTPS로 구축하는 것이 필요했다. 우선, CORS 요청에 대해서는, corse 모듈을 설치해 아주 간편하게 해결했다. HTTPS 서버 구축은 내가 직접 하지 않았고, 우리 반 최강 zㅣ존동석님께 도움을 받았다. 동석님은 nginx와 python 3 certibot을 사용해 80포트로 nginx 서버를 연 뒤, 앱서버를 뒤에서 열어 ..