웹개발종합반 개발일지 3주차-1
스파르타 코딩클럽 웹개발종합반
1. 수강목적 : 코알못탈출 웹디자인에 필요한 기본지식 습득
2. 배운점 :
3주차는 파이썬을 배우는건데 그 전에 ajax를 복습했다. 영화 후기 api를 불러와서 항목별로 let을 붙이고 나열하는 것이었다.
$(document).ready(function () {
listing();
})
- 도큐멘트가 준비되면 listing을 한다.
$('#cards-box').empty()
- id cards-box를 비운다
let rows = response['movies']
for (let i = 0; i < rows.length; i++) {
-봐도 봐도 모르겠으니 한번 더 써본다... 일단 response된 api안에서 movies를 rows라고 이름붙이고 그 rows의 길이만큼 증가시킨다 ( i = 0~rows의 길이까지 )
항목별로 let을 선언하여 이름표를 붙인다.
let temp_html = `<div class="col">
<div class="card">
<img class = "img" src="${img}" alt="...">
<div class="card-body">
<h5 class="card-title" id="title">${title} </h5>
<p class="card-text">${desc}</p>
<p>${stars}</p>
<p class="mycomment">${comment}</p>
</div>
</div>
</div>`
- 그리고 불러온 내용을 html태그안에 붙여넣기한다. 저 달러표시... 적응안됨... 저거만보면 그때부터 모르겠음 $ㅠ$
$('#cards-box').append(temp_html)
- let을 통해 선언된 ` ` 안의 내용을 id cards-box 안에 붙여넣기를 한다.
'⭐'.repeat(star)
api에 숫자로 (1~5)로 표기되어있는 별의 갯수를 별 모양으로 바꾸기 위해 repeat(데이터); 를 사용한다.
이렇게 해서 실행해보니 내용은 잘 표기되었지만 내 마음에 들지 않는 구석이 있었다.
출처 : 스파르타코딩클럽 웹개발종합반 3주차 강의 결과물 - 스파르타피디아이렇게 내용의 길이에 따라 height가 가지각색이라 삐뚤빼뚤하게 여백이 남았다.
두가지 방법을 생각했는데 1. 내용이 일정부분 이상 넘어가면 말줄임표를 쓰는방법 2. 길이에 맞게 카드를 위로 붙이는 방법. 물론 자세한 탐구가 이뤄져야 더나은선택이라는 확신이 생기겠지만서도,,, api상 두가지 항목이나 길이가 재각각이라 두군데나 말줄임표를 썼을때 뭘 기준으로 해야할지 모르겠어서 ... 코멘트의 경우 1줄로 끝나기도하고 엄청 길기도 했기 때문에 그냥 높이값은 유지하고 정렬만 바꾸는 방법을 알아보았다.
$('.wrap').masonry({
itemSelector: '.col',
horizontalOrder: true,
})
https://gahyun-web-diary.tistory.com/34 여기랑
https://masonry.desandro.com/ 여기를 참조하였다.
이걸 여기다 쓰는게 맞는지 문제가 없는지에 대한 고민은 아직 하지않음...코알못인 나는 복붙을 성공했다는 뿌듯함만 ...느끼고 싶었다.
js할때는 다 id값을 써왔던거같은데 왜 이건 class값을 쓰고있는지 그것은 모르겠지만... 태그에 있는 항목의 상위 <div>의 클래스를 ().masonry안에 넣어주고 itemSelector에 그 아래 <div>인 col을 넣어주었다.
글구 이미 어딘가에 업로드 되어있는 그 js를 불러오는걸 써줬다 (아마 이걸 불러오는과정에서 문제점이 발생될것 같지 싶다)
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
부트스트랩으로 가져온 카드값이라 여백이나 가로값같은게 기본지정되어있는것 같아서 그건 모르겠다 하고 냅뒀다. 암튼 이렇게 하고나니 원래그랬던건지 masonry를 써서 그런건지 이미지 상단부분 라운딩 처리가 안됐다. 그래서 img에도 클래스를 넣고 완성된 스파르타피디아에서 css를 복붙해서 추가로 넣어주었다.
.img {
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);}
보더의 탑 그중에 왼쪽/오른쪽의 모서리를 굴려줌. 그 값은 calc 0.25rem-1px임. 근데 왜 이렇게 쓰는거지?...
~암튼 적용됐다 뿌듯~
3. 보완할점
구문 추가하고 할때 괄호를 자주 빼먹는다. 또 세미콜론같은게껴있거나 구문의 괄호 밖에 다른 구문을 써서 실행이 안된다거나 하는 실수가 잦다... 아직 구조? 실행원리 같은걸 전혀 이해못하고 있는듯 하다.... 아직은 그저 복붙하는게 맞다지만 몰라도 너무모르고있다...
4. 앞으로의 계획
완강
