[생활코딩] WEB3 - Ajax

*Asynchronized javascript and xml : reload 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술

 

1. fetch & api

 

2. Ajax의 적용

fetch(' Ajax로 보여줄 파일명 ').then(function(response){ ... querySelector( 'article' ) ... } )

보여 줄 파일(name으로 지정)을 로드하고,

그 다음에 응답받은 데이터(response) 중에서 text()를 실행하고,

그 다음에 얻은 text값을 <article> 태그의 innerHTML로 대입해라.

 

아뉘,, 너모,, 어렵따,, 지금은 이렇게 해 두고 넘어가는 걸로 만족^^

 

3.  fragment identifier 활용해 초기 페이지 구현

0) ajax로 원페이지 웹을 만들면 생기는 문제

  (1) onclick 심은 부분(눌러서 작동하는 부분)이 링크로 표현되지 않는다 (= 주소창 링크는 안 바뀜)

  (2) 따라서 사용자가 보고 있는 페이지의 특수한 상태/영역을 링크로 공유할 수 없다.

 

1) hash(북마크)로 특정 문단으로 점프시키기

 *원하는 문단(p태그)에 id=hash 값을 주고, 페이지 링크 마지막에 #hash를 추가하면

  리로드 없이 해당 문단으로 이동한다.

   -> 이 때 id 먹은 문단을 '조각(fragment)'라고 하고, 그 조각을 식별하는 식별자를 'fragment identifier'라고 한다.

 * 하이퍼링크로 활용할 수도 있다. <a href="#hash">링크 걸릴 텍스트</a> 이렇게.

 

2) 현재 페이지의 hash 값 알아내는 방법 : 

#hash 형태로 알아내려면

검색 "how to get hash from url javascript"

-> 현재 페이지에 hash가 있는지 /없는지에 따라

   있으면 #hash를 반환한다.

 

 

hash 형태로 알아내려면

검색 "how to get sub string(일부 문자열) javascript"

-> subst(n) : hash의 문자열 중에서 (n+1)번째 문자열부터 표시

-> # 떼고 hash 형태로 반환

 

*여기서 'location.hash'는 원래 'window.location'객체 아래 있음. 주소값에 붙은 anchor 값 반환.
https://august5pm.tistory.com/8 ([javascript] window.location 객체) 참고

 

3) (1)번 문제 해결 : 링크 심기

 (1) onclick 심은 부분(눌러서 작동하는 부분)이 링크로 표현되지 않는다

요거 해결하기.

onclick 을 a태그에 달아서 내용도 로드하고 링크도 변경하기

  -> 이렇게 하면 클릭 시 내용 로드 + 링크가 뒤에 #! 파일명 붙은 형태로 바뀜

  * 일반 #(북마크 기능)이랑 용도를 구분하기 위해 링크에 관용적으로 #!(hash bang)을 사용한다

 

 

4) (2)번 문제 해결 : 특정 페이지로 랜딩시키기

(2) 따라서 사용자가 보고 있는 특정 페이지를 링크로 공유할 수 없다.

사용자가 직접 메뉴를 누르면 링크가 index_fetch.html#!dui_fetch_1 로 바뀌긴 하지만,

그 링크를 복사해 입력한다고 해서 그 내용으로 랜딩할 수는 없다.

function에 기능을 추가하자.

 

if ( location.hash ) : 사용자가 링크를 입력했을 때 거기 hash값이 있다면

fetchPage ( location.hash.subst(2) );  : #! 빼고 3번째부터 반환한 값을 fetchPage 함수에 넣어라

-> 해당 fetch 페이지가 로드됨

 

 

 

 

*댓글 추가

이럼 친구가 사이트내부에 ajax사용한곳 링크 보내줬을때는 그 링크 끝에 해쉬가 들어갈거고, fetchpage함수로 해당 문서가 바로 열림.
그냥 사이트 들어올떄는 해쉬를 안붙이고 들어오니까 welcome이라는 대문 문서가 열리고. -라고 이해했음

 

4. 글목록(메뉴) Ajax로 구현하기

어려워서 봐도 안 봐도 되는 얘기라고 했지만 보고 햇따^^

 

1) 페이지 메뉴를 list.txt로 빼내기

현 코드에는 data와 logic이 섞여 있다.

logic은 바뀌지 않는 것.

data란 바뀔 수 있는 것.

 

메뉴의 <ul>안의 <li>들은 바뀔 수 있는 data이므로 css나 JS 문서처럼 바깥으로 빼고 그 자리에 표지를 남긴다.

이 때 사용하는 표지가 위의 fetch 기능.

*빨강 : 기본 적용될 수 있도록 지금까지의 함수 밑에 또 적어 줌

*노랑 : 나는 메인 페이지에도 정보가 있었기 때문에 메뉴를 눌러 해당 내용을 로드하면 메인 페이지 내용은 안 보이도록 코드를 추가함  저 jquery 내용 알차게 잘 써먹는다...

 

2) 메뉴 중복코드 최소화

list.txt에 메뉴 텍스트만 남기고 index에서 fetch+반목문으로 기능 구현하기

 

list에서는 메뉴의 텍스트만 남기고 ','로 구분한다.  A,B,C,D

이걸 fetch 밑에 배열을 만들어 저장한다.

 

 var menus = text.split(',');  <- ,를 기준자로 분해해 배열로 저장하는 기능

 var i = 0 ;   <- 배열 안에 든 모든 항목 꺼내 쓸 준비

 var tags = '' ;  <- 태그 묻혀 나온 모든 menu를 담을 준비.

menus에 menu(과자)들이 담겨 있으면 이걸 차례로 꺼내 tag(초콜릿)에 넣었다 뺀 다음 tags에 옮겨담고 짜잔 하는 느낌

 (반복문)

 tag라는 변수를 만들고, 메뉴에 원래 붙어 있던 anchor 태그를 넣어 반복시킨다.

 

 

---

중간 단계 생략된 것처럼 느껴지는 곳이 많아서 이해하느라 시간이 엄청 걸렸다.

그래도 머리를 쓰는 기회가 되었으니 다행이라고 생각하자. 포기하지 않은 데 대해 박수👏

 

22.01.06 오늘의 실수

3-4) 이렇게 실컷 이해 다 해놓고도 실행하니 로드가 안 됐는데,

코드를 살펴서 'substr'에서 마지막 r이 빠졌다는 사실 발견. 잘 봤다 잘 봤어.

 

4-2) 나는 또 여기서 메뉴이름과 해당 파일이름을 다르게 설정해놔서

강사님 말씀대로 하니 안 됐다 ^^ 뭐가 문젠지 한참 고민했음 ^^