Kang-ji

CSS 를 이용하기

• 부모요소에 height와 perspective 속성을 설정하여 parallax 효과를 간단하게 구현할 수 있다.
• 비교적 가볍고 간단하게 효율적으로 인터렉티브 요소 적용이 가능하다.
• 인터렉티브 요소 조작이 제한적으로 복잡한 인터렉션 구현에 한계가 있다.

See the Pen parallax-scrolling-css by KangJi (@Kangjii) on CodePen.

Javascript 로 구현

• 스크롤에 따라 직접적으로 객체에 효과를 주어 직접적인 통제가 가능하여 구현의 자유도가 높다.
• 사용자의 인풋에 따르는 등 복잡한 인터렉션, 애니메이션 구현이 가능하다.
• 인터렉션 요소에 따라 웹성능에 지장을 줄 수 있다.
• 사용자의 인풋 등과 관계된 인터렉티브 구현이 필요한 경우에 적합하다.

See the Pen parallax-scrolling-js by KangJi (@Kangjii) on CodePen.

모바일 Parallax 동작 이슈

모바일 화면의 경우 방향전환이 가능함으로 인해 설정해준 사이즈와 스크롤 높이 등이 

쉽게 바뀔 수 있어 스크롤에 따라 패럴럭스가 의도대로 동작 하지 않을 수 있다.

PC의 경우 마우스 또는 트랙패드로 스크롤하지만

모바일은 터치스크린으로 동작이 되기때문에 스크롤의 속도와 방향 조절을 어렵게 만들 수 있다.

저성능 기기에서 느린 스크롤 등의 성능저하를 일으킬 수 있다,

위의 사용자 경험을 해칠수 있는 점들을 고려하여 구현이 필요함에 따라

모바일 기기에서 상황에 따라 페럴럭스 스크롤의 동작을 제외시킬때 해결방법

CSS에서는 미디어쿼리를 통해 

설정해주었던 perspective 속성값을 없애주면 된닥.

javascript의 경우

viewport 로 접근하여 

documentElement.clientWidth

- html 문서의 화면노출 width 값 (border, margin, scrollbar 제외한 너비)

스택(Stack) 

스택(Stack)이란?

한 쪽 끝에서만 자료를 넣고 뺄 수 있는  후입 선출의 구조로, LIFO(Last In First Out) 형식의 자료 구조

스택(Stack)의 연산

스택(Stack)는 LIFO(Last In First Out) 를 따른다. 즉, 가장 최근에 스택에 추가한 항목이 가장 먼저 제거될 항목이다. (입구와 출구가 동일지점으로 데이터의 삽입과 삭제가 한방향에서만 이루어진다.)

• push(item): 삽입연산. item 하나를 스택의 가장 윗 부분에 추가한다.
• pop(): 삭제 연산. 스택에서 가장 위에 있는 항목을 제거한다.
• top : 삽입과 삭제가 일어나는 위치를 Top이라고 한다.
• peek(): 스택의 가장 위에 있는 항목을 반환한다.
• isEmpty(): 스택이 비어 있을 때에 true를 반환한다.

스택(Stack)의 사용사례

• 웹브라우저 방문기록 (뒤로가기) : 가장 나중에 열린 페이지부터 다시 보여준다.
• 실행 취소 : 가장 나중에 실행된 것부터 실행취소
• 역순 문자열 만들기 :가장 나중에 입력된 문자부터 출력
• 후위 표기법 계산
• 안드로이드의 액티비티
• 수식의 괄호 검사 : 연산자 우선순위 표현을 위한 괄호 검사

큐(Queue)

큐(Queue) 란?

먼저 들어온 것이 먼저 나가는 선입선출로 FIFO(First In First Out) 형식의 자료구조

큐(Queue) 의 연산

규에서 데이터의 삽입과 삭제 연산을 주로 enQueue와 deQueue라 칭한다. 

스택과 다르게 입구와 출구가 각각 나위어져 있다. 

이때 출구는 머리(Front)로 정해 삭제연산만 수행하고, 입구는 꼬리(Rear)로 정해 삽입연산만 수행한다. 

• enqueue(): 꼬리, 리어(rear)에서 이루어지는 삽입연산.
• dequeue(): 머리, 프론트(Front)에서 이루어지는 삭제 연산.\

큐(Queue)의 사용사례

큐는 주로 데이터가 입력된 시간 순서대로 처리해야할 필요가 있는 상황에 이용한다. 

