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

브라우저 저장소 분류 - 웹 스토리지(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 👆 외부 함수 밖에서 내부 함수가..

호이스팅: 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상을 말한다. 호이스팅은 자바스크립트 인터프리터가 코드를 읽는 방식이며, 이를 이해해야 원치 않는 '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