Junnnho

웹사이트를 만드는 것은 충분하지 않고,

하나의 페이지안에서 데이터를 받아와서 필요한 부분만 부분적으로 업데이트 하는 것이 굉장히 유행함

물론 자바스크립트만으로도 구현가능하겠지만, SPA를 좀더 쉽게 만들기 위해서

React, Angular, Vue 같은 라이브러리, 프레임워크가 생겨났다.

studiomeal.com/archives/197

위 사이트는 진짜 정리 너무 잘해주셔서 이해하는데 큰 도움이 되었다.

display________________________________________________________________

static : display 의 default 값

absolute : 자신의 부모 박스컨테이너에 내에서 다른 아이템들을 무시하고 포지셔닝됨

relative : 자신의 부모 박스컨테이너 내에서 지정한 만큼 움직임

fixed : 부모를 다 무시하고 window 컨테이너 자체에서 움직임

sticky : scroll 등의 효과가 발생해도 sticky로 지정된 컨테이너는 그 위치에 고정됨(ex : nav bar)

Flex____________________________________________________________________________

flex는 박스에 적용할수 있는 속성, 아이템에 적용할 수 있는 속성이 있다

박스에 적용할 수 있는 속성

display, flex-drection, flex-wrap, flex-flow, justyify-content, align-items, align-content

아이템에 적용할 수 있는 속성

order, flex-grow, flex-shrink, flex, align-self

Box__________________________________________________________________

display : flex 의 기본값은 row이며 사용할 수 있는 값은 row, row-reverse, column, column-reverse

flex-direction 에서 메인축을 row, column으로 지정해주면 된다.

flex-wrap 은 아이템 요소들에 wrap 요소를 지정해주는데 아이템요소들이 길이를 벗어날 경우

자동으로 줄바꿈해주는 역할을 한다 => nowrap, wrap, ..reverse

flex-flow 는 flex의 direction과 wrap을 합친 속성

justify-contant : 아이템들을 어떻게 배치할 것인가를 중심축을 기준으로 설정함

default : flex-start // flex-end

space-around : 아이템를 둘러싸게끔 규칙적으로 spacing 해줌

space-evenly : 좌, 우 끝도 같은 spacing

space-between : 아이템 사이에만 spacing

align-items :  아이템 전체를 어떻게 배치할 것인가를 중심축의 반대축 기준으로 설정함

center, baseline

align-content : justify-contant의 반대로 속성은 같음

Item______________________________________________________________

order : 기본값은 0 이며, 위치를 지정해줄 수 있음

flex-grow : grid의 templateX와 같은 개념

flex-shrink : 컨테이너가 작아졌을 때 어떻게 행동하는가를 지정함 default : 0

flex-basis : 아이템들이 공간을 얼마나 차지해야되는지 세부적으로 명시해줌 default : auto

align-self : 원하는 아이템만 align 축에 맞게 위치를 지정할 수 있음. center 같은 속성 사용

ES5, ES6

javascript에는 ECMAScript 라는 것이 있는데, specification 의 명칭같은 것이다

ES5 = ECMAScript5

ES6 = ECMAScript6

=> specification에 대한 업데이트를 뜻함

javascript는 꽤 집중화되어있어서, 누군가가 업데이트를 하게되면 모든 브라우저에서 작동하게 된다.

javascript는 specification인데, 체계 메뉴얼 같은 것이다.

DOM => document object module

자바스크립트는 html에 있는 모든 요소를 가지고 온 후에 객체로 바꾸는 작업을 한다

window같은 이벤트함수를 사용할때는 함수를 즉시 호출하거나 이벤트를 기다리거나의 호출방법이 다르다

setInterval(function(), times) => times 간격으로 function()을 실행

local Storage => 웹페이지단에 정보들을 저장하는 방법 key : value 의 형태로 저장됨

localStorage.setItem( { : } )의 형태로 데이터를 저장

localStorage.getItem(key)의 형태로 key 에 대한 value값을 얻을 수 있음

이벤트에 대한 기본동작을 중지시키고 싶다면(ex : form - submit) preventDefault()를 사용

클라이언트와 서버를 연동했다면 서로 데이터를 보내거나 받을 수 있다.

그전에 클라이언트와 서버를 동시에 실행시키는 모듈을 소개하고자 한다.

npm-run-all                                                                       

npm-run-all 은 지정한 script를 차례대로 자동실행시켜주는 모듈이다.

사용하지 않는다면 프롬프트를 필요한만큼 켜서 실행시켜야 하는 불편함이 있기에 사용하면 편리하다.

설치가 끝났으면 script를 수정해준다.

-p는 병렬실행옵션

starts:**는 코드그대로 starts:로 시작하는 다음 스크립트를 2개 실행시킨다는 의미이다.

npm run start => 아래와 같이 client, server를 같이 실행시키게 된다.

비동기 통신                                                                             

클라이언트와 서버 사이의 데이터는 비동기통신인 fetch를 이용해서 통신할 수 있다.

클라이언트 단에서는 $.ajax, fetch같은 비동기통신 함수를 제공하고

nodejs 서버단에서는 request 같은 비동기통신 모듈을 제공한다

나는 보통 restAPI를 사용할때 fetch와 request를 사용한다

fetch                                                                                       

fetch를 이용하면 원하는 url로 비동기통신을 요청하고 정보를 받을 수 있다.

특히 restAPI처럼 특정 서버로부터 원하는 데이터를 얻고자할때 사용한다.

사용법은 다음과 같다

fetch( url, set ).then( ).catch( )

url은 말그대로 통신을 요청하는 위치가 되고

set에는 요청할 때 필요한 정보들을 담는 곳으로

method : 'GET', 'POST', 'PUT'

headers : 'Content-Type':'ex)application/json' , ...

form : POST같은 method를 사용할 때, 데이터들을 담아 보내는 공간으로 dataset이 된다.

request module                                                                         

NodeJS에서는 편리한 비동기통신을 위해 request 모듈을 제공한다.

다음과 같이 모듈을 require

request도 일반적인 비동기통신 함수들과 사용법이 거의 같다.

클라이언트와 서버간의 통신                                                        

클라이언트에서 서버로 데이터를 요청해보자

server/router/index.js

app.js

만들어진 버튼을 클릭하면

3001번 포트에서 가져온 데이터인 res, 타입, json을 통해 콘솔한 결과가 아래와 같이 나타난다.

정상적으로 잘 가져와진다.