• 은행업무
• 대기열 순서와 같은 우선순위의 작업예약
• 서비스 센터의 대기시간
• 프로세스 관리
• 너비 우선탐색(BFS, Breadth First Search) 구현
• 캐시(Cache) 구현

연속 리스트(Contiguous List) 

배열처럼 연속적인 기억 장소에 데이터가 저장되는 자료구조. 

연속적으로 데이터가 저장되어있어 검색에는 용이하지만, 데이터의 삽입이나 삭제에 단점이있다. 삽입과 삭제가 일어나는 경우 자료의 이동이 필요하다는 번거로움이 있다.

연결 리스트(Linked List)

데이터를 임의기억공간에 기억시키되, 데이터 항목의 순서에에 따라 노드의 포인터를 이용하여 서로 연결시킨 자료구조. 

새로운 데이터를 추가하고 삭제하는 것이 용이하고 효율적이다.

배열처럼 메모리에 연속적으로 위치하지 않고 구조의 재구성이 필요없다. 메모리를 더 효율적으로 사용할 수 있기 때문에 

대용량의 데이터 처리에 적합하다. 하지만 연결이 끊어지면 다음 노드를 찾기가 어렵고 속도가 느리다는 단점이 있다. 

연결리스트 구분

연결방향에 따라 단일 연결 리스트, 연결리스트, 이중연결리스트, 환형 연결리스트가 있다. 

단일 연결 리스트

각 노드에 자료공간과 한개의 포인터 공간이 있고 각 노드의 포잍너는 다음 노드를 가리킨다.

이중연결리스트

단일 연결리스트와 비슷하지만 포인터 공간이 두개가 있고 각각의 포인터는 앞의 노드와 뒤의 노드를 가리킨다. 

원형 연결리스트

일반적인 연결리스트에 마지막 노드와 처음 노드를 연결시켜 원형으로 만든 구조

배열 (Array)

배열(Array)이란? 

가장 기본적인 데이터구조로 연속된 메모리 공간에 순차적으로 저장된 데이터 모음.

생성되는 순간 설정되는 셀에 인덱스가 부여되고 해당 셀의 개수는 고정된다.

이때 부여된 인덱스를 통해 원하는 데이터에 겁근할 수 있다.

배열은 바로 만들어서 사용하기가 쉽고 원하는 데이터를 효율적으로 검색하여 가져오는게 가능하다. 

배열을 기반으로 더 복잡한 자료 구조를 만들 수 있으며 정렬이 용이하다는 장점이 있다. 

대부분의 프로그래밍 언어에서 동일타입의 데이터를 저장한다. 

배열을 구성하는 각각의 값을 Element라고 하며, 배열에서의 위치를 가리키는 숫자는 Index라고 한다. 

배열(Array)의 단점

생성될 때 셀의 개수가 고정되므로 데이터를 저장할 수 있는 메모리의 크기가 고정되어 있고 데이터를 추가, 삭제하는 과정이 비효율적이다. 

데이터가 삭제되고 나면 남은 셀은 빈공간이 되므로 메모리 낭비가 심하다. 

배열(Array)의 사용사례

• 순차적인 데이터를 저장하며 값보다는 순서가 중요할때 (주식 가격, 대회결과, 날씨 등)
• 다차원 데이터를 다룰때 (배열 안의 배열이 필요할 경우)
• 어떤 특징의 요소를 빠르게 읽어야 할때 (인덱스로 바로 불러와야 할경우)
• 데이터 사이즈가 자주 바뀌지 않으며 요소가 삭입/삭제 작업이 적을 때

The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다. 이 GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있어요.

또한 이 라이브러리의 가장 큰 장점은 가볍고 쉬운 사용방법입니다.

GSAP 를 사용하면 Javascript에 대한 지식이 뛰어나지 않아도 애니메이션 제작을 할 수 있어요!
이 가이드에서는 GSAP의 TweenMax 기능의 설정 및 사용하는 방법에 대해 알아 볼 것입니다.

설치하기

- CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

- NPM

npm install gsap

Tweens 란?

GSAP의 기본적인 애니매이션으로 오브젝트에 애니메이션을 주기위해서 call, animate, property, duration, easing, delay 등 많은 파라미터가 필요하다. 

TweenLite 는 우리가 정의한 자바스크립트 명령어를 통해 GSAP를 사용하여 애니메이션을 만든다는것을 알 수 있다.

