항해 D-93
Ready For Hanghae
-2주차 개발일지-
JavaScript , Jquery , Ajax
[Java Script] | 1주차에 배웠던 내용을 복습 , 한번 클릭 = alert("홀") , 두번 클릭 = alert("짝")이 나오게 하기 | ||
[Jquery] | Html의 요소들을 조작하는 JavaScript를 미리 제작해놓은 라이브러리 html태그에 id="" 값을주어 사용 | ||
[Ajax] | 미리작성된 ajax 코드에 type : "GET" url : ""을 이용하여 데이터를 서버에 요청 , 가져와 사용 |
- Mini Project [ 1 ] -
[jquery quiz]
1주차에 배웠던 JavaScript와 2주차에 배운 Jquery를 이용하여
미리 작성해둔 기능들이 작동하게 하는 프로젝트
각각 버튼을 눌렀을 때에 alret로 표시 혹은
내용 입력 후 클릭시 붙이기 , 다 지우기 등의 버튼이 정상작동 하도록
배운 내용을 토대로 스스로 코드를 작성하는 숙제였고
2주차 첫 프로젝트를 진행하며 1주차에 배웠던 index , slice등 의
내용들을 응용 복습할 수도 있었으며
jqurey가 익숙하지 않아 다루기에 조금 어려운 부분이 있었으나
금방 적응해 쉽게 풀어나갈 수 있었던 프로젝트였다.
- Mini Project [ 2 ] -
[열기 , 닫기 버튼 구현하기]
1주차에 진행했었던 나홀로 링크 메모장 만들기 프로젝트에
포스팅 박스 부분을 열고 닫을 수 있게 구현하는 프로젝트였다.
JavaScript에 함수를 만들어 jquery를 이용해 코드를 작성하였고
.hide() / .show() 등의 jquery의 변수를 배우는 부분이 즐거웠다.
bootstarap의 템플릿에 jquery , javaScript를 응용하는 스킬이
이번 프로젝트 핵심내용이라 생각됨
- Mini Project [ 3 ] -
[Jquery & Ajax]
Jqurey와 Ajax를 통하여 서버에 데이터를 요청하고
get한 데이터중 필요한 부분만을 index해 사용하는 프로젝트
실시간 서울시 미세먼지 데이터와 서울시 따릉이 데이터를 사용했으며
미세먼지 수치가 40이상이면 , 거치된 따릉이의 갯수가 10대 이하이면
빨간색으로 표시되게 if문을 사용 , 불러온 데이터를 for문을 사용해
하나씩 읽어오는 부분 등 1주차에 배웠던 내용들을 응용했고
temp_html = `<>${rows}<>`를 사용하여 jquery내에서 html의 내용을 추가하고
console.log를 이용하여 코드가 잘 작동하는지 매번 확인해주는 것이
얼마나 중요한 부분인지 이번 프로젝트를 통하여 깨달았다.
변수에 데이터를 넣고 확인을하지 않고 코드를 계속 작성한 후
확인을해보니 내 의도대로 동작하지 않았고
문제점을 찾는게 더 복잡해져 결국 코드를 갈아엎고 다시 작성했다.
다시 작성할 때에는 매번 consol.log를 통하여 콘솔에서
데이터가 변수에 정상적으로 들어갔는지 , for문이 정상적으로 데이터를 읽어오는지
if문이 정상적으로 작동하는지에 대해 확인하며 작성했고
하나 하나 확인하며 작성한 만큼 내 의도대로 코드가 작동했다.
console.log로 확인하며 작업하는 습관을 들일 것
-Review-
1주차와 다르게 2주차에는 이전에 한번도 공부해본적 없던
Jqurey , Ajax 등의 새로운 내용을 접했다.
그래서 그런지 한 강의를 듣는대에도 버벅거리는 부분이 있었고
강의를 끝내는 시간이 1주차에 비해 많이 늦어졌다.
2주차에 제일 힘들었던건 새롭게 접하는 스킬들이 아니라
빠르게 진도를 나가야한다는 스스로 가지고 있는 조급함이었고
불안해하는 나를 돼돌아보니 수업 내용이 아닌 진도에 집중하고있는 내가 보였다.
진도는 빠르게 나갔지만 이전 수업의 내용이 잘 기억나지 않아
다시 돌아가서 강의를 보고 , 작성했던 코드를 보는 내가 한심했고
조금은 여유를 가지고 진도욕심을 버리자고 스탠스를 바꾼 후에
2주차 내용들이 온전하게 내 것이 돼었다고 생각한다.
직장생활을하며 공부하기에 남들보다 시간이 부족하단 생각을 늘 해오며 공부했고
시간이 부족한건 맞으나 조급하게 공부하진 않기로했다.
'Plo Hanghae99 > Plo Ready for hanghae99' 카테고리의 다른 글
Ready For Hanhae -4주차- (0) | 2021.12.15 |
---|---|
Ready For Hanhae -3주차- (0) | 2021.12.09 |
Ready For Hanhae -1주차- (0) | 2021.11.27 |