본문 바로가기

전체 글197

JS 프로토타입 프로토타입 prototype 자바스크립트에서 생성자는 prototype 프로퍼티를 통해 타입의 특징을 정의합니다. (ex : 붕어빵 틀) 효율적인 생성자 정의 인스턴스를 생성할 때마다 같은 내용의 별개의 함수가 계속 만들어진다면 효율적이지 못한 과정이라 볼 수 있다. 기본적인 모양새 각 인스턴스마다 같은 내용의 별개의 메서드가 계속 만들어진다 function Food(name) { this.name = name; this.smell = function () { console.log(this.name + " 냄새가 난다"); } } 향상된 버전 공통된 메서드를 정의해 사용 // 공통된 smell 메서드를 정의해 사용 function smell() { console.log(this.name + " 냄새가 난.. 2023. 3. 13.
JS 생성자 생성자 생성자란 앞에 new 연산자가 붙은 함수를 의미하며 동일한 프로퍼티와 메소드를 가진 다수의 인스턴스를 만들 수 있습니다. new Object(), new Array() 등등 자바스크립트의 내부적으로 존재하는 내장 생성자 및 직접 새로운 타입을 만들 수도 있습니다. function MyOwn() { } var myObj = new MyOwn(); console.log(myObj instanceof MyOwn); // true console.log(myObj.constructor === MyOwn); // true new 연산자의 역활 new 연산자가 붙으면 함수의 this 는 인스턴스를 참조하게 되며, new 연산자가 자동으로 인스턴스를 반환하기 때문에 함수안에 return 연산자도 필요 없어지게 .. 2023. 3. 13.
JS closure 함수 closure 내부 함수가 살아있는 상태에서 외부 함수가 파괴 되면 외부 함수의 변수들에 대한 접근 권한은 내부 함수만 가지게 되고 이렇게 폐쇄된 공간에 대한 접근 권한을 가진 함수가 closure 입니다. var person = (function () { var age = 15; return { name: "wade", getAge: function () { console.log(age); return age; }, setAge: function (val) { age = val; console.log(age); } } })(); person.getAge(); // 15 person.setAge(20); // 20 person.age = 30; // 적용 되지 않음 person.getAge(); // 1.. 2023. 3. 13.
JS this 개념 및 활용 this가 존재하는 이유 함수를 호출하는 객체를 의미하며 다른 객체에서도 사용성을 늘릴 수 있다. 기본적인 사용 예 function menuGlobal() { console.log("오늘 저녁은 " + this.name); } var myDiner = { name: "김치찌개", menu: menuGlobal } myDiner.menu(); // "오늘 저녁은 김치찌개" var yourDiner = { name: "된장찌개", menu: menuGlobal } yourDiner.menu(); // "오늘 저녁은 된장찌개" this 제어 call() 사용 call 메서드는 this 의 값을 바꿀 수도 있고, 함수를 실행할 때 사용할 인수도 전달할 수 있습니다. function menuGlobal(item).. 2023. 3. 3.
JS 타입 이해 원시 타입 있는 그대로 저장되는 데이터를 표현합니다 원시값을 변수에 할당하면 값이 복사되어 들어갑니다. 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 됩니다 불리언 : true, false 숫자 : 1, 2, 3 … 문자열 : “Hello World” null undefined ※ typeof : 원시값의 종류를 알 수 있게 해주는 매서드이고 null 은 특이하게 object 명시됨 참조 타입 참조 타입은 변수에 값을 직접 저장하지 않습니다.변수에 저장되는 것은 메모리 안에서 객체의 위치를 가리키는 “포인터” 입니다. 무엇이 저장되느냐, 이것이 원시 타입과 참조 타입의 가장 큰 차이입니다. ※ 원시 타입 빼고 전부 참조 타입으로 봐도 무방 객체 : { } 배열 : [ ] 함수 : .. 2023. 3. 3.
배열의 index 와 key 의 관계 공식 문서 중 발췌 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. react 는 바뀐 document 를 비교해서 랜더링할때 변경내용을 적용한다. 반복해서 생성한 엘리먼트가 있다면 구분이 힘들기 때문에 구분을 위해 Key 를 사용해 구분해준다 이때 Key 값으로 배열의 인덱스로 적용 할 경우 배열의 길이가 변경될 때 배열의 인덱스는 변경되므로 Key 값으로 쓰는데 문제가 있다. 공식 문서에서 참고하라고 하는 블로그에서는 되도록 배열에서 고유한 값(ex: id) 을 활용하는 것을 추천하고 있다 ※ 고유한 값을 만들어 쓰는 라이브러리도 추천했다. 예외적으로 아래 3가지의 내용에.. 2023. 2. 28.
js 코딩 테스트 : [ 택배 배달과 수거하기 ] 문제 : 택배 배달과 수거하기 LV.2 문제 설명 당신은 일렬로 나열된 n개의 집에 택배를 배달하려 합니다. 배달할 물건은 모두 크기가 같은 재활용 택배 상자에 담아 배달하며, 배달을 다니면서 빈 재활용 택배 상자들을 수거하려 합니다. 배달할 택배들은 모두 재활용 택배 상자에 담겨서 물류창고에 보관되어 있고, i번째 집은 물류창고에서 거리 i만큼 떨어져 있습니다. 또한 i번째 집은 j번째 집과 거리 j - i만큼 떨어져 있습니다. (1 ≤ i ≤ j ≤ n) 트럭에는 재활용 택배 상자를 최대 cap개 실을 수 있습니다. 트럭은 배달할 재활용 택배 상자들을 실어 물류창고에서 출발해 각 집에 배달하면서, 빈 재활용 택배 상자들을 수거해 물류창고에 내립니다. 각 집마다 배달할 재활용 택배 상자의 개수와 수거할.. 2023. 2. 23.
js 코딩 테스트 : [ 신고 결과 받기 ] 문제 : 신고 결과 받기 LV.1 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수도 있지만, 동일한 유저에 대한 신고 횟수는 1회로 처리됩니다. k번 이상 신고된 유저는 게시판 이용이 정지되며, 해당 유저를 신고한 모든 유저에게 정지 사실을 메일로 발송합니다. 유저가 신고한 모든 내용을 취합하여 마지막에 한꺼번에 게시판 이용 정지를 시키면서 정지 메일을 발송합니다. 다음은 전체 유저 목록이 ["muzi", "frodo", "apeac.. 2023. 2. 17.
JavaScript 내장 객체 Map Map Map 객체는 키-값 쌍과 키의 원래 삽입 순서를 기억합니다. 모든 값(객체 및 원시 값 모두)은 키 또는 값으로 사용될 수 있습니다. Map 객체는 키-값 쌍인 집합입니다. 한 Map에서의 키는 오직 단 하나만 존재 합니다. Map 객체는 키-값 쌍으로 반복이 가능하고 반복은 삽입한 순서대로 발생합니다. Map vs Object Object 는 Map과 유사합니다. 둘 다 값을 가리키는 키를 설정하고, 해당 값을 받아오며, 키를 삭제하며, 키에 무언가가 저장되었는지 여부를 알 수 있습니다. 그러나 경우에 따라서는 아래와 같이 Map이 선호되는 중요한 차이점이 존재한다 1. 보안 Object : 공격자 객체의 프로토타입을 재정의 가능 Map : 사용자가 제공하는 키와 값에 대해서 안전하게 사용할 .. 2023. 2. 17.
JS 내장객체 Array 메서드 정리 항상 안외우고 검색하는 짓을 그만 할 때가 되었다. 조금은 외우자 js 내장객체 Array 메서드 기본적인 기능 // 이거 배열임 ? Array.isArray() // 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환 // 대괄호 표기법 보다 좋은점 맨뒤 요소 반환시 편함 array.at(-1) Array.prototype.at(index) // 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환 없으면 undefined // .findLast 뒤에서부터 Array.prototype.find(fn(element, index, array)) // 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스 반환 // .findLastIndex 뒤에서부터 Array.prototype.. 2023. 2. 16.
js 코딩 테스트 : [ 문자열 나누기 ] 문제 : 문자열 나누기 LV.1 문제 설명 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수.. 2023. 2. 16.
js 코딩테스트 : [ 둘만의 암호 ] 문제 : 둘만의 암호 LV. 1 문제 설명 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. - 문자열 `s`의 각 알파벳을 `index`만큼 뒤의 알파벳으로 바꿔줍니다. - `index`만큼의 뒤의 알파벳이 `z`를 넘어갈 경우 다시 `a`로 돌아갑니다. - `skip`에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 &#.. 2023. 2. 15.

티스토리툴바