Higher의 창작소

이번에 정보처리산업기사 필기시험을 치뤘습니다.

본래라면 정보처리기사를 보고싶었으나 아직 학점은행제를 통해서 보기엔 점수가 모자라서 천천히 계단을 쌓는다는 생각으로 산업기사 시험을 보기로 했습니다.

기본적인 지식은 어느정도 있었기 때문에 95점, 85점, 95점으로 합격했습니다.

학습방법은 인터넷강의를 통해서 진행하였는데

올해부터 정보처리산업기사 역시 정보처리기사와 마찬가지로 시험범위와 방식이 모두 바뀌었기 때문에

그 트렌드에 맞춰 커리큘럼을 짜는 인강을 고르는게 중요했습니다.

커넥츠공단기에서 제공하는 자격증단기는 순서도 엉망진창에 무엇을 봐야할지도 모르겠고 강의 길이도 지나치게 길었기 떄문에 후보에서 제외했습니다. 

패스트캠퍼스는 인강목차라던가 강의 당 길이같은 정보를 가리고 전혀 제공하지 않았기 때문에 수상해 신뢰도가 떨어져 제외했습니다.

다른 인강들도 많이 봤지만 강의 목차와 길이 2022년에 대비해서 커리큘럼을 제대로 짠 곳은 기사퍼스트밖에 없었습니다.

그래서 기사퍼스트를 통해 권우석 선생님의 강의를 진행했고 20일정도의 학습기간을 통해서 무난하게 합격하였습니다. 

산업기사 강의에 맞게 콤팩트하고 딥하게 들어가지 않아서 좋았고 이것만 들어도 합격점은 무난히 나올거라고 생각합니다.

시험문제의 난이도

의외로 자바스크립트 문제가 많이 나왔습니다.

기사퍼스트 강의에서 본강의 말고도 시험후에 더 필요하다는 내용이 있으면 특강형식으로 추가강의를 올려주는데 거기에도 자바스크립트가 있으니 확실히 2022년이 되고 시험문제 출제방식이 다소 변했다는 말이 와닿았습니다.

그것말고도 기존의 출제 방식과 다른 내용이 있다고 하지만 저는 이번이 처음시험이라 자세히는 몰랐습니다 다만, 그런 내용은

특강에서 다뤄주고 있으니 만약 기사퍼스트에서 인강을 진행하신다면 그냥 강의 내용만 충실하면 이론에서 구멍이 나는 일은 없을 것입니다.

결론

정보처리산업기사 자격증을 인터넷강의를 통해 진행하실거면 기사퍼스트 권우석 선생님꺼 듣는게 속편합니다.

스택프레임을 이용한 재귀함수를 통해 이진트리 깊이 우선탐색 DFS의 순회의 종류와 그 순서를 알아보자.

DFS(v)의 v는 정점(vertex)라는 의미를 가지고 있다.

이진트리의 기본 진행 순서는 부모노드 -> 왼쪽 -> 오른쪽이다. 

해당 문제의 왼쪽 값은 v*2 오른쪽 값은 v*2+1이다.

전위 순회 출력

      function solution(n) {
        let answer = "";
        function DFS(v) {
          if (v > 7) return;
          else {
            answer += v + " "; //전위순회
            DFS(v * 2);
            DFS(v * 2 + 1);
          }
        }
        DFS(n);
        return answer;
      }

      console.log(solution(1));

전위순회의 경우 부모 -> 왼쪽 -> 오른쪽 순으로 순회한다.

  1 -> (2 -> 4 -> 5) -> (3 -> 6 -> 7)

부모          왼쪽                 오른쪽

         부     좌    우      부   좌    우

즉 1 2 4 5 3 6 7 의 순으로 진행된다.

중위 순회 출력

      function solution(n) {
        let answer = "";
        function DFS(v) {
          if (v > 7) return;
          else {
            DFS(v * 2);
            answer += v + " "; //중위순회
            DFS(v * 2 + 1);
          }
        }
        DFS(n);
        return answer;
      }

      console.log(solution(1));

중위순회의 경우 왼쪽 -> 부모 -> 오른쪽 순으로 순회한다.

 (4 -> 2 -> 5) -> 1 -> (6 -> 3 -> 7)

       왼쪽         부모      오른쪽

  좌    부    우             좌    부   우

즉 4 2 5 1 6 3 7 의 순으로 진행된다.

후위 순회 출력

      function solution(n) {
        let answer = "";
        function DFS(v) {
          if (v > 7) return;
          else {
            DFS(v * 2);
            DFS(v * 2 + 1);
            answer += v + " "; //후위순회
          }
        }
        DFS(n);
        return answer;
      }

      console.log(solution(1));

