22.12.12 - 22.12.18 / JS prac 및 포트폴리오 작업

연주·2023년 1월 30일

TIL

목록 보기

33/37

22.12.12 월요일 - 22.12.13 화요일

📌 스크롤 기능 학습 중
포트폴리오 페이지에 스크롤 기능이 필요한데, 마침 어제까진 만든 것에 함께 넣어 공부할 겸해서 일단 하라는대로 무작정 따라했는데, 말도 안되게 코드가 엉망진창이라, js파일은 다 주석처리 해놓았다.

일단 html도 기능과 관련없는 부분은 지우고 기능만 익힐 수 있는 정도로만 남겨두고, 스타일링도 다시 하고 무작정 따라하지말고, 코드 이해하고 내 꺼에 적용하는 거로...
일단 무엇을 써서 작동하는지만 이해함..

📌 스크롤 기능 구현
필요한 부분만 정리해서 코드 한줄씩 이해하면서 쓰니까 완전히 이해는 안되도 어떤원리로 돌아가는 지 이해했다.
아예 스타일링으로 고정하지 않고, 동적으로 fixed가 필요한 부분을 스타일링 할 수 도있었다.

그리고 가장 중요한것은 기능 구현 된 후에 스타일링을 신경쓰도록!
너무 스타일링에 집중하지 말고!

그리고 강사님께 피드백 받았던, 공통으로 불러오는 것은 객체화 시키려고 노력해보도록!

window.pageYOffset
: 얼마나 스크롤 됬는지, 픽셀로 표현
: 스크롤 할때마다 값이 변화함

.getBoundingClientRect()
: 상대적인 위치를 제공한다고 한다.
: 현재 창으로 부터의 x,y,가로,세로 등등 상대값을 준다.
: 각 엘리먼트의 height값을 구해서, 스크롤이 그 위치에 오도록 할 때 사용한것 같다.

link로는 원하는 정확한 곳에 스크롤이 이동이 어려우니까,
e.preventDefault(); 로 클릭 동작을 방지하고,
동적으로 원하는 곳으로 스크롤 이동을 시켰다.

클래스 값을 추가하고 제거하면서 동적으로스타일링을 할 수 있다!

이제 원래 작업하던 생일 페이지에도 스크롤 적용을 시켜보자~!
https://github.com/yeonjujeong0511/JS-TIL/tree/scroll

22.12.14 수요일

📌 count-down section 스타일링 및 기능 구현
반응형으로 되도록 간단하게 스타일링하였다.

📌 header 고정 및 클릭 시 해당 섹션으로 이동
섹션이 두개 밖에 없지만, 연습삼아 header를 추가했다.

📌 git banch 핸들링 연습
그동안 브랜치 만들고 연습했던것을 main으로 합쳤다.
사용하지 않는 브랜치는 삭제하였고, 생각해보니까 그동안 아무 브랜치나 머지 할 수 있도록 되있던거 같아서 main만 머지 할수록 설정을 했다.
https://github.com/yeonjujeong0511/JS-TIL/tree/main/counter/birthday

22.12.15 목요일

📌 생일페이지 메모 기능
크리스마스 메모 기능 할 때 했던 코드를 다시 보니까, 메모를 입력과 동시에 localstorge에 저장시키고, 그걸 불러서 화면에 출력하는 형식이였는데
to-do-list에서 했던 먼저 출력시키고 localstorge에 저장시키는 순으로 하는게 오래 걸리지만, 이해하는데는 더 빨라서 일단 두 가지의 코드를 섞어서 이해하면서 기능 구현을 하도록 하였다.

input창에 입력된 제목과 내용을 생성자함수를 이용해 객체화 시켜 담아주고,
객체를 화면에 출력하기 위해 createElement로 div를 생성 후 innerHTML을 이용하여 출력될 수 있도록 하였다.

삭제, localstorge에 저장, 스타일링 부분 차근차근 하기!

https://github.com/yeonjujeong0511/JS-TIL/tree/main/counter/birthday