s0n9h2

[01 문제 상황] 기능을 구현해놓고 구체화하며 테스트를 진행하는데, 계속해서 토큰이 만료되어 만료된 토큰에 푸시 알림을 보내려 하면 서버가 죽는 현상이 일어났다. 서버가 죽는건 에러 처리를 하지 않았기 때문이므로 try catch문으로 해결해줬는데, 토큰이 만료되는 문제는 내 문제가 아니기 때문에 해결 방법을 몰랐다. 구글링 결과, 만료시 pushsubscriptionchange 이벤트리스너로 service worker에게 새로운 구독 정보로 갱신해달라고 하면 되는데 중요한 점은 chorome은 해당 이벤트를 지원하지 않는다는 것이었따..?! firefox만 지원하는건 너무하잖아 ㅠㅠ 따라서 이런 글들을 읽으며... 나는 어떻게 처리할지 고민했다. 실서비스에서 PWA를 사용하면 무조건 이런 문제가 있을..

[01 들어가기에 앞서 ] (1) query string이란? 사용자가 입력 데이터를 전달하는 방법 중의 하나로서 URL 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것이다. 여기서 사용자 입력이란 사용자가 검색한 키워드가 될 수도 있고 임의로 설정한 필터 조건이 될 수도 있다. 사용하는 방법은 URL과 조건문 사이의 ‘?’ 구분자를 두고 필요한 파라미터 값을 적는다. 그리고 파라미터가 여러개일 경우 ‘&’ 를 붙여 여러개의 파라미터를 넘길 수 있다. (2) 사용하게 된 배경 push actions 클릭시 넘어가는 페이지(오늘의 체크리스트 작성 페이지)와 QR code 연결 페이지(모바일 구독 페이지) 이동 후에 별도의 로그인 없이 사용자 인증 후 요청을 할 수 있게 하고 싶었다. 그런데 REST..

지난 PWA 시리즈에 이어서 작성한 내용입니다. 한동안 코딩 테스트 준비로 프로그래머스 문제에 집중하다가 다시 작성!! [01 QR code란? ] QR 코드(Quick Response code)는 컴퓨터가 만든 흑백 격자무늬 패턴 코드로, 정보를 나타내는 매트릭스 형식의 이차원 코드이다. 기존의 바코드는 기본적으로 가로 배열에 최대 20여 자의 숫자 정보만 넣을 수 있는 1차원적 구성이지만, QR코드 원리는 가로, 세로를 활용하는 2차원적 구성이다. 숫자 : 최대 7,079 문자 : 최대 4,296 한자 : 최대 1,817 QR 코드의 자세한 작동 구조가 궁금하다면 아래 참고에서 확인한다. 참고 : https://codingcoding.tistory.com/95 [02 QR code 생성 ] (1) 외..

[ 01 개념 알아보기 ] (1) cron이란? 유닉스 계열 컴퓨터 운영체제(Unix, Linux 등)의 잡 스케줄러이다. 잡 스케줄러란 어떤 작업을 특정 시간에 실행시키기 위한 데몬이다. 일정한 시간 간격으로 수행되어야 할 작업이나 관리자가 그 시간에 작업을 할 수 없는 상황일 때에도 서버는 항상 돌아가고 있다는 점을 이용하는 아주 유용한 방법이다. cron은 셸 명령어들이 주어진 일정에 주기적으로 실행하도록 규정해놓은 crontab (cron table) 파일에 의해 구동된다. 셸 명령어들로 필요한 작업을 프로그래밍한 파일이 shell script(.sh)이다. 윈도우에서는 작업 스케줄러(Task Scheduler)와 배치(.bat) 파일로 대체할 수 있다. (2) node-schedule를 선택한 ..

