6 - 22 TIL

hoin_lee·2023년 6월 22일

목록 보기

190/236

Algorithm

n^2 배열 자르기

function solution(n, left, right) {
    let answer = [];
    let start = [Math.floor(left/n)+1,left%n]
    let end = [Math.floor(right/n)+1,right%n]
    for(let i=start[0];i<=end[0];i++) {
        let idx =1;
        if(i===start[0]) idx = start[1]+1
        if(i===end[0]) n = end[1]+1
        for(let j=idx;j<=n;j++) {
            let num = i>=j?i:j
            answer.push(num)
        }
    }
    return answer;
}

처음엔 이차원 배열로 풀어보고 별걸 다 해봤는데 시간도 너무 오래걸리고 메모리를 많이 써서 접근법이 잘못 됐나 싶었다.
그래서 보니 각 좌표별로 보면 좌표의 x,y값중 큰 값으로 배치되는 규칙이 있어 적용하여 해결했다.
몫과 나머지를 사용해서 인덱스 시작 위치와 끝 위치를 구하고 그 사이만 구할 수 있도록 한다

다른사람풀이

function solution(n, left, right) {
    var answer = [];
    for (let i = left; i <= right; i++) {
        answer.push(Math.max(i % n, parseInt(i / n)) + 1)
    }
    return answer;
}

시작점과 끝점을 각각 left와 right로 잡고 정답 배열에 집어 넣는데
i번째 index를 n으로 나눈 나머지와 i/n으로 나눈 정수값의 +1

i/n으로 나눈 정수값의 +1 : x좌표
i%n : y좌표

좌표값을 계산하는 건 똑같았지만 풀어낸 과정이 달랐다.. 각 위치의 값들은 계속 저런식으로 나눈 값과 나머지값들을 활용해 만들 수 있었는데 너무 복잡하게 생각했던 것 같다.
좀 더 효율적으로 할 수 있게 다양한 방법으로 시도해보자 아쉬운 점이다.

CS

CSR 과 SSR

그전에 MPA와SPA부터 보고 가자

SPA(Single Page Application)란?

SPA 싱글 페이지 애플리케이션으로
싱글 페이지 즉, 하나의 페이지로 이루어진 홈페이지!
하나의 페이지로만 구성되어 있어 CSR에 적합하다
데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 페이지가 새로고침 되지 않고 다른페이지로 넘어가지 앟는다
Vue,Angular,React 프레임워크로 만든 홈페이지들이 대부분 여기 속한다
하지만 모든 SPA가 CSR을 사용하는 것은 아니고 PHP나 JAVA로 정적인 페이지 하나만 구성된 홈페이지라면 그것 또한 SPA이다

MPA(Multiple Page Application)

MPA 멀티페이지 애플리케이션으로
여러 개의 페이지로 이루어진 홈페이지!
PHP나 JAVA가 여기에 속한다.
여러 개의 페이지로 구성되어 있으므로 보통 클라이언트에서 서버에 요청을 보내면 서버에서 렌더링하고 클라이언트에게 응답을 주는 방식인 SSR환경을 사용한다
SPA와 반대로 새로고침이 발생

CSR

CSR은 클라이언트 사이드 렌더링이라는 뜻으로 구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨있는 JS를 다운로드 한다.
그 후 빈 HTML에 JS를 이용하여 DOM을 동적으로 생성하여 그려내게 되는데 이렇게 클라이언트에서 렌더링한다고 하여 클라이언트 사이드 렌더링이라고 부른다
SPA에 적합한 환경!
장점

JS를 사용해서 동적으로 DOM을 그려내기 때문에 원하는 내용만 업데이트 가능
링크 이동을 클릭했을 때 헤더, 푸터와 같이 중복되는 내용은 고정하고 안 콘텐츠만 업데이트 할수도 있다

단점

HTML파일을 하나만 받아와 작동하다 보니 각각 페이지에 대한 정보를 담기 힘들어 SEO에 취약.
첫 로드시 모든 로직이 담겨있는 JS를 다운로드 하다 보니 첫 진입 시 로딩 속도가 길다는 단점이 있다

SSR

SSR은 서버 사이드 렌더링이라는 뜻으로 구동 방식은 서버에서 렌더링하여 완성된 HTML파일을 로드해 준다.
클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 념겨주기 때문에 페이지가 여러 가지일 수밖에 없다. MPA구동 방식과 밀접한 관계가 있다

장점

SSR은 클라이언트에서 요청한 페이지의 HTML을 다운로드 하기 때문에 CSR보다 초기 진입 시 로딩이 빠르다
서버에서 렌더링 후 개별 페이지를 넘겨받는 것으로 각 페이지에 대한 정보를 입력하기 쉽다. CSR보다 SEO를 향상시킬 수 있음
단점
링크 이동 클릭시 HTML 파일 자체를 서버에서 받아오기 때문에 화면 깜빡임 현상이 있다.
부분 업데이트하는 CSR과는 달리 클릭했을 때 새로운 HTML을 받아오기 때문
초기 진입은 CSR보다 빨라도 페이지 이동은 SSR이 더 느린편에 속한다.
SSR은 HTML을 JS보다 먼저 받아오기 때문에 완성된 HTML로 화면은 확인되지만, JS 다운이 늦어진다면 기능이 동작하지 않는 경우가 있다