m2ndy 개발 블로그

[Next.js]Trie를 사용해서 네트워크 요청 없이 자동완성 구현하기(Typescript, Zustand) 서비스를 운영하면서 드는 고민 중 하나는 서버 비용이 아닐까 싶어요. 크루위키 서비스를 운영하면서 매달 지출되는 비용이 생각보다 많이 나오더라구요. 클라이언트 측에서 네트워크 요청 횟수를 크게 줄일 수 있는 방법은 없을지 고민하다가, 검색 input을 활용해 보면 좋겠다는 생각이 들었습니다. 동료들과 했던 자료구조 스터디에서 Trie 자료구조를 학습했던 적이 있는데요, Trie 자료구조는 O(N) (N : 문자열의 길이)의 시간 복잡도를 가지고 있어 자동 완성이나 사전 검색 등 문자열을 사용하는 곳에서 자주 활용된다고 합니다. [Typescript] Trie (트라이) 자료구조 직접..

프로젝트에서 자동 완성 컴포넌트를 구현하면서 트라이 자료구조를 접했는데 이번 기회에 직접 구현해보려 한다. 언어는 타입 안정성을 위해 Typescript를 사용했다. Trie (Prefix Tree)Trie는 문자열을 빠르게 탐색할 수 있는 자료구조로, 트리 형태로 구성된다. Prefix tree라고도 불린다.각 노드는 문자열의 한 글자를 나타내며, 루트부터 마지막 노드까지의 경로가 문자열을 구성한다. 해시 테이블에 비해 접두사 기반의 검색에서 더 효율적이다.문자열을 각 노드에 저장하고 메모리를 사용하지만 탐색 속도가 O(N)으로 매우 빠른 편이다. 따라서 자동 완성이나 사전 검색, 맞춤법 검사와 같이 문자열을 활용하는 기능에 주로 사용된다. 시간 복잡도Operation Average WorstIn..

본 글은 2025.1.2에 마지막으로 수정되었습니다. 시작하기에 앞서, 본 글에서 ‘가리킨다’라는 의미는 ‘바인딩된다’라고 정의하겠습니다. 또한, 모든 예제는 브라우저 환경임을 가정합니다. this함수 호출 방식에 따라 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 거나, 전역 객체를 가리키는 변수.즉, this는 자기 자신을 가리키거나, 전역 객체를 가리킵니다.// 객체 리터럴 예제// this는 getName 메서드를 호출한 객체인 introduction을 가리킵니다.const introduction = { name: 'Lee', getName() { return this.name; },};console.log(introduction.getName()); // ..

본 글은 2024.11.13에 마지막으로 수정되었습니다.  Devel Up 서비스에는 '위로 가기 버튼'이 있습니다. 아래 사진과 같은 버튼인데요, 글이 길어지는 경우 사용자 경험을 향상시키기 위해 스크롤을 최상단으로 끌어올릴 수 있게 해주는 버튼입니다.      이 버튼은 페이지 스크롤에 상관 없이 항상 position: fixed로 화면에 고정되어 있었습니다. 하지만 스크롤이 최상단에 있는 경우에도 버튼이 존재하는 것이 어색하다는 사용자 피드백이 있었습니다. 따라서 이 버튼을 스크롤이 특정 지점 아래에 있을 때만 보이도록 구현하기로 했습니다.  여기서 든 의문점이 있었습니다. 1. 사용자의 스크롤 위치를 항상 구하고 있어야 되는가?2. 스크롤 위치를 항상 구하고 있어야 한다면, 이벤트의 콜백 함수를 ..

본 글은 2024.11.05에 마지막으로 수정되었습니다.    CSR와 SSR CSR와 SSR은 웹 어플리케이션을 렌더링 하는 대표적인 방법들이다. 본 글에서는 CSR와 SSR의 동작 원리와 이를 비교하며 장단점을 작성하려 한다.   CSR ( Client Side Rendering) CSR은 브라우저에서 거의 모든 작업이 이루어지는 렌더링 방식이다. React의 경우 기본 HTML에 컴포넌트를 갈아 끼우는 SPA로 동작하기 때문에, 서버로부터 처음 받아오는 html 파일은 아주 간단한 HTML 상태다.             이 기본 HTML 파일에는 태그만 있을 뿐, 서버에서 받아오는 데이터는 없는 상태다.브라우저는 HTML 파싱을 통해 파일을 위에서부터 순차적으로 읽어나가다     React    ..

