Nonamed Develog
[TIL][240627] 미니 프로젝트 발표, jQuery, API(GET), FETCH 본문
어려웠던 부분
팀 프로젝트에서 프론트엔드 관련 작은 업데이트만 하다 보니 팀에게 조금이라도 도움이 되고 싶어 발표를 자처했다. 발표를 잘해보지도 잘하지도 않지만 첫 프로젝트이고, 어떻게 프로젝트를 진행했는지에 대한 이야기를 하면 되겠다 싶어 부담이 많이 들진 않았다. 하지만 발표를 하려면 기술적인 부분들을 언급해야 하는데, 아무래도 프로젝트의 세세한 이해도는 떨어지니 자신이 없었다.
팀원들에게 SA와 README를 바탕으로 어떻게 발표를 할지 기술적인 부분의 설명을 들었지만 나의 언어로 옮기기엔 쉽지 지 않았다. 아무래도 웹개발 종합반 복습한 부분은 이해가 갔지만 복습하지 않은 부분은 여전히 이해가 되지 않았다. 공부가 더 필요한 것 같다. 결국 기술적인 설명보다 우리가 해온 협업에 관한 것을 집중해서 발표를 준비했다.
발표 후 튜터들이 피드백을 해주시는데 그 부분도 잘 몰랐던 내용이라 나 혼자라면 수정이 불가능할 것 같다. 발표회가 끝난 후 팀원들과 피드백 관련 이야기를 하고 있는 와중에 튜터님이 방문해 주셔서 몇 가지를 알려주셨지만 내 지식으로는 알아듣기 힘들었다. 언젠간 알아듣겠지?
느낀 점
오늘 발표회를 보면서 사람은 다 비슷하면서 다 다르다는 걸 다시 한번 느꼈다. 팀원 소개 페이지를 만드는데 정말 다양한 모양과 방법으로 나왔는데 그 과정은 모두가 비슷해보였다. 프로젝트를 하면서 '난 프로젝트를 할 실력이 아닌 거 같은데', '내가 이런 말을 해도 될까?'라고 스스로 의심하고 괴로웠지만 끝내 완성을 해서 뿌듯한 기분이지만 또 어딘가 찜찜한 느낌... 다른 조의 발표를 들어도 비슷한 느낌이 들었다.
실패는 성공의 어머니라 했던가. 나는 이번 프로젝트에서 실패를 두려워 했다. Github를 사용하면서 git pull은 충돌이 날까 봐 시도를 안 하고 팀원들이 수정을 끝낼 때마다 폴더를 다시 만들어 git clone을 진행했다. 다른 조에서 어떤 오류로 인해 다 날아갔다고 하는데 나에게 그런 일이 일어났으면 얼마나 끔찍할까. 튜터님들의 피드백에도 git과 github의 중요성을 강조하면서 실패도 하면서 성장하는 것이라 하셨는데 스스로가 부끄러웠다.
웹개발 종합반을 복습하면서 내가 미니 프로젝트에서 더 활약할 수 있었겠다라는 생각을 했었다. 무작정 강의만 따라가는 게 아니라 밀도 있게 공부를 해야 한다고 생각했다.
새로 알게 된 내용
일단 발표회를 끝내면서 튜터님들의 피드백이 굉장히 좋았다. 기술적인 부분들은 내가 아직 아는게 없기 때문에 이해는 못했지만 어떻게 협업을 해야 하는지 이해가 갔다. SA에 피드백을 주신 부분이나 발표회의 피드백에서 README와 commit을 남기는 등 협업 중에 팀원 간의 정보 공유가 매우 중요하다는 생각이 들었다. 또한 git과 github의 중요성에 대해서 강조해 주셨는데 이 부분은 시간 날 때마다 복습해야겠다는 생각이 들었다.
새로 알게된 내용은 아니지만 지금 웹개발 종합반 1~3주차를 복습 중에 알게 된 내용을 정리하고자 한다. jquery부터 길을 잃었는데 애매모호하게 이해했던 부분을 조금이나마 선명하게 만들어보기 위함이다.
jQuery
부스트트랩 같은 라이브러리라는 건 알고 있었고 CDN을 가져와 임포트를 하는 것도 알고 있었다. 근데 어떻게 사용하지? $어쩌고 저쩌고 하는데 아마 이때부터 내 두뇌는 이해하길 포기한 거 같다. 다시 정리하면 다음과 같다.
- CDN은 <head></head> 사이에 임포트 한다.
- Ex) ${"요소 선택"}.text() → 선택한 요소에 포함하는 텍스트를 반환하거나 새 텍스트로 반환한다.
- 요소 선택에는 CSS가 선택자(id, class)를 사용한 것처럼 "가리키는" 요소가 필요한데 jQuery는 id 값을 통해 버튼/인풋박스/div 등을 가리킨다.
- .text(), .attr() 등의 여러 속성 조작 방법이 있다. (더 많은 속성 조작 방법: https://soft91.tistory.com/9)
JSON, API, GET
- JSON은 key:value로 이루어져 있고 그냥 받으면 보기 힘든 데이터 덩어리이지만, 크롬 확장프로그램 JSONView를 활용하면 깔끔하게 볼 수 있다.
- JSON은 클라이언트와 서버의 API 결과(데이터) 주고받는 형식이라고 볼 수 있다.(택배 상자에 비유)
- API는 일종의 은행 창구라 비유한다. 클라이언트와 서버간 직접적인 상호작용은 비효율적이므로, 창구를 통해 해당하는 서버에 전달되도록 교통정리를 해주는 것이다.
- Open API는 누구나 쓸 수 있도록 공개된 API이다. 공공데이터포털이나 대기업에서도 무료로 API를 공개하기도 했다.
- GET은 클라이언트가 요청할 때 사용하는 타입 중 하나이다. EX) 데이터 조회(read)를 요청
- 주소에서 ?를 기준으로 ?전에는 서버주소 ?후에는 요청한 정보를 알 수 있다.
Fetch
fetch("API url") // 이 URL로 웹 통신을 요청한다.
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름(변경 가능)을 붙이고 JSON 형태로 바꿔서 조작
.then(data => { // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙일 거야
// data를 응답 받은 후의 로직. (개발자 도구에 찍어보기)
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용- fetch()의 default method는 GET이다. 괄호 안에 url만 있는 경우는 기본 상태인 GET이라 볼 수 있다.
- data를 응답 받은 후 아래와 같이 조건문, 반복문, jQuery 등을 응용할 수 있다.
- 개발자 도구 - console에서 데이터를 찾아볼 수 있다.
fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
// 구의 이름, 미세먼지 수치 값을 개발자 도구에서 찍어보기
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})오늘 잘한 점
오늘 발표로 인해서 조금이라도 자신감이 올라간 것 같다. 발표 준비를 하면서 팀원들에게 내가 부족한 부분을 물어보고 설명도 듣게 되어서 이해도가 조금이라도 올라간 것 같다. 역시 모를 땐 물어보는 게 최고다.
내일 할 일
내일은 그동안 못들은 웹개발 종합반을 완강하고 싶은데 예전처럼 완강을 목표로 하기보단 내가 이해하는 만큼 하고자 한다. 발제와 매니저님과 상담을 해봐야겠지만 파이썬 심화반을 들어야 할 수도 있다. 개인적인 욕심으로는 주말까지 이용하여 웹개발 종합반을 90% 이상 내 것으로 만들고 싶다.
'WHAT I LEARN > TIL' 카테고리의 다른 글
| [TIL][240701] UP & DOWN Game, Code Conventions, try/except, 다중 반복문 (0) | 2024.07.01 |
|---|---|
| [TIL][240628] requests, 웹 스크래핑(크롤링), Flask, url_for, form, Database, SQLite (0) | 2024.06.28 |
| [TIL][240626] 미니 프로젝트, 필수 리눅스 명령어, Git & Github, pip install (0) | 2024.06.26 |
| [TIL][240625] 미니 프로젝트, Fetch, jQuery, Flask, venv (0) | 2024.06.25 |
| [TIL][240624] 서버-클라이언트, 파이썬 웹 스크래핑 (0) | 2024.06.24 |