이야기 정리

그동안 자잘한 프로젝트를 만들며 배운 메서드들을 복습하기 위해 애니메이션 효과 없이 간단하게 두더지 잡기 게임을 만들었다. 다른 프로젝트들이 기본 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..

while문이란? 조건식이 true일 때까지 반복하는 문법이다. 오직 true일 때만 실행되고, false일 때는 조건문을 반복 후 실행하지 않고 넘어간다. for문과 달리 횟수가 아닌 조건만을 지정하기 때문에 횟수를 몰라도 사용할 수 있다. 때문에 반복 횟수를 모르거나(무한루프 등), 특정 조건 달성때까지 반복해야하는 함수를 쓸 때 유용하다. while(true)로 설정할 시 무한 루프를 의미한다. 조건을 별도로 설정할 시 조건 달성 후 while문을 중단한다는 차이점이 있다. // 사용법 while (/*조건*/) { //콜백할 코드 } Do While 문이란? While문의 변형문 반복 시킬 조건이 true인지 확인하기 전에 코드를 먼저 코드를 실행한 다음, 조건이 true이면 반복한다. 때문에 조..

얼마전 트위터에서 한 유저가 공유한 코드가 있었다. 새로고침을 해도 다크 모드가 유지되는 코드였는데, 이 코드에 사용된 것이 localStorage였다. (해당 유저의 코드는 최하단 참조란에 링크를 넣었다.) localStorage을 사용하는 방법과 이를 이용해 다크 모드를 만드는 방법 두가지에 대해 알아보려 한다. 다음은 완성된 코드다. See the Pen Dark Mode by beren-105 (@beren-105) on CodePen. localStorage란? 브라우저의 key-value 값을 Storage에 저장할 수 있으며, 저장된 데이터는 세션간 공유된다. 즉, 세션이 바뀌어도 저장된 데이터 값은 유지된다. 같은 컴퓨터에서 같은 브라우저를 사용하는 이상 브라우저에 저장되는 것이다. 브라우..

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

개발공부를 시작하면 DOM이란 단어를 쉽게 볼 수 있다. 그렇다면 DOM이란 무엇이고 무슨 뜻일까? DOM과 브라우저를 비롯해 웹 사이트의 간단한 개념에 대해 알아볼 것이다. 웹사이트 웹 사이트란? 일반 URL을 통해 보이는 웹 페이지를 의미한다. HTML, CSS JavaScript로 이뤄져있다. HTML, CSS JavaScript의 차이 HTML : HyperText Markup Language 브러우저에게 웹 사이트의 요소들이 어떻게 구성되어 있는지 알려주는 역할, 사람으로 치자면 뼈대에 해당한다. CSS : Cascading Style Sheets 웹 사이트의 요소들을 꾸며주는 역할로, 사람의 외관이라 생각하면 된다. JavaScript 브라우저에 다양한 일을 수행하고, 웹 사이트의 요소를 생성..

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

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