728x90 반응형 분류 전체보기362 네트워크 기초 정리 - 데이터 단위 Stream User모드 Application Process(즉, socket) 수준에서의 데이터 단위를 Stream이라 합니다. Stream 데이터란 시작점은 존재하지만 끝은 알 수 없는, 일렬로 쭉 널어진 데이터를 의미하며, process는 File에 stream 데이터는 Write하게 됩니다. (ex Word 문서 작업을 하며 글을 쓸 경우, 글자를 입력하는 만큼 파일 크기가 커짐) Segment stream 데이터가 Kernal로 이동해 TCP를 만날 때 Stream 데이터는 일정 길이로 분해되는데, 이를 segmentation이라 합니다. 추가적으로 이렇게 분해된 조각 하나하나의 데이터 단위를 Segment라 합니다. 이 때 Stream 데이터가 분해되는 일정 단위의 길이는 TCP 수준에서의 최.. 2024. 2. 19. 24.02.11~24.02.18 업무 Admin 페이지 인증 기능 개발 jwt 토큰을 사용한 인증 기능을 구현했다. server action을 통해 로그인, 로그아웃 등의 과정에서 server 측 동작(Cookie 제어)을 수행했고 middleware를 통해 각 요청 적 access token의 만료 여부와 재갱신 로직을 구현했다. next js 13 업데이트 이후, 처음으로 실 서비스에 해당 기능들을 적용해 본 것이었는데... 그간 웹 프론트엔드 개발을 하며 느꼈던 불편함이나, '이런 기능이 있으면 어떨까'하는 아쉬움을 정확이 긁어주는 듯한 느낌을 받았다. 개인적으로 직관성이 굉장히 떨어진다 느꼈던 getServerSideProps, getStaticProps, getStaticPaths 등의 예악어들이 사라진 것도 좋았고, 해당 기.. 2024. 2. 18. [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. 24.02.04~24.02.11 업무 extension 아키텍처 설계 지난주 업무의 연장! extension UX 개선본 와이어프레임에 기반해, 애플리케이션 아키텍처를 설계했다. extension service 기준 모듈 구조 extension 개발 특성상 각 서비스 별로 사용되는 자원들이 크게 달랐고 이를 반영해 각 자원들을 background(service worker), content script, pop up, sidepanel의 네 가지 구성 요소로 나누었다. 2개 이상의 서비스에서 사용되는 공통 모듈(api, interface, hooks, module, service 등)들을 제외한 나머지 자원들은 해당 서비스 내 폴더에 위치 + 서비스 내부에서만 사용한다는 원칙을 세웠고, 이를 통해 ver 1 extension을 개발할 .. 2024. 2. 11. [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. 24.01.28~24.02.04 업무 core package 이관(!) 서비스 제공에 필요한 공통 요소들을 제공하는 kit 패키지가 있었다. 첫 개발 당시에는 협업 기업의 요구사항을 빠르게 반영하기 위해 하드코딩에 가까운 형태로 개발했었다. 하지만 점차 코드가 늘어나면서 데이터 흐름을 파악하기가 힘들어졌고, MVC 패턴을 이용한 리팩토링으로 이를 해결했다. 하지만 이 역시, 기능들이 늘어나면서 view와 model이 점차 늘어나 controller가 지나치게 복잡해졌고 결정적으로 react로 작성된 extension에서 동일한 역할의 컴포넌트와 hooks를 재사용하지 못한다는 문제가 있었다. 따라서 이를 해결하고자... 1) 단일 패키지를 각각 공통 패키지와 server script용 패키지 두 개로 나누었고 2) script 번들링을.. 2024. 2. 4. [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. 이전 1 ··· 7 8 9 10 11 12 13 ··· 41 다음 728x90 반응형
