Sqsung DevLog

1. 서론: 무한 스크롤에 대해 프론트엔드 개발을 하다보면 많은 양의 정보를 가져와 사용자에게 보여줘야 하는 경우가 있다. 이럴 때는 효율적으로 접근할 필요가 있다. 한번에 모든 정보를 받아오는 경우, 정보가 무겁고 fetch 결과가 느리기 때문에 쉽게 애플리케이션의 성능과 사용자 경험이 나빠질 수 있다. 음식 카테고리 별 1 인 1 투표를 원칙으로 하는 마이슐랭 가이드(위 gif 이미지 참고)를 개발할 때, mock server에 100개의 맛집 정보를 가지고 개발을 시작했다. 근데 각 매장 별로 많은 양의 데이터는 물론, 각 매장을 나타내는 이미지를 가지고 있기 때문에, 한번에 데이터를 가져오는 과정에서 엄청난 성능 저하가 발생했다. 이럴 때 사용하면 좋은 게 무한 스크롤이다. 사실 인터넷을 적극적으..

1. 제네릭을 사용하는 이유 자바스크립트만 사용해보던 개발자라면 익숙하지 않겠지만, 제네릭은 원래 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용된다. 제네릭은 함수나 클래스에서 사용될 타입을 외부에서 유동적으로 지정해주는 것을 말한다 (함수의 인수처럼 사용될 타입을 전달 받는다고 생각하면 된다) 덕분에 여러 가지 타입에서 동작하는 컴포넌트/함수를 생성하는 데 사용되며, 보다 재사용성 높은 함수/클래스 등을 생성할 수 있다. 재사용성 높은 코드를 추구하는 개발자라면, 타입스크립트에서 제네릭을 사용하지 않을 수 없다. 2. 함수에서 제네릭 사용하기 배열을 인수로 받아 배열 길이를 반환하는 getSize 함수가 존재한다. 아래 예제에서는 숫자 값으로만 이루어진 arr1, 문자열로..

1. 문제 ㅡ 16953번: A → B (난이도: Silver II) 16953번: A → B 첫째 줄에 A, B (1 ≤ A +val); const solution = (A, B) => { const queue = [[A, 1]]; while (queue.length) { const [current, count] = queue.shift(); if (current === B) return count; const oneAdded =..

1. 문제 ㅡ 2468번: 안전 영역 (난이도: Silver I) 2468번: 안전 영역 재난방재청에서는 많은 비가 내리는 장마철에 대비해서 다음과 같은 일을 계획하고 있다. 먼저 어떤 지역의 높이 정보를 파악한다. 그 다음에 그 지역에 많은 비가 내렸을 때 물에 잠기지 않는 www.acmicpc.net 2. 풀이 ㅡ Node.js (자바스크립트) const input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n'); const getMaxSafeAreas = input => { const N = +input.shift(); const areas = input.map(row => row.split(' ').map(val =..

1. 문제 ㅡ 14503번: 로봇 청소기 (난이도: Gold V) 14503번: 로봇 청소기 첫째 줄에 방의 크기 $N$과 $M$이 입력된다. $(3 \le N, M \le 50)$ 둘째 줄에 처음에 로봇 청소기가 있는 칸의 좌표 $(r, c)$와 처음에 로봇 청소기가 바라보는 방향 $d$가 입력된다. $d$가 $0$인 경우 북쪽 www.acmicpc.net 2. 풀이 ㅡ Node.js (자바스크립트) class Queue { constructor(initValue) { this.q = initValue ? [initValue] : []; this.head = 0; this.tail = initValue ? 1 : 0; } push(item) { this.q[this.tail] = item; this.t..

1. 문제 ㅡ 1541번: 잃어버린 괄호 (난이도: Silver II) 1541번: 잃어버린 괄호 첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 www.acmicpc.net 2. 풀이 ㅡ Node.js (자바스크립트) const input = require('fs').readFileSync('/dev/stdin').toString().trim(); const getMinResult = equation => { const onlyPluses = equation.split('-'); onlyPluses.forEach((eq, idx) => { if (!eq.i..

1. 문제 ㅡ 1931번: 회의실 배정 (난이도: Silver I) 1931번: 회의실 배정 (1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다. www.acmicpc.net 2. 풀이 ㅡ Node.js (자바스크립트) const input = require('fs').readFileSync('/dev/stdin').toString().split('\n'); const N = +input.shift(); const meetingTimes = input.map(time => time.split(' ').map(val => +val)); const getMaxMeetings = (N, meetings) => { let answer = 1; // 💡 종료 시간이 같은 경우에는 시작 시간을..

1. 문제 ㅡ 20365번: 블로그 2 (난이도: Silver III) 20365번: 블로그2 neighbor 블로그를 운영하는 일우는 매일 아침 풀고 싶은 문제를 미리 정해놓고 글을 올린다. 그리고 매일 밤 각각의 문제에 대하여, 해결한 경우 파란색, 해결하지 못한 경우 빨간색으로 칠한 www.acmicpc.net 2. 풀이 ㅡ Node.js (자바스크립트) const input = require('fs').readFileSync('/dev/stdin').toString().split('\n'); const getMinStroke = tc => { const [N, strokes] = [+tc[0], tc[1]]; // first는 첫 번째 색상을 나타낸다 (: 'R' | 'B') const first..