이야기 정리

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..

1. 문자열을 배열로 반환하기 split() 문자열을 잘라 배열로 변환하는 메서드 숫자는 문자열로 변환한 뒤에 사용할 수 있다. string.split() string.split(separator) string.split(separator, limit) separator : 끊어야할 부분을 나타내는 문자열(띄어쓰기, 반점 등등) 미 입력시 문자열 전체를 배열로 리턴한다. limit : 최대 분할 수 / 몇개까지 분할할 것인가를 나타낸다. 리미트 이상의 값은 버린다. 사용예시 const string = 'FooBarBaz' const a = string.split() // ['FooBarBaz'] const c = string.split(" ") // ['FooBarBaz'] const b = string..

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

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