바닐라 자바스크립트로 투두리스트를 만들어보고 있다. 하나씩 구현을 하다 보니 index.js에 너무 여러 가지의 함수가 혼재하게 되었고, 정리를 해야겠다 싶어 코드를 기능 단위로 파일을 만들어 분리를 해야겠다 싶었다. 그렇게 기존 index.js에 작성되어 있던 이벤트 핸들러 함수들을 handle.js 파일에 하나씩 이동시키기 시작했는데, 그러던 중 마주한 에러 메시지. Uncaught TypeError: Assignment to constant variable 오류가 난 곳을 찾아가보니 함수 기능 분리를 위해 만든 handle.js 파일 내에 필터링한 todos 배열을 기존 todos 배열에 재할당하며 업데이트를 하는 코드에 문제가 있었다. // handle.jstodos = todos.filter((..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다.  GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com ES6 모듈을 사용하면서 script 태그에 type="module"을 사용하지 않아 발생한 에러를 해결했는데(이전 포스트 참고), 문제 하나가 해결되니 또 다른 에러가 생긴다😂  net::ERR_ABORTED 404 에러  콘솔 창에 net::ERR_ABORTED 404 (Not Found)라는 메시지가 뜨고 있다. 이 에러는 말 그대로 404 에러, 브라우저가 요청한 리소스 파일을 서버에서 찾을 수 없을 때 발생하는 에러다. 보통의 404 에러를..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다.  GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com 자바스크립트 코드는 모두 index.js 파일 안에서 관리하고 있었는데 todo 아이템이나 todo 입력창 요소를 새로 생성해서 DOM에 추가하는 부분의 함수가 너무 길어져서 한 파일에서 관리하기엔 너무 복잡해질 것 같다는 생각이 들었다. 그래서 js 파일을 모듈화해서 관리하기로 했다. createElement.js라는 파일을 생성해서 해당하는 함수를 export 키워드를 붙여 옮겨두었고 index.js 파일에서는 옮긴 함수를 import 문을 통해 ..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com  toLocaleDateString() 메서드 todo 아이템을 생성할 때 현재 날짜를 'yy/mm/dd'의 형식의 문자열로 저장하고 싶다. Date 객체가 제공하는 getDate()나 getMonth() 같은 메서드를 적절하게 이용해서 문자열로 변환한 후 사용할 수도 있겠지만, 뭔가 Date 객체가 제공하는 메서드들 중에 활용해 볼 수 있는 게 있지 않을까 싶어 찾아보니, toLocaleString() 메서드를 사용할 수 있었다. Date.protot..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. GitHub - jisunipark/toodooContribute to jisunipark/toodoo development by creating an account on GitHub.github.com crypto.randomUUID 메서드 새롭게 생성되는 todo 아이템 객체의 id 값으로 랜덤한 값을 넣어주고 싶다. 찾아보니 Web API에서 제공하는 Crypto 인터페이스의 crypto.randomUUID 메서드를 활용해 쉽게 UUID를 생성할 수 있다.const id = crypto.randomUUID();console.log(id); // "cbfc904b-b898-4deb-b736-ba433489904c" crypto.randomUUID 메..

얕은 복사와 깊은 복사에 대해 알아보기 전에 잠시 데이터 타입을 짚고 넘어가자. 기본형(primitive) 타입: number, string, boolean, undefined, null 등 참조형(reference) 타입: object, array, function, date, regexp 등 결론부터 말하자면 얕은 복사: 객체의 참조값(주소)를 복사 깊은 복사: 객체의 값 자체를 복사 예시와 함께 자세히 살펴보자. 얕은 복사 (Shallow Copy) 1. Object.assign() var obj1 = { a: 10, b: { c: 'abc', }, }; var obj2 = Object.assign({}, obj1); obj2.a = 20; obj2.b.c = 'def'; console.log(ob..

자바스크립트에서 ==와 ===는 비슷해 보이지만 서로 다른 비교 연산자이다. ==는 동등성을 비교하고 ===는 일치성을 비교하는데, 무슨 말인지 조금 더 자세히 살펴보자. == 영어로는 loose equality를 비교한다고 표현한다. 말 그대로 느슨한 동등성을 비교하는 연산자이다. === 보다 느슨하게 동등성을 비교하기 때문에 강제 형변환을 수행한다. 예를 들어 숫자 77과 문자열 '77'을 == 연산자를 사용하여 비교하면 실제로는 타입이 다른 두 값이지만 자바스크립트가 수행한 강제 형변환 때문에 true 값으로 동등하다는 결과가 나온다. 77 == '77' /*true*/ === 영어로는 strict equality를 비교한다고 표현한다. 말 그대로 엄격한 동등성을 비교하는 연산자이다. == 보다 엄..

스프린트 우리 팀 팀원분께서 공유해주신 "Flexbox Froggy"라는 교육용 코딩 게임. CSS의 flexbox를 이용해서 같은 색깔의 개구리와 연잎을 매치시켜주는 게임이다. 이제 막 flexbox 개념을 배웠다면 쉽고 재미있게 flex와 친해질 수 있는 게임이다.  Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.com 공부하다가 머리 환기 시킬 겸 해봤는데 재미있고,유익하고,귀엽다!  끝까지 완료해보니 같은 팀에서 개발한 여러가지 다른 게임들도 있다. CSS 뿐만 아니라 HTML, JS,  SQL도 재미있게 학습해볼 수 있다. (다만 대부분 유료이고, 앞서 언급한 Flexbox 속성 게임과 Grid 속성 게임은 무료로 풀려있다.)  Code..