프론트엔드 개발자 엄성준 블로그

문제 설명 머쓱이네 양꼬치 가게는 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 👆 외부 함수 밖에서 내부 함수가..

호이스팅: 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상을 말한다. 호이스팅은 자바스크립트 인터프리터가 코드를 읽는 방식이며, 이를 이해해야 원치 않는 'undefined'가 출력되는 것을 막을 수 있다. 가령 아래와 같은 코드가 있을 경우 👇 1 2 3 4 5 console.log(x); var x = 1; console.log(x); cs 위 코드의 결과값은 console.log(x); 👉 undefined 참조 에러가 발생하지 않고 'undefined'가 출력된다. 위의 문제점을 해결하려면 let을 사용하여 변수를 선언해야 한다. let을 사용한다고 호이스팅이 일어나지 않는 것이 아니라,호이스팅이 일어나 스코프 내 최상위로 끌어올려지지만, 'undefined'를 할당하지 ..

문제 설명 정수가 담긴 리스트 num_list가 주어질 때, num_list의 원소 중 짝수와 홀수의 개수를 담은 배열을 return 하도록 solution 함수를 완성해보세요. 입출력 예 num_list result [1, 2, 3, 4, 5] [2, 3] [1, 3, 5, 7] [0, 4] 나의 풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function solution(num_list) { let even =0; let odd = 0; for(let i=0; i 할당 -> 리턴 개념이 잡혀있지 않았던 것 같습니다. 그래서 계속 오류가 났었는데 이 문제를 통해 어느 정도 개념을 잡을 수 있었던 것 같습니다.

문제 설명 정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요. 입출력 예 array n result [1, 1, 2, 3, 4, 5] 1 2 [0, 2, 3, 4] 1 0 나의 풀이 1 2 3 4 5 6 7 8 9 function solution(array, n) { let num=0; for(let i =0; i

문제 설명 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return 하도록 solution 함수를 완성해주세요. 예각 : 0

브라우저 렌더링 원리 1. 첫 번째로 서버로부터 받은 HTML, CSS를 다운로드한다. 단순한 텍스트인 HTML, CSS 파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSOM으로 만들어진다. DOM Tree와 CSSOM Tree가 만들어진다. 2. DOM Tree 와 CSSOM Tree가 만들어졌으면 그다음으로는 이 둘을 이용하여 Render Tree를 생성한다. Render Tree에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다. 3. 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이 갖고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어느 크기로 출력될 건지 계..

문제 설명 머쓱이는 40살인 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 나이 age가 주어질 때, 2022년을 기준 출생 연도를 return 하는 solution 함수를 완성해주세요. 입출력 예 40 1983 23 2000 나의 풀이 1 2 3 4 function solution(age) { const answer = (2022-age)+1; return answer; } Colored by Color Scripter cs 문제를 풀며 느낀점 - 처음 문제를 접할 때 어떻게 접근해야될지 고민을 많이 했었는데 2022 - 40 을 빼면 1982가 나오고, 2000 - 23 을 빼면 1999가 나오니까 만나이 생각이 나서 (2022-age)+1 이라는 생각을 하게 되었습니다.