본문 바로가기

분류 전체보기

 (40)
[JavaScript] 클로저를 이해하기 위한 여정 🤔 클로저가 뭘까? 자바스크립트를 공부하며 몇 번 고비가 왔는데 여러 개의 고비 중 하나인 클로저에 대해 정리하고자 한다. 💡 클로저의 정의 클로저는 영어사전에는 폐쇄, 닫힘 이란 뜻이며 MDN에서는 함수와 그 함수가 선언됐을 때의 어휘적/사전적 환경(Lexical environment)과의 조합 이라고 설명한다. 문장만 보고 나서는 무슨 의미인지 잘 와닿지 않는다. 내가 참고한 코어 자바스크립트에서는 어떤 함수 A에서 선언한 변수a를 참조하는 내부함수B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수a 가 사라지지 않는 현상 라고 정의했다. 엥...? 뭐라는거지 싶었지만 마음을 가다듬고 코드를보면서 느껴보자.. var outer = function (){ var a = 1; var i..
미대출신 바리스타가 개발자가 된 이유 사용자의 요구에 의한 디자인 나는 개발과는 무관한 미술대학 제품 디자인 전공 출신이다. 어릴 때부터 이것저것 배우는 것을 좋아했던 나는 이과 출신이었음에도 불구하고 디자인을 하고 싶다는 생각으로 미술대학에 진학하게 되었다. 디자인을 배우면서 매력적이었던 것은 사용자의 요구와 필요에 의한 디자인을 구현한다는 점이었다. 사용자들이 무엇을 원하고 필요로 하는지 파악하고 그에 맞춰 제품을 디자인하는 것이 내 역할이라 생각했고, 그렇게 졸업작품으로 플랜테리어를 원하는 사용자를 위한 화분+와이파이 공유기를 디자인했다. 졸업작품을 통해 사용자가 상상으로만 생각했던 것을 직접 만들어내는 과정이 흥미로웠고 이 경험을 통해 디자이너로서의 역할과 책임을 느끼게 되었다. 끊임없는 선택과 다양한 경험 1. 학부시절 나는 입시 ..
[JavaScript] 문자열에서 특정 문자 개수 구하는 방법 코딩테스트를 풀다보면 특정 문자 개수 구하기, 같은 문자열 찾기 같은 문제가 나와서 정리해본다. js에서는 특정 문자를 구하는 직접적인 함수는 없고, split 함수와 match함수를 활용하여 쓸 수 있다. 1. split 함수 사용 let str = 'Hello, JavaScript'; let count = str.split(',').length - 1; // count=1 출력 split 함수를 사용하면 특정 문자를 기준으로 문자열을 배열로 변환한다. 배열의 길이에서 1을 뺀게 특정문자 개수이다. 2. match 함수 사용 let str = 'Hello, JavaScript'; let count = str.match(/,/ig).filter(item => item !== '').length; matc..
[Programmers] Level1 없는 숫자 더하기(자바스크립트) 문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. 풀이 방법 function solution(numbers) { return 45 - numbers.reduce((a, b) => a + b); } 마치며 제한사항에 0부터9까지 있으니 0~9 총합 45에서 배열에있는 숫자의 합을 빼줘버렸다. 어..이게 되네? 참조 https://developer.mozilla.org/ko/docs/Web/Jav..
[Programmers] Level1 핸드폰 번호 가리기 (자바스크립트) 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 풀이 방법 1. String 내장 함수 활용 function solution(num) { return '*'.repeat(num.length - 4)+num.slice(-4); } 마치며 여태 코드를 짜면서 내장 함수는 필요할 때만 찾아보면서 아주 조금 사용했는데, 코딩테스트 연습 문제를 풀어보면서 다양한 내장함수에 대해 알게 되었다. 문제를 풀 ..
[Programmers] Level1 직사각형 별 찍기 (자바스크립트) 문제 설명 - 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 - n과 m은 각각 1000 이하인 자연수입니다. 풀이 코드 1. 반복문을 활용 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); for(let i=0; i
[JavaScript] 프로토타입 (prototype) 프로토타입 자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 '어떤 객체를 원형으로 삼고 이를 복제함'으로써 상속과 비슷한 효과를 얻는다. let instance = new Constructor 어떤 생성자 함수를 new연산자와 함께 호출하면 constructor에 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데 이 프로퍼티는 constructor의 prototype 이라는 프로퍼티는 참조한다. 어려운 말 말고 조금 더 쉬운 말로 바꿔보자.. function 기계(){ this.name = 'Kim'; this.age = 15; } let 학생1 = new 기계..
[JavaScript] defer, async 스크립트 보통 웹 브라우저에서 돌아가는 스크립트들은 HTML 보다 무겁기 때문에 다운로드 받는 데 오랜 시간이 걸린다. 브라우저는 HTML을 읽다가 // 스크립트 다운로드 및 실행이 끝나기 전까지 아래 내용이 보이지 않는다. hello 이런식의 코드를 짜게 되면 두가지 이슈가 생기는데 1. 스크립트에서는 스크립트 아래에 있는 DOM요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러행위가 불가능해진다. 2. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다. 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 된다. 이런 부작용들을 피할 수 있는 방법으로 스크립트를 페이지 맨 아래 놓는 방법이 있다. 하지만 이 ..

티스토리툴바