[패스트캠퍼스]웹개발 강의 2주차 후기

2주 차 수업 내용

jQuery

Ajax

​

1주 차에 배웠던 화면 구성에 이어, 데이터를 외부에서 가지고 와 구성된 화면에 알맞게 배치하거나 보여주는 기능을 배움. 즉 서버와 통신하는 방법에 대해 배움.

 

#국비지원교육

#내일배움카드

---

1.jQuery 기본 개념

https://jquery.com/

jQuery

부트스트랩처럼 여러 코드가 공개되어 있고 원하는 코드를 가져올 수 있음.

프로그램을 다운로드하여서 사용할 수도 있지만 부트스트랩 배울 때 했던 것처럼 cdn 코드 찾아서 복사하는 게 더 편함. 코드에 한 줄만 넣으면 돼서 그런 듯

 

---

2. jQuery를 활용한 태그 조작

jQuery를 접하면서부터 '$'기호를 많이 사용함. 일상생활에서 달러 표시 말고 쓸 일이 없는 기호 다 보니까 괜히 더 어려워 보이고 복잡해 보이는 효과가 있다...

또, 코드를 작성하다 보면 ID 속성 앞에 #표시를 누락하는 경우가 많으니 주의할 필요가 있다.

 

$("#test").text('안녕하세요');

 

위 코드 같은 경우, html 코드에서 이미 작성한 test라는 div태그를 가져오고(어려운 말로 인디케이터) '.'을 사용해 함수를 사용한 거라고 이해하면 된다. (text는 기본제공 함수)

​

저번 주에 사용했던 html 내의 기본 기능 onclick을 jQuery로 똑같이 사용할 수 도 있다.

 

$(document).ready(function () {
         $("#post-3").click(function () {
                   clickPost(3);
         });
});

 

저번주 작성했던 ht2라는 코드의 script 태그 안에 다음과 같이 작성한다. post-3라는 태그를 click(onclick과 같은 기능)하면 다음과 같은 기능을 해 달라는 의미이다. 참고로 jQuery에서는 안에 들어가는 함수 이름을 따로 지정할 필요가 없다. 이름 짓기 은근히 귀찮은데 굿

​

또, 지정하는 속성 값을 가진 태그보다 스크립트가 먼저 작성되는 경우 꼭 $(document).ready 안에서 처리를 해야 한다. 이걸 사용하지 않으면 화면이 구성되기 전에 이미 함수 발생이 되어버려서 아무 변화도 일어나지 않기 때문이다. 즉, 페이지가 준비된 상태가 될 때까지 잠시 대기시키는 기능을 한다.

(따라서 거의 모든 기능들이 이 ready 안에서 작성된다.)

​

어떤 jQuery 코드 안에서 $(this)라는 코드가 쓰이면 이 코드는 자기 자신을 의미한다.

따라서 기본적으로 A 상태에 있는 코드이지만 특정 상황에서 B 상태라고 이름을 붙일 수도 있고 여러 요소들을 변경시킬 수도 있다.

​

반복문 사용하기

$(document).ready(function () {
                $("#post-3").click(function () {
                    clickPost(3);
                });
                $("#post-2").click(function () {
                    clickPost(2);
                });
                $("#post-1").click(function () {
                    clickPost(1);
                });
});

기존 수업을 통해 배웠던 내용을 정리하면 이와 같다. 하지만 반복문을 사용해 더 깔끔하게 정리도 가능하다.

​

반복문 사용 전 추가 팁 :

$(". 클래스이름")

attr("태그 이름") - 태그가 가진 속성값을 가지고 올 때 사용하는 함수

 

$(document).ready(function () {
                $(".fastcampus").click(function () {
                    let id = $(this).attr("id");
                    clickPost(id);
                });
});

사실 반복문이라고 하긴 어려운 듯?

위의 코드를 작성하기 전에 우선 body 태그 안에 있는 각각의 게시물 tr태그에 숫자로 id를 부여하고 fastcampus라는 동일한 캔버스를 부여했다.

ready 안의 내용만 보자면, fastcampus라는 클래스를 가지고 있는 모든 태그에게 해당되는 내용으로, 만약 클릭을 받았다면 그 tr태그의 id값을 가져와서 그걸 id라는 변수에 저장하고(각 tr의 id와 변수 id의 이름이 같아 헷갈리기 쉬우니 주의), 그 변수 값을 clickPost함수의 값으로 사용하겠다는 내용. 차근차근 뜯어보면 이해가 되지만 변수선언문 안에 또 $가 있어서 특히 더 어려워 보인다.

​

---

3. Ajax(에이잭스? 아약스? 부르는 사람 맘대로)

서버와의 통신을 위한 방법 중 하나. jQuery안에서 사용할 수 있다.

단순히 내가 보고 있는 화면만 바뀌는 게 아니라 그에 관한 정보가 개발자에게 가도록 하는 방법이라고 이해하면 될 것 같다. (어떤 게시물에 좋아요 버튼을 누르면 화면은 좋아요 버튼만 바뀌고 새로고침이나 페이지가 바뀌진 않는 느낌)

 

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

