본문 바로가기
728x90
반응형

분류 전체보기362

24.03.10~24.03.17 업무 신규 기능(Trigger ) 관련 버그 수정 offset width, height 계산 관련 오류 target element의 너비, 높이를 정확하게 계산하지 못해 올바른 곳에 요소가 위치하지 못하는 버그가 발생했다. 문제는 대부분의 상황에서는 잘 동작하는데, 개발자 도구를 켰을 때, 화면 우측 요소를 타겟팅할 때 등 알 수 없는 케이스에서만 이러한 일이 발생한다는 것! 이런저런 방향으로 디버깅을 한 결과... target element 너비 높이를 계산하기 위해 사용한 hooks에서 callback ref의 호출 시점이 painting이 완료된 시점과 달라 해당 문제가 발생했음을 알 수 있었다. → callback ref에서 대상 element의 너비, 높이가 변하지 않을 때까지 해당 함수를 호출.. 2024. 3. 17.
[next js] App Router Fetch Cache가 동작하지 않을 때 Data Fetching https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating Data Fetching: Fetching, Caching, and Revalidating | Next.js Learn how to fetch, cache, and revalidate data in your Next.js application. nextjs.org Next js App router는 fetch web api를 확장, caching, revalidating 등의 기능을 제공해 각 요청을 자동으로 memoize 할 수 있도록 합니다. async function getData() { con.. 2024. 3. 11.
24.03.03~24.03.10 업무extension 피드백 개선1달간 기존 익스텐션 개선 + Admin 페이지 작업을 했고, 결과물을 POC 기업(B사, series A)에 전달했다. 해당 기업으로부터 피드백을 전달받았는데 오류도 있었고, 추가적으로 개발할 기능도 있어서 해당 부분을 작업했다. 내가 담당했던 Admin 페이지의 경우, 페이지 접속 자체가 안 되는 이슈가 있었는데 알고 보니 특정 query 작업 시 DB transaction에 문제가 있어 백엔드 서버 자체가 죽어버리는 상황이었다. BE 개발자분이 열심히 수정하시는 사이... 나 역시 로그인 관련 의도치 않은 버그를 발견해, 이를 고쳤다. Next js로 구성한 Admin 페이지에서는 구글 소셜 로그인 후 자체 서버로부터 발급받은 Access token과 Refresh .. 2024. 3. 10.
localhost fetch시 ECONNREFUSED 에러 해결하기 문제 상황 Next JS server component에서 로컬 개발 서버(ex localhost:8080)로 fetch를 통해 요청을 보내자 다음과 같은 에러가 발생했습니다. Internal error: TypeError: fetch failed at Object.fetch Cause: Error: connect ECONNREFUSED ::1:3004 개발 환경은 Next JS 14 버전(즉 node 18.17.0 이상). 해결 방안 처음에는 프론트단의 문제(혹은 Next server component의 문제..?)라 생각을 했었는데 fetch API 단에서 에러가 나는 걸 보고, 바로 구글링에 착수. 다음과 같은 이슈를 만날 수 있었습니다. https://github.com/node-fetch/nod.. 2024. 3. 7.
esbuild 번들링 시 환경변수 관리하기 문제 상황 현재 사내 서비스는 자체적으로 개발/배포하는 github private package를 사용하고 있습니다. 해당 패키지에서는 각 운영 환경에 따라 달라지는 값들이 존재하는데... // some-module.ts class Module { // private BASE_URL = 'https://production.com'; // private BASE_URL = 'https://development.com'; } (대표적으로, 개발 OR 배포에 따라 end-point인 server 주소가 달라지는 모습) 이러한 값들을 개발자가 배포 시 일일이 변경해 상당한 비효율이 발생했습니다! 즉 개발 환경 배포 시에는 → BASE_URL을 development.com으로 프로덕션 환경 배포 시에는 → BAS.. 2024. 3. 5.
24.02.25~24.03.03 업무 Admin 페이지 기능 개발 및 배포 Hi-Fi 디자인 Hi-Fi 디자인이 지난주 금요일에 나와, 이를 빠르게 반영했다. 현재 우리 팀은 styled-component를 통해 스타일 작업을 처리하는데, 그 과정에서 GlobalStyle과 theme를 적용해 Figma상의 디자인 토큰들과 동일한 결과물을, 빠르게 만들어 낼 수 있게끔 노력했다. 하지만 아직도... 디자인 토큰에 대한 타입 지정, 공통 컴포넌트의 스타일링 범위 및 방법 등에 대한 명쾌한 답을 내리지 못한 상태. → 좀 더 고민하고, 다양한 시도를 해 볼 예정이다! Admin, Script 추가 기능 개발 Admin 웹페이지 내 미비 기능과 (publish, CRUD, 하위 정책 반영 등) Script 실행을 위한 패키지 내 수정 사항을.. 2024. 3. 3.
24.02.18~24.02.25 업무 1. Admin 기능 개발 guide, workspace 관련 CRUD 기능을 개발했다. 2. 시스템 테스트 staging 환경에서 시스템 테스트를 진행했다. 개발을 하다 보면 local에서는 동작하는데, 배포 환경만 가면 에러가 나는 기현상을 맞이하게 된다. 물론 대부분이 개발자의 탓이고, 이런 일이 발생하지 않도록 하는 것이 최우선이지만... 개발 환경과 배포 환경의 차이와 문제 사항을 빠르게 찾아내는 것 또한 하나의 방법! 따라서 목표한 개발 사항을 완료하지 못했더라도 현재까지의 모든 개발 결과물을 staging에 배포하고, 배포된 staging 환경에서 각 서비스 간(Admin Extension Server) 시스템 테스트를 진행했다. 인수 테스트 전, 자체적인 테스트 단계를 수행했다는 건 .. 2024. 2. 25.
전방 십자인대 재건술 2달 차 후기 (목발 안녕!) 수술한 지 2달 차. 드디어 목발을 뗐다! 밖에 나갈 때만 보조기를 착용하고, 집에 있을 때는 맨다리로 뚜벅뚜벅. 처음 목발 없이 걸었을 때는 아기 망아지가 처음 걷는 것 마냥 휘청휘청. 수술한 부위가 아파서보다 허벅지 근육이 빠져 몸을 지탱하지 못해 나도 모르게 절뚝이며 걸을 때가 많았다. 습관이 돼서는 안되기에, 의식적으로 허벅지에 힘을 주고 걷는 중! 현재 수술 2달+1주일이 지났는데, 아직은 출퇴근을 하며 걸을 때 무릎이 시큰시큰할 때도 있다. 하지만 뭐랄까, 생각보다 금방 몸이 돌아오는 게 느껴진다! 하루하루 걷는 게 익숙하고 자연스러워지는 듯한 느낌. 어색하게나마 계단도 오르락내리락할 수 있고, 수술한쪽 다리로 잠깐 버티며 서있는 것도 가능하다. (서서 양말 신고 벗기가 가능하다는 뜻. 와!!.. 2024. 2. 22.
네트워크 기초 정리 - 네트워크 인터페이스 선택 원리와 기준 네트워크 인터페이스 선택 원리와 기준 Process가 Socket을 열어 바인딩할 TCP/IP를 어떻게 결정하는가? → 이는 여러 개의 Network Interface 중 무엇을 선택할 것인가 하는 질문으로 이해할 수 있습니다. (이를 결정하는 것을 Swiching이라 하는데, Swiching을 좀 더 추상화한 질문) 응용 프로그램이 소켓을 개발할 때 IP 주소를 특정하지 않는다면, OS 수준에서 임의로 IP를 선택하며 이때 선택 기준은 (여러 가지가 있지만 PC 한정) → Routing 경로 계산 시 가장 비용이 적은 Network Interface 입니다! 이때 해당 비용 = Metric 으로 이해할 수 있으며 각 OS, 제조사 별로 Metric을 선정하는 공식이 정해져 있습니다. https://ww.. 2024. 2. 20.
728x90
반응형