자신에게 친절할 것 :)
728x90
반응형

Web Developing/JS 13

[JS] 시계 만들기

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ ​ 시계를 만드는 방법은 수십 가지이고(어쩌면 수백일지도), 개인마다 다르게 코드를 짠다. ​ 강의를 바탕으로, 매초 변화하는 "00:00:00"형태를 만들었다. (이미 10 미만은 앞에 0이 붙도록) 아무래도 읽기 편하려면 1. "13시"보다는 "1시"가 직관적이기에 12가 넘어가면 자연스럽게 "01"로 바뀌는 것, 2. a.m.과 p.m. 을 넣는 것을 어떻게 구현할지 고민했다. ​ new Date() 가 어떤 함수인지는 아직 모르겠지만, 뭐.. 돌아가면 된 거니까. ​ 외워서 바로 짜지는 못하더라도, 찾아서 응용하는 것이 코딩에 핵심이기에 이 정도로 만족한다. ​ 이전 강의에서 ``(백 틱)으로 str..

Web Developing/JS 2024.03.16

[JS] classList를 써서 methods를 활용, 특히 toggle

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 하나의 content에 여러 개의 기능들(예, 클릭 시 글자 색 변경, 컨텐츠 위에 마우스 커서 유지 등)을 따로 className을 부여하여 할당하면 어떤 것은 자동으로 뒤로(원래의 상태로) 돌아가지 않는다. ​ 따라서 classList를 사용하여 객체에 포함된 함수인 methods를 활용한다. add(), remove()가 자주 사용된다. 이때, 상태를 일일이 if (className === )로 부여하지 않아도 된다. 클래스를 답은 변수(hasClass)를 하나 만들고, 클릭해서 색이 변경되면 할당된 변수인 "CLICKED_CLASS"를 사라지게 하고, 사라지면 다시 추가되게 하는 함수 인 것이다. c..

Web Developing/JS 2024.03.16

[JS] JS or CSS가 웹페이지에 적용이 안 될 때

... 장작 이틀 동안 고생하면서, 왜 JS가 적용이 안 되는지 고민했다. ​ 강의도 중간부터 못 들으면서 말이다. ​ 덕분에 오랜만에, 문제를 해결해 보겠다고 다양한 시도를 했다. ​ 구글, 유튜브 검색, Normad Coder와 Stack Over Flow 커뮤니티에 글도 남기고, 다행히 SOF가 나를 살렸다. 살려지는 경험(?)은 언제나 쪽팔리면서도 즐겁달까. 묻고 답해주는 커뮤니티가 활성화 된 개발 분야로 넘어오길 잘 했다는 생각이 오늘도 든다. ​ (ps. 문제의 원인은 ^^ 오타.. oh gosh..) ​ 기술 블로그의 첫 글은, 또 이 방법을 잊을 미래의 나와, 같은 문제를 겪을 다른 분들을 위해서 쓴다. ​ JS or CSS가 웹페이지에 적용이 안 될 때 ​ 1. 오타 확인 ​ 2. 캐시 ..

Web Developing/JS 2024.03.16
728x90
반응형