네이버 카페을 활용하는 방식으로 손쉽게 모바일로 포스팅 쓰는 방법 알아보기

네이버 카페을 활용하는 방식으로 손쉽게 모바일로 게시물 쓰는 방법 알아보기

프로그래밍 세계를 탐구합시다. 네이버 API를 활용해서 뉴스 데이터를 페이지에 출력할 수 있습니다. 1. 네이버 개발자센터 NAVER Developers 에 접속합니다. 2. Documents 서비스 API 검색 위 페이지에서 분명한 API 등록, 활용 방법을 확인할 수 있습니다. 먼저 오픈 API 이용을 신청하셔서 애플리케이션 등록 API 이용신청 을 진행합니다. 사용 API는 검색, 데이터랩 검색어 트렌드, 데이터랩 쇼핑인사이트로 설정했습니다.

비로인 오픈 API 서비스 환경은 httplocalhost 입력하였습니다.

도메인 주소 만들기

공인 IP를 발급받은 뒤에는 도메인 주소를 만들어야 합니다. 도메인 주소는 여러 호스팅 서비스 업체에서 발급받을 수 있었으나 일반적인 업체로는 가비아, 카페 24 등이 있습니다. 만약 비용 없이 사용하고 싶으시다면 noip라는 사이트를 이용하시면 됩니다. noip 사이트를 이용하면 하나의 호스트에 대해 비용 없이 사용해볼 수 있습니다. 대신 30일 주기로 계속 사이트로 접속해서 업데이트해주시기 바랍니다야 해야하는 단점이 있습니다.

잠깐, 무료 호스팅을 사용해도 괜찮을까?사실 왠만하면 무료 호스팅 서버는 대부분 사기이므로 사용하지 않는 것이 좋습니다. 도메인 주소를 발급받으려면 네이버클라우드에서 발급받은 공인 IP를 업체에 제공해야 하는데 이때 허가되지 않은 호스팅 서버에 제공한다면 연결망 스캐닝이 일어나서 서버가 해킹당할 위험이 있습니다.

SSL 인증서 발급받기

PWA의 기능들을 온전히 사용하려면 https 프로토콜로 접속가능하도록 만들어야 한다고 앞서 말씀드렸었는데요. https 프로토콜을 사용하려면 먼저 다음과 같은 절차가 필요합니다. 공인 IP 발급받기 도메인 주소 제작하기 SSL 인증서 발급받기 https 프로토콜 사용하기

그럼 https 프로토콜을 사용하기 위한 첫 번째 순서인 공인 IP 발급받는 방법부터 단계적으로 분석해 보도록 하겠습니다.

PUSH 알림을 받기 위한 디바이스 토큰 등록 로직 삽입하기

다음으로는 PUSH 알림을 받기 위한 디바이스 토큰 등록 로직 삽입하는 방법에 대해 알려드리겠습니다. 디바이스 토큰 등록하는 API는 네이버클라우드에서 제공하고 있었으나 백엔드 로직에서 푸는 것이 안전하지만 여기서는 살짝 편법으로 사용할 수 있는 방법을 알려드리겠습니다. 먼저 저희는 이전에 설치한 리액트 CRA의 PWA 템플릿을 이용할 예정인데요. 만약 준비되지 않았다면 아래 링크를 참고해서 준비해 주시기 바랍니다.

세팅이 완료돼있다면 App.js 데이터를 찾아 상단에 다음과 같이 입력해 줍니다. Standalone 모드는 Progressive Web App PWA 아니면 웹 앱이 실행되는 모드를 나타냅니다.

웹 서버Nginx 설치하기

서버를 선택하고 생성까지 완료하셨다면 SSH 도구를 통해 서버에 접근할 수 있도록 포트포워딩을 진행합니다. 포트포워딩 및 SSH 접속방법에 대한 글은 아래 링크를 통해 확인해볼 수 있습니다. 도커까지는 설치 안 하셔도 됩니다 접속까지 완료하셨다면 이제 저희가 앱을 실시간으로 구동시킬 웹 서버를 설치해야 하는데요. 그 전에 외부에서 접속 가능하도록 포트번호를 개방하도록 하겠습니다. Nginx에서는 80, 443 포트번호를 각각 http, https 프로토콜의 기초 포트번호로 사용하고 있었으나 저희는 PWA의 서비스워커 기능을 사용해야 하기 때문에 80번 뿐만 아니라 443 포트번호를 허용해주셔야 합니다.

네이버클라우드에서 외부IP로 접속 가능한 포트를 허용해 주는 방법은 다음과 같습니다. 먼저 네이버클라우드 콘솔에 접속해서 사용할 서버를 선택해 준 뒤 ACG 이동 아이콘을 클릭합니다.

html 게시글 스타일 미적용 문제

게시글의 css 스타일이 일부 적용이 되지 않는 것을 확인할 수 있었습니다. 왼쪽이 원본 스타일이나 오른쪽 사진처럼 왼쪽 사진의 스타일이 일부 적용 되지 않는 모습니다. 이 경우 내부 스타일 형식으로 정의된 css 코드가 반영하지 않아서 생기는 문제입니다. 내부 스타일 형식으로 정의된 css 코드를 인라인 형식으로 바꾸어주어야 합니다. 하드코딩으로 해결하기엔 너무 복잡해보여 이를 해결할 수 있는 cssinline 패키지를 찾았고 다음과 같이 해결하였습니다.

import cssinlinecontent cssinline.inlinepostskeycssinline 패키지에 대한 분명한 내용은 아래 링크를 참고하시면 됩니다.

자주 묻는 질문