1. 클래스와 생성자 함수의 차이 // 클래스 class DogCls { constructor(name, breed) { this.name = name; this.breed = breed; } bark() { return `${this.name} says woof`; } sleep() { return `${this.name} is sleeping`; } } const dog01 = new DogCls("asdf", "qwer"); const dog02 = new DogCls("ASDF", "QWER") // 생성자 함수 function DogFn(name, breed) { this.name = name; this.breed = breed; this.bark = function () { return `${..
작년 처음 블로그를 시작하면서 React와 Javascript 정리를 블로그에 올렸었는데, 1년이 지나면서 현업에서 경험한 것들과, 추가적인 공부한 것들을 포함하여 React와 Javascript의 어려운 부분들을 다시 정리 해보려합니다. 1. 객체에서의 this 객체 안에서 this를 사용할때, this가 나타내는 것은 해당 객체를 뜻합니다. const obj = { name: "asdf", greet: function() { console.log(`This is `) } } obj.greet() // This is: {name: 'asdf', greet: ƒ} 하지만 이걸 함수에서 바로 나타내보면 function greet() { console.log("This is: ", this) } greet(..
이전 글에 중에 클로저를 설명하는 글에서, 내가 생각할 때 자바스크립트에서 개념적으로 가장 중요한 것이 두개있다고 했었다. 사실 세개다.....ㅠ 왜 두개라고 뭉겠었냐면 그 당시에 이 개념을 100% 이해하고 있지 못했다. 사실 지금도 100% 이해했다고 자신있게 말 못할것같다. 그래도 계속 이해하려 노력하고, 정리하면서 어느정도 이해가 되어 글을 작성해보려한다. 이 글에서 알아볼 것 프로토타입 (Prototype) 1. 프로토타입 (Prototype) 프로토타입이란? 자바스크립트는 프로토타입 기반 언어로, 프로토타입 상속을 사용한다. (예전에, 강의 듣다가 이 말 듣고 그냥 자러갔던 기억이있다..) 무슨 말인지는 밑에서 서술하겠다. 또한, 프로토타입은 객체로, 모든 객체는 프로토타입을 가진다. (__p..
https://joseph0926.tistory.com/25 [Javascript] 자바스크립트 비동기(Async)_01 (sync & async 코드, 이벤트 루프, 콜백함수, async / await 키워 앞선 글에서 내가 생각하기에 자바스크립트에서 개념적으로 가장 중요한 2 파트가 있는거 같다고 언급한 적이 있었다. 그중 두번째가 지금 알아볼 파트다 저번 중요 파트에서 개인적으로 자바 joseph0926.tistory.com 이 주제에 대해서는 위의 링크에서 자세히 알아본 적이 있다. 그럼에도 글을 하나 더 쓰는 이유는, 프로미스에 대한 설명이 없는 것과 위 글에서 설명이 부족한 부분의 보충이다. 이 글에서 알아볼 것 콜백 지옥 (Callback Hell) 이란? 프로미스 (Promise) 란? a..
보통 데이터를 저장할 때, 서버..즉 데이터베이스에 저장하는 경우가 대부분이다. 하지만, 브라우저에도 저장소가 마련되어있고, 상황에 따라서는 브라우저 저장소에 저장하는 것이 더 나은 상황도 존재한다. 서버에는 보통 중요한 데이터를 저장한다. 지속되어야하는 데이터로, 사용자에게서 분리하여 안전하게 저장한다 브라우저에는 여러 간단한 데이터를 저장할 수 있다. 웹사이트를 방문하였을 때 자바스크립트 코드에 의해 브라우저 저장소와 의사소통하여 사용할 수 있다 또는, 사용자가 브라우저에서 조작할 수 있지만, 다른 사용자와 공유는 할 수 없다 이 글에서 알아볼 것 LocalStorage, SessionStorage Cookies IndexedDB 1. LocalStorage, SessionStorage 특징 단순한 ..
보통 프론트엔드를 공부할 때, HTML & CSS -> 자바스크립트 -> 자바스크립트 라이브러리(React, Vue, Angular..)순으로 익혀나간다. 하지만 나는 자바스크립트 기본 문법만 공부하고 바로 React로 넘어갔었다. 이유는 자바스크립트 공부가 너무 지겨웠기 때문이였다. 그래서 나는 프로젝트를 시작하고 파일을 구성할 때, 기능 or 역할별로 파일들을 분리해놓고 시작한다. 이런 방식을 자바스크립트에 적용하고 싶었으나 여러 문제가 발생하였고, 자바스크립트 모듈을 활용하여 해결하였다. 이 글에서 알아볼 것 자바스크립트 모듈 1. 자바스크립트 모듈 내가 위에서 말한것처럼 많은 개발자들이 개발할 때, 로직을 여러 파일로 나눠서 관리하고 개발한다. 왜냐하면, 기본적으로 가독성이 좋아지고, 문제가 발생..
하나의 웹페이지를 구성하기 위해서는 보통 프론트엔드 - 백엔드 - DB 가 갖춰져야한다. 사용자가 웹페이지를 이용하면서 어떤 데이터를 저장하려하거나, 데이터를 읽을려면 프론트엔드에서 특정 행동을 취하고(버튼 클릭등..) -> 백엔드에서 관련 로직을 실행하고 -> DB에서 데이터를 저장하거나 읽는다. 여기서 프론트엔드와 백엔드의 통신에 HTTP가 활용된다. 이 글에서 알아볼 것 HTTP 통신의 이론 JSON XMLHttpRequest vs fetch() vs axios 1. HTTP 통신의 이론 위에서 언급했듯이, HTTP 통신은 프론트와 백엔드의 의사소통에 홯용된다. 이를 자세히 알아보자 브라우저 - 프론트 - 백엔드 소통 사용자 화면에 HTML 문서를 렌더링하는 작업은 흔히 프론트엔드라 불리는 기술없이..
앞선 글에서 내가 생각하기에 자바스크립트에서 개념적으로 가장 중요한 2 파트가 있는거 같다고 언급한 적이 있었다. 그중 두번째가 지금 알아볼 파트다 저번 중요 파트에서 개인적으로 자바스크립트의 "영리함", "치밀함"을 느꼈다면, 이번 파트에서는 자바스크립트의 "친화력"을 느꼈다 무슨 말일까? 이 글에서 알아볼 것 동기(sync) & 비동기(async) 코드 콜백 함수 자바스크립트 엔진과 브라우저의 의사소통 (이벤트 루프) async / await 키워드 이번 글 또한 앞선 글들과 같이 목차를 나눠놨지만, 개념들이 서로 엉켜있어 목차의 의미가 앞선 글들보단 희미할것이다. 정리 또한 목차를 따르겠지만, 밑에서 살펴볼 개념이 앞선 개념을 살펴볼때 나올 수도 있다 1. 동기(sync) & 비동기(async) 코..
