지금까지 객체의 프로퍼티(Property) 에 대해서 많은 언급을 했었다.이번엔 객체의 프로퍼티 중에서도 접근자 프로퍼티를 조금 더 정리해보려고 한다. 1. 프로퍼티란(Property) ?사실 이름 그대로 프로퍼티는 ...  속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미한다.즉 객체 내부의 {key:value} 형태로 구성되는 객체가 가지는 정보라고 말할 수 있겠다.  프로퍼티는 크게 두가지로 분류할 수 있다. 데이터 프로퍼티 (data property)접근자 프로퍼티 (accessor property)  2. 데이터 프로퍼티 (data property)데이터 프로퍼티는 일반적으로 사용하는 프로퍼티이다. 즉 일반적으로 값을 저장하기 위한 프로퍼티이다. 여기서 Value 는 프로퍼티의 속성값을 ..

1. 접근 제어자(Access modifier) 란? 접근 제어자는 클래스 내부에서 특정 속성이나 메서드에 대한 접근 권한을 제어하는 방법이다. 사실 JavaScript는 프로토타입 기반의 언어이기 때문에 전통적인 접근 제어자인 public, protected, private 키워드를 지원하지 않아,필요하다면 임의의 패턴을 이용하여 이러한 기능을 사용해야 했다. ES6 이후 #을 사용하여 비공개(private) 필드를 정의할 수 있는 문법이 추가되었다. 접근제어자를 사용하여 접근권한을 제어하는 이유가 뭘까? 클래스는 외부에서 객체가 어떻게 사용할지를 결정하고, 객체는 각 클래스의 속성을 이용한다. 이때 자바스크립트에서는 기본적으로 모든 속성과 메서드가 클래스의 public 접근 권한을 가지기 때문에클래스..

생성자와 객체 타입에 대해서는 일전에 포스팅 한적이 있었지만 이번에 함수를 구현해보면서 또 헷갈리는 부분이 있어 다시 포스팅하고자 한다.  자바스크립트에서 객체를 생성하는 데에는 세가지 방법이 있다. 생성자 함수를 통해 만들기, 객체 리터럴을 통해 만들기, object 함수를 통해서 만들기여기서 생성자 함수와 class 에 대해서 알아보도록 하자. 1. 생성자 함수(constructor functions)생성자 함수는 새로운 객체를 반환하고 객체의 초기 상태를 설정할 수 있게 도와준다.생성자 함수를 만들기 위해서는 반드시! new 키워드와 함께 호출이 되어야 하는데,이때 class 문법의 constructor 와 함께 사용할 수도 있고 일반 함수 형태로 정의할 수도 있다. 두 가지 규칙은 잊지말자!new..

리액트에서 코드를 짜다보면 똑같이 생긴 애들을 상태만 바꿔준다든지..똑같은 객체를 또 써야 한다든지 이런 경우들이 있다. 이럴 때 스프레드 연산자를 사용하면 훨씬 깔끔한 코드를 완성시킬 수 있다.   스프레드 연산자(Spread Operator) 란?  기존 배열이나 객체의 전체나 일부를 다른 배열이나 객체로 빠르게 복사할 수 있다.즉 스프레드 연산자는 객체나 배열을 복사하거나 여러개의 요소를 하나로 합칠 때 유용하게 사용할 수 있다. 예시코드const hilong = { name: 'hilonghilong', position: 'front-end', city:'suwon' };const hilonghilong = {...hilong}console.log (hilonghilong) //>> { name:..

[JS] 자바스크립트 비동기처리란? (1)자바스크립트를 다루면 무조건 보게 되는 비동기처리!잊지 말자는 뜻에서 포스팅한다... 📌  비동기(Asynchronous) 란?  쉽게 얘기하자면,동기는 차근차근 처리하는 것이고 비동기는 한꺼번에 여khw063011.tistory.com 지난 글에서는 자바스크립트의 비동기처리에 대해서 포스팅해보았다.이번 글에서는 비동기처리의 핵심인 async 와 await 에 대해서 다루어보겠다. 😱 async 와 awaitasync:함수의 앞에 붙여서 해당 함수가 비동기 함수임을 나타낸다.즉 function 앞에 붙어야 한다.  function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolv..

자바스크립트를 다루면 무조건 보게 되는 비동기처리!잊지 말자는 뜻에서 포스팅한다... 📌  비동기(Asynchronous) 란?  쉽게 얘기하자면,동기는 차근차근 처리하는 것이고 비동기는 한꺼번에 여러개를 수행할 수 있는 것이다.즉 더 쉽게 얘기하자면 비동기는 멀티가 되는 것이다.   그래서 만약, 프로그램을 짤 때 동기식으로 짠다면동기 코드는 한 줄씩 차례대로 실행된다. 즉, 한 작업이 완료될 때까지 다음 작업이 시작되지 않는다. 이렇게 말로 들으면 이해되겠는데... 한번 코드를 보며 이해해보자! 😤 코드로 이해하기 function synchronousExample() { console.log('첫 번째 시작'); for (let i = 0; i  이렇게 하면 결과값은첫 번째 시작첫 번째 완료..

웹개발을 시작한다고 했을 때 어디선가 한번씩은 들어본 프로그래밍 언어들이다.각 언어는 어떤 역할을 하는지 알아보자! 1. 자바스크립트란? -HTML이 웹페이지의 프레임을 만드는 언어라고 한다면 웹페이지의 조작과 변경, 이벤트 동작을 만드는데 필요한 프로그래밍 언어이다-즉 정적 언어인 HTML을 조작해서 이벤트를 추가하고 웹페이지를 움직이게끔 만들어주는 것이 자바스크립트의 역할이다.  사실상 웹페이지를 만들기 위해서는 기본적으로는 HTML, CSS, Java Script만 있으면 기본적인 웹페이지를 만들 수 있다. 하지만 이렇게만 하면 복잡한 데이터가 들어오거나 서버를 이용하는 사용자가 많아지면 서버가 느리게 동작하는 경우가 많다.  이러한 불편함으로 인해 자바스크립트 엔진에 대한 필요성이 커져갔다.*자바..

**본 블로그는 '노마드코더-바닐라JS로 canvas에서 그림그리기' 강의를 클론코딩한 것입니다! 코드는 깃허브, 자세한 설명은 강의를 참고해주세요 * 바닐라 JS란? : 프레임워크 혹은 라이브러리가 저장되지 않은 순수한 자바스크립트 / 아무것도 포함이 되지않은 순수한 자바스크립트 0. 캔버스 그리기 -getContext const canvas = document.querySelector("canvas"); const ctx=canvas.getContext("2d"); 1. 사각형 그리기 -fillRect() 사각형의 선 그리기 ctx.rect(x,y,w,h) >이때 선의 색이 적용되지 않아 보이지 않는다. > stroke(): 테두리 그리기/ > fill() : 색으로 채우기 (**** 선을 만든 후에..

1. Math() 메소드 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 객체 웹브라우저마다 다른 결괏값을 얻을 가능성이 높음 따라서 아주 정확한 결괏값이 필요한 작업에는 추천하지 않음 Math.min() 인수로 전달받은 값 중에서 가장 작은 수를 반환 Math.max() 인수로 전달받은 값 중에서 가장 큰 수 반환 Math.random() 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 Math.floor() 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수 반환 Math.floor(10.95); >> 10 Math.floor(11.01); >>11 Math.ceil() 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수 반환 Math.ceil(10.95) >>11 Math.ce..