지난 시간에 지난번에 파이어베이스 클라우드 함수를 node express 형태로 만드는 것과, 이를 활용해 클라우드 함수를 라우팅하고 미들웨어 처리하는 방법을 배웠다. 이렇게 배운 기능들을 응용하여 게시판 api에 보안 기능을 추가해보자. 가장 기본적이지만 중요한 보안으로, 파이어베이스에 등록된 사용자만 api 요청을 할 수 있도록 한다. 파이어...

클라우드 응용 지난 웹프로젝트 7번번에서는 파이어베이스 클라우드 함수를 사용하여 서버 구축 없이 api 서버를 제작하는 방법을 배웠봤다. 이 api 서버를 조금 더 체계적으로 만들어보자. node express와 통합 파이어베이스 클라우드 함수는 다양한 언어를 지원하는데, 만약 이 블로그처럼 Node.js(자바스크립트)를 사용하여 구현한다면 no...

1주일 쉰다고 했는데 3주일이나 쉬어버렸다. 그동안 얄팍한 CSS 지식으로 홈페이지를 이것저것 다듬어봤다. 바뀐점 UI 가독성을 향상시켰다. 뭔지는 보면 안다. 모바일용 반응형 웹페이지를 구현하였다. 카테코리 기능을 추가했다. 등등…(이스터 에그처럼 찾아보길) Jekyll now 테마가 다소 가독성이 떨어져 개선할 생각을 예전...

1주일 쉰다. 이상이다.

api 서버와 클라우드 함수 파이어베이스 클라우드 함수를 사용하면 서버를 구축하지 않고도 api를 구현할 수 있다. 무슨 말이냐면, 지난번까지는 node express를 사용해 api 서버를 구현했다. 이 서버는 클라이언트(여기서는 웹 페이지)에서 api 형태로 넘어오는 모든 요청을 꾸준히 처리해야 하니 24/7 내내 돌아가야 한다. 365일 24...

댓글창 만들기 이번에는 클라이언트에 댓글 시스템을 추가하고, 휴대폰에서 클라이언트에 접속해 댓글을 보내면 컴퓨터에 알림이 오도록 구현해보겠다. TossoDetails.tsx에 아래와 같이 댓글창을 만들자. ({isEdit?...} 바로 아래에) <div className={styles.commentsContainer}> <...

fcm 메세지 보내는 방법2 지난 시간에 api 서버를 만들고, fcm 메세지를 보내는 api를 제작해보았다. 서버에서 토큰과 메세지를 받아 fcm 서버로 전송하는 원리였는데, 이번에는 최신 fcm 메세지 보내는 방법을 알아보겠다. http v1 URI 사용하기 사실 지난 시간에 사용한 URI https://fcm.googleapis.com/fc...

서버 보통 웹 프로젝트를 만들 때는 서버를 두 개 사용한다. 하나는 웹 서버로, 웹페이지(클라이언트)가 돌아가는 서버이다. 페이지를 보여주고 클릭 이벤트 같이 클라이언트단에서 처리되는 기능을 담당한다. 쉽게 말해 리액트 프로젝트에서 작성한 코드들은 전부 웹서버에서 돌아간다고 보면 된다. 리액트 프로젝트에서 npm run dev를 하는 것이 바로 웹...

서버 만들기 이전 시간에 푸쉬 알림구현을 만들어보았다. 이번에는 node.express 서버를 만들어 api 형태로 푸쉬알림을 전송하는 기능을 만들어보겠다. 아참, 프로젝트 폴더 디렉토리 구조가 조금 바뀌었다. 난잡한 디렉토리 구조를 정리하느라 조금 바뀌었는데, 참고하길 바란다. 이해를 돕기위한 이전 대조군 여기에 들어가면 코드 전문을 볼 ...

fcm으로 푸쉬알림 보내기 지금까지 우리는 파이어스토어를 활용해서 초간단 메모장 서비스를 구현해보았다. 여기에 부가 기능을 넣어서 알림 메세지가 오도록 하는 서비스를 만들어보자. fcm 활성화하기 파이어베이스에 있는 FCM1을 활용하면 알림 서비스를 구현할 수 있다. 다시 한번 파이어베이스 콘솔에 접속해보자. 프로젝트에 접속한 뒤, 프로젝트 개...