Dev/[Javascript] 썸네일형 리스트형 Data Fetching 코드를 공통 모듈로 추상화 해보기 with React INTRO 현재의 Javascript 진영의 Data Fetching 방법은 AJAX 베이스로 정말 다양하게 Wrapping되어있는 듯.AJAX이전과 AJAX에 대한 간략한 내용은 아래 포스팅에서 다룬 적이 있다.2023.03.08 - [Dev/[Javascript]] - [Javascript] XMLHttpRequest와 Ajax에 대한 이야기 [Javascript] XMLHttpRequest와 Ajax에 대한 이야기0. 의문의 시작 최근 같은 전공의 대학 동기들을 만나 술자리를 가지던 중 Ajax와 XMLHttpRequest에 대한 대화를 나누게 되었고, 아래 내용에 대해선 모두 의견의 차이가 없었다. Ajax 는 비동기 통신을rangsub.tistory.com 이 글에서는 이런 다양한 방법으로 사용.. 더보기 [Javascript] 자바스크립트의 컴파일에 대하여 INTRO 자바스크립트 언어는 순차적으로 런타임에 실행되는 인터프리터 언어이다. 그러나 C언어 처럼 컴파일되기도 한다. 이 포스팅에서는 이 내용에 대해 포스팅한다. 1. 인터프리터? - 자바스크립트는 인터프리터 언어로 분류된다. - 런타임에 한 줄씩 순차적으로 수행된다. - 물론 무작정 순차적으로 실행되는 것은 아니다. - 특정 단계가 있고 이 단계로 인해 호이스팅이라는 개념도 생겨난다. - 전처리가 없다. - 전처리가 없기 때문에 개발 단계에서 버그를 먼저 잡기가 힘들다. - 그래서 나온 것이 타입스크립트와 각종 Linter, Formatter들이다. - 초창기 자바스크립트는 HTML을 동적으로 만들고자 고안된 언어이다. - 이 시기엔 Server Side Rendering 방법이 지배적이었다. 브라우.. 더보기 [Javascript] Module과 Module 시스템에 대해서(feat. CommonJS, ES6) INTRO 개발 도중 다른 모듈을 사용하기 위해 아래와 같은 키워드들을 보거나 사용해 본 적이 있을것이다. // ES6에서 모듈을 사용하는 방법 import { Express } from 'express'; // CommonJS에서 모듈을 사용하는 방법 const express = require('express'); 이번 포스팅에서는 Javascript의 module에 대해 알아본다. 1. Module? - 모듈(Module)은 다양한 곳에서 다양한 의미로 사용되며, 개발 분야로 범위를 제한해보자면 '프로그램의 다른 부분에서 재사용하고 가져올 수 있는 독립적인 단위로 구성된 코드' 라고 볼 수 있다. - 그리고 이를 활용하여 아래와 같은 구조로 코드를 작성하는것을 '모듈 패턴을 사용한다' 라고 표현하며,.. 더보기 [Javascript] XMLHttpRequest와 Ajax에 대한 이야기 0. 의문의 시작 최근 같은 전공의 대학 동기들을 만나 술자리를 가지던 중 Ajax와 XMLHttpRequest에 대한 대화를 나누게 되었고, 아래 내용에 대해선 모두 의견의 차이가 없었다. Ajax 는 비동기 통신을 위한 하나의 '프로그래밍 기법'이며, javascript 진영에서는 이 기법을 구현하기 위해 XMLHttpRequest를 사용한다. 이 기법과 DOM API를 사용하여 화면 전체를 다시 그리지 않아도 된다. XMLHttpRequest는 HTTP 프로토콜을 사용하여 서버와 통신한다. 그러나 아래 대화까지 도달했을 때, 모두 제대로 설명할 수 있는 사람이 없었다. XMLHttpRequest의 원리? 언어 레벨과 프로토콜 레벨 사이에, 이것을 실행시켜주는 것은 무엇? 결국 다음과 같은 결론을 내.. 더보기 [javascript] 렉시컬 환경(Lexical Environment) INTRO 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. 자바스크립트의 렉시컬 환경(Lexical Environment)에 대해서 알아본다. 0. 서론 - 이전 포스팅에서 실행 컨텍스트에 대해 정리했는데, 해당 글을 보면 실행 컨텍스트의 구성 요소 중 렉시컬 환경이 있었다. - 렉시컬 환경이 뭘까? 2023.01.10 - [Dev/[Javascript]] - [javascript] 실행 컨텍스트(Execution Context) [javascript] 실행 컨텍스트(Execution Context) INTRO 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. 자바스크립트의 실행 컨텍스트(Execution Co.. 더보기 [javascript] 스코프(Scope) INTRO 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. 자바스크립트의 스코프(Scope)에 대해서 알아본다. 0. 서론 - 자바스크립트 뿐만 아니라 모든 언어에서는 이 스코프 개념이 존재한다. - 직역하면 '범위' 라는 의미로, 실제 소프트웨어에서도 범위라는 개념으로 사용된다. - 우리가 흔히 들어본 전역변수/지역변수 개념이 이 범위 단위로 나뉜다고 생각하면 된다. let a = 10; // 전역 범위에 선언된 전역 변수 function func() { let a = 20; // 지역 범위에 선언된 지역 변수 console.log(a); // 20이 출력된다. 지역 스코프는 전역 스코프보다 우선순위가 높다. } func(); 1. 스코프의 특징 - 위에.. 더보기 [javascript] 실행 컨텍스트(Execution Context) INTRO 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. 자바스크립트의 실행 컨텍스트(Execution Context)에 대해서 알아본다. 0. 서론 - 실행 컨텍스트는 직역하면, 실행 문맥. - 자바스크립트 엔진은 우리가 작성한 '실행 가능한 코드'를 자신이 처리할 수 있도록 - 논리적으로 구분하고 이를 처리한다. - 이 때 구분 된 코드들이 실행되는 환경을 실행 컨텍스트라고 한다. - 아래의 예제를 살펴보면서 간단하게 이해하고 넘어가보자 let name = 'choi'; const getName = () => { console.log(name); }; getName(); - 이 코드에서 실행 컨텍스트는 총 2개가 만들어진다.(전역 실행 컨텍스트와 함수.. 더보기 [javascript] ES6 - 화살표 함수(Arrow function) INTRO 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. ES6(2015)의 기능인 화살표 함수에 대해서 알아본다. 0. 서론 - 화살표함수는 간단히 얘기해서, - 함수를 선언하는 방식을 보다 가독성 좋게 표현해주는 문법이다. - 아래의 예시를 보자. 명확한 차이를 알 수 있다. // 기존 함수 선언시 const normal = function(x) { return x + x; } // 화살표 함수 선언시 const arrow = (x) => { return x + x; }; - 아래는 특징을 알아본다. 1. 익명 함수로만 사용 가능 - 화살표 함수는 익명함수로만 사용 가능해서, 익명함수의 특성을 따른다. - 익명함수의 특징은 추후 포스팅에서 다룰 예정이.. 더보기 이전 1 2 다음
