이야기 정리

HTML 삽입 미리보기할 수 없는 소스 1. 클릭 이벤트 (체크박스, 삭제버튼) 코드를 확인 하기 전, 코드를 작성하며 맞닥들인 문제점과 해결방안에 대해 정리했다. 체크박스에서 발생한 문제점 체크박스를 클릭했으나, 클릭 이벤트가 발생하지 않았다. 체크박스는 일정이 새로 생성 된 후 만들어지고, 각각 다른 인덱스를 갖는다. 때문에 처음 querySelector로 선언해도 맨 처음 것만 선택될 뿐, 나머지는 해당되지 않는 것이었다. 이를 해결하기 위해 카우셀을 만들 때처럼 반복문을 사용했으나, 새로운 리스트를 생성할 때 마다 반복문이 따로 놀기만 했다. 체크박스 문제점의 해결 // 체크박스 클릭 이벤트 listCon.addEventListener('click', (e)=> { const btn = e.cur..

1. 문자열의 변환 const Hello = 'Hello World' console.log(Hello.toUpperCase()) // HELLO WORLD console.log(Hello.toLowerCase()) // hello world .toUpperCase() 문자열을 대문자로 변환한다. .toLowerCase() 문자열을 소문자로 변환한다. 2. 문자열의 반복 변환 하나의 문장이라면 문자가 없겠지만, 만약 여러개의 단어를 바꿔야하는 경우는 어떻게 해야할까? for 반복문이나, map() 메서드 등을 사용하면 간단하다. const arr = ['Foo', 'Bar', 'Baz'] const upper = arr.map((arrs)=> { return arrs.toUpperCase() }) cons..

HTML 삽입 미리보기할 수 없는 소스 쉽게 봤다가는 생고생하기 쉽다. 첫 프로젝트에서 배운 유익한 결과다. 대부분 자바스크립트 첫 프로젝트는 to do list를 추천한다. 처음으로 추천하는데에는 이유가 있겠지. 뭐 그리 어렵겠어? 하고 가벼운 마음으로 시작한 프로젝트는 하루를 홀랑 날려버렸다. 머릿속에서 구현한 코드와 실제 실행되는 코드는 달랐기에 내가 처음에 대충 이렇게 하면 되겠지~ 싶었으나, 그리 쉽지 않았다. 결국 그대로 하루가 끝나며 겨우 마무리 지었다. 아직 기초가 부족하단 의미이며, 동시에 자잘한 실수가 많았다. 그래도 간단하게 만든다면, 하루면 끝낼 수 있는 프로젝트다. 필자와 같은 자잘한 실수를 하지 않도록, 오늘은 기획 내용 및 날짜와 관련된 간단한 코드를 살펴볼 것이다. 어떻게 만..

1. forEach() forEach() 메서드란? 배열을 순회하며, 인자로 전달된 함수를 반복적으로 호출하는 문법 'return'하는 값이 없다는 것이 특징이다. 인자와 함께 배열에 각각 적용될 콜백 함수(callback function)를 전달한다. 이 콜백 함수가 호출 될 때 인덱스와 배열에 접근할 수 있다. forEach()의 사용법은? //기본문법 arr.forEach((element, index, array) => { }); const arr = [1,2,3,4,5] arr.forEach((item, index, array) => { console.log(item) // 1부터 차례대로 5까지 console.log(index) // 0부터 차례대로 4까지 console.log(array) //..