React 프로젝트의 번들러로 Webpack을 사용하기 위해 공부한 내용을 정리해보았다.   1. webpack 설치npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin install 하게 되면 package.json, package-lock.json, node-modules가 생성된다 - html-webpack-plugin : Webpack의 플러그인 중 하나로, Webpack으로 번들링한 자바스크립트 파일을 자동으로 HTML 파일에 삽입해주는 역할을 한다. 이를 통해 수동으로 HTML 파일을 수정할 필요 없이, 번들링된 파일이 HTML 파일에 자동으로 포함되도록 할 수 있다. 1-1. scripts 추가// package...

✅ Webpack 이란?Javascript로 만든 어플리케이션을 위한 정적 모듈 번들러. 즉, 웹 어플리케이션을 구성하는 css, javascript, image 등의 웹 자원을 각각의 모듈로 간주한 뒤, 이들의 의존성 관계를 결합하여 하나의 결과물을 만들어주는 도구이다. Webpack은 프로젝트에서 필요한 모든 모듈을 매핑하고, 하나 또는 여러 개의 번들 파일로 결합하여 의존성 그래프를 생성한다. 이를 통해 웹 어플리케이션의 성능을 최적화하고, 모듈화를 통해 코드의 유지보수성을 높일 수 있다. 또한, 어플리케이션의 로드 시간을 줄이며, 사용하지 않는 코드를 제거하는 tree shaking을 통해 최종 번들 크기를 줄일 수 있다. webpack.config.js 파일을 통해 설정을 할 수 있으며, 진입점..

바닐라JS로 프로그램을 만들던 중 export에 대한 궁금증이 생겼다. (named) export vs export default export 한 모듈에 여러 개체들, 혹은 특정 개체만을 각각 가져올 수 있음 반드시 지정된 이름으로만 import 해야함import { hello } from './hello.js' export default 해당 모듈에 하나의 개체 (변수, 클래스, 함수 등)만 있다는 의미 ⇒ 해당 모듈의 전체를 export 하는 느낌 원하는 이름으로 import 가능import helloTest from './hello.js' 무엇을 사용해야 될까? airbnb convention에 의하면 내보내기 할 것이 한 가지이면 export default 사용하는 것..

먼저 아래 영상을 보면 이해를 쉽고 빠르게 할 수 있다! 실행 컨텍스트 코드가 실행되는 공간 실행 컨텍스트의 Call stack에는, 환경 레코드, 첫 번째로 실행될 함수, 첫 번째 함수가 종료되기 전 실행할 함수 .. 순서로 stack으로 쌓이게 된다. 후입선출 방식을 사용한다 => 나중에 실행되는 함수가 종료되어야만, 그 앞에 실행된 함수가 종료된다. 따라서 나중에 실행되는 함수에서 변수를 먼저 찾고, 바깥으로 나가며 찾는 방식으로 진행이 된다. 환경 레코드 : 실행 컨텍스트에 있는 변수들을 저장하는 공간 function greeting() { sayHi(); } function sayHi() { return "Hi!"; } greeting(); 시작 상태 call stack : [] 위 코드에서, ..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [해설] 1. 1번부터 n번까지의 상자에 들어있는 카드의 값 cards가 주어진다 2. cards[i]에 해당하는 인덱스로 넘어가는데, 이미 방문한 인덱스라면 이동을 종료한다 3. 2번의 횟수를 카운팅한 뒤 정답 배열에 추가한다 4. 정답 배열에서 가장 큰 수와 두 번째로 큰 수를 서로 곱한 값을 출력한다 4-1. 정답 배열의 길이가 2 이하라면 0을 출력한다 function solution(cards) { const n = cards.length; let cardsCountList = []; let visi..