Leo.K | To become a cooler Developer

2023-03-17 #7 TO-DO-LIST 우리는 추가와 삭제가 가능한 멋진 todo-list를 위해 기본적인 설정을 화면에 구현했다. 이 내용은 이전 게시글에서 이미 기록한 개념이기 때문에 생략하고 마지막에 전체 소스코드를 보여주려고 한다. 하지만 새로고침을 하거나 이용자가 누구인가와 관계없이 똑같은 todo-list가 나온다면 우리는 todo-list를 그 때마다 계속해서 작성해야할 것이다. 만약 todo-list를 1,000개 작성했는데 단숨에 날라간다면...? 그건 어딘가 부족한 todo-list 일 거다. 그래서 우린 todo-list에 나타낸 텍스트를 저장하는 기능과 로딩하는 기능, 이미 달성한 일은 제거하도록 삭제하는 기능을 추가로 구현해야 한다. 1. todo - list의 배열 생성 1..

2023-03-16 #5.0 Interval setInterval({function}, {time}) 함수를 사용하여 특정 주기마다 함수를 실행할 수 있다. 이때 주기에 해당하는 time argument는 ms(1s === 1000ms)단위라는 점에 유의하자. const clock = document.querySelector("#clock"); function sayHello(){ console.log("hello"); } //interval -> 매 2초 등 간격을 의미 setInterval(sayHello, 5000); #5.1 Timeouts and Dates setTimeout({function}, {time}) 함수를 사용하여 특정 시간이 지난 후에 단 한 번만 함수를 호출할 수 있다. http..

const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); function onLogInBtnClick(){ console.log(loginInput.value); } loginButton.addEventListener("click", onLogInBtnClick) 2023.03.14 #4.0 Input Values 모든 것은 HTML에서 시작되어야 한다. HTML에서 태그를 작성하고 자바스크립트로 기능을 구현한다. 먼저, HTML 코드 작성하기 1. 사용자가 이름을 작성..

참으로 오랜만에 블로그를 작성하기 시작하는 것 같다. 작년에 취업한 이래로 한 해가 바뀌면서 회고록을 작성하면서 다짐했지만 동기부여가 크게 되지 않았나 보다... 벌써 입사한 지 8개월 차가 되어 간다. 그동안 미뤄왔던 개인 공부를 솔찬히 시작하면서 블로그 작성을 시작해야겠다. 크게는 풀스택 개발자를 향하여 프런트 엔드는 자바스크립트를 시작으로 리액트까지 학습하며 어플을 만들어 볼 것이고, 백엔드는 김영한 선생님의 강의를 학습하면서 스프링부트와 JPA를 완전 정복하려 한다. 오늘이 시작이다. 너무 많은 것을 이루려 하지 말고 하루에 조금씩이라도 꾸준하게 진행하자. 무료로 제공되는 강의로 아주 높은 수준의 퀄리티를 자랑한다. 이전에 깃허브를 학습할 때 간간히 유튜브에서 봤던 형인데, 사이트에 방문하여 자신..

2022.08.17 1. Class 관련 .addClass('className') 선택한 요소에 클래스 값을 추가한다. .removeClass('className') 선택한 요소에 클래스 값을 제거한다. .toggleClass('className') 선택한 요소에 클래스값을 넣었다 뺐다 할 수 있다. 지정한 클래스를 이미 갖고 있으면 제거, 없으면 추가한다. .hasClass('className') if문과 함께 사용하며, 선택한 요소가 클래스값을 가지고 있는지에 따라서 true or false를 반환한다. 2. 선택한 요소의 크기 가져오기 .width() - padding 안쪽의 너비를 가져온다. .innerWidth() - border 안쪽의 너비를 가져온다. .outerWidth() - border..