어제에 이어 웹개발 강의를 들으며 미니프로젝트를 진행하고 있다. 웹개발 강의는 자바스크립트, 제이쿼리, Fetch 파이어베이스를 통해 데이터를 활용하는 강의를 다시 들었으며, 미니프로젝트에서는 방명록 기능을 개발했다.
우선 오늘은 제이쿼리 강의 내용을 간단히 정리해 보겠다.
JQuery
- 제이쿼리를 활용하기 위해서는 <head>와 </head> 사이에 아래의 코드스니펫을 꼭 넣어주어야 한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 어떠한 부분을 가리키기 위해서 'id = ""'를 사용한다. 그리고 $('#아이디값')을 통해 바꿀 html코드를 지정해 준 뒤 '.명령어'를 붙여준다.
- 리스트에서 반복문을 뽑아내기 위해서는 백틱(`)을 사용한다.
let temp_html = ``
$('#q1').append(temp_html)
이런 식으로 원하는 태그를 백틱 안에 넣어주고 html태그를 넣어주면 반복문을 원하는 곳에 실행시킬 수 있다
이 외에 중괄호, 대괄호, 백틱, $, # 같은 것들이 여러 구성으로 들어가는데 아직 외우고 이해하기가 쉽지 않다. 이러한 것들 때문에 혼자 복습하면서 많은 에러에 시달렸다. 아직은 익숙하지 않지만 빨리 익숙해질 수 있도록 노력해야겠다고 생각했다.
방명록 만들기
미니프로젝트에서 방명록 만들기가 추가되어 내가 그 부분을 맡았다.
아직 완성은 아니지만 결과물은 대충 이런 느낌이다. 웹개발 강의에서 들은 것들을 활용하였으며, 삭제 기능은 따로 배우지 않아 검색을 열심히 했다. 닉네임과 코멘트를 입력하여 등록을 누르면 카드가 생기는 형식이며, 카드는 파이어베이스에 저장해 두었다가 불러오는 방식이다.
- 버튼 가운데 정렬
진행하며 어려웠던 점이 몇 가지 있었는데, 우선 등록 버튼이 <style>에 코드를 넣는 CSS를 통해서는 가운데정렬이 되지 않는다는 것이다. margin을 주어도 움직이지 않아 여러 가지를 검색해 보던 중
<div style=" text-align: center;">
<button type="button" class="btn btn-secondary">등록</button>
</div>
위 코드를 찾아내었다.
스타일을 직접 html에 넣는 방식으로 진행하였더니 꼼짝 도하지 않던 등록버튼이 가운데로 움직였다.
- 카드 삭제
방명록을 작성한 후 파이어베이스에 데이터를 보내고 받아서 보여주는 작업까지는 나름 수월하게 진행되었다. 그러나 카드 삭제가 나에게는 큰 관문이었다. 삭제 같은 경우 강의를 통해 나오지도 않았으며, 파이어베이스를 통해 가져오다 보니 나에게는 너무 고난도의 작업이 되었다. 검색을 통해 진행하려 하였으나, 파이어베이스는 나에게 아직 이해가 쉽지 않았다. 결국 같이 작업하는 팀원이 구현해 놓았던 삭제 기능을 활용하여 역추적하는 방법을 사용하였다.
코드를 위와 같이 구성하여 활용하였는데, 각각의 카드를 지우기 위해서는 카드의 docID가 필요하다는 것을 알게 되었다. 필요로 하는 부분을 비교하여 바꿔주는 형식을 통해 삭제기능을 구현할 수 있었으며, 중간에 "를 닫아주지 않아 헤맸던 것 빼고는 무사히 마칠 수 있었다. 사실 정확히 이해하고 싶었지만 아직 100% 이해할 수는 없었다. 앞으로 배워나가는 과정들을 통해 더욱 많은 코드들이 이해되고 활용할 수 있게 된다면 정말 뿌듯할 것 같다.
'개발 기초 다지기' 카테고리의 다른 글
| 내일배움캠프 6일차 : 자바스크립트 기본 문법 (0) | 2024.04.22 |
|---|---|
| 내일배움캠프 5일차 : CSS flex속성으로 버튼 2개 가운데 정렬하기 (0) | 2024.04.19 |
| 내일배움캠프 4일차 : CSS로 로컬이미지 background 만들기 (1) | 2024.04.18 |
| 내일배움캠프 2일차 : 기초 html과 CSS를 활용한 웹페이지 제작 (0) | 2024.04.16 |
| 내일배움캠프 1일차 : git과 git hub 기초 및 탐색 (0) | 2024.04.15 |
댓글