Web3. Ajax 강의 노트정리

2. 

부분적인 내용이 바뀔 경우, 필요한 부분만 로드하면 서버도,사용자 입장에서도 자원을 아낄 수 있다.

전체 새로고침을 할 필요없이 선택적으로 변경하니까 바뀐부분에만 더 집중할 수 있다.

 

3. 

기본구조를 재사용해서 ajax로 동적으로 변화시킬부분만 하자.

바뀌는 부분의 파일만 만들면 html코드를 구구절절 적어놓을 필요도 없다.

 

4.

https://opentutorials.org/course/3084/18894

웹서버 운영하기 : 맥 - 생활코딩

깃허브나 웹서버 구축으로 ajax통신을 위한 준비를 하자.

ajax는 동적으로 통신하는 기능이니 정적 페이지 오픈으로는 동작하지 않는다.

 

bitnami mamp라는 프로그램을 설치하면 아파치를 자동으로 설정 설치하게 됨

이 호스팅주소로 열리는 페이지 루트

이제 htdocs폴더 내에 파일을 삽입하고

http://127.0.0.1:8080/1.html

주소로 접속해서 열면 웹서버가 동작하게 된다.

 

라이브 서버 작동원리와 같은 듯 하다.

 

* 사파리, 라이브서버에서는 바로바로 작동이 됐는데, 크롬창에서 8080루트로 접속한 건 자꾸 표기가 안됐다.

강력캐시삭제를 했더니 작동했다. java 프로그램 썼을 때 프로젝트와 같은 원리로 동작한다...

(주소 포트값만 다르고 동작원리가 같은 듯 하다)

 

5-6.

fetch의 사용, then의 이해, 함수로 리팩토링

 

우선 fetch() api를 사용하면 인자에 담은 이름으로 파일을 가져올 수 있다. (형식은 상관없는 것 같다.)

비동기와 드림 코딩에서 학습했던 promise에 대한 플러스된 이해? ..

다시 드림코딩 자료를 보면 더 promise 혹은 async, ajax에 대한 이해가 높아질 것 같다.

 

어너니머스 함수에 대한 이해.

함수의 이름이 있는 경우, 여러번 호출을 해야 할 때, 재사용을 위해 이름을 붙여야 하지만

이렇게 단발적으로 한 번만 사용할 경우에는 이름없는 함수로 쓰는 것.

그래서 이 함수는 arrow 표기가 가능해진다. () => sth 혹은 (sth) => sth

왜 이렇게 쓰는 지에 대한 이해.

 

case

fetch( a ).then( b )
console.log(c)
console.log(d)

1번 라인은

"fetch로 a라는 파일을 다운을 받고, 이 다운이 끝나면 b를 실행해 줘"

라는 뜻이 된다.

그러므로 우선 a를 실행한 후 차례로 콘솔로그 c, d를 실행한 뒤 b가 실행될 수도 있다.

만약 c, d가 용량이 크다면 순서대로 실행될 수도, 뒤죽박죽 실행될 수도 있다.

이것이 비동기, Asyncronous.

 

함수로 따로 뺄 경우, 이름만 바뀌고 다른 부분은 중복이니 이걸 파라미터로 사용해 적용할 수 있도록 하면 된다.

 

7.
페이지 접근은 url로 가능하지만 페이지의 특정한 부분에 접근할 때는 # hash를 쓰면 된다.

id값을 주고, 주소에 #____를 입력하면 해당 부분으로 스크롤이 이동한다.

 

이렇게 a link로 만들어도 해당 부분으로 스크롤 이동하도록 만들 수 있다.

신기하군,,,,

 

해시값을 지정해서 시작되는 페이지를 설정할 수 있다.

#에 해당되는 값이 무엇인가를 알아내면 

==> location.hash

#값을 알아내는 방법

a태그 링크에 '#!북마크할 페이지'를 하면 해당 페이지로 바로 이동하도록 북마크 설정을 할 수 있다.

#(=북마크표기)에 !를 붙이는 건 북마크표기로 보이기 위한 관습

 

substr()으로 해시값으로 항상 포함되는 #!을 제외하고 값을 받으면 해당 페이지를 fetch할 수 있게 된다.

만약 해당 페이지가 없으면 디폴트로 설정할 welcome페이지를 할당해 놓으면 됨.

 

BUT,

여기는 맹점이 있다.

데이터(내용)을 백엔드를 통해 동적으로 받아오기 때문에 검색엔진에 걸리지 않음.

네비게이션으로 바뀌지 않는다(?이게 무슨말인지 이해 못함)

==>그래서 pjax를 쓴다고 하는데 jquery로 동작하는 듯 함.

일단 현시점에서 나는 jquery를 배제하기로 했기 때문에, 해당 내용은 검색해보지 않을 것.

 

8.

데이터와 로직이 혼재돼있을 땐 분리해 주는 것이 좋다.

데이터(변경 가능한 것)은 분리해서 어플리케이션 자체를 수정하는 걸 피할 수 있다.

 

파일을 분리함으로써 index.html은 그대로 두면서 (=> 수정이 용이해짐)

데이터만 수정할 수 있도록 한다.

 

+) arrow function으로 표기해봤다. 작동된다. 기쁨..

 

*원래 표기

기본형

split(), trim()으로 더 간편하게 만들기

``백틱 사용으로 tag를 더 쉽게 이용할 수 있겠다.