귀하의 검색 엔진, Zensearch

더 베닝잉

반응 애플리케이션 구축부터 나만의 검색 엔진 및 색인 생성을 위한 웹 크롤러 구축까지. 사용자로서 원하는 검색 내용을 더 효과적으로 제어할 수 있는 검색 엔진인 Zensearch를 소개하게 되어 기쁘게 생각합니다. 항목을 만들어 다양한 웹 사이트를 크롤링하고 기존 검색 엔진 기능을 계속 사용할 수 있습니다. 이제 저는 이것이 Google이나 Brave Search처럼 세상에서 가장 복잡하거나 정교한 검색 엔진이 아닐 수도 있다는 것을 알고 있습니다. 하면서 최대한 많이 했고, 아, 많이 배웠어요.

모든 것은 내가 좋아하는 인용문을 삽입하거나 특정 페이지에 메모를 추가하는 일종의 흔한 책인 React 웹 애플리케이션을 구축할 때 시작되었습니다. 마치 작성자와 대화하거나 생각하는 내용을 입력하는 것처럼 말이죠. 그 순간 실제 책의 페이지에 해당하는 페이지에서 나쁜 프로젝트는 아니지만 Reactjs 애플리케이션을 구축하는 것이 너무 지루해서 나쁘지는 않지만 아무데도 갈 수 없는 것처럼 느껴졌습니다. 제가 하고 있던 일에는 기술적인 깊이가 전혀 없었고 ReactJs 프로젝트를 구축하면서 아무것도 배우지 못했습니다.

그래서 저는 여러 사용자를 처리할 수 있고 각 사용자가 서로 다른 사용자에 참여할 수 있는 웹 소켓과 같은 자체 애플리케이션 계층 프로토콜을 몇 달 동안 연구하고 구축한 후 컴퓨터 네트워킹, 운영 체제, 컴퓨터 아키텍처 등에 대해 연구하려고 했습니다. 서로 소통할 수 있는 방이나 네임스페이스가 있어서 황홀하고 살아있음을 느꼈습니다. 스레드, 세마포어, 프로세스, 메모리 레이아웃, 인터럽트 신호 등 컴퓨터가 어떻게 작동하는지 이해하는 한 많은 일을 할 수 있을 것 같았습니다. 내가 배웠다고?

아 그리고 저는 독학을 하고 있으며 The Odin Project를 사용하여 프로그래밍과 웹 개발을 배웠습니다. 그 사람들이 저에게 독립적으로 공부하는 방법을 가르쳐 주었고 커리큘럼 내내 프로그래머와 손을 잡는 것을 거부했기 때문에 그 사람들에게 소리를 지르세요. .

도전과제

저는 TypeScript와 함께 기본이 되는 Nodejs를 사용해서만 프로그래밍할 수 있었기 때문에 Nodejs를 사용하여 웹 크롤러를 만들었습니다... 꽤 멍청하죠? 즉, 프런트 엔드에서 소스 URL 배열을 크롤링할 수 있는 크롤러를 만들고 각 크롤러가 추출된 데이터를 데이터베이스로 보낼 수 있도록 하는 것이 계획이었습니다. 우리 모두 알고 있듯이 Yabascript는 단일 스레드이며 모든 비동기 작업이 처리됩니다. Yavascript가 실행되는 환경(예: 브라우저의 apis, node, deno, bun 및 done)에 따라 결정됩니다.

그래서 Nodejs를 사용하여 멀티태스킹 작업을 수행하는 것은 자살행위였습니다. 인코딩할 웹페이지 객체를 8비트 버퍼로 변환하는 것부터 공유 배열 버퍼는 데이터로 인해 64비트 배열 버퍼만 전송할 수 있습니다. 따라서 오프셋 패딩을 추가하여 8비트 버퍼에서 64비트로 변환한 다음 크롤러에서 메인 스레드로 데이터를 보낸 후 64비트 버퍼에서 8비트 버퍼로 다시 변환한 다음 마지막으로 이를 vajascript 개체... 와 그거 재미있네요. 메시지를 전달하는 또 다른 방법이 있지만 이 방법은 크롤러에 있는 것과 동일한 데이터의 복사본을 메인 스레드에 생성하므로 너무 많은 메모리를 차지하기 때문에 그렇게 하고 싶지 않았습니다. .