이 페이지에서 아래로 쭉 내리다 보면 보이는 Resource를 사용해서 연습할 예정.

​

사실 API 개념은 분명히 수업 때 들었는데 이게 뭔 말인지 하나도 이해가 안 됨ㅋ

분명 친절하게 비교까지 해가면서 알려주셨는데 뭐가 어떻게 다른지 모르겠음~

하루이틀 만에 개념 잡기는 어렵지만.. 암튼 사용자에게 영향을 주지 않고 데이터를 가져오거나 보내는 개념이라고만 이해함./

​

$.get(url).then(function (data){
    console.log(data);
});

ajax 사용한 예제는 다음과 같다. (url은 변수로 따로 링크를 할당함)

첫 번째로 주의해야 하는 점은 $표시 다음에 꼭 점을 찍고 get을 사용해야 한다는 점! 그리고 괄호가 많아서 잘 확인하면서 작성해야 한다.

get함수는 정보를 가져오겠다는 의미인데, get 뒤에 주소가 오면 그 주소를 가져오겠다는 의미로 사용된다. 그 결과를 사용할 때에는. then이라는 함수를 연결해서 사용할 수 있다. (그거 다하면 이거 해~ 정도로 이해함)

​

위 코드를 저장하고 실행하면 위의 jsonplaceholder 사이트에서 가져온 실습용 데이터가 내가 작성한 창의 console탭에 Array(100)이라는 탭 안에 들어가 있다. 화면을 딱 처음 실행하고 나서는 아무것도 안 보이는데 console.log라고 콘솔창 안에 로그를 남기라는 코드를 작성했으니 꼭 개발자 도구 탭에 들어가야 보임... 이거 은근히 헷갈려서 당황함

​

그다음엔 데이터 내용을 콘솔탭이 아닌 화면에 직접 구성하는 걸 연습해 봤다.

 

$.get(url).then(function (data){
     let content = " ";
                
     for (let i=0; i<data.length; i++){
         content = $("#titles").html() + data[i].title + "<br>";
         $("#titles").html(content);
     }
});

반복문이 들어가서 여기부터 갑자기 확 어려워 보인다.

목표 : 화면에 id 번호별 데이터들을 누적해서 출력하기(게시판에 글 제목 목록 출력)

1) 비어있는 변수 content를 생성

2) 각 반복문에서 i번째 데이터를 content 변수에 저장(줄 띄움까지)

3) content 변수를 출력

4) 다음 i+1번째 변수도 2~3 과정을 반복

​

$("#titles"). text라고 사용하면 안 되는 이유

-> 뒤의 <br> 태그까지 전부 텍스트로만 인식하게 됨. html로서의 기능적인 부분을 살리기 위해서는 text 보다 html을 사용하는 것이 좋다.

내가 만든 태그 contents를 웹페이지에 반영하기 위해서는 text를 쓰는 것이 아니라 html 함수를 이용해서 적용할 수 있다.

​

---

2주 차 숙제

1주 차 숙제로 만들었던 상품 목록 페이지를 클릭 시 모달 창으로 데이터를 가져오게 하는 것이 주 과제이다. 그리고 모달 창의 close를 확인으로 바꾸는 정도?

일단 2주 차 폴더에 hw2.html 파일을 만들고 hw1.html 파일을 복붙 후 수정했다.

첫 번째로 jQuery 코드를 복붙 했을 때 원하는 버전이 맞는지 확인해야 함(slim이면 안 댐)

그리고 복사 붙여 넣기를 했으니 들여 쓰기가 잘못된 곳은 없는지도 확인이 필요하다

각 줄마다 번호를 매길 필요가 있으므로 li 태그마다 id를 추가해 준다.

 

결과 화면은 위와 같다. 두 번째 줄의 곰인형 칸을 클릭하면 위와 같은 모달 창이 뜨며, 모달 창의 제목과 내용인 텍스트는 서버에서 가져온 것.

 

---

개인적인 2주 차 수업 후기

사실 jQuery 나오는 부분부터 난이도가 확 올라간다고 느꼈음. Ajax 개념도 아직 이해 못 해서 천천히 여러 번 강의를 복습하거나 따로 공부해봐야 할 듯.. 물론 내일 배움 카드로 배울 수 있는 국비지원교육이라는 걸 고려하면 내용이 부족하진 않음

갑자기 내용 어려워지는 거 강사님도 아셨는지 같은 내용을 여러 번 설명해 주고 코드 중간중간에 멈춰서 설명하는 게 많았다. 너네 어려운 거 아는데 이거는 알고 가야 돼~ 이런 느낌이라서 그냥 열심히 따라 들었다. 과제도 어렵진 않고 그 직전 실습 내용을 거의 그대로 옮겨 쓴 느낌이라 과제는 오히려 저번주보다 시간이 덜 걸렸다.

그래도 뭔가 그럴듯한 웹페이지를 만들고 있다는 체감은 확실히 돼서 좋은 것 같음.