.to 메서드는 CSS로 정의한 오브젝트의 상태를 JS에서 정의한 상태로 애니메이션 시켜주는 메서드이다.

반대로는 .from라는 메서드를 이용한다.

TweenLite.to("#myDiv", 2, {
    left: 100,
    top: 75,
    backgroundColor:"#000",
    ease: Power4.easeIn
});

Timeline Animations을 이용한 다수 애니메이션

TimelineLite는 하나의 오브젝트를 애니메이션 하는것으로 제한되지 않습니다. 서로 다른 기능에 해당하는 ID를 추가하여 타임라인에서 여러개체를 애니메이션 할 수 있습니다.

#myDiv {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  background: red;
}

#myCircle {
  position: absolute;
  left: 50px;
  top: 350px;
  width: 150px;
  height: 150px;
  background: red;
  border-radius: 100%;
}

var tl = new TimelineLite;

tl.to("#myDiv", 2, {
  x:100,
  y:75,
  backgroundColor:"#000",
  ease: Power4.easeIn
})
.to ("#myDiv", 1 , {
  scaleX: 1.5,
  scaleY: 1.5,
  backgroundColor: "#454545",
  ease: Back.easeOut.config(1.7)
})
.from("#myCircle", 1, {
  opacity: 0,
});

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".trigger",
    start: "center bottom",
    end: "center top",
    scrub: true,
    markers: true
  }
});
tl.to(".box", {yPercent: 350, duration: 1})
tl.to(".box", {rotation: 360, duration: 3})
tl.to(".box", {xPercent: 350, duration: 1})

https://greensock.com/gsap/

https://greensock.com/docs/v3/Plugins/ScrollTrigger

https://codepen.io/GreenSock/pen/abOPrBj

https://codepen.io/DavidMonnuar/pen/VwKEvQM

Database

데이터를 일정한 형식으로 저장할 수 있게 도와주는 곳

예로 가장 쉽게볼 수 있는게 바로 엑셀

데이터베이스는 SQL이라는 언어를 써서 데이터를 입력, 출력

SQL언어를 쓰지 않고도 쓸 수 있는 쉬운 DB

MongoDB

- 처음 다룰 때 어려운 셋팅작업이 필요하지 않음 (스키마 생성 등 필요없음)

- SQL 안배워도 됨

- 복잡한 자료형 몰라도 됨

- 평생 무료 호스팅해주는 곳이 있음 

MongoDB Atlas 가입 후 호스팅받기

사이트를 실제 배포할 것이라면 클라우드 서비스를 이용하는 것이 매우 안전

백업자동화, 용량걱정없고 접속속도가 빠른 장점이 있는데

무료로 호스팅 가능한 MongoDB Atlas 사이트를 이용해본다.

https://www.mongodb.com/

Database Access 메뉴에서 DB 접속용 아이디/비번을 생성

 (Add New Database User) 

admin/qwer1234 

주의점 - Built-in-Role > Atlas admin 선택 (nodejs로 DB접속가능)

Network Access 메뉴에서 IP를 추가

데이터베이스 접속할 수 있는 IP를 미리 정의해놓는 일종의 보안장치

Allow access from anywhere을 누르거나 0.0.0.0/0

Database / collection 만들기를 진행

Cluster는 하나의 호스팅 공간.

거기 안에 데이터베이스를 만들어야 데이터를 저장할 수 있다.

Cluster 선택 후 > Collection 코너로 이동

여기서 Collection 이란

하나의 큰 데이터베이스 공간 안에 있는 자료들(파일)이라고 보면된다.

추가한 Cluster에서 Collections 추가하기 

DatabaseName, CollectionName 작성 후 Create

DB 접속하는 URL 찾아오기

server.js에서 DB에 접속방법

1. 메인화면 셋팅이 끝나면 CONNECT라는 작은 흰색 버튼 누르기

2. 가운데 Connect Your Application 버튼 누르기

3. Choose your driver version 에서 Node.js 선택되어있는지 잘 확인하기

4. (2) 밑에 접속 URL(Connection String) 긴게 뜨면 복사해서 일단 메모장 같은 곳에 저장해놓기

mongodb 라이브러리 설치

npm install mongodb@3.6.4

server.js에 연결

// server.js

..
const MongoClient = require('mongodb').MongoClient;
..

