두번째 공부(개발공부)/비개발자를 위한 웹개발 종합반(스파르타코딩클럽)

2주차 개발일지] Javascript, JQuery, Fetch 배우기(스파르타코딩클럽)

YTReeee 2023. 3. 17. 10:34

1주차 숙제 제출이 늦어져 2주차 시작을 수요일에나 시작할 수 있었다.

지난 1주차에서는 html과 css, 웹을 이루는 뼈대와 꾸미기 작업에 대해 배웠다.

이번 2주차에는 웹을 움직이게하는 Javascript와 효율적인 Javascript 사용을 위한 JQuery, 그리고 온라인에 공개된 데이터를 받아오게 하는 Fetch까지 배울 수 있었다.

 

Javascript

html은 뼈대, css는 꾸미기, Javascript는 움직이기

javascript는 <head></head> 안에 <script></script>에 입력하게 된다.

fucntion, onclick, console, let 등의 명령어를 이용해보았다.

그 중, console은 내가 작성한 코드가 브라우저에서 정상적으로 작동하는지 알아보는 명령어로, 브라우저 > 우클릭 > 검사 > console 창에서 여러 변수를 입력해보면서 작동여부를 알아보았다.

 

JQuery

JQuery는 Javascript 코드 묶음을 간단한 코드로 짜놓은 형태로, Javascript를 조금 더 사용하기 쉽고, html에서 호환이 잘되도록 돕는 라이브러리이다.

JQuery도 CSS처럼 작동하게 만들 부분을 '지칭'해줘야 한다. 이때, CSS 는 class = ' ' 를 사용한 것과 같이 JQuery에서는 id = ' ' 를 사용한다.

코드 작성 시 $(#'아이디값')을 기본으로 사용하며, 이후 .text, .append 등의 추가 코드를 사용하여 웹을 쉽게 움직이게 만들 수 있다고 한다.

리스트, 딕셔너리, 리스트-딕셔너리 자료형, 반복문과 조건문 등을 이용하여 JQuery를 연습하였다.

 

Fetch

Fetch는 데이터를 불러 사용할 수 있게하는 코드이다.

서울 미세먼지 데이터와 따릉이 데이터를 불러오는 연습을 수행하였다.

JQuery를 이요하여 해당 데이터의 여러 자료들 중 원하는 자료만 선택하여 브라우저에 표시해보는 연습도 수행하였다.

추가적으로, css와 조건문을 사용하여 특정 자료의 색을 변환시켜보기도 하였다.

 

회사에서 기안문을 작성할 때 회사의 양식에 맞춰서 작성하듯, 코딩에도 나름의 양식이 있고, 이를 내가 가져다가 사용하는 개념이라는 느낌을 받았다.

기안문은 정해진 내용 외에 추가적으로 들어갈 내용이 별로 없다.

다만, 코딩에서는 정해진 양식안에 내가 만들고자 하는 여러 양식을 추가할 수 있다. 

이제 빙산을 보기 위한 여행을 시작한 지금에서는 그냥 망망대해에 떠있는 느낌이 들수밖에...

2주차까지 진행하면서 나만의 복습용 페이지를 만드는 프로젝트를 진행해봐야겠다고 다짐하며, 2주차 개발일지를 마쳐본다.