인생은 효율성

https://leetcode.com/problems/find-the-difference/ Find the Difference - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제를 풀다가 풀이 방법이 이마를 탁 치게 만들어서 가져와봤다. 딕셔너리로 빈도수를 체크해서 풀어야 하나 고민하고 있었는데 의외로 쉽게 풀 수 있단 걸 알게 되었다. s와 t의 모든 문자가 똑같은데(예시에는 나와있지 않지만 s와 t의 문자들은 순서가 다를 수도 있다.) 단 한 가지만 t에..

토이 프로젝트가 마무리 단계에 다다라서 배포 단계를 앞두고 있었다. 저번처럼 간단하게 깃페이지를 이용해 배포하려는데 로컬 환경에서는 공공데이터 API를 잘 불러오더니 배포하고 나니 통신 에러가 나는 것이었다. 콘솔을 보기 전에도 UI는 0.1초 정도 잘 나오다 흰 화면만 나오길래 'axios에서 뭔가 문제가 발생했나 보군' 했다. 그제야 생각해보니 로컬에서 개발할 때 cors에러 때문에 package.json에 proxy설정을 해줬었는데 이게 배포 시에는 적용이 안되어서 따로 무슨 처리를 해줘야 한다고 봤었던 기억이 났다. 처음에는 이 상황을 제대로 이해를 못 했는데 그래서 더 많이 헤맸다. 첫 번째로 시도해본 방법은 일단 .env 설정을 추가해주는 것이었다. development와 production ..

리액트 Class형의 생명주기(lifecycle) ▶ componentDidMount() 컴포넌트가 DOM에 생성된 직후 호출 외부에서 데이터를 불러와야 한다면 이 단계에서 실행 ▶ shouldComponentUpdate() 성능 최적화를 위한 것 props와 state를 이전 값과 비교해서 갱신 작업을 건너뛰게 만들 수 있음(false반환) ▶ componentDidUpdate() 갱신이 일어난 직후 호출 DOM조작을 할 때 활용하면 좋음 setState()를 사용하게 된다면 무한 반복이 일어날 수 있기 때문에 주의 shouldComponentUpdate()가 false를 반환하면 호출되지 않음 ▶ componentWillUnmount() 컴포넌트가 제거되기 직전에 호출 타이머 제거, 네트워크 요청 취..

슬라이딩 윈도우는 네트워크를 공부할 때 배웠던 개념인데 이 방식을 알고리즘 문제에 적용시켜 풀기도 한다. 범위를 일정하게 고정시켜서 그 범위를 이동시켜가면서 데이터를 비교한다. two pointer알고리즘과 비슷한 알고리즘이다. [문제 1] 문자열 s에서 반복되는 알파벳이 없는 가장 긴 substring의 길이를 구하라. var lengthOfLongestSubstring = function (s) { let max = 0; let l = 0; for (let r = 0; r < s.length; r++) { const idx = s.slice(l, r).indexOf(s[r]); if (idx === -1) { max = Math.max(max, r + 1 - l); } else { l += idx +..

[문제 1] 주어진 문자열 배열을 뒤집기 var reverseString = function (s) { let l = 0, r = s.length - 1; while (l None: l, r = 0, len(s)-1 while l < r: s[l], s[r] = s[r], s[l] l += 1 r -= 1 reverse() 메서드를 쓰면 간단하게 해결할 수 있지만 알고리즘으로 직접 구현하는 것도 매우 간단하다. 왼쪽과 오른쪽을 가리킬 포인터를 만든 뒤 각자의 위치에서 중간 쪽으로 하나씩..

[문제 1] 오름차순 정렬된 nums배열의 모든 요소를 제곱한 값을 정렬된 배열로 반환하라. (ex. nums = [-4,-1,0,3,10] 일 때 정답은 [0,1,9,16,100] 이다.) var sortedSquares = function(nums) { let left = 0; let right = nums.length-1; const answer = [] while(left Math.abs(nums[right])){ answer.push(Math.pow(nums[left], 2)); left ++ }else{ answer.push(Math.pow(nums[right], 2)); right -- } } return answer.reverse() }; class Solution: def sortedSq..

이진 탐색 알고리즘은 검색 범위를 절반씩 줄여나가면서 탐색하는 알고리즘이다. 흔히 술자리에서 소주 뚜껑에 있는 숫자를 맞추는 게임을 할 때의 방식과 동일하다. 1. 25 제시. 타깃 숫자는 더 작음 => 범위를 0~25로 줄임 2. 12 제시. 타깃 숫자는 더 큼 => 범위를 13~25로 줄임 3. 19를 제시 => 정답 이렇게 숫자가 오름차순 혹은 내림차순의 일정한 순서로 정렬되어 있는 경우 이진 탐색 알고리즘을 사용하면 탐색 시간을 많이 줄일 수 있다. 이 방법을 응용한 문제 3가지를 풀어볼 것이다. [문제 1] 배열 nums에서 target숫자가 위치한 인덱스를 반환하라. (target이 nums에 존재하지 않으면 -1 반환) // JavaScript const searchIndex = (nums,..

REST API 클라이언트에서 서버의 리소스에 액세스 할 수 있도록 해주는 메커니즘 REST 디자인 원칙 6가지 균일한 인터페이스: 요청이 어디서 오든지 동일한 리소스에 대한 요청은 동일하게 보여야 함 클라이언트-서버 디커플링: 서로 간 독립적이어야 함. 클라이언트가가 아는 유일한 정보는 URI Stateless: 각 요청에서 처리에 필요한 모든 정보가 포함되어야 함. 서버 측 세션 필요 없음 캐싱 가능성: 클라이언트 혹은 서버에서 캐싱 가능해야 함 ⇒ 서버 측 확장성 증가 & 클라이언트 성능 향상 계층 구조 아키텍처: 호출과 응답이 서로 다른 계층 통과. 서로 직접 연결 아님. 중개자 있음 코드 온디맨드: 정적 리소스 전송하지만 특정 경우는 실행코드(jaca 애플릿) 포함할 수도 있음 HTTP 메서드 ..

프로젝트에서 메일 전송 기능을 구현해야 했다. 관련 라이브러리를 찾아봤는데 nodemailer가 가장 많이 사용되고 있고 공식 문서에 정리도 잘 되어 있어서 이걸 선택했다. 사용 방법은 예제에 잘 나와있다. https://nodemailer.com/about/ Nodemailer :: Nodemailer Nodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js us..

이번에는 차트에 색상을 적용해야 한다. 색상 적용 예제도 MDN에 잘 나와있다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#a_createlineargradient_example 스타일과 색 적용하기 - Web API | MDN 도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그 developer.mozilla.org 스타일을 적용할 곳은 총 세 가지이다. 1. 따뜻한 색 - 차가운 색으로 배경 입히기 2. 차트의 라인에 색상과 굵기 주기 3. 폰트..