MongoClient.connect('mongodb+srv://admin:<password>@cluster0.uuvu0.mongodb.net/?retryWrites=true&w=majority', function(에러, client){
  if (에러) return console.log(에러);
  //서버띄우는 코드 여기로 옮기기
  app.listen('8080', function(){
    console.log('listening on 8080')
  });
})

Server.js에서 DB접속하려면 

API란?

Application Programming Interface로 

서로 다른 프로그램간 소통할 수 있게 도와주는 통신규약을 뜻합니다.

이것을 웹에서 사용하면

'서버와 고객간의 통신규약'을 뜻하고

'서버에게 요청해서 데이터에 가져오는 방법'이 바로 API입니다.

REST

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다.

즉 REST란 

1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
2. HTTP Method(POST, GET, PUT, DELETE)를 통해
3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

CRUD Operation이란
- CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 REST에서의 CRUD Operation 동작 예시는 다음과 같다.
- Create : 데이터 생성(POST)
  Read : 데이터 조회(GET)
  Update : 데이터 수정(PUT)
  Delete : 데이터 삭제(DELETE)

REST 구성 요소

REST는 다음과 같은 3가지로 구성이 되어있다. 

1. 자원(Resource) : HTTP URI
2. 자원에 대한 행위(Verb) : HTTP Method
3. 자원에 대한 행위의 내용 (Representations) : HTTP Message Pay Load

REST API 란?

Representational State Transfer 의 약자로 API 디자인 방법입니다.

6개의 원칙이있는데

1. Uniform Interface (인터페이스 일관성)

인터페이스는 일관성이 있어야한다.

- 하나의 url로는 하나의 데이터를 가져와야한다

- 간결하고 예측가능하게 짠다

- URL 이름짓기 관습

• 단어들을 동사보다는 명사 위주로 구성함
• 응용해서 다른 정보들을 쉽게 가져올 수 있을 정도로 일관성 있음 
• 대충 봐도 어떤 정보가 들어올지 예측이 가능함
• 띄어쓰기는 언더바_대신 대시-기호-사용
• 파일 확장자 쓰지 말기 (.html 이런거)
• 하위 문서들을 뜻할 땐 / 기호를 사용함 (하위폴더같은 느낌)

2. Client-server 역할 구분하기 (서버-클라이언트 구조)

고객에게 서버역할을 맡기지않고 Server역할을 정하고 코드 짜기

3. Stateless (무상태)

요청들은 각각 독립적으로 처리되어야 한다. 

요청간 의존성이 존재하는 코드를 짜면 안된다. (요청하나만으로 자료를 가져오기 충분하도록, 요청에 필요한 모든정보를 실어보내기)

4. Cacheable (캐시처리 가능)

요청을 통해 보내는 자료들은 캐싱이 가능해야한다. (캐싱가능 표시. 캐싱 기간 설정)

5. Layered System (계층화)

요청처리하는 곳, DB에 저장하는 곳 이런 여러가지 단계를 거쳐서 요청을 처리해도 됨. 

여러개의 레이어를 거쳐 요청처리 만들기 시스템 가능.

6. Code on Demand

서버는 고객에게 실제 실행가능한 코드를 전송해줄 수 있다.

REST의 장단점

장점 

• HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
• HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해 준다.
• HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.
• Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
• REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
• 여러 가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
• 서버와 클라이언트의 역할을 명확하게 분리한다.

단점 

• 표준이 자체가 존재하지 않아 정의가 필요하다.
• 사용할 수 있는 메소드가 4가지밖에 없다.
• HTTP Method 형태가 제한적이다.
• 브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 정보의 값을 처리해야 하므로 전문성이 요구된다.
• 구형 브라우저에서 호환이 되지 않아 지원해주지 못하는 동작이 많다.(익스폴로어)

REST API

REST API란 REST의 원리를 따르는 API를 의미합니다.

하지만 REST API를 올바르게 설계하기 위해서는 지켜야 하는 몇가지 규칙이 있으며 해당 규칙을 알아 보겠습니다.

REST API 설계 예시

1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.

Bad Example https://kang-ji.tistory.com/Category/
Good Example  https://kang-ji.tistory.com/category/  

2. 마지막에 슬래시 (/)를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/test/  
Good Example  https://kang-ji.tistory.com/test

3. 언더바 대신 하이폰을 사용한다.

Bad Example https://kang-ji.tistory.com/test_blog
Good Example  https://kang-ji.tistory.com/test-blog  

4. 파일확장자는 URI에 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/photo.jpg  
Good Example  https://kang-ji.tistory.com/photo  