이전 포스팅에서 Nodejs 서버에서 Push 알림 전송에 성공했으니, 이제 이 Push 알림을 내가 원하는 형태와 동작으로 구체화하기 위한 작업을 시작한다! 처음 기획할 때 체크리스트 기능을 푸시 알림을 통해 접근할 수 있으면 좋겠다고 생각했고, 그 기능을 완벽히 구현했다. 별 거 없지만 그 방법을 작성해보겠다. [01 Options ] Service Worker가 showNotification 메소드를 실행할 때는 여러가지 옵션들을 설정해줄 수 있다. 종류가 꽤 많은데 자주 쓸만한 건 다음과 같다. body : 알람 본문에 표시될 내용 icon : 알람에 표시될 앱 아이콘, 보통 웹 사이트의 로고나 정체성을 나타내는 아이콘을 사용 badge : 모바일(Android)에서만 동작하는 속성, 알람을 받을..

* 이전 포스팅에서 이어지는 글입니다. [PWA] Push Notification 튜토리얼 따라해보기 [ 01 튜토리얼 선택 ] (1) 영상 소개 이 자리를 빌어 나를 구원해 준 인상 좋은 개발자님께 감사의 인사를 드린다... 2일째 밤까지 아무 진전이 없어 좌절감만 느끼고 있었는데 이 분이 그나마 s0n9h2.tistory.com 이전 포스팅에서 튜토리얼을 실습해봤으니 이제 본 프로젝트의 적재적소(?)에 넣어 적용하기만 하면 된다. 나는 프론트 React-TypeScript, 백엔드 Node.js(TypeScript) Express 환경에서 작업했다. 참고로 본 프로젝트에서 푸시 알림 기능을 구현할 때 백엔드 서버가 죽으면 푸시 알림도 가지 못하기 때문에, 별도의 Node 서버를 구축하면 서비스 의존도..

[ 01 튜토리얼 선택 ] (1) 영상 소개 이 자리를 빌어 나를 구원해 준 인상 좋은 개발자님께 감사의 인사를 드린다... 2일째 밤까지 아무 진전이 없어 좌절감만 느끼고 있었는데 이 분이 그나마 알아듣기 쉬운 영국st 억양에 web push? 그거 정말 별 것도 아니라는 말투로 설명해주셔서 들어봤는데 복잡했던 개념이 이 짧은 영상으로 정리됐다. 게다가 다른 tutorial들과 다르게 진짜 딱 푸시 알림 하나 보내기 위해 필요한 코드만 있어서 완전 강력 추천😍 소스코드 : https://github.com/MarkJamesHoward/push (2) web-push 위 영상의 유튜버도 그렇고 블로그들을 찾아봤을 때도 그렇고 꽤 많은 nodejs 사용자가 web-push 라는 npm package를 사용..

오늘부터 천천히 엘리스 3차 프로젝트에 사용한 Web Push API 적용 및 트러블슈팅 대장정 과정에 대해 하나씩 포스팅할 생각이다. 간단하게 적용 가능했던 manifest.json 파일 설정 후 홈 화면에 추가하기 기능은 프로젝트 중간에 포스팅했으나, push notification 기능은 2주간 구현한 내용이기도 하고 관련 기능들 하나 하나 순서대로 포스팅하려고 일부러 아껴뒀다(?)고 쓰고 미뤘다고 읽는... 어떻게 시작해야 할지 좀 막막해서 간단하게 써 본 목차는 다음과 같다. 더보기 [PWA] Push Notification 개요 [PWA] Push Notification 튜토리얼 따라해보기 [PWA] Push Notification Nodejs 프로젝트에 적용하기 [PWA] Push Notif..

