노트

토스 앱을 이용하다 카드 지출 내역을 달력으로 표시하는 기능을 보고가계부에 추가해 보면 좋겠다 싶어서 한 번 시도해 봤다.달력 기능을 추가하고 보니 달력까지 노출되었을 때, 총지출과 수입 표시가 좀 난잡합 느낌이 들어서현재 자산에 마우스 커서를 올려놓았을 때만 보이도록 수정했다.  카테고리 옆에 달력 버튼(📅)을 추가해서 클릭했을 때 달력이 보이게 했고,기본적으로 달력은 현재 날짜에 해당하는 달과 날짜를 출력한다.월지출은 해당 달의 지출의 합을 나타내고 모든 수입은 초록색, 일반적인 지출은 회색, 가장 많은 지출을 한 날짜의 금액은 빨간색으로 표시했다.달력의 날짜 칸을 클릭하면 선택한 날짜의 상세 소비 내역을 출력하고이전날이나 다음날로 넘어가면 월지출이 갱신된다.X 버튼을 눌러 달력을 닫을 수 있으며 ..

투포인터일차원 배열에 두 개의 포인터를 두고 조작하는 알고리즘, 연속적인 구간 계산을 할때 많이 사용투포인터 알고리즘 문제 풀기보석 쇼핑: https://school.programmers.co.kr/learn/courses/30/lessons/67258 보석 쇼핑 문제는 모든 보석을 살 수 있는 가장 짧은 진열대 구간을 찾아서 return 하는 문제이기에 일차원 구간에 대한 탐색을 투포인터 알고리즘으로 접근해 풀 수 있다. 진열된 모든 종류의 보석을 적어도 1개 이상 포함하는 구간을 찾는 것이 목적이기 때문에 다음과 같이 진행한다.start, end 인덱스를 첫번째 인덱스에 위치시킨다.두개의 포인터가 가르키는 현재 구간에서 모든 보석을 구매할 수 없다면 end 인덱스를 증가현재 구간에서 모든 보석을 구매..

힙(Heap)최댓값(Max) 또는 최솟값(Min)을 찾아내는 연산을 빠르게 하기 위해 고안된 완전이진트리(Complete binary tree)의 일종이다. 힙에서는 가장 높은(또는 가장 낮은) 우선순위를 가지는 노드가 항상 뿌리 노드에 오게되는 특징이 있어며, 이를 이용해 우선순위 큐(Priority Queue)를 구현할 때 내부적으로 이용하는 자료구조이다.힙의 종류최대 힙(Max Heap): 모든 노드가 자식 노드보다 작거나 같은 값을 가지는 힙최소 힙(Min Heap): 부모 노드의 값이 자식 노드의 값보다 작거나 같은 값을 가지는 힙최소 힙(Min Heap) 구현최소 힙을 구현하는데 필요한 삽입 연산 힙의 마지막 노드에 새로은 노드 추가새로운 노드를 추가한 위치에서부터, 부모 노드와 새로 추가된 ..

