현재 진행 중인 프로젝트에서 `Sparrow`를 사용해 웹 취약점 진단을 실시했고, `innerHTML`을 사용한 코드들이 다량 발견되어 수정 조치했다. 단순히 코드를 고치는 것에서 더 나아가 같은 실수를 반복하지 않기 위해 왜 고쳐야 했는지를 기록해보도록 하겠다. 1.innerHTML1.1 innerHTML 이란MDN에서는 `innerHTML`을 이렇게 정의한다.`Element.innerHTML`Element속성(property) `innerHTML`은 요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다. 잘 와닿지 않는다. 예시로 만든 코드를 보도록 하자.텍스트를 이용해 동적으로 테이블을 생성하는 코드이다. 1.2 innerHTML 예시 코드 (텍스트를 사용해 동적 ..

키보드를 이용해 간단한 게임을 만들어보고 싶다는 생각이 들었다.그전에 `KeyboardEvent.key`를 활용해 간단한 예제를 구현해 봤다.코드 실행 See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.  HTML 코드 🧍‍♂️ 방향키를 입력해보세요! CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300..

언젠가 누군가의 티스토리에 들어갔는데 마우스를 움직일 때마다 뭔가가 마우스를 따라 온다거나, 꽃가루 같은 것을 뿌리는 것을 경험한 적이 있다.그걸 구현하고 싶었다.코드 실행 See the Pen Monkey Follow by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드 🐒 CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; h..

코드 실행 See the Pen money rain by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드 생성 초기화  CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; height: 300px; background-color: white; border: 2px solid #333; positi..

코드 예시  See the Pen love is always run by Wi daehyeon (@widaehyeon) on CodePen.CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; height: 300px; background-color: white; border: 2px solid #333; position: relative; overflow: hi..

구현See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드                                                                                    주사위 굴리기`container` div안에 주사위와 주사위 굴리기 버튼을 구현했다.점 9개를 그려놓고 주사위 숫자에 맞게 점들을 보였다 숨겼다 만들 것이다.CSS 코드body {    display: flex;    justify-content: center;    align-items: center;    height: 100vh;    margin: 0;    background-color: #f0f0f0;}.container..

문제설명문자열 `str`이 주어질 때, `str`을 출력하는 코드를 작성해 보세요. 정답코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = [line];}).on('close',function(){ str = input[0]; console.log(str)});해설주어진 코드에 `console.log(str)`만 추가하면 되는 문제였다.하지만 자바스크립트 코딩테스트 문제에 익숙하지 않았기 때문에 기본 제공되는 코드..