공부 및 일상기록

바닐라 자바스크립트로 SPA를 구현해보다.이번 항해99 플러스를 진행하며 바닐라 자바스크립트로 리액트와같은 SPA(Single Page Application)을 구현해보게 되었다.바닐라 자바스크립트로 일반 웹페이지는 구현해봤지만 SPA를 구현해본적은 없었기에 리액트를 이해하는 큰 도전이였다. 나의 목표만드려는 것은 하나의 간단한 쇼핑몰이다.MSW를 이용하여 실제 백엔드 데이터를 받는것처럼 작성한다.id가 root인 div 안에 전체 앱을 렌더링한다.컴포넌트 기반 함수 구조로 페이지를 구성한다.상태 관리를 위한 store를 만들고, 전역 상태와 상태 변경을 처리한다.Router를 직접 구현하여 URL에 따라 적절한 페이지를 렌더링한다.이벤트 바인딩, 데이터 fetch, 무한 스크롤, 검색, 장바구니 등 주..

문제한 개의 회의실이 있는데 이를 사용하고자 하는 N개의 회의에 대하여 회의실 사용표를 만들려고 한다. 각 회의 I에 대해 시작시간과 끝나는 시간이 주어져 있고, 각 회의가 겹치지 않게 하면서 회의실을 사용할 수 있는 회의의 최대 개수를 찾아보자. 단, 회의는 한번 시작하면 중간에 중단될 수 없으며 한 회의가 끝나는 것과 동시에 다음 회의가 시작될 수 있다. 회의의 시작시간과 끝나는 시간이 같을 수도 있다. 이 경우에는 시작하자마자 끝나는 것으로 생각하면 된다.입력첫째 줄에 회의의 수 N(1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N+1 줄까지 각 회의의 정보가 주어지는데 이것은 공백을 사이에 두고 회의의 시작시간과 끝나는 시간이 주어진다. 시작 시간과 끝나는 시간은 231-1보다 작거나 같..

문제언제나 최고만을 지향하는 굴지의 대기업 진영 주식회사가 신규 사원 채용을 실시한다. 인재 선발 시험은 1차 서류심사와 2차 면접시험으로 이루어진다. 최고만을 지향한다는 기업의 이념에 따라 그들은 최고의 인재들만을 사원으로 선발하고 싶어 한다.그래서 진영 주식회사는, 다른 모든 지원자와 비교했을 때 서류심사 성적과 면접시험 성적 중 적어도 하나가 다른 지원자보다 떨어지지 않는 자만 선발한다는 원칙을 세웠다. 즉, 어떤 지원자 A의 성적이 다른 어떤 지원자 B의 성적에 비해 서류 심사 결과와 면접 성적이 모두 떨어진다면 A는 결코 선발되지 않는다.이러한 조건을 만족시키면서, 진영 주식회사가 이번 신규 사원 채용에서 선발할 수 있는 신입사원의 최대 인원수를 구하는 프로그램을 작성하시오.입력첫째 줄에는 테스..

이미지 리사이징을 하게된 이유진행하는 프로젝트에 동화책을 넘겨서 보는 UI가 있다. 인터랙티브하게 넘길 수 있고, 넘어갈때도 실제 책처럼 넘어가도록 되어있다.이 책은 관리자 페이지에서 업로드 할 수 있었고, 배경 이미지는 각 페이지별로 한장씩 포함되어 약 10장~12장 정도가 포함되어있었다.테스트 기간에 받은 샘플 이미지로 했을때, 이미지 크기도 적당하고 용량도 크지않아 이 상태에서 webp로만 변환하여 업로드 하면 될것 같았고, 실제 그렇게 업로드 할 것이라고 전달받아서 업로드 할 때 이미지 변환을 할 생각을 하지 못했다.그러다 시간이 좀 지난 후 동화책을 거의 100권 가까이 업로드 한 상태에서 잘 동작하는지 보려고 하니 동화책 UI가 너무 느리게 로딩되어 사용자 경험이 매우 별로였다..그래서 파일 ..

문제서로 다른 N개의 자연수의 합이 S라고 한다. S를 알 때, 자연수 N의 최댓값은 얼마일까? 입력첫째 줄에 자연수 S(1 ≤ S ≤ 4,294,967,295)가 주어진다. 출력첫째 줄에 자연수 N의 최댓값을 출력한다.  나의 코드let fs = require('fs')let input = fs.readFileSync('/dev/stdin').toString()/1let sum = 0;let answer = 0;for (let i = 1; ; i++) { if (sum + i > input) break; sum += i; answer = i;}console.log(answer); 이 문제는 너무 깊게 생각하면 안된다.이 문제의 핵심은 개수를 구하는 것이지 딱 맞는 자연수 조합을 구하라는..

문제정수 A를 B로 바꾸려고 한다. 가능한 연산은 다음과 같은 두 가지이다.2를 곱한다.1을 수의 가장 오른쪽에 추가한다. A를 B로 바꾸는데 필요한 연산의 최솟값을 구해보자.  입력첫째 줄에 A, B (1 ≤ A 9)가 주어진다.  출력A를 B로 바꾸는데 필요한 연산의 최솟값에 1을 더한 값을 출력한다. 만들 수 없는 경우에는 -1을 출력한다.  나의 첫 번째 풀이let fs = require('fs')let [goal,number] = fs.readFileSync('/dev/stdin').toString().split(' ').map(Number)let count = 1;const func = (input)=>{ if(input%2===0){ let a = input/2 ..

문제상근이는 요즘 설탕공장에서 설탕을 배달하고 있다. 상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다. 설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그램 봉지와 5킬로그램 봉지가 있다.상근이는 귀찮기 때문에, 최대한 적은 봉지를 들고 가려고 한다. 예를 들어, 18킬로그램 설탕을 배달해야 할 때, 3킬로그램 봉지 6개를 가져가도 되지만, 5킬로그램 3개와 3킬로그램 1개를 배달하면, 더 적은 개수의 봉지를 배달할 수 있다.상근이가 설탕을 정확하게 N킬로그램 배달해야 할 때, 봉지 몇 개를 가져가면 되는지 그 수를 구하는 프로그램을 작성하시오. 입력첫째 줄에 N이 주어진다. (3 ≤ N ≤ 5000) 출력상근이가 배달하는 봉지의 최소 개수를 출력한다. 만약, 정확하게 N..

문제세준이는 양수와 +, -, 그리고 괄호를 가지고 식을 만들었다. 그리고 나서 세준이는 괄호를 모두 지웠다.그리고 나서 세준이는 괄호를 적절히 쳐서 이 식의 값을 최소로 만들려고 한다.괄호를 적절히 쳐서 이 식의 값을 최소로 만드는 프로그램을 작성하시오. 입력첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 많이 연속되는 숫자는 없다. 수는 0으로 시작할 수 있다. 입력으로 주어지는 식의 길이는 50보다 작거나 같다. 나의 풀이let fs = require('fs')let input = fs.readFileSync('/dev/stdin').toString()..