안녕하세요
이번 시간에는 북마크 탭을 만들어보겠습니다.
북마크 탭은 이렇게 열고 닫을 수 있고, 북마크를 추가하는 버튼과 추가한 북마크들을 볼 수 있는 탭입니다.
먼저 index.html에서 class 이름이 main-container인 div 아래에 class이름과 id가 bookmark-open인 div와 class이름과 id가 bookmark-close인 div를 만들고,
각각의 div 안에는 id가 bookmark-open-btn인 div와 bookmark-close-btn인 div를 넣어주고, 텍스트로는 북마크 닫기, 북마크 열기 를 작성해주겠습니다.
그리고 그 아래에는 bookmark-bar라는 class 와 id 를 갖는 div를 만들어주고 주석으로 “북마크 바” 라고 작성해줍시다.
그 다음 bookmark-toggle.js 파일을 만들고 html 문서에 추가해주겠습니다.
여기서 bookmark-open은 북마크 바가 열린 상태를 뜻하고, bookmark-close는 북마크 바가 닫힌 상태를 뜻하며 bookmark-bar는 말 그대로 북마크 바를 뜻합니다.
이번에는 css 파일로 가서 스타일을 먼저 설정해주겠습니다.
bookmark-open 의 스타일은 가로 길이를 240px로 설정해주고 padding은 위아래로 15px, 양옆으로는 30px로 설정해주겠습니다.
그 다음, 글자 크기를 xsmall로 설정해주고 이 요소의 높이는 20px로 설정해줍시다.
북마크를 열고 닫는 버튼은 오른쪽 상단에 위치해야하고, 이 북마크 바는 class이름이 main-container인 요소의 위에 떠있어야 하므로, main-container에는 position relative를, bookmark-open 요소에는 position absolute와 top 0, right 0px 으로 설정해주겠습니다.
그리고 화면의 가운데에 있는 시계는 북마크 바와 상관 없이 고정되어 있어야 하므로 position fixed를 주고, “북마크 닫기” 글자를 오른쪽 끝에 두기 위해 display flex, justify-content flex-end로 설정해주겠습니다.
class 이름이 bookmark-close인 요소도 bookmark-open과 동일한 스타일을 적용해주고 이 요소들의 안에 있는, 실제 버튼 역할을 할 요소들에는 커서 모양을 포인터로 설정해주겠습니다.
마지막으로 북마크 바 요소는 동일하게 가로 길이를 240px로, 배경색도 동일하게 설정해주고, position absolute, top 50px, right 0px로, 그리고 padding은 위아래 10px, 양옆 30px로 주고, 글자 색상은 흰색으로 변경하고, 이 요소의 높이는 100vh에서 70px을 뺀 값으로 설정해주겠습니다.
이렇게 스타일을 설정해주면, 스타일이 알맞게 적용되어 우리가 원하는 위치에 북마크 바가 배치되었습니다.
그렇다면 이제 bookmark-toggle.js 로 이동해서 코드를 작성해보겠습니다.
먼저 id값이 bookmark-bar와 bookmark-open, bookmark-close 인 요소를 getElementById를 통해 가져오고,
bookmarkBarToggle 이라는 함수를 생성해서, “북마크 닫기” 와 “북마크 열기” 버튼을 눌렀을 때 북마크 바를 열고 닫는 기능을 개발해보겠습니다.
이 북마크바를 닫은 상태에서 웹 페이지를 종료했다면, 다음에 재 접속 했을 때에도 북마크바를 닫아야하고, 북마크바를 연 상태에서 웹 페이지를 종료했다면, 동일하게 다음에 재 접속 했을 때 북마크바를 연 상태로 유지하고 있어야하기 때문에 우리는 이 북마크바가 열렸는지 닫혔는지에 대한 정보를 로컬스토리지에 저장해주겠습니다.
bookmarkBarToggle 함수 안에 isBookMarkBarOpen 이라는 변수를 생성하고, localStorage에 isBookMarkBarOpen이라는 키를 갖는 데이터를 getItem 메서드를 사용해 가져오겠습니다.
북마크바는 열고 닫는 두 가지의 상황으로 나눌 수 있고, 북마크바를 여는 상황은, 변수 isBookMarkOpen 의 값이 close일 때이고, 북마크 바를 닫는 상황은 isBookMarkOpen의 값이 open일 때와, 로컬스토리지에 isBookMarkOpen 값이 존재하지 않을 때 입니다.
조건문으로 작성해보면, 만약 isBookMarkOpen 값이 존재할 때와 존재하지 않을 때로 구분하고, isBookMarkOpen의 값이 open 일 때와 close 일 때로 나눌 수 있습니다.
isBookMarkOpen 값이 open 일 때 버튼을 눌러, bookmarkBarToggle 함수를 실행했다면, 북마크 바를 닫아야하므로, 로컬스토리지에 setItem 메서드를 통해 값을 close로 변경해주고, bookmarkBar와 bookMarkOpen 요소의 스타일을 display none으로, bookMarkClose는 display flex로 설정해주겠습니다.
그리고 isBookMarkOpen 값이 close라면, 로컬스토리지에 setItem 메서드를 통해 값을 open으로 변경해주고, bookmarkBar 의 display는 block으로, bookMarkOpen 은 flex 로, bookMarkClose 는 none으로 설정해주겠습니다.
그리고, 로컬스토리지에 isBookMarkOpen 값이 존재하지 않을 때에는 북마크 바를 닫아야하기 때문에, 위에 작성했던 isBookMarkOpen 값이 open일 때와 동일한 코드를 작성해줍시다.
그리고 맨 아래 쪽에 버튼 요소를 getElementById를 통해 가져오고 addEventListener를 사용해서 버튼이 클릭 되었을 때, bookmarkBarToggle 함수를 실행시켜주겠습니다.
이렇게 작성하고, 북마크 바 닫기 버튼을 누르면 북마크 바가 닫히고, 북마크 바 열기를 누르면 북마크 바가 열리는 것을 확인할 수 있습니다.
하지만 지금 작성된 코드를 보면, 조건문이 많기 때문에 코드가 복잡해보입니다.
많은 조건식 때문에 복잡하게 작성된 코드는 앞에서 배웠던 얼리 리턴 패턴을 적용해 깔끔하게 작성할 수 있습니다.
코드를 살펴보면, 로컬 스토리지에 isBookMarkOpen 데이터가 close일 경우에만 북마크 바를 열고, 나머지의 경우에는 모두 북마크 바를 닫으면 되기 때문에 isBookMarkOpen 값이 close일 경우에만 북마크 바를 열고, 리턴을 해준 다음, 아래에 북마크 바를 닫는 기능의 코드를 작성해주면 훨씬 깔끔한 코드로 작성할 수 있습니다.
그럼, 이제 웹 페이지에 접속 했을 때, 로컬스토리지에 isBookMarkBarOpen 변수의 값이 close 라면 북마크바를 닫힌 상태로 만들고, 값이 open이라면 북마크바를 표시해주는 기능의 코드를 작성해보겠습니다.
자바스크립트 파일에 가장 윗 부분에 isBookMarkBarOpen 변수에 getItem 메서드로 로컬스토리지의 isBookMarkBarOpen 값을 가져오고, 만약 isBookMarkBarOpen값이 close라면 이 북마크 바의 요소들을 display none으로 없애주고, “북마크 닫기” 버튼을 표시해줍니다.
마찬가지로, 만약 isBookMarkBarOpen값이 open이라면 북마크 바 요소들을 모두 표시해주겠습니다.
북마크 바를 닫은 상태에서 웹 페이지를 종료하고, 다시 웹 페이지를 실행해보면, 북마크 바가 닫힌 상태로 켜지는 것을 볼 수 있습니다.
마지막으로 css 파일에 가서, 북마크 바가 닫혀있을 경우에 이 표시된 배경색을 삭제해주면 북마크 바가 실제로 열리고 닫힌 것처럼 표시 됩니다.
이렇게 총 4개의 강의에 걸쳐, 디지털 시계와 검색 기능, api를 통해 명언을 가져오는 기능 그리고 북마크 바를 열고 닫는 기능까지 개발해보았습니다.
지금까지 생성한 자바스크립트 파일은 총 4개이고, 현재 각각의 자바스크립트 파일에서 전역에 선언된 변수들이 상당히 많이 보입니다.
자바스크립트에서 전역으로 선언된 변수 혹은 함수는 전역 스코프를 갖기 때문에 다른 자바스크립트 파일에서도 사용할 수 있게됩니다.
seach.js 파일에서 timeElement 요소의 텍스트를 textContent를 사용해서 12:00로 변경해보겠습니다.
코드를 작성하고 저장을하면, 실제로 시간이 12:00로 변하는 것을 알 수 있습니다.
우리가 코드를 작성할 때 전역 변수들의 이름을 전부 다르게 사용해서 문제가 발생하지 않았지만, 만약 동일한 이름을 갖는 변수나 함수를 생성했다면, 문제가 발생했을 수 있습니다.
우리는 이를 방지하기 위해 [함수] 챕터에서 배웠던, 즉시실행함수를 사용하도록 하겠습니다.
즉시 실행함수는, 다른말로는 IIFE 함수로, 함수의 호출문을 작성하지 않고도 바로, 선언되자마자 즉시 실행되는 함수입니다.
그렇기 때문에 이 즉시실행함수 안에 우리가 작성했던 코드들을 넣게 되면, 함수가 즉시 실행되기 때문에 코드를 바로 실행할 수 있고, 함수 내부에 작성된 전역변수들은, 함수 내부에 선언되어있기 때문에 함수 스코프를 갖게 되어, 다른 자바스크립트 파일에서 접근 할 수 없어 여러가지 오류들을 방지할 수 있습니다.
timeElement의 텍스트를 변경하는 코드도 즉시실행함수 내부에 작성하면, 에러가 발생하는 것을 볼 수 있습니다.
지금까지 작성한 자바스크립트 파일의 코드들을 즉시실행함수 내부에 작성해주도록 하겠습니다.
이번 시간에는 이렇게 북마크 바를 열고 닫는 기능과 즉시실행함수 사용법에 대해 배워보았습니다.
다음 시간에는 북마크를 추가하고 표시하는 기능을 만들어보겠습니다.
감사합니다.