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을 활용하면 알림 서비스를 구현할 수 있다. 다시 한번 파이어베이스 콘솔에 접속해보자. 프로젝트에 접속한 뒤, 프로젝트 개...

Next.js와 파이어베이스 연동 이번 시간에는 구글에서 제공하는 모바일 및 앱 개발 api1 서비스인 파이어베이스를 Next.js에 연동하여 간단한 메모장 서비스를 구현해보겠다. 이 사이트를 참고하여 제작했음을 밝힌다 준비물 typescript 템플릿으로 설치한 next.js 프로젝트 npx create-next-app 프로젝트이름 --ty...

타입스크립트를 사용한 Next.js 실습준비 앞전에 말했듯이 이제 타입스크립트를 사용하여 시중 웹 페이지를 모방해보는 리액트 프로젝트를 진행하겠다. 참고로 리액트는 이전 포스트에서 말했듯이 웹 페이지 개발을 쉽게 해주는 도구라고 보면 된다. 이 책을 다소 참조했습니다. 리액트 프로젝트 생성 여기를 한번 참조해보자 노드 JS를 다운로드한...

배경지식? 다들 알다시피, 자바스크립트는 원래 웹 클라이언트 개발을 위해 태어난 언어이다. html(뼈대)/css(살)/javascript(영혼) 이 3박자가 맞춰져서 웹 페이지가 우리에게 보여지는 것이다. 그런데 예전에 어떤 용자가.. 이 언어 괜찮은데? 이걸로 웹 서버도 개발하면 좋겠다 라 생각해 이걸로 웹서버를 제작할 수 있게 하는 개발...