티스토리

미성이랑

검색하기

블로그 홈

미성이랑

with-mimi.tistory.com/m

개발자 미성이랑 블로그　˚✧₊⁎❝᷀ົཽ

구독자: 3

방명록 방문하기

주요 글 목록

[javascript] 화살표 함수를 사용하는 이유 안녕하세요 ! 오늘은 javascript에서 화살표 함수를 사용하는 이유에 대해 자세히 알아보겠습니다. 화살표 함수의 모양은 알지만, 왜 사용하는지 정확한 이유는 아직 알지 못하신다면 오늘 내용이 많은 도움이 되실 겁니다 ! 📑☑️ javascript에서 함수를 만들 수 있는 문법들에는 보통 어떤 것들이 있을까요? 💭 1. function 함수이름() { // 함수내용 } 2. const 함수이름 = function () { // 함수내용 } 일반적으로 우리는 javascript에서 함수를 만들 때 위 두 가지 방법을 자연스럽게 이용합니다. 이외로는 아래와 같이 ES6 신문법인 화살표 함수를 사용하여 나타내는 방법이 있죠. javascript를 계속 해 오신 분들이라면 이 모양을 한 함수를 많이 봐 오셨.. 공감수 13 댓글수 5 2024. 3. 23.
[javascript] 프로미스 메소드 / JS 추가된 기능 안녕하세요 ! 오늘은 따로 포스팅한 적이 없어 이번 기회에 소개드리는 3가지 프로미스 메소드와, 더하여 js의 추가된 기능 몇 가지까지 간단히 살펴보는 시간을 가지겠습니다. 목차 🛸 1. String.replaceAll() 2. Promise.any() 3. Promise.all() 4. Promise.race() 5. javascript에서 큰 숫자를 적을 때 꿀팁 6. "??" 연산자 String.replaceAll : replaceAll 은 String 객체에 새로 추가된 메소드입니다 ! 직관적으로 특정 문자열을 원하는 문자열로 바꿀 수 있게 해 주는 메소드인데요, 아래 코드를 보시면 어떤 식으로 동작하는지 바로 이해가 되실 겁니다. - 여러 개의 프로미스들을 배열 형태로 받아들이고, 그들의 결과를.. 공감수 14 댓글수 4 2024. 3. 21.
[javascript] setTimeout, setInterval 스케줄링 함수 안녕하세요 ! 오늘은 javascript 스케줄링 함수에 대해 알아보겠습니다. 😇 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call) 이라고 합니다. 호출 스케줄링을 구현하는 방법은 🌟✌🏻두 가지가 있습니다. ✌🏻🌟 ( * 두 함수 모두 콜백 함수를 넘겨받아 실행합니다. ) 1. setTimeout : 지정된 시간이 경과한 후에 한 번 콜백 함수를 실행. 2. setInterval : 지정된 시간 간격마다 콜백 함수를 반복적으로 실행. setTimeout 함수부터 먼저 살펴봅시다. 위 코드와 같이 setTimeout은 인수로 (실행할 함수, 지연시간, ...args) 를 받습니다. 🐟🌀 [ setTimeout의 인수 ] 1. 실행.. 공감수 16 댓글수 7 2024. 3. 20.
[javascript] 구조 분해 할당 (Destructing assignment) 안녕하세요 ! 오늘은 코드를 더욱 가독성 있고 간결하게 만들어주는 🌟구조 분해 할당🌟 에 대해 알아보겠습니다. 구조 분해 할당이란 무엇일까요? 이는 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이랍니다. 한 문장만으로 객체나 배열 구조를 분해한 후 각각의 요소들을 새로운 변수들에 하나하나 할당할 수 있게 됨으로서, 객체나 배열 요소들의 변수 할당이 매우 간단해지게 되었습니다 ! 예시 코드를 통해 알아봅시다. 첫 번째 줄 코드에서는 구조 분해 할당을 이용해, 변수 user1에는 'mimi'를, 변수 user2에는 'mike'를, 변수 user3에는 'miso'를 할당하고 있습니다. 따라서 user2를 출력해보면 "mike"가 나오게 됩니다. user2 = users[1]; 형태의 코드를 세 .. 공감수 60 댓글수 24 2024. 3. 19.
[javascript] Symbol(심볼)형 ☀️ 안녕하세요 ! 오늘은 javascript의 자료형 중 심볼형(Symbol)에 대하여 알아보겠습니다. ☀️ 지금까지 공부한 바에 의하면 여태까지 객체 property key의 자료형으로는 오직 문자형만 가능했습니다. 그러나 객체 property key로 허용되는 자료형이 하나 더 있는데, 바로 오늘 공부할 심볼형입니다. 🎾🥕 심볼은 변경이 불가능한 고유한 값임을 먼저 말씀드리며, 바로 예시 코드를 통해 심볼을 어떻게 생성하고 또 어떻게 활용하는지 알아보겠습니다. 1. 심볼의 생성 심볼의 생성은 간단합니다. "Symbol()"함수를 사용하면 심볼값을 만들 수 있습니다. 괄호 안에 들어가는 값은 심볼 이름이라 불리우는 것인데, 단지 해당 심볼에 대한 description 목적일 뿐 코드적으로 주는 영향은.. 공감수 17 댓글수 5 2024. 3. 18.
[javascript] iterable과 iterator 정리 🚨🚨🚨🚨 (= 반복 / 순회 가능한 객체 ) ☝🏻 iterable (이터러블) : for ...of 등의 문법을 이용하여 각 요소를 반복할 수 있는 객체. 이터러블 프로토콜을 준수한 객체. 이터러블 프로토콜을 준수한다? = Symbol.iterable 을 이미 가지고 있거나 prototype chain을 통해 상속받는 것. 자신 혹은 자신의 prototype 메소드 중 "Symbol.iterable" 메소드가 존재해야만 iterable하다고 말할 수 있음. ( "Symbol.iterable" 메소드가 iterator를 반환하는 역할을 하기 때문에. 그리고 iterator가 있어야 next 메소드를 통해 반복을 수행할 수 있게 되기 때문에. ) generator 함수, 배열, 문자는 모두 prototype.. 공감수 49 댓글수 19 2024. 3. 18.
[javascript] Generator(제너레이터) 함수 안녕하세요 ! 오늘은 javascript의 generator (제너레이터) 함수에 대해 알아보겠습니다. generator 함수는 일반적인 함수와 모양도 기능도 조금 다른데요, 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능이 있답니다! 이 말인즉, 다른 작업을 하다가 다시 돌아와도 진행이 멈췄던 부분부터 이어서 실행할 수 있는 함수라는 뜻입니다. 듣기만 해도 유용할 것 같지 않나요 ?! 쉬운 코드를 함께 보면서 generator 함수와 친해져 봅시다 ! 🌳🌲📗 우선, generator 함수를 선언할 때에는 function 키워드 바로 뒤에 '*'만 붙여주시면 됩니다. 다른 새로운 키워드 2개가 보일 텐데요, 자세한 설명을 하기에 앞서 결론적인 이야기부터 나누자면 "yield"라는 키워드를 만났을 때 .. 공감수 14 댓글수 6 2024. 3. 17.
[javascript] async, await 안녕하세요 ! 오늘은 지난 시간에 배웠던 Promise (프로미스) 를 더 간지나게 사용할 수 있게 해주는 아이들인 async와 await에 대해 배워보겠습니다. 🥦 [javascript] 비동기 처리(callback, Promise) - https://with-mimi.tistory.com/m/entry/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%ACcallback-Promise [javascript] 비동기 처리(callback, Promise)안녕하세요! 🩶 오늘은 1. 비동기 처리 2. callback 함수 3. Promise 객체 에 대해 하나하나 알아보겠습니다. 자바스크립트를 해오신 분들이시라면 아시겠지만, 자바스크립트에서는 코드를 위에서.. 공감수 16 댓글수 7 2024. 3. 15.
[javascript] 유용한 객체 메소드 / 숫자 메소드 총정리 💡 안녕하세요! 오늘은 유용한 객체 메소드들과 숫자메소드들에 대해 알아보는 시간을 가지겠습니다. 📋✍🏻 1. 객체 메소드 2. 숫자 메소드 1. 객체 메소드🌟 1. 객체 복제 : Object.assign() user라는 객체가 있다고 칩시다. 이 객체를 복제해서 이름이 mimi인 새로운 객체를 만들고 싶어요. 이럴 때에는 어떻게 해야 할까요? const mimi = Object.assign( { }, user ); 바로 이렇게 적어주면 됩니다. Object()는 javascript에 내장되어 있는 생성자함수라고 생각하시면 됩니다. assign은 여기서 "할당하다"는 의미로 쓰이는 단어인데요, 두 번째 매개변수로 적힌 user를 첫 번째 매개변수인 중괄호 안에 할당해주게 되는 겁니다. 현재 코드에서는 빈 .. 공감수 13 댓글수 5 2024. 3. 13.
[javascript] 클로저(closure) 🍊안녕하세요. 오늘도 감사합니다 🍊 오늘은 클로저에 대해 알아보겠습니다 ! 클로저에 대해 본격적인 설명에 들어가기에 앞서 말씀드리자면, 클로저는 정보 은닉 개념과 연관이 있습니다. 클로저를 사용하면 궁극적으로는 데이터 보호를 할 수가 있게 됩니다. 클로저는 무엇이며 클로저가 어떻게 데이터를 보호하는 역할을 하는 것인지 함께 알아봅시다. 이 코드는 우선 클로저와는 관계가 없는 일반 코드입니다. onlyname함수가 보이고요, 들여다보니 name 매개변수 하나를 받아 바로 콘솔 출력해주는 함수네요. 자, 여기서 저희가 onlyname 함수를 호출한 후에 onlyname 함수 속 age 변수값에 접근하여 변경할 수 있는 방법이 있을까요? 당연히 없습니다. onlyname() 함수 실행이 끝남과 동시에 지역변수.. 공감수 12 댓글수 3 2024. 3. 11.
[javascript] 비동기 처리(callback, Promise) 안녕하세요! 🩶 오늘은 1. 비동기 처리 2. callback 함수 3. Promise 객체 에 대해 하나하나 알아보겠습니다. 자바스크립트를 해오신 분들이시라면 아시겠지만, 자바스크립트에서는 코드를 위에서부터 아래로 순차적으로 실행합니다. 특정 작업이 완료될 때까지 다음 작업으로 넘어가지 않는 이러한 방식을 동기적 실행이라고 합니다. 자바스크립트는 기본적으로 동기적인 방법으로 실행됩니다. 동기 실행 : 특정 작업이 완료될 때까지 대기하며, 다음 작업으로 넘어가지 않는 방식 (순차적 진행) 비동기 실행 : 특정 작업이 완료되지 않아도 다른 작업을 병렬적으로 실행할 수 있는 방식 정해진 흐름에서 벗어난 동작을 하도록 만드는 방법 우리는 상황에 따라 동기와 비동기 프로그래밍을 적절히 사용할 수 있어야 합니다... 공감수 13 댓글수 3 2024. 3. 8.
[javascript] 클래스(class)란 무엇인가? 안녕하세요. 오늘은 자바스크립트(javascript)의 "클래스(class)"에 대해 알아보겠습니다. 자바스크립트는 prototype 기반의 언어이나 ES6부터 class라는 개념이 추가로 도입되었습니다. * 상속, prototype의 개념을 알아야 클래스를 이해할 수 있으므로, 상속을 처음 보시는 분들은 아래 포스팅을 참조하시기 바랍니다! *🩶- 상속, 프로토타입 포스팅 보러가기 - [javascript] 상속, 프로토타입(prototype) (tistory.com) prototype 기반의 코드와 class 기반의 코드는 상속의 기능적 측면에서 큰 차이는 없으나, class 기반으로 작성된 코드가 보다 더 직관적이며 가독성이 높습니다. 📍 class란 무엇인가 ❔ → 클래스는 객체를 생성하기 위한 템.. 공감수 62 댓글수 31 2024. 3. 4.
[javascript] 상속, 프로토타입(prototype) 안녕하세요 ! 오늘은 자바스크립트에서의 상속, 프로토타입(prototype)에 대하여 알아보도록 하겠습니다. 자바스크립트에서 객체들은 상속 관계를 가질 수 있습니다. 모든 객체는 자신의 부모 역할을 하는 부모 객체( = 프로토타입 객체) 를 참조할 수 있습니다. 자바스크립트에서는 이 메커니즘을 두고 프로토타입 체인(Prototype Chain)이라고 합니다. 프로토타입 체인이 무엇인지, 메커니즘을 한번 들여다볼까요? 맨 오른쪽에 color와 name 속성만을 가진 x5 객체가 있습니다. 그런데 우리는 x5객체에 뜬금없이 "drive()" 메소드를 호출했다고 가정해 봅시다. 지금까지 배웠던 대로라면, 해당 객체에 없는 메소드를 호출했으므로 아무런 결과도 반환되지 않는 것이 정상입니다. 하지만 사실 자바스크.. 공감수 64 댓글수 30 2024. 3. 3.
[javascript] 유용한 배열 메소드 (array method) 총정리 안녕하세요 ! 오늘은 자바스크립트에서 유용한 배열 메소드들을 정리해 보겠습니다. 기본적으로 꼭 알고 있어야 하는 배열 메소드 4개부터 짚고 넘어가겠습니다. arr.push() - 배열의 맨 뒤에 요소 추가 arr.pop() - 배열의 맨 뒤에 요소 삭제 arr.unshift() - 배열의 맨 앞에 요소 추가 arr.shift() - 배열의 맨 앞에 요소 삭제 요소를 삭제하는 메소드 pop()과 shift()의 경우 한 번에 하나의 요소만 삭제할 수 있지만, 요소를 추가하는 메소드 push()와 unshift()의 경우 아래의 코드를 보시면 알 수 있듯이 여러 개의 요소를 한 번에 추가할 수 있습니다. 지금부터 본격적으로 다양한 배열 메소드들을 하나하나 만나보는 시간을 갖겠습니다 ! ✔️🚨 1-1. arr.. 공감수 61 댓글수 25 2024. 3. 3.
[javascript] 나머지 매개변수 (rest parameter) 안녕하세요. 저번 포스팅에서는 객체 혹은 배열의 요소들을 전개해주는 구문인 전개구문에 대해서 다루어 보았는데요, - 전개구문 개념 다시보기 https://with-mimi.tistory.com/entry/javascript-%EC%A0%84%EA%B0%9C%EA%B5%AC%EB%AC%B8spread-syntax-%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98 오늘은 이어서 나머지 매개변수 ( rest parameter )에 대하여 알아보겠습니다. 그 이전에 잠시, 혼용하기 쉬운 "매개변수" 와 "인수" 개념을 짚고 넘어가겠습니다. "매개변수" : 함수에서 전달된 값을 받는 변수 "인수" : 함수를 호출할 때 매개변수에 실제로 담기는 값 .. 공감수 12 댓글수 1 2024. 3. 2.
[javascript] 전개구문(spread syntax) / 나머지 매개변수 안녕하세요. 오늘은 전개구문 ( spread syntax ) , 그리고 나머지 매개변수에 대하여 알아보겠습니다. 나머지 매개변수는 전개구문에서 파생된 개념이므로, 전개구문을 먼저 알아보겠습니다. 전개구문 나머지 매개변수 1. 전개구문 ( spread syntax ) 전개구문이란, 말 그대로 객체 혹은 배열을 "전개" 해 줍니다. 여기서의 "전개" 란, - 객체의 경우, 모든 property들을 개별 요소로 분리하여 펼쳐내는 것. - 배열의 경우, 모든 요소들을 개별 요소로 분리하여 펼쳐내는 것. 을 말합니다. let arr = [ 1,2,3 ]; 숫자 3개를 담은 arr 배열이 있습니다. 지금은 배열이라는 상자에 요소 3개가 담겨있지만, 전개 구문을 통해 3개의 요소를 개별 요소로 분리하여 펼쳐낼 수 있.. 공감수 65 댓글수 29 2024. 3. 2.
[javascript] 함수 call, apply, bind의 차이 참고 : 학습 페이지 (inflearn.com) 안녕하세요. 오늘은 자바 스크립트 함수 call(), apply(), bind() 에 대하여 알아보겠습니다. 이 세 함수는 자바스크립트에서 제공하는 기본 메소드입니다. 이들을 한 마디로 정리하자면 함수의 this 값을 지정할 수 있는 메소드 입니다. 글자만으로는 잘 와닿지 않으니 바로 코드를 보면서 이야기 해 보겠습니다. 이름을 출력해주는 showname이라는 함수가 보입니다. 이 함수는 객체 내부에 존재하는 함수인 메소드가 아닌, 독립적으로 존재하는 함수일 뿐이므로 현재 this.name에서의 this는 아무것도 가리키고 있지 않습니다. showname 함수 바로 위에는 이 함수와는 아무런 연결고리가 없어 보이는 mimi 객체가 있습니다. 오늘 배울 함수.. 공감수 11 댓글수 3 2024. 3. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.