후위순회의 경우 왼쪽 -> 오른쪽 -> 부모 순으로 순회한다.

 (4 -> 5 -> 2) -> (6 -> 7 -> 3) -> 1

       왼쪽               오른쪽        부모

  좌    우    부      좌    우    부

즉 4 5 2 6 7 3 1 의 순으로 진행된다.

해당자료는 알고리즘의 보충자료로서 만들어졌습니다.

1. 스택 프레임의 정의

스택 프레임(Stack Frame)이란 함수가 호출될 때, 그 함수만의 스택 영역을 구분하기 위하여 생성되는 공간이다. 이 공간에는 함수와 관계되는 지역 번수, 매개변수,복귀주소가 저장되며, 함수 호출 시 할당되며, 함수가 종료되면서 소멸한다.

이 영역을 표현하기 위해 함수 프롤로그(Prolog)와 함수 에필로그(Epilog)라는 것을 수행한다.

(스택 프레임이란 ESP(스택 포인터)가 아닌  EBP(베이스 포인터) 레지스터를 사용하여 스택 내의 로컬 변수, 파라미터, 복귀 주소에 접근하는 기법입니다.)

ESP(스택 포인터): 스택이 현재 어디에 있는지를 가리키는 역할을 하는 레지스터다. (변화함)

EBP: 스택프레임의 시작을 알리는 포인터다. 사실상 스택의 최하단(?).. 을 가리키고 있다고 보면된다.(고정됨)

위의 복잡한 내용이 헷갈리면 간단히 아래의 그림만 숙지하자.

2.재귀함수와 스택프레임

      function solution(n) {
        function DFS(L) {
          if (L == 0) return;
          else {
            console.log(L);
            DFS(L - 1);
          }
        }
        DFS(n);
      }

      solution(3);

다음 함수의 출력순서는

3

2

1

이다.

이때 순서를 1 2 3의 순으로 나열하고 싶으면 어떻게 해야할까? 

스택을 이용한다면 console.log를 DFS밑에 적어주면 된다.

      function solution(n) {
        function DFS(L) {
          if (L == 0) return;
          else {
            DFS(L - 1);
            console.log(L); //위치 변경
          }
        }
        DFS(n);
      }

      solution(3);

DFS(L-1) 밑에 console.log(L)을 적어주면 다음과 같은 순으로 스택이 쌓이게 된다.

<DFS(0)은 if조건문에 의해 return된다.>

복귀주소:  DFS()의 함수내용을 전부 실행한 후 스택프레임이 사라지면서 자기가 호출되었던 주소로 복귀한다.
(여기서는 DFS(n)으로 복귀 후 그 다음줄부터 실행)

스택의 처리 순서는 LIFO(Last In First Out)이므로 DFS(0)이 리턴된후 DFS(1)의 복귀주소로 돌아간 뒤 6번째 줄인 console.log(L)이 먼저 찍히는 것이다. 

그렇게 되면 출력의 순서는 

1

2

3

순으로 나오게 된다.

이번에는 간단하게 스택프레임과 그것을 이용한 재귀함수에 대해서 알아봤다.

다음에는 이를 더 응용한 이진트리에 대해서 알아볼 것이다.

reference:

<esp,ebp 구체적인예시>

https://p3ngdump.tistory.com/40

https://eliez3r.github.io/post/2019/10/16/study-system.Stack-Frame.html

https://welcome-young.tistory.com/61

Static Site Generator(SSG)의 정의 및 장,단점

정의

SSR처럼 서버로부터 완성된 HTML을 받아오지만,
다른 점은 HTML 파일의 생성시점이 '빌드 타임'이라는 것이다.

Static 이라는 용어가 들어간 것은 HTML이 정적이라는 것이지 페이지가 정적이라는게 아니므로 오해하지 말아야 한다.

장점

1. 생성이 완료된 HTML 문서를 재활용 하기에 응답 속도가 매우 빠르다.

2. 이미 생성된 HTML 파일을 받기 때문에 SEO 친화적이다.

3. build 명령은 실제로 사이트를 방문하는 사람의 워크플로를 벗어나므로 시간이 좀 걸리더라도 문제되지 않는다.

단점

모든 URL에 대해 개별 HTML 파일을 생성해야 한다. 따라서 URL을 미리 예측할 수 없거나 URL을 예측할 수 없으면 적용이 어렵다.

Static Site Generator(SSG)와 NEXT js

NEXT Js란?

SPA는 기본적으로 CSR 방식을 사용하여 동작한다.
하지만 CSR 방식이 가진 단점을 극복하기 위해 'SSR 개념을 부분 적용'하고 싶을 수가 있다.

React를 기준으로 설명하자면,
SSR 방식을 도입하기 위해 React 라이브러리에서 자체 제공하는 ReactDOMServer를 이용해 직접 설정을 구축하는 방법이 있다. 하지만 이와 같은 방법은 사전 설정에 들어가는 시간이 많고 그 구성 또한 복잡하여 러닝 커브가 다소 높다고 볼 수 있다.