저는 nodejs의 원자 모듈을 사용하여 경쟁 조건을 처리해야 했고, 오늘날까지도 그 모듈이 어떻게 작동하는지 솔직히 이해하지 못하고 너무 짜증이 나서 Golang을 사용해야 했습니다. 저는 이 언어를 너무 좋아합니다. 세마포어와 대기 그룹을 사용하여 경쟁 조건을 처리하는 스레드를 만드는 것이 너무 쉽습니다. 아직 뮤텍스를 사용할 필요가 없었고 앞으로 배울 수 있어서 기쁩니다. 맥락을 배우는 것이 재미있을 것입니다.

프론트엔드로 넘어가 볼까요? 프론트엔드 마스터가 쓴 이 글을 읽어보신 분 계신가요? 해당 프레임워크가 필요하지 않을 수도 있습니다. 제가 ReactJ가 지루하다고 말한 것을 기억하시나요? 글쎄요, 재사용성과 데이터 바인딩 메커니즘 덕분에 프레임워크를 높이 평가하게 되었습니다.

프런트 엔드에 대해 너무 자세히 설명하고 싶지 않지만 PubSub 패턴을 사용하여 데이터가 변경될 때 UI 변경 사항을 업데이트하고 웹 구성 요소를 섀도우 돔과 함께 사용하여 재사용 가능한 구성 요소인 섀도우 돔을 만들었습니다. 전체 DOM 트리와 격리되어 있어서 CSS 및 DOM API를 사용하여 액세스하면 작동하지 않기 때문에 자바스크립트와 스타일로 액세스하는 것이 어려웠습니다. 그래서 그게 제가 겪었던 유일한 과제였지만 재미있었습니다.. 제가 할 때는 재미있었습니다. 크롤러를 Nodejs에서 Go로 마이그레이션하고 있었습니다.

고려해야 할 사항

프로젝트를 과시하고 싶어서 아직 구현하지 못한 기능도 있지만, 진행 중인 프로젝트라 할지라도 그것은 나에게 그다지 중요하지 않습니다. 프로젝트 완료 저는 앞으로도 zensearch를 계속해서 개선할 예정이므로 지금은 누락된 몇 가지 주요 사항이 있습니다.

• 이미 색인화된 웹사이트 목록을 프런트엔드에서 사용자에게 표시하도록 구현합니다.

• 계속 진행하려면 가장 최근에 크롤링된 웹페이지를 저장하세요.

• 크롤링 취소를 생성하지만 해당 시점까지 색인이 생성된 페이지는 계속 저장됩니다.

사용자에게 색인화된 웹사이트를 제거할 수 있는 기능을 제공하세요.
발문

내가 배운 내용과 개발 과정의 미묘한 차이에 대해 더 쓰고 싶지만 너무 길어질 것 같아서 지금은 내 최고의 프로젝트를 자랑하고 싶고 피드백을 받고 싶습니다. 시간이 있으면 Zensearch를 더 좋게 만들기 위해 제가 할 수 있는 문제나 개선 사항이 있으면 알려주십시오. 아, 그리고 이것은 모두 이 사람이 제가 사물에 더 깊이 들어가고 대신 기본 사항을 배우도록 영감을 준 원조 덕분입니다. 터미널에서 npm create vite@latest my-vue-app -- --template React-ts를 실행하면 프로그래머로서 나 자신과 내가 알고 있는 것들에 대해 확실히 불안해졌지만 그 불안 때문에 나는 배웠습니다. new things now 저는 항상 더 많은 것을 배우려고 노력하고 있으며

여러분

의 피드백을 통해 기꺼이 배우고 싶습니다. 제 테드 강연을 들어주셔서 감사합니다. Zensearch용 Github 저장소

위 내용은 귀하의 검색 엔진, Zensearch의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!