1. 개발 진행 상황
2. 개발 중 발생한 이슈와 해결
3. 새로 배운 것
- jQuery: JavaScript라이브러리, HTML쉽게 제어할 수 있도록 도와줌, import하여 사용
id="아이디"
(id="아이디") 형식으로 이름을 붙여주고, $('#아이디').val()로 값을 가져올 수 있음
id="post-box" // post-box열기, 닫기 기능 적용
1) $('#post-box').hide() // post-box라는 이름을 붙여주고 숨기기 hide()
2) $('#post-box').show() // post-box라는 이름을 붙여주고 보이기 show()- Ajax: 서버 통신을 위해 사용(서버에 데이터 요청)서버-클라이언트 통신 이해하기
1) 서버→클라이언트: "JSON"을 이해하기
2) 서울시 OpenAPI에 접속해보기<http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>
3) 크롬 익스텐션 JSONView 설치
<https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko>
4) JSON은 Key:Value로 이루어져 있음. 자료형 Dictionary와 유사 // dictionary와 list가 조금 합쳐진 형태
- 클라이언트→서버: GET 요청 이해하기
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
1) GET요청: 통상적으로! 데이터 조회(Read)를 요청할 때
예시1) <https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967>
이 주소는 크게 두 부분으로 쪼개짐"?"가 쪼개지는 지점
앞 부분: 서버 주소(https://movie.naver.com/movie/bi/mi/basic.nhn)
뒷 부분: 전달할 데이터(영화정보: code=161967)
예시2) <google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8>
앞 부분: 위 주소는 google.com의 search 창구에 다음 정보를 전달,
뒷 부분: q=아이폰 (검색어)
"&" 전달할 데이터가 더 있다는 뜻: sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
2) POST요청: 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
data: {param: 'value', param2: 'value2'} //key:value형식으로 데이터를 가져감- Ajax 시작하기
1) 크롬 개발자 도구
👉 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
http://google.com/ 과 같은 화면에서 개발자도구를 열면 jQuery가 임포트 되어있지 않기 때문 에러 발생
Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻
2) Ajax 기본 골격
$.ajax({ type: "GET", // GET방식으로 요청
url: "여기에URL을입력",
data: {}, //요청하면서 함께 줄 데이터(GET요청시 비움)
success: function(response) // 성공하면 서버에서 준 결과를 response변수에 담음
{ console.log(response) } }) // 서버에서 준 결과를 이용해서 나머지 코드 작성
4. 참고 레퍼런스
5. 오늘 한 일 / 회고
- 웹개발 종합반 강의 듣는 중 Ajax가 아직 정확히 이해가는건 아닌듯.. 반복해서 몇번 강의 더 듣고 실습해야겠다.
6. TO-DO LIST
- 웹개발 종합반 강의 수강
7. 특이사항