프로그래머스 짝지어제거하기 같은 알파벳이 연속하게 존재하면 반복되는 알파벳을 지우고 이를 계속 반복한다. baabaa가 인풋으로 들어올 때 b "aa" baa가 반복되므로 해당 알파벳을 지운다 bbaa가 되므로 "bb"가 반복된다. 이를 지우고 마지막으로 aa도 지운다. 최종적으로 남는 알파벳이 없으면 1을 리턴, 남으면 0을 리턴한다. 괄호 찾기 문제랑 유사하기에 스택을 생각해서 풀었다. 스택의 최상단 값이랑 다음에 들어올 값이랑 같을 때 스택에서 pop하고, 다르면 Push하여 스택의 길이가 1이상이면 0리턴, 0이면 1을 리턴하도록 했다. function solution(s) { var answer = 0; let len = s.length; let stk = []; for (let i = 0; i..

프로그래머스 뉴스클러스터링 구현문제 주어진 문제에 맞춰 구현하면 된다. 요구조건에 맞춰 단계별로 수행했다. 입력에 있어서 대,소문자 차이는 무시하기에 모든 입력을 소문자로 처리했다. 입력문자열을 두 글자씩 끊어서 원소로 만들되 특수문자가 포함되어있으면 해당 원소는 버린다. 2번과정은 문자열 길이만큼 반복문을 돌리고, i, i - 1 문자를 map에 삽입하고, 반복되는 횟수를 count해주었다. 카운트해준 이유는 교집합, 합집합을 만들 때 사용되기 때문인데, 중복원소가 포함된 원소 {1,1,1}, {1,2,3}의 교집합은 {1,2,3}이고 합집합은 {1,1,1,1,2,3}이다. 교집합을 구하는 건 중복원소인 1에 대해 카운트된 숫자중 최소값을 넣으면되고 합집합의 경우 두 집합중 1이 반복되는 횟수의 max..

Scroll Restoration Browsers are starting to handle scroll restoration with history. React-router-dom에서 Scroll Restoration 을 기본적으로 지원한다. 옵션엔 auto , manual이 있다. auto면 이미 방문한 곳의 이전 스크롤을 복원해준다. 현재 프로젝트에서 post list를 보는 곳은 스크롤이 복원되어야하지만, post 상세보기에서는 맨 위로 위치시켜야한다. 따라서 detail 페이지에 라우팅되었을 때 스크롤을 최상단으로 위치하는 함수를 추가해야한다. import { useEffect } from "react"; import { useLocation } from "react-router-dom"; exp..

OAuth based on naver d2 What is OAuth ? Authentication + Authorization 다양한 플랫폼 환경에서 권한을 부여를 위한 프로토콜. 비밀번호를 공유하지 않고 인증 토큰을 사용해 User - Servie Provider 간의 ID를 증명한다. OAuth는 타 App에 구글 비밀번호를 제공하지 않고 다른 App이 구글에 있는 내 정보, 기능을 사용할 수 있도록 한다. 타 App의 DB가 해킹당해도 나는 해당 App에 구글 정보를 제공하지 않았으므로 관계없어진다. Why OAuth ? OAuth는 third party App에서도 페이스북, google, kakao, naver 등 사용자가 필요한 일부 기능을 다른 서비스에서도 사용할 수 있도록 개발 생태계를 확..

HTTP 1.0, 1.1 그리고 2.0 What is HTTP? Hyper Text Transfer Protocol : www상에서 정보를 주고 받을 수 있는 프로토콜. HTTP를 통해 HTML문서를 전달 0.9 HTTP의 첫 버전 번호로 이전에는 버전번호가 없었다. 요청과 응답은 매우 단순했고 오로지 GET 메소드로만 요청을 수행했다. 요청 : GET /mypage.html 응답 : hello 1.0 하나의 TCP연결 당 한번의 데이터 전송만 이루어진다.(3way-handshake) 연결하자(syn) 연결 오케이(syn + ack) 연결 수립(ack) 통신 데이터 전송이 끝나면 TCP연결을 끊는다. (4way-handshake) 버전 정보가 요청 내에 전송되기 시작 Status code가 응답의 시작에..

React Key 리액트는 state, props가 변경되었을 때 리랜더링한다. 리랜더링은 render()함수를 다시 호출하는 것이고 이 때 새로운 React element tree를 반환한다. 이때 이전 상태로부터 변경된 요소를 확인하기 위해서 원래라면 O(n^3)의 복잡도를 갖는 연산을 수행한다. 그러나 리액트는 O(n)의 휴리스틱 알고리즘을 통해서 트리를 비교 연산한다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 비교 알고리즘 두 개의 트리를 비교할 때 두 엘리먼트의 Root부터 비교한다. 이 Root엘리먼트의 타입이 다른 경우 아예 새로운 트리를 구축하기 시작..

서버사이드 렌더링을 통하여 얻을 수 있는 가장 큰 이점은 검색엔진 최적화 CSR, SSR SPA Single Page Application (SPA) 즉 리액트나 앵귤러같이 초기에 서버에서 JSON 형태로 값을 받아오고 나면 그 뒤로부터는 마치 네이티브 앱을 사용하는 것처럼 작동하는 웹앱을 말한다. 새로고침 방식의 웹과 달리 필요한 static파일을 한번에 또는 나눠서 다운받고 필요한 데이터만 서버로부터 동적으로 받아 네이티브한 형태인 것. 초기 페이지에서 모든 리소스를 다운받지 않고, 리소스를 청크(Chunk) 단위로 묶어서 해당 리소스에 대한 요청이 있을 때만 다운로드 받도록 하는 방법을 적용하면 초기 구동속도 문제를 많이 완화시킬 수 있다. CSR? Client side rendering 최초 로딩..

디바운싱 디바운싱에 대한 예제를 구현한다 디바운싱의 적용 예는 검색인데 사용자가 검색어를 입력할 때 검색창 밑에 연관검색어를 나열해준다. 이 때 이벤트는 각 글자당 계속 발생하기 때문에 서버에 요청도 같은 숫자로 계속 전해진다. 사과하나를 치는데 이벤트가 ㅅ ㅏ ㄱ ㅗ ㅏ , 총 5번이 일어나므로 한 두명이 아닌 수천명이면 고작 두글자에 몇만번이상의 요청을 보내게 된다. 그래서 연이어 호출되는 이벤트중 마지막 이벤트만 호출하도록 하는 것이 디바운싱이다. $searchInput.addEventListener("keyup", (e) => { if (this.timer) { clearTimeout(this.timer); } this.timer = setTimeout(() => { if (e.keyCode ==..

쓰로틀링 쓰로틀링에 대해 예제를 구현한다. 쓰로틀링과 디바운싱기법이 있는데 사용하는 이유는 이벤트가 중복되서 호출되지 않도록 함이다. 쓰로틀링은 주로 스크롤 이벤트에서 적용되는데, 스크롤도 스크롤 내리면 딱 한번 이벤트가 들어가는 것이 아니라 수십 수천번까지 이벤트가 발생한다. 마지막 호출 이후에 특정 시간동안 다음 이벤트가 호출되지 않도록 하는 것이 쓰로틀링이다. 예제 var timer; document.querySelector('#input').addEventListener('input', function (e) { if (!timer) { timer = setTimeout(function() { timer = null; console.log('여기에 ajax 요청..

IntersectionObserver API 무한 스크롤, 레이지로드할 때 사용하는 API 뷰포트 또는 특정 요소사이에 교차를 감지하기 위해 사용한다. IntersectionObserver JS API docs 무한 스크롤을 구현할 때 많이 쓰는 것 같음. element가 viewport, 다른 엘리먼트와의 관계에서 보일지, 안보일지를 정하는 API callback : 관측 대상이 threshold 만큼 보일 때 호출되는 함수 관측대상을 ref로 정함 root : 대상이 보임을 확인하기 위한 뷰포트로 사용되는 요소. 관측대상의 조상이어야함 문서 내 스크롤이 가능한 요소 내에 관측대상이 있으면 root가 그 요소로 가게됨 => 관측대상이 스크롤가능한 조상에 있는지, 그 조상이 root인지 정함 rootMa..