본문 바로가기

All

 (82)
[인프런 코딩테스트] 마구간 정하기, 결정 알고리즘 (feat. 이분탐색 응용, javascript) 1. 문제 N개의 마구간이 수직선상에 있습니다. 각 마구간은 x1, x2, x3, ......, xN의 좌표를 가지며, 마 구간간에 좌표가 중복되는 일은 없습니다. 현수는 C마리의 말을 가지고 있는데, 이 말들은 서로 가까이 있는 것을 좋아하지 않습니다. 각 마구간에는 한 마리의 말만 넣을 수 있고, 가장 가까운 두 말의 거리가 최대가 되게 말을 마구간에 배치하고 싶습니다. C마리의 말을 N개의 마구간에 배치했을 때 가장 가까운 두 말의 거리가 최대가 되는 그 최대 값을 출력하는 프로그램을 작성하세요. 첫 줄에 자연수 N(3
[Web] SSG, ISR의 개념과 차이점 1. SSG SSG는 Static Site Generation의 약자로, 정적인 웹사이트를 만들 때 사용한다. SSR과 똑같이 서버에서 렌더링 하지만 렌더링 되는 시기가 SSR과 다르다. SSG는 서버에 배포한 후, 빌드할 때 렌더링(html 코드로 변환됨)된다. 실제 html 파일들은 빌드할 때 미리 만들어 둔다고 생각하면 된다. 1) SSG Rendering 방식 서버에 배포 한 후 빌드시 렌더링이 일어나면서 html 파일이 생성된다. 이후 사용자가 홈페이지에 접속하면, 클라이언트가 서버에 요청을 보내고 서버는 만들어준 html 파일을 보내준다. 클라이언트는 받은 데이터를 통해 html을 표기해 준다. 2) 장점 ① 페이지 로딩 시간(Time To View)이 짧다 ② 자바스크립트 필요 없음 ③ SE..
[Web] CSR, SSR의 개념과 차이점 렌더링 방식에는 CSR, SSR, SSG, ISR처럼 다양한 방법이 존재한다. 어떻게 렌더링하냐에 따라 웹 사이트의 성능이 달라지기 때문에 각 사이트에 맞는 렌더링 방식을 사용해야 한다. 따라서 이번엔 각 렌더링 방식의 개념과 차이점에 대해 알아보려 한다. 우선 CSR과 SSR에 대해서 알아보자. 브라우저 엔진은 html 구문을 해석해 DOM tree를 수정하고, CSSOM 스타일링 객체를 구성한다. 그리고 여러 과정을 통해 화면에 코드를 그려낸다. 이때 html 구문을 서버와 클라이언트 중 누가 가져오냐에 따라 CSR과 SSR이 나눠진다. 말 그대로 어느 Side에서 렌더링을 하냐에 따라 나뉜다고 생각하면 된다. 1. CSR CSR은 Client Side Rendering의 약자로, 렌더링의 주체자가 ..
[Web] 웹 브라우저 렌더링(Rendering)이란? next.js를 공부하다가 웹 브라우저 렌더링 방식에 대해 제대로 이해할 필요가 있음을 느꼈다. 따라서 렌더링이 무엇인지부터 차근차근 블로그에 정리해보려 한다. 1. 렌더링(Rendering) 렌더링은 웹사이트가 그려지는 과정을 의미한다. 웹 브라우저에는 자바스크립트 코드를 읽어와 기능을 작동시키는 자바스크립트 엔진과 사용자가 볼 화면을 그려내는 렌더링 엔진, 두 가지가 들어가 있다. 렌더링 엔진은 HTML, CSS, Javascript 세 가지 언어를 통해 웹사이트의 소스코드를 읽어와 실시간으로 화면을 그려낸다. 모든 웹 브라우저에는 렌더링 엔진을 가지고 있으며, 우리가 가장 많이 사용하고 있는 크롬이나 엣지는 크롬의 Blink(블링크) 렌더링 엔진을 사용하고 있다. 2. 렌더링(Rendering) 순..
[Algorithm] 이진탐색 알고리즘 (Binary Search Algorithm) 1. 이진탐색(Binary Search) 이분탐색이라고도 불리는 이진탐색 알고리즘은, 정렬된 배열 내에서 대상 값의 위치를 찾는 검색 알고리즘이다. 대상 값을 배열의 중간 요소와 비교한 후, 동일하지 않으면 절반을 제거하고 이를 성공할 때까지 반복한다. 정렬된 배열을 앞에서부터 하나하나 순차적으로 탐색하는 것을 순차탐색이라 하는데, 이러한 순차탐색보다 좀 더 빠르게 위치를 찾을 수 있다. 이진탐색의 시간복잡도는 O(log(n))이다. (순차탐색의 시간복잡도는 O(n)) 2. 이진탐색 구현 function solution(target, arr) { let answer; arr.sort((a, b) => a - b); //인덱스번호 let lt = 0, rt = arr.length - 1; while (lt..
[Algorithm] 탐욕 알고리즘 (Greedy Algorithm) 1. 탐욕 알고리즘(Greedy Algorithm) 탐욕 알고리즘은 선택의 순간마다 그 이후를 고려하지 않고, 현 시점에서 가장 최적인 방법을 선택하는 알고리즘을 말한다. 순간마다 최적인 방법을 선택하기 때문에 항상 최적의 결과값을 배출하진 않는다. 그러나 다른 알고리즘보다 평균적으로 속도가 빠르고, 어느 정도 최적에 근사한 답을 알려준다. 2. 문제 : 회의실 배정 한 개의 회의실이 있는데 이를 사용하고자 하는 n개의 회의들에 대하여 회의실 사용표를 만들 려고 한다. 각 회의에 대해 시작시간과 끝나는 시간이 주어져 있고, 각 회의가 겹치지 않게 하 면서 회의실을 사용할 수 있는 최대수의 회의를 찾아라. 단, 회의는 한번 시작하면 중간에 중 단될 수 없으며 한 회의가 끝나는 것과 동시에 다음 회의가 시작..
[Error] nextjs localStorage is not defined error (feat. window is undefined error) localStorage is not defined sessionStorage is not defined nextjs 에서 localStorage, sessionStorage 를 이용해서 로그인 로그아웃을 구현하려는데 localStorage is not defined error 가 발생했다 ​ 페이지라 클라이언트에 로드되지 않았는데, localstorage에 접근했기 때문에 발생한 에러였다. ​localstorage, sessionStorage는 window 안에 있는 메서드이다. window는 브라우저 전역 객체로 서버에서는 사용할 수가 없다. next.js의 경우 ssr, 즉 서버가 먼저 정의된 후 클라이언트가 정의되기 때문에 에러가 발생한다. typeof window !== 'undefined' ​따..
[Algorithm] 삽입정렬 알고리즘 (Insertion Sort Algorithm) 1. 삽입정렬 (Insertion Sort) 삽입정렬은 배열의 모든 요소를 앞에서부터 차례로 비교하여 자신의 위치를 찾아 삽입하며 정렬하는 알고리즘이다. 앞에 있는 요소들과 비교해야 하기 때문에 두 번째 인덱스부터 시작한다. 평균적으로 O(n^2)의 시간복잡도를 갖는다. 2. 삽입정렬 구현 function solution(arr) { let answer = arr; for (let i = 1; i = 0; j--) { if (arr[j] > tmp) arr[j + 1] = arr[j]; else break; } arr[j + 1] = tmp; } return answer; } let arr = [..

티스토리툴바