[1人 프로젝트] 포트폴리오 11회차

🎉 성과

완성한 부분

1. 포트폴리오 웹사이트에 프로젝트를 등록했다.

2. jQuery로 구현한 내비게이션 바를 JavaScript로 구현했다.

 

완성한 이유

1. 트위터 클론코딩 개발이 끝났기 때문에, 프로젝트 단락 부분에 추가했다.

2. 네비게이션바를 구현하기 위해 jQuery를 이용했는데, 웹사이트가 실행되자마자 메뉴 버튼을 누르면 내가 원한 위치랑 다르게 이동하게 되어서, 고치게 되었다.

 

 

---

 

✨ 느낀 점

👍 알게 된 점

JavaScript를 이용하여 버튼 클릭하면 부드럽게 해당 위치로 이동시키기

버튼에 해당되는 id를 querySelector로 가져와 homebtn변수의 값으로 넣는다. 이동시키고 싶은 위치의 태그의 id값을 querySlector로 가져와 homescroll변수의 값으로 넣는다. 버튼이 클릭되면 함수가 실행된다. 함수의 첫째줄은 버튼이 클릭되었을 경우 새로고침 되는 것을 방지한다. 둘째 줄은 scrollIntoView() 함수를 통해 homescroll의 위치로 이동시킨다. 

element.scrollIntoView();

여기서 {behavior: 'smooth'} 옵션 값을 넣어주게 되면, 부드럽게 이동하게 된다.

 

jQuery로 구현한 내비게이션 바는 웹사이트가 실행되자마자 버튼을 누르면 이상한 위치로 이동되었다. 알고 보니 import 할 jQuery 데이터가 많아, jQuery 데이터를 불러오기 전에 jQuery구문을 실행시켜서 발생하는 현상이었다. 그래서 데이터가 큰 jQuery대신, JavaScript로 구현하기로 마음을 먹었다. 실제로 JavaScript로 구현하고, 웹사이트를 실행하자마자 버튼을 누르면 내가 원하는 대로 잘 작동된다. 추가로, 불러올 jQuery 데이터가 없으니 포트폴리오 웹사이트가 조금 더 빠르게 구동되는 것을 실감하게 되었다.

 

💬 나의 다짐

1. JavaScript로 알고리즘 풀어보기

React를 학습하고 나서 JavaScript가 프런트엔드 개발자에게 꼭 필요한 프로그래밍 언어라고 다시 한번 자각하게 되었다. 자바스크립트 교재도 구입했으니, 알고리즘 웹사이트인 프로그래머스로 JavaScript 문제를 풀어봐야겠다.