요약 총 프로젝트 기간 2022.05.31 ~ 07.03 5주차 2022.06.27 ~ 07.03 역할 백엔드, 근데 이제 필요시 프론트엔드를 곁들인... 완료 항목 log 남기기 (morgan + winston) LetsEncrypt 인증서 발급 (standalone 방식) SSL 적용 (https 연결 확인) 자잘한 버그 개선 (쿼리 오류 및 비동기 제어 등) [FE] 마이페이지 checklist heatmap 구현 web push 여러 번 전송되는 문제 해결 발표 자료 준비 최종 발표 회고 1. 구현하면서 어려웠던 부분 - SSL 적용 드디어... 1,2,3차 프로젝트를 하며 거의 염원이 된 자물쇠 채우기에 성공했다. 사실 2차 때 삽질하면서 3차 때는 VM 문제만 해결되면 정말 잘 채울(?) 자신..

[01 PWA란? ] PWA는 프로그레시브 웹 앱(Progressive Web App)의 줄임말이다. 한 마디로 PWA는 HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱을 의미하는데 그 느낌과 기능이 실제 네이티브 앱과 견줄 수 있을 정도로 좋다고 한다. 대표적으로 푸시 알림이나 오프라인 지원과 같은 기능이 있다. 나는 푸시 알림을 사용하기 위해 PWA의 service worker를 사용했고, 푸시 알림을 구현하는 동안 프론트 분들이 반응형에 신경써주셔서 manifest.json 파일 설정을 통해 간단하게 홈 화면에 추가 기능까지만 구현해보았다. [02 Manifest.json 파일 설정] 나는 Push API를 구현하고 나서 이 기능을 구현했는데 기능구현이라고 하기도 민망할만큼 간단..

[01 Log란?] 서버에서 발생하는 모든 행위와 이벤트 정보를 시간에 따라 남기는 기록을 의미한다. 어떠한 정보를 남길지는 서버가 선택할 수 있으며 로그가 있어야 차후 버그나 해킹, 복구 등의 문제가 발생했을 때 신속하게 대처할 수 있다. 나는 아직 실제 서비스를 운영해 본 적이 없지만 로그 관리와 관련한 여러 블로그를 읽으면서 로그가 없으면 정말 큰일난다는 반응을 많이 보았다...ㅎㅎ... (제일 많이 참고한 블로그) 그래서 미리 미리 로그를 남겨보기 위해 Javascript(Typescript) 프로젝트에서 morgan과 winston으로 로그 남기는 법을 적용해보았다. [02 사용할 패키지] (1) 필요한 패키지 Javascript(Typescript)에서 로그를 남기는 데 두 가지 패키지가 필요..

[01 들어가기에 앞서 ] 엘리스에서는 git 협업을 위한 플랫폼으로 GitLab을 사용한다. 1,2,3차 프로젝트 모두 GitLab을 사용했지만 항상 local에서 pull로 직접 conflict를 하나하나 해결하며 merge하거나, 충돌이 나지 않을만한 작업만 웹페이지에서 직접 Merge Request로 요청하고 merge 버튼을 눌렀었다. 그런데 이번엔 그렇게 하지 못할 상황이 있었으니..! 내가 작업한 back-webpush 브랜치는 front 코드 수정 부분도 포함되어 있어서 conflict가 날 것 같았는데 매주 코치님의 코드 리뷰를 위해 GitLab에서 직접 MR을 요청해야 했다. 그리고 코치님께서 코드 리뷰를 잘 작성해주시고 merge를 하려고 보니 front분들이 먼저 dev로 merge..

요약 총 프로젝트 기간 2022.05.31 ~ 07.03 4주차 2022.06.20 ~ 06.26 역할 백엔드, 근데 이제 필요시 프론트엔드를 곁들인... 완료 항목 Sequelize로 영양제 일정 Web Push에 필요한 데이터 불러오는 쿼리 짜기 가져온 데이터 정제해서 Web Push 알림 보내기 node-schedule 사용해서 cron 기능으로 30분에 한 번씩 자동 푸시 알람 가도록 설정 모바일 접근성 위해 QRcode로 구독 버튼 접근할 수 있도록 변경 Web Push 알림에 Checklist 버튼 추가해서 오늘의 체크리스트 작성할 수 있도록 변경 위 두 기능을 위한 모바일 겸용 프론트 페이지 제작 위 두 기능에서 URL로 JWT Token을 보낼 때 AES 암호화/복호화 하는 과정 추가 de..