5. 행위를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/delete-post/1  
Good Example  https://kang-ji.tistory.com/post/1  

RESTful

RESTFUL이란 REST의 원리를 따르는 시스템을 의미합니다.

하지만 REST를 사용했다 하여 모두가 RESTful 한 것은 아닙니다.  

REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있으며

모든 CRUD 기능을 POST로 처리 하는 API 혹은 URI 규칙을 올바르게 지키지 않은 API는 

REST API의 설계 규칙을 올바르게 지키지 못한 시스템은

REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있습니다.

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

(코딩애플 강의)

POST요청처리

Submit 버튼을 누르면 폼에 입력한 제목과 날짜를 서버로 전달하기

Form 태그 세팅

HTML 문서의 form내 input에 입력한 데이터들을 서버로 전송할수 있다.

전송을 위해 form태그에 전송방법을 명시해준다.  action과 method 값 넣기

write.html

<form action="/add" method="POST">
    <div class="form-group">
        <label for="title">할일</label>
        <input type="text" class="form-control" name="title" id="todo">

    </div>
    <div class="form-group">
        <label for="date">Due Date</label>
        <input type="text" class="form-control" name="date" id="dueDate">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

submit타입의 전송버튼 클릭시 /add 경로로 POST 요청하는 폼

action - 경로 , method - GET/POST

server.js

// server.js
const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
});


// /경로로 보내주기
app.get('/', function(요청, 응답){
    응답.sendFile(__dirname + '/index.html');
});

app.get('/write', function(요청, 응답){
    응답.sendFile(__dirname + '/write.html');
});

app.post('/add', function(요청, 응답){
    응답.send('전송완료');
});

실행하면

add 로 경로이동과 보낸 '전송완료' 가 뜸! 

form에서 입력한 데이터를 서버로 전송하기 위해 body-paerser 라이브러리 설치하기

post로 전송한 input에 적은 정보는 요청에 들어있다.

요청에 있는 정보를 꺼내쓸려면 라이브러리가 추가로 필요함.

body-parser 

npm install body-parser

설치 후 서버를 실행해주고

server.js의 위쪽에 코드를 추가해준다.

// server.js

..
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}))

..

POST 요청처리하는 코드짜기

// server.js

app.post('/add', function(요청, 응답){
    console.log(요청.body);
    console.log(요청.body.title);
    console.log(요청.body.date);
    응답.send('전송완료');
});

브라우저화면에서 데이터를 입력하고 전송버튼을 누르면 콘솔창에 아래처럼 입력한 결과값이 보내짐.

서버사이드 렌더링이란?

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법

Vue SPA을 서버사이드렌더링의 반대인 클라이언트 사이드 렌더링 방식도 있다.

클라이언트 사이드 렌더링

서버에서 넘겨받은 HTML 코드에는 body 태그 본문에 <div id="app"></div> 밖에 없지만 화면에는 Welcome To Your Vue.js App 텍스트와 이미지가 있습니다. 이 텍스트와 이미지는 모두 클라이언트(브라우저)에서 동작한 Vue.js 라이브러리가 그려준 것. 즉 브라우저에서 화면의 결과를 그려낸 것

서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점

어디서 화면에 보일 페이지의 내용을 그리느냐의 차이

클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 그리고 서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 던져줍니다.

서버 사이드 렌더링 장점

서버 사이드 렌더링을 쓰는 목적은 크게 "검색 엔진 최적화"와 "빠른 페이지 렌더링"

SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌더링이 효율적.

서버 사이드 렌더링은 빈 HTML 페이지를 받아 브라우저에서 그리는 클라이언트 사이드 렌더링과 다르게 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있습니다. 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것

서버 사이드 렌더링의 단점

서버 사이드 렌더링은 Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요합니다. 따라서, 프런트엔드 개발 입문자 입장에서는 쉽지 않은 진입 장벽이 존재

또한, Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야 합니다. 뷰 싱글 페이지 애플리케이션의 라이프 사이클 훅과는 다른 환경(브라우저가 아닌 Node.js)에서 동작하기 때문에 beforeCreate와 created에서 window나 document와 같은 브라우저 객체에 접근할 수 없습니다.

서버 사이드 렌더링의 경우 컴포넌트가 최초로 생성되는 시점이 브라우저 위가 아니라 Node.js 환경이기 때문에 
beforeCreate 나 created 에서 브라우저 객체를 접근할 수 없습니다.
대신 beforeMount 나 mounted에서 window와 document 를 접근할 수 있습니다.

