728x90 반응형 source-code229 [next js] app directory에서 token 저장하기 next js 13 버전에서 app directory가 등장하면서,app directory내 모든 컴포넌트들은 기본적으로 server component로 동작하게 되었습니다.https://nextjs.org/docs/app/building-your-application/rendering/server-components Rendering: Server Components | Next.jsLearn how you can use React Server Components to render parts of your application on the server.nextjs.org이러한 React Server Component(RSC)는 말 그대로 서버에서 실행되기 때문에기존의 Client에서 실행되던 컴포넌트(.. 2024. 2. 13. [next js] server component로 httpOnly cookie 접근하기 현재 저희 서비스는 1) next 14로 구성한 admin 페이지에서 로그인 2) 로그인을 통해 access token, refresh token 발급 3) extension 내 API 요청 시 발급받은 access token을 함께 전달 위 flow를 통해 사용자를 인증하고, 적절한 권한을 부여하고 있습니다. admin 페이지에서 로그인 성공 시 발급받는 token들은 모두 cookie에 저장되어 있는데, 이 경우 3) extension에서 API 요청 시 token 전달을 구현하기가 불가능하다는 문제가 있었습니다. 그 이유로는 extension을 사용 중인(요청이 보내지는) 페이지 도메인과 cookie를 발급받은 서버 도메인이 다를 수밖에 없기 때문입니다. extension을 켜둔 상태로, 사용자가 .. 2024. 2. 6. 네트워크 기초 정리 - Switch, Switching Switch Host는 네트워크에 연결된 컴퓨터 를 의미합니다. 이 중 network 이용 주체로서의 Host를 End-Point(ex Client, Server)라 하며, network 자체를 이루는 Host를 Switch라 합니다. Switching 이러한 Switch가 하는 일이 → Swiching 입니다. 기본적으로 Switching은 경로(or 인터페이스) 선택 을 의미합니다. Internet을 고속도로로 비유한다면, 각 교차로는 Router라 할 수 있으며(Router는 L3 Switch의 일종, 기본적으로 L3 Swiching을 수행) Router들은 연결된 선(=네트워크 인터페이스)을 통해 가장 효율적으로 목적지에 도착할 수 있는 경로를 파악하는데 이것이 Swiching을 의미하는 것이죠!.. 2024. 2. 5. [chrome extension] 에러 핸들링 1. No active side panel 에러 chrome.sidePanel.open({ tabId }); sidePanel open api를 호출했을 때 No action side panel 에러가 발생했습니다. await chrome.sidePanel.setOptions({ tabId, path: "sidepanel.html", enabled: true, }); chrome.sidePanel.open({ tabId }); setOptions 후 open을 호출해 해결할 수 있었습니다. 2. popup에서 sendMessage를 통한 sidePanel 열기 popup을 클릭했을 때 sendMessage를 호출하고, background.js에서 해당 message를 수신했을 경우 side panel을 .. 2024. 2. 2. [chrome extension] side panel 사용하기 1. cusom side panel과 문제점 현재 저희 회사는 chrome extension을 이용해 서비스를 제공하고 있습니다. 사용자는 현재 자신이 보고 있는 웹 페이지를 조작해 특정 서비스를 이용할 수 있는 형태입니다. 이때 자신이 제어한 항목 등을 좌측 side panel에서 보거나 선택할 수 있습니다. 그런데 여기서 문제가 발생합니다. extenion 영역에 존재하는 side panel은 position이 fixed이기 때문에, 사용자가 보고 있는 웹 페이지를 덮을 수밖에 없다는 것이죠! 물론 panel을 absolute로 두고 사용자 페이지 style을 조작해, 억지로 panel 영역을 밀어낼 수도 있습니다. (실재로 margin, transition 등의 속성을 사용해 이를 구현했습니다) 하.. 2024. 2. 1. 네트워크 기초 정리 - SW 개발자 관점의 Port 번호 Port 번호란? 2024.01.02 - [source-code/network] - 네트워크 기초 정리 이전에 학습한 것과 같이 Process가 kernal의 구성 요소를 애플리케이션 수준으로 추상화할 때 File 형태의 interface를 사용하며 이때 추상화 대상이 TCP/IP와 관련된 경우, 해당 File을 Soket이라 부릅니다. → Port 번호는 이러한 TCP Socket에 attach되는 정보 중 하나입니다! Port 번호 Port 번호는 기본적으로 16bit로 구성됩니다. → 0~65535(2의 16제곱)이 가능한데, 이 중 0과 65535는 사용하지 않습니다. Process 식별자로써의 Port 번호 IP가 192.168.0.1인 host의 경우 해당 host에서 실행된 process a.. 2024. 1. 30. next 14 Amplify 배포 시 crypto 에러 해결 1. 문제 상황 인증 절차에 공개키 알고리즘을 사용하고 있었습니다. server와 client 모두 node 환경이므로, crypto를 사용해 암호화/복호화를 진행했습니다 import crypto from 'crypto'; encrypt(plainText: string, publicKey: string) { const buffer = Buffer.from(plainText); const encrypted = crypto .publicEncrypt(publicKey.replace(/\\n/g, '\n'), buffer) .toString('hex'); return encrypted; } decrypt(encrytedText: string, privateKey: string) { const buffer = .. 2024. 1. 24. Cannot find module 'expo/bin/cli.js' 에러 해결 1. 문제 상황 현재 사내 서비스는 react-native로 작성되어 있다. expo로 프로젝트를 구성한 덕분에, EAS(Expo Application Services)를 통해 build 및 OTA(over-the-air) 업데이트를 진행하는데... 어느 날부터 eas update시 Cannot find module 'expo/bin/cli.js' 에러가 발생했다. node 환경에서 MODULE_NOT_FOUND 에러가 발생하면 → 열이면 열 패키지가 올바르게 설치되지 않았다는 것! 패키지를 다시 설치하거나, package.json 파일이 올바른 경로에 위치하는지를 확인하면 된다. https://stackoverflow.com/questions/64532188/react-native-expo-cli-ca.. 2024. 1. 22. [chrome extension] 익스텐션 설치 여부 감지하기 chrome extension 서비스를 제공할 경우, 웹 페이지에서 해당 extension이 브라우저에 설치되었는지 감지해야 하는 경우가 발생한다. (익스텐션이 설치되지 않았다면, chrome extension store로 이동해 설치 유도 등) 구글링을 해보면, 일반적으로는 아래와 같은 방법들이 사용된다.1. extension에서 DOM을 조작해 감지extension에서 문서를 조작하고, 웹 페이지에서는 해당 문서가 조작되었는지로 판단하는 방식! extension이 설치된 경우, manifest.json의 content_scripts 속 파일이 실행된다. // manifest.json { "content_scripts": [ { "js": ["content.js"], } ] } js 파일이 실행되므로,.. 2024. 1. 18. 이전 1 2 3 4 5 6 7 8 ··· 26 다음 728x90 반응형
