8.2 글목록

list 파일에도 중복이 존재한다.

 

list파일의 내용을 html,css,javascript,ajax

이런식으로 바꾸면 얼마나 간단할까

 

 

33) console.log(text); 를 사용해 text의 내용을 출력해 본다.

 

fetch('list')를 해줬기 때문에 서버에 list파일을 요청하고 응답으로 list파일의 내용을 받았기 때문에

콘솔에 text를 출력해보면 list 파일의 내용들이 나오게 된다.

 

 

list파일의 내용을 html,css,javascript,ajax로 간단하게 바꿔준다.

그리고 다시 console.log(text); 를 실행해 보면

 

바뀐 내용으로 콘솔에 출력된다.

컴마(,)를 기준으로 각각의 항목들을 원소로 하는 배열을 만들어 준다.

[how to make array from string in javascript]   -> split

34) text에 있는 문자열을 컴마(,)를 기준으로 하나하나 쪼개서 배열이 되게 만든다. 그리고 그 배열을 items에 저장한다.

 

console.log로 출력해보니 배열로 나오는걸 확인할 수 있다.

 

items 배열에 저장되어있는 값들을 따로 출력해 보자

35) 인덱스 변수 선언

36) i값이 items변수의 길이만큼 반복. 즉, items 배열에 들어가있는 갯수만큼 반복한다

37) item 변수에 items 배열에 값 하나씩 저장되고

38) 바로 저장된 item값을 콘솔에 출력한다.

39) 그리고 다음 items 배열의 값을 출력해야하기때문에 다음 인덱스로 넘어가야하기 때문에 i값에 1을 더해준다.

 

 

순차적으로 하나씩 items에 들어있는 값들이 출력된다.

 

38) tag 변수에 <li>html</li> 와 같은 문자를 넣기 위해 '<li>' 뒤에 +item+ 을 쓴다.

     + 를 붙인 이유는 item은 문자가 아니고 변수이기 때문에 '<li>'와 '</li>' 사이에 +를 붙여 구분한다.

39) 그리고 tag 변수를 출력한다.

 

<li>html</li> 와 같은 형식으로 순차적으로 ajax까지 출력된다.

 

 

36) 빈 문자열을 담은 tags 변수를 만든다.

41) tags 변수에 tags + tag를 한다. 

    이건 마치 int num += 3; 과 비슷하다. num 값에 num과 3을 더하고 저장한다.

즉, 더해서 다시 저장한다는 뜻이기 때문에 tags에도 tags와 tag값이 더해져서 다시 tags에 저장된다.

반복문 안에 있기 때문에 모든 tag값이 tags에 저장된다.

 

44) document.querySelector('#nav').innerHTML 에 tags값을 저장한다.

 id가 nav인 태그에 tags 값이 출력될것이다.

tags에는 <li>태그 형태로 저장되어있기 때문에

링크가 아닌 리스트 형태로 보여진다.

 

그렇기 때문에 <a>태그로 바꿔야 한다.

최종적으로 만들어야 할 결과물은 이런 형식이다.

 

 

39) href="#!뒤에 html,css,javascript,ajax와 같은 것들이 들어가있는 item 변수가 들어가야하기 때문에 item변수를 +로 감싸준다.

 

리스트가 링크 기능까지 된다.

 

 

39) onclick="fetchPage( )  이 부분에 예를들어 'html' 이라는 형식으로 들어가야 한다.

구분자로서의 따옴표(') 가 아닌 문자열로서의 따옴표(')로 사용해야 하기때문에 역슬래시 \를 써줘야 한다.

 

 

html, css javascript 는 문제없이 잘 된다.

하지만 마지막 ajax에서는 에러가 뜬다.

 

items을 콘솔에 출력해 보면

ajax 뒤에 줄바꿈이 되어있다.

 

 

[how to remove front back white space in string javascrtipt] -> trim

 

문자열 앞뒤에 필요없는 개행이나 쓰레기 값들을 없애는 용도로 쓰이는 trim을 사용하여 

개행을 없애면 ajax까지 잘 실행된다.