https://nuxtjs.org/docs/concepts/server-side-rendering/

https://vuejs.org/guide/scaling-up/ssr.html

https://joshua1988.github.io/vue-camp/nuxt/ssr.html

Nuxt.js

서버사이드 렌더링 프레임워크로 Vue.js로 서버사이드 렌더링을 구현할때 가장많이 쓰는 프레임워크.. 
서버사이드렌더링 기술은 실무자들의 가장 큰 고민인 빠른페이지 로딩속도와 성능 최적화에 대한 해답을 제시하고 있다.
더많은 사용자들에게 전달할 수 있도록  SEO와 사이트 정보 전달 측면에서도 강하다. 
기존의 Vue SPA에 추가적인 규칙이나 기능들을 제공하며
웹 애플리케이션을 제작할 때 필요한  Vuex,Router,Axios 같은 라이브리들을 Nuxt.js에서 미리 구성하여
SPA, 서버사이드 렌더링, 정척 웹사이트를 쉽게 제작할 수 있다. 

선수 지식으로는 Reactivity, Component, VueRouter, Vuex, axios 등이 필요하다.

서버사이드 렌더링이란?
- 웹페이지 내용을 서버에서 모두 작성하여 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식

Nuxt.js의 장점

• 검색 엔진 최적화
• 초기 프로젝트 설정 비용 감소와 생산성 향상
  • ESLint, Prettier
  • 라우터, 스토어 등의 라이브러리 설치 및 설정 파일 필요 X
  • 파일 기반의 라우팅 방식. 설정 파일 자동 생성
• 페이지 로딩 속도와 사용자 경험 향상
  • 브라우저가 하는 일을 서버에 나눠준다
  • 모르면 지나칠 수 있는 코드 스플리팅이 기본으로 설정

Nuxt.js의 특징 

Nuxt의 특징을 요약해보면 크게 아래와 같이 구분됩니다.

• 서버 사이드 렌더링
• 규격화된 폴더 구조(layout, store, middleware, plugins 등)
• pages 폴더 기반의 자동 라우팅 설정
• 코드 스플리팅
• 비동기 데이터 요청 속성
• ES6/ES6+ 변환
• 웹팩을 비롯한 기타 설정

Nuxt 시작하기

Nuxt 설치 명령어

npm init nuxt-app [프로젝트명]

실행하기

cd [프로젝트명]
npm run dev

프로젝트 폴더구조

Nuxt.js 버전 2.15.7부터 프로젝트 폴더 구조가 변경됨

.nuxt - Nuxt의 빌드 결과물이 담기는 폴더 

https://nuxtjs.org/

https://joshua1988.github.io/vue-camp/nuxt/intro.html

https://github.com/nuxt/eslint-plugin-nuxt

https://develop365.gitlab.io/nuxtjs-0.10.7-doc/ko/faq/github-pages/

REST

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다.

즉 REST란 

1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
2. HTTP Method(POST, GET, PUT, DELETE)를 통해
3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

CRUD Operation이란
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 
REST에서의 CRUD Operation 동작 예시는 다음과 같다.

Create : 데이터 생성(POST)
Read : 데이터 조회(GET)
Update : 데이터 수정(PUT)
Delete : 데이터 삭제(DELETE)

REST 구성 요소

REST는 다음과 같은 3가지로 구성이 되어있다. 

1. 자원(Resource) : HTTP URI
2. 자원에 대한 행위(Verb) : HTTP Method
3. 자원에 대한 행위의 내용 (Representations) : HTTP Message Pay Load

REST의 특징

1. Server-Client(서버-클라이언트 구조)
2. Stateless(무상태)
3. Cacheable(캐시 처리 가능)
4. Layered System(계층화)
5. Uniform Interface(인터페이스 일관성)

REST의 장단점

장점 

• HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구출할 필요가 없다.
• HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있게 해 준다.
• HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하다.
• Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다.
• REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다.
• 여러 가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다.
• 서버와 클라이언트의 역할을 명확하게 분리한다.

단점 

• 표준이 자체가 존재하지 않아 정의가 필요하다.
• 사용할 수 있는 메소드가 4가지밖에 없다.
• HTTP Method 형태가 제한적이다.
• 브라우저를 통해 테스트할 일이 많은 서비스라면 쉽게 고칠 수 있는 URL보다 Header 정보의 값을 처리해야 하므로 전문성이 요구된다.
• 구형 브라우저에서 호환이 되지 않아 지원해주지 못하는 동작이 많다.(익스폴로어)