[01 UTC란? ] UTC란 Coordinated Universal Time Universal Time Coordinated을 뜻하는 말로 번역하면 한국어로는 "협정 세계시"라고 한다. 컴퓨터 세계에서도 이 UTC가 시간의 표준이 되는데, 한국은 UTC+9 시간대에 속하므로 UTC 시간에 +9를 해주면 한국 환산 시간이 나온다. 예시로 UTC 03:00은 한국 기준으로는 오후 12:00이다. 즉, 한국 시계가 협정 세계시보다 아홉 시간 빠르다. 프로그래밍을 하다 보면 이 UTC를 한국 시간대로 바꿔야 하는 경우가 종종 생기는데 은근히 까다로워서 정리해보기로 했다. [02 관련 함수 ] 기본적으로 new Date()를 사용하여 현재 시간 객체를 생성할 수 있다. 그리고 Date 객체에는 다음과 같은 메소..

[01 Ubuntu (MySQL) 서버 시간 변경] 현재 프로젝트를 진행하며 Database는 Oracle Cloud Service에 MySQL 서버를 구축하고 외부에서 접속 가능하도록 구축해뒀다. 이 때 MySQL을 설치하고 MySQL 시간대(timezone)을 변경할 수 있는데, OS로 Ubuntu를 사용하고 있다면 서버 시간을 바꿔서 그대로 MySQL 서비스에도 적용하는 것이 가능했다. 따로 설정을 하지 않으면 UTC+0으로 설정되어 있다. MySQL 서비스의 설정 내에서 바꾸는 방법도 가능하지만, 나의 경우 Timezone 데이터가 없었고 따라서 Timezone 데이터를 외부에서 다운 받으라는데 너무 번거로웠다. 위 링크의 명령어를 실행해보고 Timezone 데이터가 없다면 데이터를 다운받기보다 ..

[01 nodemailer란? ] nodeMailer는 Node.js 환경에서 email을 보내주도록 도와주는 모듈이다. npm에 있는 메일 전송 패키지 중 가장 인기 있는 것 같다. 나는 기본 기능만 사용했지만 역사가 깊은(?)만큼 공식문서도 잘 쓰여 있으니 확인하자. 사용자에게 메일을 전송할 수 있고 메일의 내용을 HTML 문서로 커스텀하던가 나는 사용하지 않았지만 파일 첨부도 가능하다고 한다. 나는 메일 발송 플랫폼으로 gmail을 사용했지만 찾아보면 naver 메일이나 daum 메일 등으로도 가능하다. nodemailer는 gmail을 사용할 경우 하루에 500통을 발송 가능한데, 프로젝트 용으로는 큰 문제 없지만 실제 서비스에 쓰기는 턱없이 부족하기 때문에 더 많은 메일 전송을 위해서는 AWS ..

[01 Eager Loading이란? ] (1) 개념 서비스가 커질수록, 참조하는 객체가 많아지고, 객체가 가지는 데이터의 양이 많아진다. 이렇게 객체가 커지면 DB로부터 "참조하는 객체들의 데이터"까지 한꺼번에 가져오는 행동은 부담이 커진다. 따라서 JPA는 참조하는 객체들의 데이터를 가져오는 시점을 정할 수 있는데, 이것을 Fetch Type이라고 한다. 그리고 이 Fetch Type이 Eager와 Lazy 두 가지로 나뉜다. Eager Loading은 한 마디로 하나의 객체를 DB로부터 읽어올 때 참조 객체들의 데이터까지 전부 열심히 읽어오는 방식을 뜻한다. 반대로 Lazy Loading은 게을러서 참조 객체들의 데이터들은 무시하고 해당 엔티티의 데이터만을 가져온다. 지금까지 쿼리를 짤 때는 따로 ..