하리하링웹

1편 보러가기https://jjongsk.tistory.com/entry/Bun%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%9C-%ED%81%AC%EB%A1%A4%EB%A7%81-%EB%B0%A9%EC%A7%80-%EC%9A%B0%ED%9A%8C (언제 막힐지 모르는)Bun을 사용한 크롤링 방지 우회 방법과 원리(1)Node의 기본 fetch를 사용하여 크롤링을 시도할 경우 요청이 차단되는 경우가 있다. 대표적으로 네이버의 검색이나 리뷰에 대한 크롤링을 시도할 때 이를 확인할 수 있다. 아래는 크롤링 요청 예jjongsk.tistory.com   방법을 딱히 찾지 못해서 좀 오랫동안 작업이 멈춰있었는데 아이디어가 떠올라서 해당 아이디어로 테스트를 진행해보았다. 일단 직접적인 원인은 Co..

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_..

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

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

최근 개발도중 파일 비교 작업을 하고있는데 아무리 봐도 같은 파일인데 자바스크립트상에서 비교시 파일이 다르다는 문제가 발생하였다. 기존에는 아래와 같은 코드로 content를 얻어 사용하고 있었는데 디버깅을 위해 utf8 방식의 디코딩을 사용하지 않고 버퍼 상태 그대로 받아 차이점을 비교해보았다.const content1 = fs.readFileSync(file1.fullPath, 'utf8');const content2 = fs.readFileSync(file2.fullPath, 'utf8'); [결과] const content1 = fs.readFileSync(file1Path); const content2 = fs.readFileSync(file2Path); console.log('file1'..

개요최근 레포지토리가 점점 커지면서 파일의 증가로 인해 전체 빌드 시 간간히 메모리 초과 문제가 발생하여, 빌드 시스템을 리팩토링하는 작업을 진행하였다. 이 빌더는 약 150명의 개발자가 사용하는 회사 전체 프로젝트 배포에 사용되므로, 기존 빌더와의 완벽한 호환성을 유지하는 것이 1순위 목표였고 개발 자체는 후순위였다. 따라서, 테스트 코드를 통해 기존 빌더와의 동기화 유무를 확실하게 잡고 개발을 시작하기로 하였다. 빌더는 내부에서 child_process를 사용하여 멀티 프로세서 환경에서 tsc를 사용한 컴파일과 rollup을 사용한 번들링 과정을 거쳐 빌드 파일을 생성하는 방식으로 동작하고 있었다. 단위 테스트보다는 결과 파일이 동일한지를 확인하는 것이 중요했기 때문에 빌더를 실행 시킨 뒤 최종 결과..

현재 다니고있는 회사에서는 약 100명 정도의 개발자가 단일 저장소에서 코딩을 진행하고 있다. 이러한 복잡한 작업 환경에서는 개발자에 의해 발생할 수 있는 실수나 예측할 수 없는 에러를 방지하는 것이 매우 중요하다. 이에 따라, 객체의 모든 레벨에서 객체의 변경을 방지할 수 있는 방안이 필요했고, TypeScript를 활용하여 DeepReadonly 유틸리티 타입을 만들게 되었다. DeepReadonly 타입은 객체의 모든 프로퍼티를 재귀적으로 읽기 전용으로 만들어, 객체의 불변성을 보장해준다. 프로젝트의 규모가 커질수록 코드의 안정성을 유지하는 것이 중요하며, DeepReadonly 타입은 객체의 중첩된 구조까지 보호함으로써 개발자들이 실수로 객체를 변경하는 것을 방지할 수 있다. 구현 코드 type ..

프론트엔드 개발 직군으로 이직준비를 하며 느낀점에 대한 간단한 글이다. 예전에 약 한 달간 이직을 준비했었는데 이로인해 얻은것이 굉장히 많다고 생각하여 글로 쓰게되었다. 아래는 내가 한달동안의 이직준비와 그 과정에서 얻었다고 생각하는 것들이다. 현재 업계에서 유행하는 기술스택 현재 기업이 원하는 인재 서류작성을 통한 커리어의 방향성 검증 나의 부족한 점 내 코딩 방식에서 잘못된 점 1번 현재 업계에서 유행하는 기술스택 부터 차근차근 말해보자면 일단 현재 대기업들에서 사용하는 프론트엔드 스택들과 내가 사용하는 스택의 차이를 확인할 수 있었다. 이를통해 거의 같은 동작을 하는데 나와는 다른 라이브러리를 기업들이 택한 이유 ex)swr, react-query 제법 유명한데 동작방식을 잘 몰랐던 스택들 ex) ..