REST API

RESPT API란 REST의 원리를 따르는 API를 의미합니다.

하지만 REST API를 올바르게 설계하기 위해서는 지켜야 하는 몇가지 규칙이 있으며 해당 규칙을 알아 보겠습니다.

REST API 설계 예시

1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.

Bad Example https://kang-ji.tistory.com/Category/
Good Example  https://kang-ji.tistory.com/category/  

2. 마지막에 슬래시 (/)를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/test/  
Good Example  https://kang-ji.tistory.com/test

3. 언더바 대신 하이폰을 사용한다.

Bad Example https://kang-ji.tistory.com/test_blog
Good Example  https://kang-ji.tistory.com/test-blog  

4. 파일확장자는 URI에 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/photo.jpg  
Good Example  https://kang-ji.tistory.com/photo  

5. 행위를 포함하지 않는다.

Bad Example https://kang-ji.tistory.com/delete-post/1  
Good Example  https://kang-ji.tistory.com/post/1  

RESTful

RESTFUL이란 REST의 원리를 따르는 시스템을 의미합니다.

하지만 REST를 사용했다 하여 모두가 RESTful 한 것은 아닙니다.  

REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있으며

모든 CRUD 기능을 POST로 처리 하는 API 혹은 URI 규칙을 올바르게 지키지 않은 API는 

REST API의 설계 규칙을 올바르게 지키지 못한 시스템은

REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있습니다.

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

함수안에 파라미터 2개를 넣을 수 있다

.get() 함수 안에 파라미터 2개 ㄴ허기

함수안에 함수 집어넣기

.get

콜백함수란? 

함수안에 함수 (fuction() {})

app.get('/write', function(요청, 응답){
    응답.sendFile(__dirname + '/write.html');
});

/write로 접속을하면 fuction뒤의 함수를 실행해주세요. 

순차적으로(단계적으로) 실행하고 싶을 때 사용한다.

이 콜백함수 안에는 2개의 파라미터가 들어갈수 있다.

.get('경로', fuction(요청내용, 응답할 방법) { })

ES6 문법

.get('경로', (요청내용, 응답할 방법)  => { })

app.get('/write', (요청, 응답) => {
    응답.sendFile(__dirname + '/write.html');
});

(코딩애플 강의)

Express 라이브러리

- 서버를 매우 쉽게 짤 수 있게 도와주는 라이브러리.

서버를 띄우기 위한 기본 세팅 (express 라이브러리)

npm init

메인 entry파일 server.js 로 지정

프로젝트 폴더내에 package.json 파일이 생성됨

npm install express

server.js 파일 추가

listen(서버띄울 포트번호, 띄운 후 실행할 코드)

- 8080 포트에 서버를 띄어주기 

// server.js
const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
});

node server.js

GET요청 처리하기

server.js

// server.js

app.get('/pet', function(요청, 응답){
    응답.send('펫용품.');
});


app.get('/beauty', function(요청, 응답){
    응답.send('beauty.');
});

서버재실행 자동화 라이브러리

npm install -g nodemon

nodemon server.js

윈도우 10에서 위와 같은 보안오류가 뜸

해결방법 

윈도우 검색창 > powershell 관리자권한으로 실행 > executionpolicy 입력 > set-executionpolicy unrestricted

executionpolicy 

set-executionpolicy unrestricted

재실행 하면 정상적으로 실행됨

nodemon server.js

GET요청 처리하기 : 경로 접속시 HTML파일 보내기

폴더내 index.html 파일 생성해주기 (! + 엔터 후 기본 마크업작성)

server.js에 .sendFile 로 index.html파일보내기

// server.js

app.get('/', function(요청, 응답){
    응답.sendFile(__dirname + '/index.html');
});

서버 란? 

- 클라이언트에서 요청을 받으면 요청한 데이터를 제공하는 프로그램

서버 요청의 방식

1. GET (읽기) 요청

웹페이지를 읽을 때

2. POST (쓰기) 생성

- 로그인 할 때

- 댓글작성

- 블로그 포스트작성

3. PUT (수정)

- 글이나 댓글 수정

4. DELETE (삭제)

- 글이나 댓글 삭제

Node.js 기초설명

Javascript

