feat(fe): use secret manager for token & make next route for instagram data#3012
feat(fe): use secret manager for token & make next route for instagram data#3012
Conversation
|
The preview deployment is ready. 🟢 Open Preview | Open Build Logs Last updated at: 2025-08-23 05:56:54 CET |
|
✅ Syncing Preview App Succeeded Application: |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
✅ Syncing Preview App Succeeded Application: |
dotoleeoak
left a comment
dotoleeoak
left a comment
There was a problem hiding this comment.
지금 /api 경로는 백엔드 API로 라우팅이 설정되어있기 때문에... Next.js API route를 쓰는 게 불가능한 건 아니지만 특별한 이유 아니면 안 쓰는 걸 추천합니다. 제 생각에는 (1) server action 쓰거나 (2) 아예 backend API를 새로 두는 게 더 합리적인 거 같네요.
|
근데 이거 애초에 api route든 server action이든 사용해야할 이유가 뭘까요...? |
|
@w0uldy0u 그냥 ssr하면 api 토큰이 브라우저에 다 노출돼서... 토큰 처리는 서버 쪽에서 처리해야합니다 |
그냥 ssr 하면 api 토큰이 브라우저에 노출 된다는게 잘 이해가 안되는데.. 토큰이 필요한 Instagram API fetch는 서버에서만 하고 그 응답으로 렌더링해서 결과(HTML)만 내려주면 되는데 클라이언트 쪽에 토큰이 노출될 이유가 있나요? |
|
@w0uldy0u Next.js에 렌더링 방법이 여러가지가 있는데, 그중 SSR은 말은 'Server-Side Rendering'이지만, 서버에서 모든 렌더링을 마치고 html을 브라우저로 반환하는 게 아니라, 일부 html만 반환한 뒤 브라우저에서 다시 전체 자바스크립트 코드를 실행하는 방식입니다. 쉽게 말해 똑같은 자바스크립트 코드가 서버랑 브라우저에서 두 번 실행되죠. 이렇게 하는 이유가 브라우저에서 자바스크립트 실행을 안하면 하지만 동적 상태 관리가 필요 없는 컴포넌트에서는 굳이 브라우저 측에서 자바스크립트 실행이 필요 없으니까 서버에서 반환한 html만 static하게 보여주는 방식이 필요해졌고, 이게 react 18에서 출시한 server component입니다. 이걸 쓰면 서버 쪽에서만 코드가 실행되고 클라이언트는 노출이 안되죠. Next.js에서 예시로 드는 db 쿼리 호출 작업 같은 예시도 전부 server component 덕분에 가능합니다. 그래서 SSR을 쓴다고 함은 fetch나 AWS SDK가 브라우저에서도 실행될 거고, 그러면 관련된 토큰 값들도 쉽게 노출이 되겠죠. 관련 개념들은 'CSR vs SSR vs RSC' 이런 식으로 찾아보면 좀 나올 거라 읽어봐도 좋을 것 같습니다. |
|
말씀하신 instagram API fetch를 서버에서만 실행하는 게 server action이랑 같은 접근이 됩니다 |
|
SSR 하자고 한게 서버컴포넌트 사용을 의미한거였는데.. Next에서 SSR하려면 결국 그냥 서버 컴포넌트 사용하는거라고 알고있었는데 아닌가여? 그러니까 어쨌든 서버 컴포넌트를 사용하면 클라이언트 사이드에 토큰 노출이 안되는건 맞는거져...? 저 어제 테스트해본다고 https://spacekim.org 여기다가 그냥 서버컴포넌트로 해놨는데 토큰 털리는거 아니죠....?;; |
|
@w0uldy0u 음... 좀만 확실하게 짚고 넘어가면 일단 SSR이랑 server component는 다릅니다. Next.js의 client component도 SSR로 렌더링 되고, server component는 통용되는 SSR이랑 조금 다릅니다. SSR은 hydration이 꼭 들어가지만 server component는 hydration이 없습니다. Server component를 의미하신거면, 구현될 instagram card 컴포넌트가 client 쪽 state를 필요로할지 아닐지는 모르겠지만, state가 없다면 충분히 가능한 접근 같습니다. 저는 instagram card가 어떻게 구현될지 모르고 client component라는 전제로 댓글을 남기긴 했어서, server component로 구현 가능하다면 제일 간단한 구현이 될 것 같네요. |
|
헉쓰.. 클라이언트 컴포넌트가 ssr이 되는줄은 상상도 못했네요 @Clover229 한줄요약하자면 [_components/InstagramCards.tsx] 얘를 서버컴포넌트로 해서 여기서 fetch하게 하면 api route가 필요없지 않을까요! |
|
아이ㅜ어려웡 |
|
아 백엔드에서 쓰고 있었군요.. 그러면 서버컴포넌트 만들어서 옮겨놓겠습니다 |
Clover229
left a comment
Clover229
left a comment
There was a problem hiding this comment.
@dotoleeoak 그런데 웹훅으로 알림을 받으려면 app/api/revalidate-instagram 처럼 고정된 url이 있어야 한다고 하더라구요.. 이것만 만들고 데이터 가져오는 로직을 서버 컴포넌트로 빼는거 어떤가요?
|
✅ Syncing Preview App Succeeded Application: |
|
@Clover229 혹시 webhook이 어떤 목적으로 쓰이나요? |
|
@Clover229 인스타그램 토큰 revalidate하는 용도인가요? 그렇다면 저는 next.js에서 하는 것보단 aws secret manager에 lambda 연결하는 편이 좋을 것 같아요 |
앗 아니요 웹훅은 인스타 게시글이 올라왔을 때 알림을 받으려고 했어요! 데이터를 받아와서 캐시에 저장하고 있다가 웹훅 알림 받으면 다시 데이터 받아오려구요~ |
|
✅ Syncing Preview App Succeeded Application: |
…2-get-Instagram-Token
…ng/codedang into t1912-get-Instagram-Token
|
✅ Syncing Preview App Succeeded Application: |
|
✅ Syncing Preview App Succeeded Application: |
Clover229
left a comment
Clover229
left a comment
There was a problem hiding this comment.
revalidate 은 나중에 배포하고 검증할게요!! 엔드포인트 codedang.com 넣어야해서 지금은 검증이 어렵네요
5 participants
Description
Additional context
closes tas-1912
Before submitting the PR, please make sure you do the following
fixes #123).