jhhan의 블로그

이번 포스트에서는 Constructor에 대해서 알아보겠습니다. 개발언어로 javascript를 처음 써본 사람은 모를 수도 있지만, 다른 언어를 쓰다가 javascript를 배운 사람이라면 Constructor가 무엇인지 잘 알 것입니다. → 바로 '생성자' 입니다. 이 Constructor(생성자) 개념이 javascript에도 존재합니다. 한 번 알아보겠습니다. 1. Constructor 먼저 다음의 코드가 있다고 생각합니다. let student1 = { name : 'Kim' , age : 15 }; let student2 = { name : 'Park', age : 13 }; 예시처럼 학생 변수를 만들 수 있지만.. 몇 십개, 몇 백개를 만들어야 하는 상황이 왔을 때도 저런 식으로 코드를 작성..

이번 글에서는 Spread Operator에 대해서 알아보겠습니다. 아마 spread operator라는 단어를 모를 수도 있습니다. 하지만 js 코드를 보다보면 "...list " 라는 형식으로 쓰여진 변수들을 간혹 찾아볼 수 있습니다. 이렇게 ... 이 붙어있는 것을 spread operator 라는 문법으로 불린다고 합니다. 쉽게 설명하면 '괄호제거 연산자'라고 볼 수 있습니다. 예시를 한번 보시죠 let arr = ['a', 'b', 'c']; console.log(arr); console.log(...arr); js 코드를 위와 같이 작성한 후 실행을 한다면 라는 결과를 얻을 수 있습니다. console.log(arr); : 배열 형태로 출력합니다. console.log(...arr); : []..

이번 글에서는 javascript에서 문자열을 다루는 방법에 대해서 알아보려고 합니다. 사실 js에서 문자열을 다루는 방법은 이미 있다는 것을 알고 있습니다. 큰따옴표나 작은 따옴표를 이용해서 문자열을 사용하면 됩니다. 사실 이것만 알고 있어도 큰 문제가 되지는 않습니다. 하지만, 이번 글에서 다루게 될 것을 배운다면 js에서 문자열을 조금 더 쉽게 다룰 수 있을 것이라고 생각합니다. 1. template literals ( backquote, backtick ) 바로 `` 를 이용하는 것입니다. 작은 따옴표와 비슷한 이것(`)은 backquote & backtick이라고 부릅니다. 이것을 썼을 때 장점을 알아봅시다. 1-1. Enter 가능 문자열 내에서 Enter 키를 처도 인식한다는 것입니다. ''..

javascript의 this에 대해 알아보는 2번째 글입니다. (1)의 내용에 이어서 글을 작성하겠습니다. 1번째 글은 아래 링크를 참조해주세요 https://jhhan009.tistory.com/118 3. constructor 안에서 쓰는 this constructor가 생성자라는 것은 알고 있을 것이라고 생각합니다. js도 constructor를 만들어서 코딩을 진행할 수 있습니다. 아래의 코드를 작성해봅니다. function Person() 을 보면 기존에 봐왔던 constructor를 생각할 수 있습니다. 그리고 this는 function Person() 안에서 쓰이고 있습니다. 여기서 this는 새로 생성되는 오브젝트(인스턴스)를 뜻합니다. 그리고 ps 라는 변수를 선언해서 Person 객체..

매우 오랜만에 쓰는 블로그 글입니다.(어색하네요) 이번에는 this에 대해 어떤 방식으로 사용되는지 써보려고 합니다. 다른 언어에서는 this가 정해진 형태로 쓰이지만 ( ex. java 등 ) javascript에서는 this가 1가지 의미로만 쓰이지 않고 위치에 따라서 다양하게 쓰입니다. 그렇기 때문에 javascript의 this에 대해서 정확하게 아는 것이 매우 힘들 수 있습니다. 그리고 this에 대해 정의하기도 매우 어려울 수도 있죠. 저는 이번 글에서는 this의 정의가 아닌 this가 어떤 식으로 쓰여지는지 정리하려고 합니다. (this에 대해 좀 더 깊은 분석이 필요하다면 아마 이 글은 도움이 되지 않을 수 있습니다.) this가 어떤 식으로 사용될 수 있는지 확인하려는 분들에게는 도움이..

한참동안 블로그 안하다가 다시 시작해보기 일단 이렇게 쓰는 것은 최근 들어서 공부도 안하는 것 같고, 목표도 없고, 시간만 허비하는 것 같아서이다. 그래서 좀 다짐을 해보기 위해서 이런 의미 없는 글을 써본다. 그리고 그 시작으로 노마드코더 강의를 선택했다. 그 중에서도 바닐라 JS강의를 선택해서 진행해보려고 한다. 아무래도 javascript에 대해서 알아두면 지금의 나에게 좋고, 아마 나중에도 이득이 있지 않을까 하는 마음에 공부한다. 그리고 javascript기초에 대해서 다시 공부해보기로 한다. 사실 javascript를 기초부터 공부해본 기억이 없다. 대신에 실전으로 필요한 부분들만 공부했다. → 그래서 javascript의 이론과 기초에 대해서는 약하다고 생각한다. 기초 & 이론부터 공부해보자..

이번 포스트에서는 vue.js에서 getter와 setter를 사용해보겠습니다. 참고로 이번글은 vuex와 관련해서 다루는 글이 아닙니다. vuex 관련 글을 생각하고 들어오신 분은 안보셔도 됩니다. javascript에서도 getter와 setter를 적용해 볼 수 있다는 말을 들어서 실제 코드를 통해 보려고 합니다. java에서 했던 것처럼 그냥 똑같이 만들어서 적용하면 됩니다. 정말 간단한 코드부터 보겠습니다. (vue.js 기준으로 합니다.) clickSet clickGet setter와 getter를 만들고 버튼만 만들어서 console에다 찍는 걸로 했습니다. clickSet을 누르고 clickGet을 눌러본다면 다음과 같이 나타납니다. setter와 getter가 잘 동작하는 것을 알 수 있..

이번에는 자바스크립트와 관련된 lodash에 대해 글을 쓰겠습니다. lodash 자바스크립트 라이브러리 중 하나이다. 데이터를 쉽게 다룰 수 있게 도와줍니다. 특히, 배열 안의 객체들의 값을 핸들링할 때 유용함. lodash에 대해서 더 쓸 내용은 없을 것 같습니다. 바로 예시를 보면서 어떻게 쓰이는지 아는 것이 더 나을 것 같습니다. (저는 예시를 Vue.js를 사용해서 들겠습니다.) 0. 시작하기 npm install lodash 터미널 창에 다음을 입력해서 lodash를 먼저 다운받아야 사용할 수 있습니다. 그리고 'b'의 인덱스가 1번인데 1로 출력이 잘 되는 것을 확인할 수 있습니다. 인덱스 3이 나오는 것을 확인할 수 있습니다. 2. fill array를 원하는 문자 혹은 숫자로 채워넣기 합니..