Html에 종속된 언어, 즉 html(웹페이지)의 조작과 변경을 위해 만들어진 언어이다.

웹페이지를 다이나믹하게 바꿔주기 가능

JavaScript 구동 엔진 V8

Javascript의 동작을 위해서 크롬,익스플로러,파이어폭스  등의 브라우저들이 읽고 해석하는 역할을 합니다.

각 브라우저들마다 Javascript 해석 엔진이 있는데

크롬 - V8 / Firefox - SpiderMonkey / Explorer - Chakra

자바스크립트를 빠르게 읽고 해석하면 렌더링 성능도 빨라지니

브라우저 개발자들은 자바스크립트를 해석할수 있는 엔진 개발에 열성이였다고 함 

여기서 크롬의 V8이라는 해석엔진의 성능이 매우 뛰어나서 별도로 떼어내 출시를 하게 됬고 그 프로그램이 Node.js 가 됬다고 함. 

Server는 그냥 요청 처리하는 기계

Node.js

Javascript를 브라우저말고도 다른환경에서도 실행시켜줄 수 있는 환경(런타임)을 말합니다.

Node.js를 실행하면 로컬PC에서도 자바스크립트 실행이 가능하게 된다. 

Node.js를 사용하면 간단하게 서버를 만들 수 있습니다.

이때 Node.js로 서버를 만드는이유는? 

- Non-blocking I/O라는 장점때문인데 

일반 프로그래밍언어로 만든 서버의 요청에 대한 처리방식의 경우 요청온 순서대로 차례로 하나씩 처리해줍니다. 

Event-driven, Non-blocking I/O 

일단 들어온 요청을 다받고 순서에 상관없이 빨리 되는거부터 처리 

동작원리는 Event Loop 라고 합니다.

• Event Loop : 이벤트 루프는 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 한다.

Node.js 장점

- SNS, 채팅서비스에 특화됨 (요청처리에 힘든 수학적 연산을 요구하지 않는다)

- 스타트업, 프로토타입 만들기에도 많이 사용됨. 

- 초보자에게 쉽다

- 빠르게 서버를 만들수 있다.

- 자바스크립트 문법만으로 프론트, 백엔드 전부 가능하다

Node.js의 단점

- 처리속도가 떨어질 수 있다.

- 수학연산이나 이미지처리 같은 라이브러리가 부족할 수 있다.

- Node.js가 제공하는 Non-blocking 처리방식은 다른언어에서도 비슷하게 구현가능하다. 

for .. in 문

• 객체의 프로퍼티 키 열거 전용
• for in문은 for문가 다르게 동작하는 반복문이다.
• for에 들어가는 인자 형태가 서로 다르다.
• for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(property)를 순회할 수 있도록 해준다.

(주의) 해당 객체가 상속받는 프로토타입 체인상의 모든 프로퍼티 키를 열거한다.(단, [[Enumerable]] 값이 false인 프로퍼티는 제외)

for(const key in 객체){
	//...반복 수행 코드...
}

const obj = { 
	name: 'curryyou', job: 'engineer' 
} 
for (const key in obj){ 
	console.log(`${key} : ${obj[key]}`); 
}
// name : curryyou 
// job : engineer

for .. of 문

• 이터러블 순회 전용
• Iterator 속성이 있는 객체인 Array, Map, Set, String, TypedArray, arguments 등의 값을 반복할 수 있으며, string 문자열에도 적용할 수 있다.
• Array, Map, Set, arguments 등이 해당됨 (Object는 해당 X)
• for ...of 문은 반복 가능한 객체(iterable)를 순회할 수 있도록 해준다.
• for in문 문법은 동일하지만 순회하는 대상에 차이가 있다.
• for of 문은 Set 객체를 순회할 수 있지만 for in문은 객체를 순회할 수 없다.

for ...of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다.
for ...of구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

// Array 
for (const val of ['a', 'b', 'c']) { 
	console.log(val); 
	// 'a','b','c' 
} 

// Array2
const arr = [10, 20, 30]; 
for (const item of arr){ 
    console.log(item); 
    // 10, 20, 30 출력 
}

// String 
for (const val of 'abc') { 
	console.log(val); 
	// 'a','b','c' 
} 

// Object 
for ( let val of {1 :'a', 2 :'b', 3 :'c'} ) { 
	console.log(val); 
	// TypeError: object is not iterable 
}

참조

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of
• https://curryyou.tistory.com/202