이야기 정리

그동안 자잘한 프로젝트를 만들며 배운 메서드들을 복습하기 위해 애니메이션 효과 없이 간단하게 두더지 잡기 게임을 만들었다. 다른 프로젝트들이 기본 2,3일 소요된 걸 생각하면 하루만에 완성한 간단한 프로젝트다. 필요한 기능 n초마다 두더지가 랜덤한 위치에 나타나고, 다시 사라지기 두더지를 클릭하면 점수가 오르게 하기 시간이 종료되면 승리/패배여부와 리셋버튼 나타내기 제작기간 약 3시간 완성코드 마땅한 이미지가 없어 두더지 대신 여우 이미지를 썼다. 본의아니게 여우잡기가 돼버렸다. See the Pen Untitled by beren-105 (@beren-105) on CodePen. 깃허브에서 전체 코드 보기 https://github.com/beren-105/Mini-Project/tree/main/7..

eval 함수는 왜 사용하면 안될까? 계산기를 만들기 위해 코드들을 참고하다보면 자주보는 코드가 있다. 바로 eval 함수다. eval 함수는 전달된 문자열을 JS코드로 해석해 해석된 코드를 실행한다. 얼핏 편리해보이는 이 함수를 어째서 사용해선 안될까? 이유는 크게 3가지로 나눌 수 있다. 성능 : 어떤 문자열이 함수에 전달될지 예측하기 어렵다. 보안 : 텍스트 필드에 악성 코드를 입력하면, eval 함수로 실행되어 보안에 위험이 생긴다. 디버깅 : eval 함수에 전달되는 값은 문자열이기 때문에 ‘,’를 제대로 명시 하지 않을 시 문제가 발생한다. 참고 : https://developer-talk.tistory.com/271 위와 같은 이유로 eval함수를 사용하지 않고, 간단한 계산기를 만들었다. ..

HTML 삽입 미리보기할 수 없는 소스 발생한 문제점 타이머에서 index가 서로 공유되는 현상이 발생했다. 해결 하나의 index를 사용해 두 곳에 적용해 발생한 문제로, 각각 index를 따로 선언해주었다. 우선 스톱워치와 타이머를 오갈 수 있는 탭버튼 이벤트를 만들어주었다. // tap 버튼 이벤트 const tapBtn = document.querySelectorAll('.tap') const tapCont = document.querySelectorAll('.tapcon') tapBtn.forEach((tapBtns)=> { tapBtns.addEventListener('click', (e)=> { let id = e.currentTarget.dataset.id if (id) { for (let..

HTML 삽입 미리보기할 수 없는 소스 현대인에게 한시도 떼어놓을 수 없는 물건은 무엇일까? 당연히 핸드폰이다. 핸드폰 배터리가 10% 이하로 내려가면 점점 초조해지는건 많은 사람들이 공감할 것이다. 사람들에게 중요한 핸드폰에 꼭 들어가는 초기 어플들이 몇가지 있다. 캘린더, 사진, 메모, 카메라, 그리고 시계다. 어떤 핸드폰도 시계에 알람과 스톱워치, 타이머 기능이 탑재되어 있다. 그만큼 시간은 사람들에게 중요한 요소이다. 때문에 두번째 프로젝트로는 스톱워치와 타이머를 선택했다. 두개의 기능을 동시에 만드는 만큼 각각 필요한 요소들을 적어보았다. 어떤 기능이 필요할까? : 스톱워치 현재 초를 표기하는 화면 시작 버튼 리셋 버튼 중간에 시간을 저장할 수 있는 랩 버튼 랩을 하단 리스트로 보기 어떤 기능이..

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

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