K-digital 기초역량훈련
[패스트 캠퍼스] 코딩 1:8 | 웹 개발 왕초보 입문 (2주차)
1️⃣ jQeury(제이쿼리)
jQuery(제이쿼리)란 무엇인가❓
html을 다루거나 어떠한 요청을 만들 때 사용하는 오픈소스 기반의 자바스크립트 라이브러리
(라이브러리 library = 개발자들이 이미 만들어 놓은 코드)
jQuery CDN (Contents Delivery Network)
HTML 내부의 <head>~</head> 사이에 코드를 삽입하여 설치 없이 사용하는 방법
<!-- uncompressed (.js) -->
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<!-- minified (.min.js) -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<!-- slim (.slim.js) -->
<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
<!-- slim minified (.slim.min.js) -->
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>* uncompressed : 원본 파일
* minified : 원본 압축 파일
* slim : 해당 버전의 불필요한 라이브러리를 제거한 파일
* slim minified : slim 버전의 압축 파일
jQuery Indicator
$('body')= jQuery 를 이용하여 <body> 태그를 컨트롤 하겠다는 의미
$("#test").text('안녕하세요');= id 값이 'test'로 지정된 태그 안에 '안녕하세요' 문자열을 추가
즉, js로 html을 조작할 수 있는 점을 알 수 있다
2️⃣ 서버 통신
Ajax(에이젝스, 아약스) : 통신 방법 중 하나. jQuery 안에 포함된 기능
(어떠한 이벤트가 발생할 때마다 페이지가 새로고침 된다면 매우 불편할 것 페이지는 변경되지 않고 정보가 변경 - 서버와 통신)
API (Application Programming Interface) : 데이터를 주는 주소
<script>
let url = "https://jsonplaceholder.typicode.com/posts/";
$.get(url).then(function (data) {
console.log(data);
});
</script>
$.get() : http post get request
(http 요청을 수행하여 서버로부터 데이터를 받는 메소드)
<script>
let url = "https://jsonplaceholder.typicode.com/posts/";
$.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);
}
});
</script>
<script>
function clickPost(postId) {
let url = "https://jsonplaceholder.typicode.com/posts/" + postId;
$.get(url).then(function(data) {
$("#exampleModalLabel").text(data.title);
$("#modalContent").text(data.body);
$("#exampleModal").modal('show');
});
}
</script>
$('selector').html() :
selector 태그 내에 존재하는 모든 자식 태그를 가져올 때 사용하는 메소드
$('selector').text() :
selector 태그 내에 존재하는 모든 자식 태그 중 html 태그를 제외한 문자열을 가져올 때 사용하는 메소드
👩🏻💻 2주차 학습 후기
2주차는 생각보다 조금 버벅였다. 아무래도 서버통신 분야는 유튜브 생활코딩에서 간단한 강의 들은 이후로 처음인데다가, 속전속결로 웹 페이지 하나를 완성해야 하는 이런 입문 강의에서는 짧게 떠먹을 수 있는 정도만 알려주시니 아직 긴가민가 하는 부분이 많은 것 같다. 따라가기는 급한데 궁금한 건 많아서 찾아보다보니 늦어지고.. 놓치고.. 하는 것들이 생기는 중이다. 1일 1커밋도 아니고 1주 1커밋이 더 어려운 점은 새롭게 알게 된 점을 하나하나 전부 세세하게 메모해두지 않다보니 시간이 조금 지나면 다시 까먹는 다는 점이고 그런 의미에서 왜 개발자들이 1일 1커밋을 초반에 습관화 하시는지 몸소 체험하고 있다. 아무튼..!! 서버 쪽은 조금 더 개인적인 공부가 많이 필요하다는 것을 느꼈고 간단한 무료 강의 같은 것을 더 찾아보면서 혼자서 A to Z 까지 전부 구현하지 못하더라도 기술이나 단어에 익숙해지는 정도까지는 만들어야겠다는 생각이 많이 든다. 서버 너란 녀석 어려운 분야였구나 더 열심히 공부해줄게 ㅠㅠ
'K-Digital Training > 패스트캠퍼스 1:8 코딩 입문' 카테고리의 다른 글
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 5주차 학습일지 (0) | 2023.03.03 |
|---|---|
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 4주차 학습일지 (0) | 2023.02.23 |
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 3주차 학습일지 (0) | 2023.02.21 |
| [패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 1주차 학습일지 (0) | 2023.02.08 |
