All (73) 썸네일형 리스트형 [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 = [.. [Algorithm] 버블정렬 알고리즘(Bubble Sort Algorithm) 1. 버블정렬(Bubble Sort) 버블정렬은 인접한 항목의 각 쌍을 비교하여 순서를 정렬하는 알고리즘이다. 6 5 3 1 8 7 2 4 > 6, 5 교환 5 6 3 1 8 7 2 4 > 6, 3 교환 5 3 6 1 8 7 2 4 > 6, 1 교환 5 3 1 6 8 7 2 4 > 6, 8 교환x 5 3 1 6 8 7 2 4 > 8, 7 교환 5 3 1 6 7 8 2 4 > 8, 2 교환 5 3 1 6 7 2 8 4 > 8, 4 교환 5 3 1 6 7 2 4 8 위처럼 한 번의 반복이 끝나면 가장 큰 숫자가 맨 마지막에 오게 된다.(오름차순 기준) 이를 모든 숫자를 서로 비교할때까지 반복하면 된다. O(n^2)의 시간복잡도를 갖으며, 매우 단순하지만 성능이 좋지 않기 때문에 잘 사용하지 않는다. 2. 버.. [Algorithm] 선택정렬 알고리즘(Selection Sort Algorithm) 1. 선택정렬 선택정렬은 정렬 알고리즘 중 하나로, 내부 비교 정렬이다. 가장 앞의 값을 기준으로 배열 내에서 최소값을 찾고, 해당 값을 가장 앞의 값과 교환한다. 이를 반복하면서 배열을 정렬하는게 선택정렬이다. O(n^2)의 시간복잡도를 갖기 때문에 성능이 떨어지지만 메모리가 절약된다는 장점이 있다. 또한 데이터가 중복된 경우에도 위치가 바뀔 수 있는 Unstable 정렬이다. 따라서 데이터가 큰 경우보다, 메모리가 제한되는 경우에 사용하는 것이 좋다. 2. 선택정렬 구현 function solution(arr) { let answer = arr; for (let i = 0; i < arr.length; i++) { let idx = i; for (let j = i + 1; j < arr.length;.. 이전 1 ··· 4 5 6 7 8 9 10 다음
