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

JS 15

[JS] to-do list 만들기

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 처음에는 폼 만들기랑 비슷해서 괜찮을 줄 알았는데 생각보다 너무 복잡하다.. 정리하고 한 번 다시 만들어봐야 할 것 같아. ​ 오타 찾느라 시간 낭비도 많이 하고ㅠㅠ ​ to-do list라는 게 생각보다 기능이 많이 들어간다. 1. todo를 입력하고, 이걸 화면에 나타나게 하고(리스트로), 지우기 버튼도 만들고, 정보를 LS에 저장해야 함. 2. 버튼을 누르면 지워지게 하는데, 각각 화면과 LS 모두에서 지우고 저장되어야 함. ​ 이번에는 따라 하면서, 순서를 확인하면서 해서 그 방법대로 정리해 볼 것. 그냥 무조건 냅다 클래스 만들고 시작할 것. 근데, html에 리스트를 만들어 내는 게 아니라 입력하..

Web Developing/JS 2024.03.16

[JS] form 만들고 저장하기 (사용자 이름 기억하게 하기)

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중// ​ 기능 하나를 구현해 내는 데는 생각보다 손이 많이 간다. 코딩은 문제를 해결하는 방법을 배운다는 말이 이해가 간다. ​ 연구할 때 주제를 선정하고, 해당 분석 방법을 고르고, 적용하고 해석했던 것처럼 폼을 만드는 것도 보이게 하고, 입력이 가능하게 하고, 그것을 저장하게 하고, 어떤 언어를 사용해서 어떻게 보이게 할지(인사말)도 정해야 한다. ​ 확실한 것은 내가 무엇을 원하는지를 명확하게 알아야 한다는 사실이다. 이번 강의에서 처음 써 보는 태그인데 말 그대로 폼, 입력 양식을 의미한다. 로그인 창, 회원가입 폼이 해당되기에 앞으로 많이 사용할 것 같다. ​ 은 전체 양식으로 화면에 나타나지 않기에, 실제..

Web Developing/JS 2024.03.16

[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
반응형