[웹프로그래밍기초🎀] 13주차 개발일지

-------

개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을  옮겼습니다.

https://blog.naver.com/0yeonjae2/222376136991

-------

이론 복습하기- 최신 자바스크립트 문법 4

 

1. 라이브러리

: 웹/앱에서 많이 사용되는 기능들을 재사용할 수 있는 코드로 구현해 놓은 것

(누군가 만들어놓은 코드들을 가져다가 사용할 수 있음.)

 

상황별 JS 라이브러리들은 다음과 같다.

①데이터 시각화(지도, 네트워크, 차트 그리기) : D3.js , Chart.js , leaflet.js

② DOM 조작 : jQuery

③애니메이션 효과 : GSAP, Anime.js

④수식, 날짜 처리 : Date.js

⑤Ul 컴포넌트 : React.js

 

2. Ajax

: 브라우저에서 서버로 데이터에 대한 요청을 보내고, 서버가 응답한 데이터를 이용하여 웹페이지를 동적으로 업데이트하는 비동기 프로그래밍 방식

 

비동기로 처리한다는 것은 여러 작업이 동시에 이루어질 수 있다는 뜻이다.

Ajax의 등장으로 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해졌다.

 

3. XMLHttpRequest

브라우저에서 자바 스크립트를 사용해 HTTP 요청을 전송할 때 사용하는 객체

Ajax는 XMLHttpRequest를 기반으로 동작한다.

 

XMLHttpRequest 객체에는 HTTP 요청 전송 및 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티가 있다.

HTTP 요청을 전송하는 경우 다음의 순서를 따른다.

 

① open 메서드로 HTTP 요청을 초기화한다.

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법이다.

주로 5가지의 요청 메서드(GET, POST, PUT, PATCH, DELETE)를 사용해서 CRUD를 구현한다.

이때 CRUD는 CREATE(생성), READ(조회), UPDATE(갱신), DELETE(삭제) 등 애플리케이션에 있는 기본적이고도 대표적인 기능 4가지이다.

 

②필요에 따라 setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정한다.

 

③ send 메서드로 HTTP 요청을 전송한다.

send 메서드는 open 메서드로 초기화된 HTTP 요청을 서버에 전송한다. HTTP 요청 메서드가 GET인 경우에는 데이터를 URL의 일부분인 쿼리 문자열로 서버에 전송한다. HTTP 요청 메서드가 POST인 경우에는 데이터(페이로드 payload)를 요청 몸체에 담아 전송하게 된다.

 

4. JSON

JSON은 JavaScript Object Notation의 줄임말로 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.

 

클라이언트에서 서버로 객체를 전송하려면 객체를 문자열화(직렬화 serializing) 해야 한다. JSON.stringify 메서드는 객체를 JSON 포맷의 문자열로 변환한다.

 

서버로부터 클라이언트에 전송된 JSON 데이터는 문자열이다. 문자열을 객체로 사용하려면 JSON 포맷의 문자열의 객체화 (역직렬화 deserializing) 해야 한다. JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환한다.

 

---

실습하기

 

검색창 관련 js 적용

구현하고자 한 것은 검색창이나 검색 목록 내 인기 검색어나 최근 검색어 버튼을 제외하고 아무 곳이나 눌렀을 때 검색 목록이 보이지 않도록 하는 것이다! 처음에는 javascript 내에서만 해결하려고 했었다. 그래서 특정 부분을 제외했다는 점에서 blur나 focusout을 이용해서 구현하려고 했다. 그런데 blur를 이용하면 원하는 모습을 구현하는 데 한계가 있었다. 구글링하면 보통 jQuery를 이용한 코드만이 나와서 고민이 엄청 많았다. 사실 jQuery가 뭔지도 잘 몰랐고, javascript로만으로도 가볍게 해결 가능한 문제라 생각했다.

 

그런데 3주 넘게 고민해 봐도 답을 찾지 못했다. 분명 javascript를 이용해서 구현할 수 있을 텐데, 실력도 부족하고, 최종본 제출까지 시간이 얼마 남지 않았다는 생각에 마음이 급해졌다. 그래서 결국 jQuery를 사용하기로 하고 구글링해서 코드를 작성했다. 3주 넘게 고민했던 문제가 금방 해결돼서 후련하기도 했지만 한편으로는 약간 속상했다. 3주 동안 시간이 헛된 느낌이었다. 그래도 해결한 것에 의의를 두기로 했다.

 

(동영상은 글 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)

jQuery 코드는 다음과 같다.

<!-- jquery 연결 -->
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

// 특정 부분을 제외하고 클릭했을 떄 발생하는 일 (jQuery 사용!)
$('body').click(function(e) {
    if(!$(e.target).hasClass("searchContentClick") && !$(e.target).hasClass("searchContentsbtn") ) {
        searchmenuEl.style.display = 'none'
    }
})

 

 

 

---

느낀 점

 

대학교에 입학하고 막연히 취업에 대한 고민이 생겨서 IT 분야의 취업 준비 방법에 대해서 많이 찾아봤었다. 그때 학생일 때부터 개발일지를 작성하는 것이 나의 포트폴리오가 된다는 것을 알게 되었다. 이러한 사실을 알았어도 실천에 옮기기는 쉽지 않다고 생각하는데 과제로 개발일지를 작성하는 것을 과제로 내주셔서 굉장히 좋았다. 자율적으로 하는 것은 중간에 흐지부지되는 경우가 많았는데 과제로 매주 작성하니 배운 내용 정리도 잘 되었고, 나의 실력 변화도 쉽게 파악할 수 있었다.

 

첫 웹프로그래밍 개발일지부터 지금까지의 개발일지를 보면 부족하지만 매주 조금씩 배워가고 발전하는 모습과 내가 자주 하는 실수들과 나의 부족한 점을 쉽게 찾을 수 있었다. 예를 들면 불필요하게 id 값이나 class 값을 남발하고 이것들의 이름을 명시적으로 짓지 못하는 것이 나의 부족한 점인 것 같다. 그리고 언젠가 언급했었던 성급한 시작도 고쳐야 할 점이다. 지금 보면 구조를 왜 이렇게 구성했지? 싶은 부분이 좀 있다. 이걸 다 고치면 대공사가 돼 버려서 이번 프로젝트에서는 더 이상 건들지 못하지만 다음에 웹프로그래밍을 할 때는 무작정 코드를 작성하지 말고 미리 계획을 세워서 프로젝트를 진행해야겠다는 깨달음을 얻었다.

 

사실 이번 주 개발일지를 작성할 때엔 모든 문제를 해결하고 완성 상태를 업로드하고 싶었는데, 그렇게 하면 기한 내 못 올릴 것 같아서 구현해야 할 3개 중 하나만을 완성하고 글을 쓰게 되었다.

 

중간고사 기간 동안 못 올렸던 글을 시험이 끝나고 올렸듯이 종강하고 이 프로젝트에 대한 마지막 개발일지를 작성할 예정이다. 마지막 개발일지에서는 문제점을 모두 해결한 상태에서 글을 올릴 수 있었으면 좋겠다.