제이쿼리 1 - jQuery의 기초 개념 및 사용 방법에 대하여

제이쿼리 수업은 2시간 반 정도로 짧게 설명하고 끝났지만 이 수업도 다시 듣고 정리하려면 꽤 긴 분량이다. 이제부터 차근차근 수업을 들으면서 엘리스에서 배운 개념들을 더 깊게 적용해보기로 하자.

 

자바스크립트에서 프론트 개발을 할 때는 Ract과 노드를 많이 쓰고, 자바에서는 스프링을 가장 많이 사용한다. 대한민국을 프로그래밍을 할 때 자바 베이스로 시작했기 때문이다.

전자정보 프레임워크는 우리나라에서 만든 스프링 기반 프레임워크로 공공기관에서 주로 많이 사용한다. 신생기업에서는 자바스크립트를 많이 선호한다. 어쨌든 백엔드는 자바로, 프론트엔드는 자바스크립트로 개발을 한다고 생각하면 될 것 같다. 데이터 분석을 하고 싶다면 파이썬을 공부해야 한다.

---

 

 

 

 

 

제이쿼리에 대하여

 

 

 

언어가 체감되고 바뀌려면 5~10년 정도 걸린다. 자바스크립트가 가장 잘 돌아가는 버전은 크름 브라우저이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이벤트를 등록하는 기능이 각기 달라서 개발자들은 크롬 브라우저, 익스플로러도 2개를 개발해야 했다. 하지만 익스플로러가 망한 이후로 전세계 모든 자바스크립트 엔진은 크롬을 쓰고 있다. 제이쿼리가 인기가 있었던 것은 브라우저마다 명령이 다르므로 통합하는 명령을 만들게 된 것이다.

하지만 지금은 인기가 식은 이유는 크롬이 세상을 지배하면서 이러한 불편함이 사라졌기 때문이다.

 

 

 

 

 

 

 

브라우저마다 동등성을 이식시키는 것이다. 

 

 

 

 

 

 

 

제이쿼리의 슬로건은 타이핑은 적게, 기능은 많이 실행시키는 것이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

제이쿼리에서는 앞의 문장을 이렇게 간결하게 작성할 수 있다. 제이쿼리를 먼저 공부하면 자바스크립트가 훨씬 어렵지만 자바스크립트를 먼저 공부하면 제이쿼리가 더 쉬워진다.

 

 

 

 

 

 

 

 

Ajax의 단순화가 핵심이다. 비동기 통신이라고 한다. 과거에는 모든 통신은 동기 방식이었다. 예를들어 네이버에 로그인을 했을 때 아이디와 비밀번호가 맞으면 페이지 전체가 깜빡거리며 새로운 페이지로 이동한다. 이것이 동기 통신 방식이다. 모든 데이터가 초기화되는 것이 동기 통신이다.

비동기 통신은 전체가 바뀌는 것이 아니라 특정 부분만 바뀌는 것을 말한다. 이것을 구현하는 것이 자바스크립트이다. 순수 자바스크립트에서는 코드가 길고 매우 복잡하다.

 

하지만 제이쿼리에서는 이것을 획기적으로 줄여 Ajax라는 비동기 통신을 쓸 때 제이쿼리를 많이 사용하는 편이다.

---

 

 

 

 

 

jQuery 사용 방법

 

 

 

공식 사이트에 들어가서 첫 번째 것을 클릭해본다.

 

제이쿼리 예시

 

 

 

제이쿼리의 두 가지 파일 종류

 

 

제이쿼리 코드는 자바스크립트와 비슷하다는 것을 알 수 있다. 실제 작업할 때 컴퓨터는 공백과 엔터를 다 지운다. 이걸 지워도 인식을 하기 때문이다. 이제 뒤로 가기 버튼을 눌러 다운로드에서 상단에 있는 다운로드를 클릭해보자.

 

 

 

 

 

앞의 것과 같은 코드인데 이 코드는 공백이 하나도 없어 보기 힘들다. 왜 이렇게 할까? 컴퓨터가 읽어들일 때 빠르게 처리하기 위함이다. 하지만 이때 세미콜론을 찍지 않으면 컴퓨터는 문장이 끝났음을 알지 못한다.

코드는 두 가지 종류가 있다. 하나는 자신이 개발할 때 쓰는 코드와 다른 하나는 배포할 때 쓰는 코드가 있다. 이 코드는 수정하기가 매우 어렵다.

 

이것은 배포하기 위함이고, 위의 코드는 개발자를 위한 코드이다.

 

 

 

 

 

 

이렇게 두 가지 버전이 있다. 별로 차이는 없는데 왜 분리해서 코드를 개발할까? 사용자가 사이트에 접속했을 때 빠르게 하기 위함이다. 즉, 원래 코드에서 압축을 시킨 것이 배포용 코드이다. 엄청 긴 코드처럼 보이지만 복사 붙여넣으면 한 줄이다.

먼저 파일을 직접 다운로드하는 것을 해볼 것이다.

 

 

 

 

파일 다운로드하기

 

 

 

우클릭하여 다른 이름으로 저장하기를 누르고 학습 자료가 정리되어 있는 폴더에 저장한다. 

 

 

 

 

 

저장한 내용을 보니 js 파일이 하나 생성되었다. 이것은 외부 방식으로 불러온 것이다. 이제 제이쿼리를 사용할 수 있는 모든 준비가 끝났다.

---

 

 

 

학습을 마치고

한 시간 분량의 수업을 듣고 내용을 정리해보았다. 새벽에 제이쿼리 수업을 열심히 들어서 그런지 선생님이 하시는 이야기 중에서 이미 아는 중복된 내용도 좀 있었다. 그런 부분은 적당히 건너 뛰면서 들었다.

제이쿼리의 파일의 두 가지 방식에 대해서 알게 된 것은 정말 큰 수확이었다. 

 

아침 8시 반 넘어서까지 공부를 하다가 2시간 정도는 다른 일을 하면서 쉬기도 하고 아침을 먹었다. 어제 저녁도 안 먹고 잠을 자서 아침에 배가 무척 고팠다. 건강식으로 어제 끓인 감자 된장국과 밤을 쪄서 먹으니 정말 최고의 밥상이었다. 아침을 먹고 나서는 공부하기가 싫기도 했지만 이렇게 다시 자리에 앉아 공부할 수 있어서 감사했다. 

이제 난 어떤 일이든지 시작하고 맺는 것을 전보다 훨씬 잘할 수 있게 되었다. 요즘은 좋아하는 영상을 시청하다가도 공부를 해야겠다는 생각이 들면 바로 끄고 집중할 수 있게 되었다. 게으름을 부리고 싶은 마음이 들어도 이 마음을 이기고 내가 해야 할 일을 시작한다.

 

아직 운동하는 것은 좀 어렵지만 운동도 분명 1년 이상 훈련하면 충분히 좋은 습관이 들거라 생각한다. 난 어떤 습관이 드는데 최소 1년 이상이 걸린다는 걸 알게 되었다. 공부 습관을 들이는데도 1년이  걸렸다. 이쯤되자 이제는 숨을 쉬는 것처럼 매우 자연스러워졌고 노는 것보다도 공부하는 것이 이젠 더 즐거워졌다.