-
[패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 2주차IT 웹개발 2023. 1. 7. 16:11
본 내용은 국가에서 운영하는 직업훈련포탈 (HRD-Net)의 국민 내일배움카드를 무료로 발급받아
국비지원교육인 K-digital 기초역량훈련소로 유명한 패스트캠퍼스 국비지원 온라인과정을 선택하여 강의 실습후기를 작성하는 글입니다.
2주차 강의에서는 jQuery에 대해 배우며 실습을 해보게 되었다.
지난번 과정중 게시판 실습이 있었는데 이부분을 수정해본다.
반복되는 postid 부분을 아래와 같이 변경이 가능하다. clickPost라는 함수 인자로 id 값을 넘겨준다.
post-id. => id
class="fastcampus" 추가 하며... 중요한 점 하나! $(document).ready 부분을 선언해두어야 코딩아래쪽에 이
있는 table. tag들이 수행된 내용을 가져올 수 가 있다.
서버와의 통신 ==>
(Ajax) 통신이 왜 필요할까? 발음은 에이잭스라고 한다. --> jQuery에 포함된 기능으로
페이지는 변경되지 않고 html 정보가 변경(서버와 통신) 된다.
json sample api 사이트
data를 주는 주소로 제공해 주는 인터페이스
posts 게시판 sample이다.
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},어떤 유저가 어떤 제목으로 어떤 내용을 썻다는 data API
개발자도구 -> 네트워크 선택- >posts의 Preview 보면
이제 API에 대한 개념을 파악했다.
Ajax연습하기
json sample api를 가져와 변수에 저장후 그것을 jQuery문법에 맞게 작성해서
sample내용중 title 부분만 가져오는 연습이다.
주의해야 될것은 title내용을 한줄씩 출력하기 위해 <br> 태그가 삽입되어야되는데
이때는 text -> html로 변경해주어야 된다.
<head>
<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>
<title>Ajax 연습</title>
</head>
<body>
<div id="titles">
</div>
</body>
<html 출력결과>
sunt aut facere repellat provident occaecati excepturi optio reprehenderit
qui est esse
ea molestias quasi exercitationem repellat qui ipsa sit aut
eum et est occaecati
nesciunt quas odio
dolorem eum magni eos aperiam quia
magnam facilis autem
dolorem dolore est ipsam
nesciunt iure omnis dolorem tempora et accusantium
optio molestias id quia eum
et ea vero quia laudantium autem
in quibusdam tempore odit est dolorem
dolorum ut in voluptas mollitia et saepe quo animi
voluptatem eligendi optio
eveniet quod temporibus
Bootstrap -> modal 컴포넌트를 사용한 예제 연습
우선 test로 json 예제의 1번 id에 해당되는 url를 이용해보며 상호작용 원리를 파악해보았다.실습결과 게시판 번호를 누르면 해당되는 게시판번호에 맞는 json sample id 내용이 bootstrap modal을 이용한 결과가 나온다.
위와 같이 게시판 list 위에서 마우스 click하면 modal 컴포넌트가 수행되며 해당되는 json sample id 번호에 맞는 제목과 내용이 표시된다.
이제 2주차 과제물로 1주차에 했던 내용을 가지고 Ajax 제어 연결하여 [당당마켓] 상품리스트의 상세 화면 추가하는 과제를 해보았다.
나느 부트스트랩 버전 최신 5.3 으로도 변경하여 해보았다. 과제물 하는중 궁금한 사항은 슬랙을 통해 실습코치님의 도움을 받아 어렵지 않게 스스로 공부할 수 있게 되었다.
body부분에는 modal부분의 컴포넌트 내용을 가져와 수정하였다.
결과는 만족스럽게 잘 되는걸 알 수 있었다.
modal로 상품내용 상세내용 표시해보기 + Ajax 통신 이용해보기 (서버와의 통신실습) ※ Tip
bootstrap은 일종의 템플릿이다. css를 컨트롤해서 화면을 배치해야하는데 그 부분을 템플릿화해서 쉽게 하고자 하는 것인데! 버전업이 되면 이 템플릿도 같이 변경이 된다.
부트스트랩 버전 5.3 (최신버전) 에서의 image object를 표현하는 방식은 아래 url 참조하였다.
https://getbootstrap.com/docs/5.3/utilities/flex/#media-objectFlex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
getbootstrap.com
'IT 웹개발' 카테고리의 다른 글
jQuery 란? (0) 2023.03.29 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 5주차 (0) 2023.01.20 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 4주차 (0) 2023.01.20 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 3주차 (0) 2023.01.11 [패스트캠퍼스] 웹 개발 강의 - 코딩기초 학습후기 1주차 (0) 2022.12.31