개발새발 로그

간단하게 브라우저는 통신 렌더링 스크립트 실행으로 나누니다. 통신 서버와의 통신 브라우저가 서버에 요청하면 서버는 요청에 따라 특정값을 응답 이 요청은 한 번에 하나만 할 수 도 여러 번 할 수도 있음 렌더링 DOM이라는 객체를 화면에 그리는 행위 DOM은 통신을 통해서 받은 HTML을 브라우저가 읽어서 생성함 - DOM 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다 스크립트 실행 자바스크립트를 실행 브라우저가 script태그를 만나면 자바스크립트 파일을 읽고 실행된다. 이를 통해 UI에 이벤트를 입력하거나 화면을 다크모드로 바꾸는 등 동적인 화면을 구성할 수 있음 💬더 자세하게 https://po..

https://www.acmicpc.net/problem/11729 11729번: 하노이 탑 이동 순서세 개의 장대가 있고 첫 번째 장대에는 반경이 서로 다른 n개의 원판이 쌓여 있다. 각 원판은 반경이 큰 순서대로 쌓여있다. 이제 수도승들이 다음 규칙에 따라 첫 번째 장대에서 세 번째 장대로www.acmicpc.net 풀이방법1. 세 개의 장대 -> 시작 장대, 나머지 장대, 목적지 장대라는 기준을 둔다.2.  두 번의 수행과정을 거쳐야함  - 1. 첫번째로 맨 밑의 원반을 제외한 원반들은 모두 나머지 장대에 옮겨져야한다.    -그래야 맨 밑의 원반이 목적지 장대로 갈 수 있다.    -원반의 개수가 몇개던 간에, 시작 장대(start)에서 목표기둥(final)으로 모든 원반을 옮기기 위해서맨 밑의 ..

https://www.acmicpc.net/problem/2164 2164번: 카드2 N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다. 이제 다음과 같은 동작을 카드가 www.acmicpc.net push나 pop을 사용하면 시간초과가 뜨는 문제다 배열의 연산시간상 맨 앞 요소의 삭제 & 추가하는 연산이 index 수정시간하는 시간이나 다름없기 때문에 연결리스트를 만들어서 사용해야 한다. JS는 연결리스트가 없어서 직접 만들어주면 된다. ☝링크드리스트 링크드리스트는 노드로 이루어져 있고 val, ref,add 저장 - find 를 위해서는 시간복잡도 O(n) - random access를 ..

https://www.acmicpc.net/problem/1149 1149번: RGB거리 첫째 줄에 집의 수 N(2 ≤ N ≤ 1,000)이 주어진다. 둘째 줄부터 N개의 줄에는 각 집을 빨강, 초록, 파랑으로 칠하는 비용이 1번 집부터 한 줄에 하나씩 주어진다. 집을 칠하는 비용은 1,000보다 작거나 www.acmicpc.net 📋풀이방법 1. 주어진 빨강, 초록, 파랑의 값을 아래의 점화식으로 처리한다. dp[n][0] = min(dp[n-1][1], dp[n-1][2]) + rgb[n][0] dp[n][1] = min(dp[n-1][0], dp[n-1][2]) + rgb[n][1] dp[n][2] = min(dp[n-1][0], dp[n-1][1]) + rgb[n][2] - dp배열안에 각각의 색..

파이어베이스에서 비공개 키를 생성했다면 프로젝트에 연결해보자 firebase_admin.ts const admin = require('firebase-admin'); interface Config { credentials: { privateKey: string; clientEmail: string; projectId: string; }; } if (!admin.apps.length) { const config: Config = { credentials: { projectId: process.env.projectId || '', clientEmail: process.env.clientEmail || '', privateKey: process.env.privateKey?.replace(/\\n/g, '\n'..

error Function component is not a function declaration eslint (react/function-component-definition) 원인 리액트에서는 보통 함수형 컴포넌트를 사용한다. 어쨌든 함수라는 말이다. ESLint react/function-component-definition 규칙을 사용한다면, 이 함수형 컴포넌트를 어떤 함수 유형으로 사용할지 미리 정하고 ruls에 명시해 두어야 에러가 발생하지 않는다. 함수 유형 구분 함수 선언식 // 기명 function hello() {} // 익명 (보통 즉시실행함수(IIFE)로 사용된다) (function () {}) 함수 표현식 (변수에 함수를 담는다) // 익명 const hello = function..

https://www.acmicpc.net/problem/1003 1003번: 피보나치 함수 각 테스트 케이스마다 0이 출력되는 횟수와 1이 출력되는 횟수를 공백으로 구분해서 출력한다. www.acmicpc.net 📋풀이방법 1. 피보나치 수열의 특징을 이용한다 - F(3) = F(2) + F(1) -> (F(1)+F(0)) + F(1) - 여기서 우리는 1과 0 이 몇번 호출 되는지 알아야한다. - 원래는 F(0)과 F(1)의 값을 배열에 미리 저장한다 -> arr[0] = 0, arr[1] = 1 - 이때 우리는 0과 1이 몇 번 호출되는지 알아야 하므로 arr[0]=[0,1] , arr[1]= [1,0]으로한다. - 이 의미는 아래와 같다. 2. 즉 F(3)은 2가 아니고 [1, 2] 라는 값을 호..

https://www.acmicpc.net/problem/9095 9095번: 1, 2, 3 더하기 각 테스트 케이스마다, n을 1, 2, 3의 합으로 나타내는 방법의 수를 출력한다. www.acmicpc.net 📋풀이방법 1. 1과 2와 3으로 만드는 것이므로 일단 1, 2, 3의 숫자를 만들 수 있는 경우의 수를 수동으로 세본다. 2. 그럼 아래와 같이 나오게 된다. 3. 이후의 숫자를 다시 수동으로 적으면서 찾아보자 4. 이때 규칙이 생기는데 이전에 구했던 1, 2, 3 의 경우의 수를 이용할 수 있게 된다. 🤟내 제출 var fs = require('fs'); var inputs = fs.readFileSync('/dev/stdin').toString().split('\n').map(v=>Numb..