또 다른 방식으로는 위 방법보다 간편하게 SSR 방식을 적용하기 위해 개발된 프레임워크를 사용하는 것이다. 대표적으로 React 생태계에서는 Next와 Gatsby가 있고 Vue에서는 Nuxt가 있다.
(Next와 Nuxt는 같은 회사 (구)ZEIT -> (현)Vercel 에서 개발했다)

NEXT Js에서의 SSR 및 SSG개념

 NEXT는 브라우저에 렌더링 할 때 기본적으로 pre-redering(사전 렌더링)을 한다고 소개한다

(이는 NEXT의 default로 설정되어 있다).

pre-rendering이란 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다.

즉, Pure React에서 CSR 방식은 번들링 된 js가 클라이언트 단에서 모든 추가 렌더링을 담당했다면

Next의 pre-rendering 시스템에서는 빌드 타임 때 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해 가지고 있다가 서버로 요청이 들어올 때 알맞은 페이지를 반환해준다.

아래의 그림을 참고하자.

사실 pre-rendering이란 랜더가 완전히 준비된 HTML파일을 만드는 것을 의미한다.

※ 단지, NEXT에서의 pre-rendering이 default 값으로 SSG가 적용되고 있을 뿐이다.

그리고 SSR또한 엄밀히 말하면 SSG에 속한다고 말할 수 있다.(둘 다 미리 랜더가 준비된 HTML을 만드니까) 

즉, 둘 다, pre-rendering의 형식에 해당한다.

pre-rendering을 하기 위해 두 가지 형식을 자세히 알아보자. 이는 다음과 같다.

1. Static-Generation (추천) : HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다.
2. Server-Side-Rendering : 요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환한다.

이 두 방식은 Next에서 pre-rendering을 어떻게 그리고 언제 제공하는지에 대한 차이이다. 

SSG

Static-Generation(또는 SSG) 방식은 빌드 타임(npm run build)시

우리가 pages 폴더에서 작성한 각 페이지들에 대한 각각의 HTML 문서를 생성해서 정적(static) 문서로 가지고 있게 된다.

이 페이지에 대한 유저들의 요청이 발생하게 되면, 요청에 따라 계속 서버에서 재생성 하는 것이 아니라 이미 생성이 완료된 페이지를 반환해주게 된다.

따라서 생성이 완료된 HTML 문서를 재활용 하기에 응답 속도가 매우 빠르다.

Next에서는 다음과 같은 경우에 Static-Generation 을 사용할 것을 권고하고 있다.

• 퍼포먼스에 집중 (CDN을 통해 더 빠른 응답 가능)
• 마케팅 페이지 / 블로그 게시물 / 제품의 목록 등과 같이 정적 생성하여 각 요청에 동일한 문서를 반환할 수 있는 경우

SSR

반면 SSR 방식은 유저의 요청 때 마다 그에 상응하는 HTML 문서를 생성하여 반환하는 방식이다.

SSR을 사용하는 경우는 다음과 같이 설명하고 있다.

• 항상 최신 상태를 유지해야 하는 경우 (요청에 따라 응답해야 할 내용이 시시각각 변함)
• 제품의 상세 페이지 / 분석 차트 등 요청 마다 다른 내용 또는 형식의 HTML 문서가 반환되는 경우

Static Site Generator(SSG)의 동작 방식

1. 사용자가 웹 페이지를 방문하면(request), 엣지 캐싱(edge caching)된 HTML 클라이언트로 반환해 준다.

2. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 한다.

엣지 캐싱(edge caching)이란?



최종 사용자에게 더 가까운 컨텐츠를 저장하기 위해 캐시 서버를 사용하는 것이다. 대표적으로 CDN을 많이 사용한다.



캐시 서버(Cache Server)는 인터넷 서비스 속도를 높이기 위해 사용자와 가까운 곳에 데이터를 임시 저장하여 빠르게 제공해주는 프록시 서버(클라이언트와 서버 사이에서 데이터를 전달해 주는 서버)를 의미한다.

CDN(Content Delivery Network): 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식 
    ex) aws의 cloudflare

참조자료

https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg#static-site-generator-ssg

https://velog.io/@longroadhome/FE-SSRServer-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-SSGStatic-Site-Generation-feat.-NEXT%EB%A5%BC-%EC%A4%91%EC%8B%AC%EC%9C%BC%EB%A1%9C#next-js-%EC%97%90%EC%84%9C%EC%9D%98-ssr-%EB%B0%8F-ssg-%EA%B0%9C%EB%85%90

https://velog.io/@developerjhp/CSR-vs-SSR-vs-SSG#ssg