본 포스팅은 스파르타 코딩클럽에서 진행하는 <웹개발 종합반]> 강의를 수강하며 주차별 느낀 점을 정리하는 포스팅입니다. 제가 배운 것을 정리하는 개발 일지 겸 해당 강의를 수강하려는 잠재 수강생들에게 도움이 되었으면 합니다. 스파르타 코딩클럽으로부터 지원받고 제작하는 글이 아님을 밝힙니다.
1. 들어가며
2주차는 1주차보다 좀 더 어려웠다. 특히 console.log, html_temp 등에 대해 이해가 부족했는데 단순히 강의만 듣는 것으로는 이해되지 않아 추가적인 유튜브 영상이나 구글링을 참고했다. 아직 초보라 완전히 이해가 되지는 않지만 어렴풋이 도움이 되었다고(?) 믿으며... 개발 일지를 쓰는 장점은 해당 주차에 배운 것들이 휘발되기 전에 한번더 복습한다는게 큰 것 같다. 강의만 들었으면 꼼꼼히 보지 않았을 강의자료를 다시 한번 돌아보며 배운 내용을 정리하는 습관은 어떤 공부를 하던 큰 도움이 될 것이다. 마침 스파르타 코딩클럽에서는 해당 과정을 과제로 두고 있기에 좀더 반강제로 그런 습관을 들이게되는데, 결과적으로 아주 도움되는 것 같다. 해당 교육 과정이 끝날때 쯔음엔 '교육'이라는 관점에서 스파르타 코딩 클럽이라는 플랫폼이 가진 특징들을 분석해봐야겠다. (안 할 것 같은 예감이 벌써;)
그리고 오늘부터 메인 이미지는 해당 주차의 내 진도표이다. 내 앞에 있는 수강생들도 많지만(이미지 아래 부분에 짤려서 안 보임ㅋ) 난 나의 길을 간다!!
2. 학습 개요
[주차별 학습 개요]
- 1주차: HTMS, CSS, Javascript
- 2주차: JQuery, Ajax, API (내가 이번 주에 공부한 부분)
- 3주차: Python, 크롤링, mongoDB
- 4주차: 미니 프로젝트 1, 2
- 5주차: 미니 프로젝트 3, AWS
- Javascript 문법에 익숙해진다.
- JQuery로 간단한 HTML을 조작할 수 있따.
- Ajax로 서버 API에 데이터를 주고, 결과를 받아온다.
코딩 강의에서는 1주차에서 말했듯이 자세한 개념의 설명이나 이해를 지양(?)하지만, 나는 개념 이해가 필요한 스타일이라 개인적으로 몇가지 정의를 찾아보았다. 우선 Jquery는 쉽게 말해 자바스크립트 라이브러리이다. HTML을 잘 설계하기 위한 자바스크립트 형식들의 라이브러리(모음)을 Jquery라고 이해하면 될 것 같다. 자바스크립트만으로 기능을 구현 이후에도, 특정 영역 내 박스의 노출/숨김, 색상 변경 등의 작업을 편리하게 도와준다. Ajax는 이러한 구현 과정에서 특히 API 부분에 필요한 코드 형태인 것 같다. (틀렸다면 댓글로 알려주기 바람 ㅠㅠ) 근데 실컷 찾고나니 강의 자료에는 설명이 있더라; 여튼 복습 시작!
3. 주요 학습 내용 + lesson learned
1-1) Jquery (제이쿼리)
① JQuery의 개념
제이쿼리는 미리 작성해둔 자바스크립트의 라이브러리이다. 아래 학습 자료를 보며 정리해보자! Jquery(제이쿼리)는 특이하게 달러 표시($)를 사용하더라.
② Import 임포트와 id 지정
그런데 이 제이쿼리를 사용하기 위해서는 import(임포트) 과정이 필요하다고 한다. '달러 표시를 사용한 이러한 규칙을 이용해 코드를 짤게! 근데 그 규칙의 상세한 부분은 여기 url 에서 가져왔으니 참고해~'라고 개발 툴에 알려주는 과정으로 이해했다. 1) 아래처럼 사용할 제이쿼리 영역의 url을 <head>와 </head> 사이에 넣는다. 그리고 css에서는 영역 지정 시 'class ='를 사용했는데, 2) 제이쿼리에서는 'id='를 사용해 영역명을 지칭한다.
[제이쿼리 주요 명령어]
- $('#url').val(); // url 영역(=id 값)의 value 값을 가져오기
- $('#post-box').hide(); // post-box 영역(=id 값)을 숨기기
- $('#post-box').show(); // post-box 영역(=id 값)을 노출하기
- $('#cards-box').append(temp_html); // cards-box 영역에 tmp_html 형태로 붙이기
- $("#아이디값").attr("src", 이미지URL); // 이미지 바꾸기
- $("#아이디값").text("바꾸고 싶은 텍스트"); // 텍스트바꾸기
③ html 태그
단순 동작이나 스타일 변경 외에 좀 더 동적인 제이쿼리를 사용할땐 html 태그를 이용한다. 우선 원하는 영역의 <div>에 class 외에 추가로 id를 지정해준다. 그리고 'let temp_html = ``'의 태그로 원하는 형태를 입력, 제이쿼리($명령문)를 이용해 temp_html에 액션을 지정해준다. 단, html 태그를 사용할때는 홑따옴표(')가 아닌 백틱(`)을 사용해야한다. 백틱(backtick)은 자판의 물결표(~)에 있다.
1-2) Jquery (제이쿼리) 활용 예제(feat. split)
강의 때 배운 연습 문제를 다시 풀어봤는데, 또 못풀었다. 이제는 제대로 풀 수 있길 바라며, 풀이 방법을 박제한다;; 예제 문제는 아래와 같다.
① 개발자 도구 콘솔에서 split 함수 이용하기
2-2번은 쉬우나, 2-1이 항상 어려워 해당 부분에 대한 풀이만 정리해본다. 얼럿을 띄우는건 문제가 되지 않는다. 내가 매번 헷갈리는건 .split 에 관련한 부분인데, 여기서는 '@'를 기준으로 split해 '.com' 앞의 도메인만 가져와야한다. 우선 console.log를 사용해 콘솔창에서 split해준다. 1주차에서 배운 리스트형에서 순서를 지정해주는 형태로 원하는 값이 나올때까지 구해준다.
② 개발자 툴에 붙여넣기
다음으로 원하는 값을 구해준 최종 명령문을 툴로 복사해서 가져온다. 내 경우 <script>와 </script> 사이에 아래처럼 입력했다. 'myemail'이 그대로 붙여넣기 된 것을 볼 수 있는데, 여기서는 if 명령문에 'txt' 사용해줬으므로 'myemail'을 'txt'로 수정만 해주면 된다.
function q2() {
let txt = $('#input-q2').val()
if(txt.includes('@') == true) {
alert(myemail.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다!')
}
}
그러면 이렇게 얼럿이 정상적으로 노출된다ㅠㅠ (감격)
2-1) Ajax의 이해를 돕는 JSON과 API
① Jsonview 설치하기
다음은 Ajax이다. API에서 필요하다고 이해했었다. API 링크를 브라우저에 입력해보면 보통 JSON 형태로 표시되고(JSON 뭔지 몰라도 돼! 그냥 딕셔너리와 리스트 형태가 합쳐진 html임) 이를 창에서 예쁘게 보기 위해서 'Jsonview'라는 익스텐션을 설치해주면 좋다.
[Jsonview extension(크롬)]
: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
② API의 형식
이제 API에 대해 알아볼텐데, API는 클라이언트가 서버에 데이터를 요청하는 방법(길)이다. 클라이언트가 요청하는 타입은 크게 CRUD라고 불리는 형태로 나타날텐데 아래와 같다.
- GET: 통상적으로! 데이터 조회(Read)를 요청할 때 예시) 영화 목록 조회
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value¶m2=value2
- POST: 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예시) 회원가입/탈퇴, 비밀번호 수정
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
- ? : 여기서부터 전달할 데이터가 작성된다는 의미. '?' 앞 부분이 서버 주소, 뒷 부분이 [데이터]
- & : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
ㄴ q=아이폰 (검색어)
ㄴ sourceid=chrome (브라우저 정보)
ㄴ ie=UTF-8 (인코딩 정보)
2-2) Ajax의 적용
① Ajax의 기본 구조 파악하기
Ajax는 JQuery를 임포트한 페이지에서만 동작 가능하다. Ajax의 기본 골격은 아래와 같다. 아래의 경우 서울시의 미세먼지 API를 호출하는 Ajax 골격인데, 대략적인 구조를 먼저 파악해본다.
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
② 내게 필요한 데이터 경로 찾기
우선 개발툴에서 'console.log' 를 입력한 후 개발자 도구 콘솔에서 서버에서 주는 API 데이터가 잘 보이는지 확인한다. 다음으로는 해당 데이터 내에서 구체적으로 내게 필요한 부분을 특정해주면 된다. 아래 예시의 경우 [RealtimeCityAir > row]에 내가 필요한 미세먼지 데이터가 들어있음을 확인할 수 있다.
③ Ajax에 입력하기
경로까지 파악했다면 Ajax 기본 골격에 내가 필요한 데이터들을 입력해준다. 나는 구 이름과 미세먼지 수치를 추출해 프론트에 보여줄 예정이라 해당 키값의 value들을 출력하는 형태로 아래처럼 코드를 입력했다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});
④ 기타 예제: 이미지/텍스트 url 바꾸기
위 예시와 별개로 강의에서 배운 주요한 것 중 하나는, 새로고침을 할때마다 프론트 화면의 그림과 테스트가 바뀌는 코드였다. 아래 예시를 참고해보면 let 을 통해 먼저 이미지/텍스트를 정의해주고 제이쿼리를 사용해 명령문을 만들었다.
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function(response){
let imgurl = response['url'];
$("#img-rtan").attr("src", imgurl);
let msg = response['msg'];
$("#text-rtan").text(msg);
}
})
}
</script>
4. 간단 후기
2주차 강의를 완료했다. 1주차는 과제를 해결하는데는 문제가 없었지만 이해가 안되는 부분들이 많았다. 강사님이 말하는 '일단 해보세요'라는 말이 크게 와닿지 않았는데, 2주차에서 많은 실습들을 하다보니 이해되지 않던 부분들이 조금은 더 이해가 된 것 같다. (인정하기 싫지만;;; 개발은 정말 원래 그런건가봐?)
그리고 이 개발일지 사실 정리라고 하기 보단 복습+정리라 시간이 꽤 걸린다. 그치만 확실히 이 과정을 통해 배운 것들이 체화되는 것 같다. 내 경우엔 본 포스팅을 작성하며 예제문제들도 다시 풀어보고 본 강의때보다 더 자율적으로 생각해보는 기회들을 가지게 되어 좋았다. 과연 이 열정이 마무리까지 이러질 수 있을지는 모르겠지만 그래도 화이팅!
'개발일지' 카테고리의 다른 글
| [스파르타코딩클럽] 엑셀보다 쉬운 SQL 문법 정리 (0) | 2022.05.29 |
|---|---|
| [스파르타 코딩클럽] Flask, API, 클라이언트 연결 (0) | 2022.04.01 |
| [스파르타 코딩클럽] 파이썬, beautifulsoup, 크롤링, DB (0) | 2022.03.27 |
| [스파르타 코딩클럽] HTML, CSS, Javascript (0) | 2022.03.11 |