소수 판별하기현재 숫자가 소수인지 판별하는 알고리즘을 작성할 때가장 단순한 방법은 n까지 반복문을 돌면서 1 이외의 약수가 있는지 확인하는 것이다.function isPrime(n) { for (let i = 2; i 이 알고리즘의 시간복잡도는 O(n) 여기서 조금 최적화를 해보자면특정 수의 약수는 가운데 약수를 기준으로 대칭성을 가지므로 제곱근까지만 확인해 보면 된다.ex) 16 => 1, 2, 4, 8, 161 x 16 = 162 x 8 = 164 x 4 = 16function isPrime(n) { for (let i = 2; i * i 최적화한 알고리즘의 시간복잡도는 O(sqrt(n))여기서 더 최적화할 수도 있지만 판별해야 할 수가 많지 않을 땐 이런 단순한 코드로도 충분하고,많은 수..

자바스크립트 9가지 코드 트릭1. 구조 분해 할당을 이용한 변수 swaplet a = 5, b = 10;[a, b] = [b, a];console.log(a, b); // 10 52. 배열 생성으로 루프 제거일정 범위 루프에 대한 계산은 보통 다음과 같이 작성하지만let sum = 0;for (let i = 5; i 배열을 생성해서 redece 메서드를 통해 계산할 수 있음.const sum = Array .from(new Array(5), (_, k) => k + 5) .reduce((acc, cur) => acc + cur, 0);3. 배열 중복 제거const numbers = [2, 13, 4, 4, 2, 13, 13, 4, 4, 5, 5, 6, 6, 7, 5, 32, 13, 4, 5];..

앞으로 약 2주간 코딩 테스트를 위한 알고리즘 강의를 진행해서남는 시간에 지난 내용 복습할 겸 가계부를 좀 더 개선해 봤다.1. 총지출, 수입 추가현재 자산 아래쪽에 소비 내역의 총지출과 수입을 추가하여 재정 상황을 빠르게 파악할 수 있다.handleGetConsumptionDetails 안에서 소비 내역 리스트들을 구성할 때 지출과 수입의 합도 같이 계산해서소비 내역을 추가, 삭제할 때 알아서 다시 갱신 하도록 했다.const $totalMinusValue = document.querySelector(".total-minus-value");const $totalPlusValue = document.querySelector(".total-plus-value");const handleGetConsumpti..

알고리즘 공부하는 법문제를 풀 때 중요한 것여러 가지 풀이 방법이 있을 수 있으므로 다양한 방식으로 문제에 접근.항상 예외가 있을 수 있음. 반례 생각해 보기.풀어낸 답이 베스트인지 고민하고, 더 효율적인 풀이 찾기.시행착오를 기록하기. 다른 비슷한 문제가 나와도 접근하기 쉬워짐.풀었더라도 다른 사람 코드 살펴보기, 생각하지 못했던 방법을 발견할 수 있음.쉽게 포기하지 않기. 그러나 알고리즘을 모르면 아예 못 푸는 문제도 있고, 시간이 너무 오래 걸리거나 도저히 못 풀겠다면 답을 보는 것도 방법재밌게 공부하는 법시각적인 사이트의 도움자료구조, 알고리즘을 공부할 때 어디에 응용될 수 있는지 생각해 보면서 공부하기마음가짐코테는 문제 해결 능력을 확인하는 것이므로 알고리즘 마스터가 될 필요는 없음.논리적 사고..

이번주는 JS가 서버와 통신을 위해 사용하는 API 통신 과정을 비동기적으로 동작하는 async - await 패턴을 이용해 가계부 페이지를 구현했다. 강의를 따라가며 가계부 기능을 구현하면서 개념적으로만 알고 있었던 API 통신에 대해 배울 수 있어서 좋았다. 개인적으로  가계부 기능을 일부 수정, 추가하고 삭제 API도 사용해 보았다. 1. 날짜 입력 기능1-1) 날짜 입력 필드 추가각 날짜의 default value는 현재 시간을 기준으로 년, 월, 일 설정const initForm = () => { ... // 날짜 value 초기화 $yearInput.value = today.getFullYear(); $monthInput.value = today.getMonth() + 1..

Tech Spec(기술 설명서)기술적으로 어떻게 구현할지 정리한 내용Tech Flow기술적인 Flow는 5단계로 나눌 수 있음.서비스에 접근한다.유저가 액션을 하면, 서비스는 액션을 입력한다.입력받은 데이터를 서버에 저장한다,현재 데이터를 서버로부터 가져온다.서버로부터 받은 데이터를 화면에 보여준다.3가지 레이어위 단계에선 3가지 레이어가 상호작용 함.웹/유저/서버 간 상호작용을 인터렉션이라고도 함.웹 -> 유저: 화면을 보여준다.(렌더링)웹 웹 -> 서버: 데이터 조회, 저장, 수정 등을 요청한다.웹 이렇게 인터렉션을 기준으로 구분하여 코드 구조화 할 수 있음.렌더링렌더링은 크게 2가지 방향으로 나뉨. 기본 렌더링(웹 사이트에 처음 방문했을 때)html 파일에 문서를 작성최초 파일이 로드될 때, 브라우..

김동영 강사님이 학습법에 대해 짧게 강의해 주셨다.개발자의 학습법에 대한 미니세션경험여러 종류의 경험을 통해 지식을 얻는 것은 각각 학습하는 데 걸리는 시간도, 기억에 남는 정도도 다름.시간이 지남에 따라 기억을 망각하게 됨.따라서 복습을 통해 자꾸 이끌어내야 학습한 지식이 기억에 오래 남음.또한, 저장된 지식을 활용하는 연습을 꾸준히 해야 필요할 때 적절히 응용할 수 있음.인지메타 인지: 인지에 관한 인지, 무엇을 알고 무엇을 모르는지 아는 것.인지 상태를 크게 4가지로 나누면 아래와 같이 나눌 수 있음.지식지각1. 모르는 것을모르는 상태2. 모르는 것을 아는 상태3. 아는 것을 아는 상태4. 아는 것을모르는 상태 나의 지식이 어떠한지 "아는 상태"에 먼저 도달하려고 해야 함.측정나의 상태를 파악하기 ..