JavaScript

랜딩 페이지를 이용한 포트폴리오 사이트를 만들려고 하다가 알게된 웹 API이다.사용법은 간단하지만 재밌는 웹 API인거 같아서 깊게 파보기 위해 정리하려고 한다.우리가 지정한 타겟요소가 화면에 보일 때 안 보일때를 감지해서 특정 동작을 할 수 있도록 도와주는 웹 API

아무런 생각없이 쓰고 있던 콜백함수와 익명함수의 동작원리에 대해서 공부해보자리액트나 넥스트나 바닐라 자바스크립트로 프로젝트를 하다보면 콜백함수와 익명함수를 셀 수 없이 많이 쓰는데 해당 함수들은 어떤 역할을 하며 어떤 용도로 쓰일까?콜백함수는 어떤 함수의 인수로 함수가

많은 JavaScript강의에서 async, await 문법을 가르치기 전에 Promise에 대해서 간단하게 살펴보고 지나가는데 Promise만의 디테일한 사용법과 다양한 메서드를 사용해보고 싶어서 정리하는 글이다.Promise는 비동기 연산이 최종적으로 성공했는지 실

Promise의 메서드 체이닝에 의한 코드 가독성의 문제점을 해결할 방법으로 배웠던 async, await의 적절한 사용법에 대해서 알아보자기존에 비동기로직 문제를 해결하기 위해서 Callback Function 더 나아가 Promise을 이용했었다.하지만 위 두 방법

await을 남용하면 발생하는 await 병목현상에 대해서 알아보는 포스팅이다await병목현상은 여러 await이 연쇄적으로 발생하면 각각의 작업이 완료될 때까지 기다려야 하는 현상을 말한다.위와같이 여러개의 await키워드를 체이닝으로 구성해놓으면 각각의 작업이 완료

JavaScript의 클로져(Closure), 호이스팅(Hoisting) 등등 중요개념들을 알기 위해 먼저 공부해야하는 실행 컨텍스트(Excutation Context)에 대해 정리해보자실행 컨텍스트는 코드가 실행되는 환경을 구성해준다.그럼 어떤 환경이 조성되어 있을까

JavaScript에 대한 개념을 공부하다 보면 클로저(Closure)라는 개념에 대해서 한 두번은 들어봤을 것이다. 대체 클로저란 무엇이고 어떤식으로 동작하는지 알아보자. !!!클로저를 쉽게 이해하기 위해서는 실행컨텍스트(Excutation Context)개념에 대

setTimeout, AJAX를 이용한 비동기 로직을 JavaScript는 해당 작업이 언제 끝날지 혹은 타이머가 다 지났는지를 어떻게 알고 로직을 실행시키는 걸까? 만약 위와같은 역할을 해주는 특정 엔진이나 요소가 있다면 싱글 스레드로 돌아가는 JavaScript외에

async, sync개념은 비동기 처리를 하다보면 해당 개념에 대해서 접해볼 기회가 수두룩 할 것이다. 다만 JavaScript포함한 다른 언어에서 Blocking, Non-Blocking개념이 기본적으로 가미되어 있는데 해당 개념들은 대체 무엇이고 async, syn

지난 Blocking,Non-Blocking, Sync, Async 1편에서는 각각의 개념과 어떤식으로 동작하는지에 대해서 간략하게 살펴보았다. 이번 포스팅에서는 위 4가지를 조합해서 쓰는 방법에 대해서 알아보자 아직 해당 개념들에 대해서 익숙하지 않다면 아래 링크를

지금까지 var, let, const의 개념을 간단하게 생각하고 사용하였지만 "this"키워드에 대한 포스팅을 정리하면서 변수 타입에 관해 생각지도 못한 난관을 만나게 되었다.. var, let, const 키워드의 선언 범위와 부딪혔던 난관이 어떤 문제였는지 정리해

this키워드는 JavaScript뿐만 아니라 다양한 언어에서 사용되는 키워드이다. c++, Java에서는 보통 현재 객체 자신을 가르키는 용도로 쓰이는데 JavaScript에서는 어떤 용도로 쓰일까? 1. "this"란? Java, c++에서는 현재 객체를 가르키

JavaScript에는 화살표 함수, 일반함수, 콜백함수, 익명함수 등등 다양한 형태의 함수가 존재한다. 이외에 일반적인 형태나 동작을 하는 함수들이 존재하는데 이번 포스팅에서는 "정의와 동시에 실행"되는 즉시실행함수(IFFE)에 대해서 알아보자.즉시실행함수의 영문 표

JavaScript로 코드를 짜다 보면 메모리에 직접적으로 접근할 일이 별로 없다. 그러다 보니 가벼운 마음으로 변수, 객체, 함수 등을 생성하거나 이벤트 등을 등록하게 된다. 하지만 메모리를 신경 쓰지 않고 코드를 작성할 경우 크나큰 문제에 직면할 수 있는데 이를 방

웹 개발을 하다보면 V8엔진이란 단어를 많이 들어봤을 것이다. 대체 V8엔진은 무엇이고 어떤 역할을 하는지 이번 포스팅에서 알아보자 1. "V8엔진"이란? V8 엔진은 웹 브라우저를 만드는 데 기반을 제공하는 JavaScript 엔진이다. 그렇다면 JavaScri

JavaScript에서 배열은 다른 프로그래밍 언어와 마찬가지로 다양한 메서드를 가지고 해당 메서드를 활용해서 데이터를 파싱하거나 특정 조건에 맞게 배열을 정리하는 작업을 할 수 있다. 이번 포스팅에서는 JavaScript의 배열이 가지고 있는 메서드를 알아보자.for

지도를 이용한 토이프로젝트를 진행 중 현재 위치를 지도상에 보여주기 위해 현재 위치의 위도와 경도를 가져와야 하는 구현이 추가 됐다. 현재 위치의 경도, 위도는 geolocation api를 이용해서 가져올 수 있는데 이번 포스팅을 통해서 간단한 사용법을 알아보자.ge

저번 프로젝트를 Next로 진행하고 디자인을 싹 바꿈과 동시에 코드 전체를 React로 다시 리팩토링 바꾸는 과정중에 Next에서 요긴하게 쓰였던 경로 alias를 React에서도 비슷하게 사용하는 방법에 대해서 알아보자보통 프로젝트에서는 위와같이 다양하게 디렉토리를