Web 프론트엔드 (8) / JavaScript와 Jquery 활용

 

실제 HTML파일에 Jquery를 이용해 자바스크립트 코드를 작성해보자!

작성된 모든 내용은 아래 강좌를 듣고 기록한 내용이다.

 

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!

https://class101.net/ko/products/5f53ae772e3e0d001cd99667

[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교

 

 

 

 

 

CHAPTER4 : 만능 언어 자바스크립트, JS

 

[1. 자바스크립트가 그냥 커피라면 Jquery는 TOP]

 

자바스크립트가 실제로 웹사이트와 어떻게 연결되어 작동하는지 살펴보자.

하지만 Jquery없이 코드를 짜기에는 복잡하고 명령어들을 외우기도 쉽지않다.

그렇기 때문에 Jquery를 불러와준 다음에 Jquery를 활용한 명령어로 쉽게 구현해보자.

 

부트스트랩 버전이 5라면, 부트스트랩을 불러오는 코드에 Jquery가 포함되어 있지 않다.

때문에 html head부분에 다음과 같은 코드를 추가해주어야 한다.

<!--Add Jquery-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

복붙해서 붙여주면 된다.

 

지금 html에 import해준 부트스트랩과 Jquery코드는 다음과 같다.

<!--BootStrap codes-->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>TODO LIST</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"

integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"

crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"

integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"

crossorigin="anonymous"></script>

<!--Add Jquery-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

 

 

 

Jquery를 사용할 준비가 되어있다면 본격적으로 기능을 추가해보자.

지난번에 만든 TODO LIST를 다시 불러왔다.

 

 

Wirte your plan 부분에 항목을 작성하고 추가를 누르면 항목이 리스트에 올라가는 형태를 구현하려 한다.

우선 추가를 누르면 cosole에 추가한 항목이 출력되도록 만들어보았다.

 

 

 

 

 

 

"추가" 버튼에 onclick 속성을 추가하고 클릭이 되었을때 clickedButton이 실행되도록 속성값을 작성한다.

Jquery에서는 $(ID 값)으로 특정 태그를 선택하고 .다음으로 원하는 값/기능 선택이 가능하다.

 

 

 

 

 

 

<script>태그 안에 clickedButton 함수의 내용을 작성한다.

todo라는 변수에 id가 input-area인 요소에 value 값을 가져오도록 작성했다.

Jquery를 사용하지 않는다면 굉장히 복잡한 코드로 작성해야 하지만 Jquery를 사용하면 짧은 코드로 구현이 가능하다.

(Jquery를 사용하지 않고 작성하는 방법에 대해서는 잘 모르겠다..)

 

 

 

 

 

항목을 작성하고  추가를 누르자 작성했던 글이 출력되는 것을 볼 수 있다.

 

 

 

 

 

 

 

[2. 유용한 Jquery 제공 함수들]

 

투두리스트를 완성하며 대표적으로 유용하게 쓰이는 Jquery 제공 함수들을 살펴보았다.

남은 부분에서 완성해야 할 부분은 무엇일까?

간단히 정리하면 다음과 같다.

 

(1) 추가 버튼을 누르면 작성한 항목이 리스트에 올라간다.

(2) 작성 창이 초기화 된다. (= 깨끗하게 지워진다.)

(3) 오른쪽 삭제 버튼을 누르면 해당 항목이 삭제된다.

 

 

 

 

 

(1) 추가 버튼을 누르면 항목을 리스트에 띄우기.

 

 

추가 버튼에 onclick과 연결할 함수를 작성하고 미리 삭제 버튼에도 deleteTodo함수를 적어 연결시켜둔다.

*onclick은 버튼 태그 뿐만 아니라 모든 태그들에 다 적용이 가능하다.

 

 

 

 addTodo 함수를 만들고 코드를 채워주었다.

작동 방식은 추가 버튼을 누르면 리스트를 추가하는 코드를 ul 태그 안에 복붙해줄 것이다.

물론 코드의 내용을 작성한 항목을 추가하도록 끼워넣어야 한다.

 

백틱(` `) 안에 list를 추가시켜주는 코드를 문자열로 담아준다.

todo 변수를 백틱 문자열이 제공해주는 편의 기능으로 끼워 넣어준다.

Jquery에서 제공하는 append 함수로 ul 태그 (아이디가 list-group)안에 항목을 복붙해준다.

 

 

 

 

(2) 작성 창 초기화

 

위에서 이미 사용했었던 val 함수는 ( )안을 비워두면  내부값만 반환해주지만, ( )안에 값을 적으면 해당 값으로 초기화시켜준다.

작성창을 비우고 싶기 때문에 빈 문자열 ""을 넣어주었다.

 

 

 

 

 

 

이제 추가를 입력하면 항목이 나타나는 것을 볼 수 있다.

다만, 작성창이 비워져있는 대신 아무것도 추가하지 않았을 때 보이는 placeholder 값 (Write your plan!)이 나타난다.

이유는 잘 모르겠지만 이게 더 좋은 것 같아서 넘어간다..^^;;

 

 

 

 

 

(1) 삭제 버튼 누르면 항목 지우기.

삭제에 필요한 과정은 무엇일까?

항목을 추가할때 id를 붙여준다 - 삭제 버튼을 누르면 해당 id의 항목을 지운다.

 

먼저 항목을 추가할때 id를 붙여주어야 하는데 id는 다음과 같이 랜덤한 숫자값으로 설정해준다.

 

 

id라는 변수를 만들고 js에서 제공해주는 Math(수학과 관련된 함수들을 모아놓은 것)안에 random함수로 랜덤한 값을 부른다.

0.103023와 같이 너무 작은 수가 나오기 때문에 대략 100000정도 곱해준다.

그리고 floor함수를 통해 소수점 아래 값을 날려준다.

 

 

 

 

 

 

id를 변수를 어떻게 활용해줄 수 있을까?

변수의 이름은 id라고 붙였지만, 이미 상위 태그에서 id를 만들어 css스타일을 입혀주고 있기 때문에

혹시 모를 혼란을 막기 위해서 클래스로 이름 붙여주었다.

그리고 deleteTodo함수에서도 id를 매개변수 값으로 받도록 하여 해당 항목을 지울 수 있게 준비해주었다.

 

 

 

 

 

 마지막으로 deleteTodo함수의 내용을 채워준다.

Jquery의 remove함수로 간편하게 해당 클래스의 항목을 지워주도록 설정하였다.

 

 

 

 

 

추가!

 

삭제!

 

 

이렇게 간단한 투두리스트가 완성되었다.

 

 

 

 

 

 

 

 

직접 무언가를 만들고나면 확실히 뿌듯함이 드는 것 같다.

아직 너무 단순한 것 밖에는 하지 못해서 갈길이 멀지만

하나 하나 만들때마다 미리 걱정하는 대신,

그때 그때 성취감을 만끽하는게 꾸준한 공부에는 더 도움이 되지 않을까 싶다.

다음에는 마지막 js파트로 포스팅이 이루어질 것 같다.

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교