프론트엔드 개발자 엄성준

이벤트 버블링 : 어떤 요소에 대한 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되는 과정 HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다. 이벤트 캡처링(최상위 부모에서 이벤트 발생 요소까지 이벤트가 전달되는 것)과 정반대이다. 이벤트 버블링이나 캡처링을 차단 하고 싶을 때 e.stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행할 수 있다. 요약정리 : 이벤트 버블링은 자식 요소에서 이벤트 발생 시 해당 요소의 최상위 부모까지 이벤트가 전달되는 것이고 반대 용어로는 이벤트 캡처링이 있다.

문제 설명 정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 return하도록 solution 함수를 완성해주세요 입출력 예 n result 1234 10 930211 16 나의 풀이 1 2 3 4 5 6 7 8 9 10 function solution(n) { let answer=0; n= n.toString(); for(let i=0; i

문제 설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. 입출력 예 dot result [2, 4] 1 [-7, 9] 2 나의 풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function solution(dot) { if(dot[0]>0 && dot[1]>0){ return 1 }else if(dot[0]0){ return 2 }else if(dot[0]

문제 설명 머쓱이는 할머니께 생신 축하 편지를 쓰려고 합니다. 할머니가 보시기 편하도록 글자 한 자 한 자를 가로 2cm 크기로 적으려고 하며, 편지를 가로로만 적을 때, 축하 문구 message를 적기 위해 필요한 편지지의 최소 가로길이를 return 하도록 solution 함수를 완성해주세요. 입출력 예 message result "happy birthday!" 30 "I love you~" 22 나의 풀이 1 2 3 4 5 function solution(message) { var answer = message.length*2; console.log(message.length) return answer; } Colored by Color Scripter cs 문제를 풀며 느낀 점 - 흠.. 블로그에..

브라우저 저장소 분류 - 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 key-value 형식의 저장소. 웹 스토리지는 HTML5에 추가된 클라이언트 기반 key-value 저장소 이며, 웹 스토리지는 로컬 스토리와 세션 스토리지로 나눌 수 있습니다.로컬 스트리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다.먼저 로컬 스토리지는 브라우저를 종료해도 데이터를 보관(영구성) 합니다. 또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있습니다.세션 스토리지는 브라우저가 종료되면 데이터가 삭제(비영구성)됩니다. 도메인이 같더라도 브라우저가 다르면( 탭 브라우저, 다른 브라우저) 브라우저 컨텍스트가 다르기 때문에 각각의 세션 스토리..

false 값을 나타는 경우 0, -0, '' 1 2 3 4 5 6 7 8 let number =0 console.log(number || '-1'); //0은 false로 간주되기 때문에 -1이 출력 됨 // -1 출력 console.log(number ?? '-1'); // 0 출력 Colored by Color Scripter cs 위와 같이 0을 출력하고 싶을 때 Nullish Coalescing Operator를 사용하면 됨

문제 설명 머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요. 입출력 예 n k result 10 3 124,000 64 6 768,000 나의 풀이 1 2 3 4 5 function solution(n, k) { var answer = (12000*n) + (2000*k)-2000*Math.floor((n/10)); return answer; } Colored by Color Scripter cs 문제를 풀며 느낀 점 - 처음 코드 실행을 눌렀을때 (n/10)..

1. 일반 함수로 실행 1 2 3 4 5 function a() { console.log(this); return ; } a(); // window cs 함수를 그냥 실행하게 되면 this의 값은 전역 객체(window)를 참조하게 됩니다. 2. 메서드로 실행 - 메서드는 객체 안에 있는 함수로, 객체명.함수명 형태로 . 이 붙어있는 형태로 함수를 호출하는 경우입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const obj = { func() { console.log(this); return ; }, sub: { subFunc() { console.log(this); return ; } } } obj.func(); // (1) obj obj.sub.subFunc(); // (2) s..

문제 설명 머쓱이는 학교에서 키 순으로 줄을 설 때 몇 번째로 서야 하는지 궁금해졌습니다. 머쓱이네 반 친구들의 키가 담긴 정수 배열 array와 머쓱이의 키 height가 매개변수로 주어질 때, 머쓱이보다 키 큰 사람 수를 return 하도록 solution 함수를 완성해보세요. 입출력 예 array height result [149, 180, 192, 170] 167 3 [180, 120, 140] 190 0 나의 풀이 1 2 3 4 5 6 7 8 9 10 function solution(array, height) { let cnt =0; for(let i=0; i

클로저란 무엇인가? - 클로저(closure)는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이라고 부르며, 내부 함수가 외부(enclosing) 함수 변수에 액세스(접근) 할 수 있는 자바스크립트의 기능을 말한다. 클로저(closure) 예시 코드 1 2 3 4 5 6 7 8 9 10 11 12 let func1 = function(){ let a = 1; let func2 = function (){ return ++a; }; return func2; //func2 함수 자체를 반환 }; let func3 = func1(); console.log(func3()); // 2 console.log(func3()); // 3 cs 👆 외부 함수 밖에서 내부 함수가..