- 대부분 배운 내용은 스파르타코딩클럽에 있는 강의 노트를 참고하였음을 알립니다.
웹개발 종합반 2주차
수업 목표
- Javascript 문법에 익숙해진다.
- jQuery로 간단한 HTML을 조작할 수 있다.
- Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
1. jQuery
배운 것
지난주에 배웠던 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었다. jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이기에, 쓰기 전에 "임포트"를 해야한다. 또한 매우 간결하게 표현이 가능해서 많이 사용 하고 있다.
구글 개발자 모드에 있는 콘솔창에서 무언가를 나타내거나 사라지게 하는 것을 배웠고, 본격적으로 script 태그 내에 함수를 넣어서 input 박스의 값을 가져와보기, div 보이기 / 숨기기, 태그 내 html 입력하기 등을 배워서 웹의 동작하는 원리들을 배워보고 적용하였다. 마지막으로 jQuery + Javascript의 조합을 연습해보면서 다시 한번 더 어떻게 적용 되는지 배웠다.
느낀 점
함수에서 input 안에 있는 id값을 가져와 jQuery를 사용해 웹의 동작이 바뀌는 것은 여러모로 신기했던 부분이였다. 다만 jQuery를 제대로 활용 하기 위해서는 JavaScript의 문법도 어느정도 알아야 쉽게 적용 할 수 있다는 점이다. 보통 함수식인 if나 else if를 사용하는 등 이런 조건식을 이용해서 많이 적용하고 그 외에오 여러가지 문법을 사용하기 때문에 JavaScript는 꾸준히 연습하고 배워야 하는 부분인 것 같다.
어려웠던 부분
가장 어려웠던 건 숙제부분에서 include랑 split부분이 가장 햇갈리고 어려웠었다. 2주차를 통틀어서 유일하게 이 부분만 스스로 해결하지 못하고 답안을 보고 이해한 부분이였다. include()는 괄호 안에 있는 것은 특정한 문자가 포함 되어 있을 때 무언가를 동작을 취하는 역할 이고, split()도 괄호 안에 있는 문자를 기준으로 쪼개는 역할을 해서 배열로 나타내는 것을 알게 되었다.
2. Ajax
배운 것
Ajax을 배우기 전에 서버→클라이언트 역할을 하는 "JSON"을 잠깐 배웠다. JSON은, Key:Value로 이루어져 있고, 자료형 Dictionary와 아주 유사하게 나타내어 있다. 이걸을 이용해서 JSON에 있는 데이터 조회(Read)를 요청해서 가져 오는 것이 GET 함수이고 이걸 Ajax라고 말한다. 보통 주로 get과 post를 배우지만 2주차에선 get만 우선적으로 배웠다.
여기서는 서울시 미세먼지 API를 가져와서 각 지역의 미세먼지 수치를 나타내는 것을 배웠고, 추가적으로 미세먼지 수치가 일정 값이 넘었을때 붉은 색으로 나타내는 것까지 추가적으로 배웠다. 마지막으로 맨 처음부분에 empty를 추가적으로 넣어서 기존에 있던 것은 지우고 새로 갱신 하는 것도 배웠다.
복습 차원으로 따릉이 OpenAPI를 이용해서 각 거치대에 있던 총 자전거 개수와 현재 남아 있는 자전거 개수를 표현했고, 남은 자전거 거치된 수가 얼마 안남았으면 붉은 표시 하는 것을 적용해보았다. 또한 르탄이API를 이용해서 이미지png 변화를 주는 것도 적용해 보았고, 마지막으로 1주차에서 만들었던 팬명록에다 서울시 현재온도 API를 적용해서 온도 기능도 추가해 보았다.
느낀 점
그전까지는 온도라던가 무언가가 매번 변화하는 부분을 인터넷을 하면 자주 볼 수 있었던 부분이였다. 근데 이게 어떻게 굴러가는지는 몰랐었다. 하지만 이번 Ajax를 배우면서 이미 있는 API를 가져와다 쓰는 것을 배워 사용하는 방법을 알게 되었다.
어려웠던 부분
전체적으로 뭔가를 가져와다 적용하는것은 처음에는 어려웠으나 여러번 반복 연습해보니 이해하였다. 앞선 jQuery보단 쉽게 적응하고 이해한 부분이였다. 다만 전반적인 호출과 적용하는 것은 여전히 버겁게 했기 때문에 앞으로도 계속 연습해서 적응해야 할 부분이다.
