Large Rainbow Pointer
반응형
[Next.js] 채널톡 연동하기 구현 (feat. app router, typescript)
💜 리액트/Next.js2024. 8. 28. 11:36[Next.js] 채널톡 연동하기 구현 (feat. app router, typescript)

시작하며...이번 프로젝트에서 직접 사용자들의 피드백을 받는 베타 테스트를 진행하기로 했다. 유저들의 피드백을 구글폼이나 디스코드로 받으려고 했는데 일단 접근성이 낮고 유저 입장에서는 귀찮을 거 같다는 우려가 있었다. 좀 더 간편한 방법으로 유저들이 피드백을 줄 수 있는 방법이 없을까? 하고 여러 사이트를 돌아다니면서 본 결과 "채널톡" 을 운영하는 것을 보게 되었다. 그래서 "채널톡" 을 프로젝트에 구현하게 되었고 이를 적용한 방법에 대해 글을 작성하게 되었다. 채널톡 적용하기공식문서채널톡 공식문서에 적용하는 방법이 자세히 적혀있다.https://developers.channel.io/reference/web-quickstart-kr#single-page-application 시작하기이 문서에서는 Ja..

[Next.js] Server Sider Rendering 특정 사용자 접근 제한 (feat. App Router)
💜 리액트/Next.js2024. 8. 11. 17:25[Next.js] Server Sider Rendering 특정 사용자 접근 제한 (feat. App Router)

시작하며...게시물 수정 페이지 같은 경우 해당 게시글을 작성한 사용자만 수정이 가능하다. 그래서 작성자에게만 수정 버튼이  렌더링 되지만 만약 그렇지 않은 사용자가 주소창을 통해 강제로 수정 페이지로 이동하였을 때, 해당 게시글의 작성자가 아니면 접근을 하지 못하게 막아야 된다. Next.js Server Side Rendering 에서 이를 구현하는 방법에 대해 알아볼 것이다. 구현 방식현재 로그인한 유저의 user id 와 게시물을 작성한 user id 를 비교해서, 다르면 not found 페이지로 이동시킨다. 로컬 스토리지서버 사이드 렌더링은 서버에서 페이지를 렌더링하며, 브라우저 API 인 document, window 등 객체에 접근할 수 없다. 그래서 로컬 스토리지 같은 경우 브라우저에서 ..

반응형
image