하리하링웹

Node의 기본 fetch를 사용하여 크롤링을 시도할 경우 요청이 차단되는 경우가 있다. 대표적으로 네이버의 검색이나 리뷰에 대한 크롤링을 시도할 때 이를 확인할 수 있다. 아래는 크롤링 요청 예시 코드이다.import fs from "fs";fetch("", { headers: { accept: "text/html", "accept-language": "ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7", "sec-ch-ua": '"Chromium";v="128", "Not;A=Brand";v="24", "Google Chrome";v="128"', "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_..

docker-compose 파일 생성# docker-compose.yamlversion: '3.8'services: mongodb: image: mongo:latest container_name: mongodb restart: always ports: - '27017:27017' volumes: - ./data/db:/data/db environment: MONGO_INITDB_ROOT_USERNAME: root MONGO_INITDB_ROOT_PASSWORD: examplepackage.json에 실행 명령어 등록, 테스트"scripts": { "dev": "next dev", "build": "next build", ..

개요React 디버깅을 돕는 Chrome 확장 프로그램 React Developer Tools는 분명히 편리한 도구이다. 이 확장 프로그램을 사용하면 어떤 부분에서 re-rendering이 발생하는지, 어떤 컴포넌트의 렌더링에 얼마나 시간이 걸리는지를 쉽게 파악할 수 있다. 하지만, React Developer Tools는 정확한 성능 측정에는 오히려 문제가 될 수 있다는 사실을 발견하였다. 최근, 매우 큰 테이블을 다루는 작업 중 최악의 성능 환경에서 성능 최적화를 진행한 적이 있다. DOM 크기가 매우 커진 상황에서 element.focus() 요청 시, 예상보다 훨씬 속도가 느려지는 현상을 발견했다. memoization 적용, 렌더링 관리, 상태 분리, 알고리즘 최적화 등 성능 향상을 위한 다양한..

immer란React에서 상태의 불변성은 성능에 큰 영향을 미친다. 상태가 불변하게 유지되면 React는 변경된 부분만 효율적으로 다시 렌더링할 수 있기 때문에 성능 최적화가 가능해진다. 하지만 불변성을 수동으로 관리하는 것은 번거로울 수 있는데, 이때 immer 라이브러리는 개발자가 불변성을 유지하는 데 신경을 많이 쓰지 않더라도 이를 쉽게 관리할 수 있도록 도와준다. immer는 프록시(proxy)를 사용하여, 객체나 배열을 직접 수정하는 요청을 가로채어 새로운 객체에서 해당 요청을 작업한다. immer의 핵심 함수인 produce는 두 가지 인자를 받는데, 첫 번째는 원본 상태, 두 번째는 상태를 변경하는 콜백 함수이다. 이 함수 내에서 원본 객체는 수정할 수 있는 것처럼 보이지만, 실제로는 프록시..

개요Vercel에서 몇 년 전부터 개발해온 웹 디자인 및 개발 도구인 v0.dev이라는 제품이 있다. 처음 출시되었을 때는 크게 눈에 띄지 않았지만, 최근 사용성이 크게 향상되었다는 소식을 듣고 테스트용으로 사용해보니 놀랄 정도로 훌륭하다는 생각이 들어 이렇게 소개하게 되었다. 사용법은 매우 간단하다. 첫 페이지에 접속하면 ChatGPT처럼 채팅 형식으로 원하는 요청을 입력할 수 있게 되어 있어 누구나 쉽게 사용할 수 있다.  단순하게 채팅으로 요구사항을 요청해도 잘 동작하지만 간단한 그림과 함께 요청한다면 정말 알아서 페이지를 다 만들어준다. 아래는 실제로 테스트한 내용이다.실제 사용 모습요청 사항딜리버리 메이트라는 회사에서 점심, 저녁에 배달을 같이 시켜먹을 파티원을 모집하는 웹 프로젝트를 만들거야아..

이전 글 https://jjongsk.tistory.com/entry/Instagram-Crawler-Deployment-Using-AWS-Design Instagram Crawler Deployment Using AWS: DesignOverviewI was given the job of deploying an Instagram crawler using the GPT API to ensure stable operation for a side project currently in progress. The crawler itself has been fully developed by the PM I'm collaborating with, andjjongsk.tistory.com  개발 요구사항볼드 처리된 요구..

2편(CLI 구축) 보러가기https://jjongsk.tistory.com/entry/frontend%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%B4%EB%B3%B4%EA%B8%B02CLI 프론트엔드 전체 테스트 환경 구축해보기(2.CLI)1편(설계) 보러가기https://jjongsk.tistory.com/entry/1%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA..

개요기술 블로그, 시니어 개발자 내가 최근들어 가장 많이 생각하는 주제들이다. 글로 쓸정도의 내용인지는 잘 모르겠지만 나조차도 아직 내가 이것들에 대해 어떻게 생각하는지 제대로 정리해본적이 없기에 나 스스로를 위해 그리고 앞으로를 위해 이를 글로 정리해보려고 한다. 기술 블로그나는 작년부터해서 기술블로그를 열심히 쓰고 있다. 처음 시작은 어색하고 억지로 쓰는 느낌이였지만 지금은 습관이되어 일주일에 한 개 정도는 기술블로그를 작성하지 않으면 성에 안차는 느낌을 받는다. 기술블로그란 뭘까? 내가 왜 기술블로그를 열심히 쓰기로 결정했을까? 이제부터 그 이유와 나의 생각들을 적어보겠다.개발자가 외부에 자신을 표현할 수 있는 방법은 대표적으로 두 가지가 있다고 생각한다. 한 가지는 깃헙이고 나머지는 기술블로그이다..

1편(설계) 보러가기https://jjongsk.tistory.com/entry/1%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%B4%EB%B3%B4%EA%B8%B0%EC%84%A4%EA%B3%84 프론트엔드 전체 테스트 환경 구축해보기(1.설계)서론본격적으로 글을 작성하기에 앞서 요즘 하는 생각들을 주저리주저리 적어보자면, 고민이 이만저만이 아니다. 현재 회사가 마음에 들고 커리어적으로 엄청난 성장을 할 수 있을 것 jjongsk.tistory.com  위 글에서 설계를 완료했으니 이제 다음 단계인 cli쪽..

배포 도구AWS AmplifyAmplify는 개발자가 좀 더 간단하게 코드를 배포할 수 있는 방법을 제공한다. 풀 스택 개발 팀원 모두가 Amplify CLI 또는 브라우저 기반 Studio 등의 도구로 협업할 수 있다.Amplify를 통해 데이터 베이스, 스토리지, 권한 인증 등 완벽한 리소스를 구현하고 UI 디자인도 가능하다.CloudFormation 등의 서비스와 통합해 상용화 준비단계 및 상용화 단계에 맞는 배포 환경을 제공한다. Amplify 프로젝트 환경은 템플릿으로 export 한뒤 DevOps 도구에 재배포 할 수 있다.AWS Serverless Application RepositoryAWS Serverless Application Repository는 관련 리소스를 재구성해 새로운 요구사..