🤔 무한 스크롤이란? 컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해 맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다. 🪄 구현 방식 스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(appendChild)하는 방식으로 구현한다. 구현 방식은 크게 두 가지이다. 1. scroll 이벤트를 이용한 방법 - 전통적인 방식 - window의 scroll 이벤트가 일어날 때마다 브라우저 화면의 높이, 스크롤바의 위치를 이용해 body(컨텐츠)의 끝까지 다다랐으면 새로운 데이터를 가져오는 방식을 말한다. - window.innerHeight : 클라이언트에서 보여지는 화면 중 탭, url 주소창, 북마크 탭을 제외한 브라우저의 높이 - window.scrollY : 현..
🤔 캐시를 구현하는 이유 특정 값의 데이터를 저장해두면 이후에 그 특정 값에 대한 데이터가 필요할 경우, 요청을 보내지 않고 저장된 데이터를 가져와 바로 사용할 수 있고 불필요한 요청을 줄일 수 있다는 이점이 있다. 🖱️ 구현 방법 특정 값에 대한 데이터를 SessionStorage에 저장하여 구현할 수 있다. SessionStorage를 사용하는 이유는 브라우저가 닫히기 전까지 데이터가 유지된다. 만약 영구적으로 데이터를 저장하고 싶다면 LocalStoage를 사용할 수 있다. 구현은 정말 간단하다!!! import { getItem, setItem } from "./storage.js"; const $root = document.querySelector(".root"); const $input = d..
실무에서는 화면에 태그를 추가할 때 createElement로 만들어 실제 DOM에 추가하지 않는다고 한다. 그 대신 document.createDocumentFragment로 documentFragment를 생성해 내부에 여러 태그를 추가한 후, 해당 documentFragment를 실제 DOM에 추가하는 방식을 사용한다고 한다. 그럼 documentFragment의 사용이 DOM의 효율성과 어떤 관련이 있을까? DocumentFragment 기본적으로 DOM과 동일하게 동작하나 실제 DOM에는 영향을 주지 않는다. DOM 트리 외부에, 메모리 상에서만 존재하는 DOM을 생성하기 때문에 실제 DOM 구조에는 변경이 일어나지 않아 브라우저가 화면을 랜더링하지 않는다. 따라서 페이지의 성능 영향을 최소화할..
클로저를 이해하기 위해 '실행 컨텍스트(EC)'의 개념이 필요합니다. 먼저 '실행 컨텍스트(EC)' 부터 간략히 알아볼까요? 실행 컨텍스트(Execution Context) 실행 가능한 코드가 실행되기 위해 필요한 환경을 말합니다. 즉, 자바스크립트가 실행되는 환경이며 코드가 실행되기 위한 모든 정보가 저장되어 있습니다. 실행 컨텍스트의 종류 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트가 존재합니다. 1. 전역 실행 컨텍스트(Global Execution Context) default context 단 한 개만 정의되는 컨텍스트입니다. Call Stack에 가장 먼저 추가되어 앱이 종료할 때 삭제됩니다. 함수 밖의 코드를 위해 존재합니다. 2. 함수 실행 컨텍스트(Function Execution Co..
2623번: 음악프로그램 첫째 줄에는 가수의 수 N과 보조 PD의 수 M이 주어진다. 가수는 번호 1, 2,…,N 으로 표시한다. 둘째 줄부터 각 보조 PD가 정한 순서들이 한 줄에 하나씩 나온다. 각 줄의 맨 앞에는 보조 PD가 담당한 www.acmicpc.net 위상 정렬 알고리즘을 사용하는 문제이다. 선수 과목을 고려한 학습 순서 결정과 같은 문제일 때, 위상 정렬 알고리즘으로 풀이할 수 있다. 위상 정렬을 모르시는 분들을 위해 아래를 참고해주세요! 위상 정렬 위상 정렬은 방향 그래프에서 간선으로 주어진 정점 간 선후 관계를 위배하지 않도록 나열하는 정렬을 말한다. 위상 정렬은 사이클이 존재하지 않는 방향 그래프에서만 정의된다. 선수 과목과 같이 가장 앞에 올 수 있는 노드를 먼저 생각해야 한다. ..
프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이전에 푼 문제를 다시 풀었는데 더 간단한 방법으로 해결하여 이 글을 작성한다. 이번에 작성한 코드 이전 코드보다 가독성이 더 좋아졌고 더 간단하게 풀이해보았다. function solution(skill, skill_trees) { let cnt = 0; for (let list of skill_trees) { // skill에 포함된 스킬만 뽑기 let s = list.split("").filter((v) => skill.indexOf(v) > -1).join(""); // 항상 첫 번째 스킬부터 배운 후..
18428번: 감시 피하기 NxN 크기의 복도가 있다. 복도는 1x1 크기의 칸으로 나누어지며, 특정한 위치에는 선생님, 학생, 혹은 장애물이 위치할 수 있다. 현재 몇 명의 학생들은 수업시간에 몰래 복도로 빠져나왔는데, 복 www.acmicpc.net https://www.acmicpc.net/problem/14502 연구소 문제와 비슷하다. 백트래킹 문제이며, 장애물을 설치하는 데에는 DFS, 감시를 피할 수 있는지의 여부는 BFS로 풀이하였다. const fs = require('fs'); let [N, ...input] = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); let board = input.map((v) => v.split(..
13699번: 점화식 다음의 점화식에 의해 정의된 수열 t(n)을 생각하자: t(0)=1 t(n)=t(0)*t(n-1)+t(1)*t(n-2)+...+t(n-1)*t(0) 이 정의에 따르면, t(1)=t(0)*t(0)=1 t(2)=t(0)*t(1)+t(1)*t(0)=2 t(3)=t(0)*t(2)+t(1)*t(1)+t(2)*t(0)=5 ... 주어진 입력 0 ≤ n www.acmicpc.net 문제는 주어진 점화식을 코드로 작성하는 간단한 문제였으나 3번이나 틀렸다. 결과값의 범위를 생각하지 않아서 틀린 거였다... 모든 값을 BigInt로 계산하니 드디어 정답..! BigInt - JavaScript | MDN **BigInt**는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1..
