인기글

• TIL 크롤링용 API 제공을 위한 API ROUTE 트러블 슈팅 기록 (Nextjs) API를 제공하는 Nextjs 기능. 백엔드에서 별도 API를 만들 필요 없이, 기존 API를 조합해서 프론트에서 새로운 API를 제공할 수 있다는 장점이 있어 개발수행사 측에서 크롤링 업체에 제공하는 API를 API Route로 만들었다.(급하게..) 이슈 상황 다만 기존 api를 사용하는 것이기 때문에 api에 필요한 uuid 발급절차가 필요하고 최초 진입시 401 에러 발생은 불가피하나, 모든 호출 시 401 에러로 떨어지는 현상이 있었다. 네트워크 상 304 error 로컬 확인 시 API resolved without sending a response for /api/data, this may result in stalled requests. 해당 에러가 찍혀있는 것을 확인하였다. 모든 api ..

• 

  TIL [Git 활용 및 devops / mlops] 로컬 개발 머신에서 Docker 이미지를 만들고 테스트하기 (feat. nginx) 도커에 대해 차근차근 알아가기 위해 로컬에서 live server로 실행해봤던 html,js,css 파일들로 구성된 간단한 파일들을 nginx로 띄우고 도커에서 nginx 이미지를 만들어 테스트해보려고 한다. brew install nginx #nginx 설치 nginx -t #configuration file 위치 여기서 nginx.conf 파일에서 location root를 내 개인 프로젝트 경로로 바꿔주고 nginx #서버 실행 서버를 실행하면 localhost:8080에서 잘 나오는 것을 볼 수 있다. 사실 로컬에서 이렇게 띄워서 결과물을 확인해볼 수도 있지만, 도커에서 띄워 확인해볼 수 있다. 도커 컨테이너의 무수한 장점이 있지만 일단 도커 컨테이너를 사용한다면, 로컬 환경설정을 잡아준다던가 하..

• TIL scroll 이벤트가 발생하지 않는 경우 문제 원인: 팝업 레이어에서 스크롤 이벤트를 감지해서 lazy-loading으로 캐싱된 이미지를 스크롤 시마다 변경해주는 메서드가 발생하지 않음. but 팝업 레이어 바깥에서는 scroll Event가 발생하는 데에 문제가 없었다. 문제원인은 팝업 전체의 overflow: hidden 문제 해결: 내부 내부 레이어단의 height: 100% (overflow-y: auto) 였기 때문에 팝업 레이어 내부에서만 스크롤 이벤트가 발생하는 것이다. 그러나 팝업의 height를 변경하거나 팝업 스크롤 시 바깥의 스크롤이 fire 되는 것은 의도한 바가 아니기 때문에 팝업에 ref를 걸어 scroll 이벤트를 캡처해서 처리하였다. import React, { useEffect, useRef } from 'reac..