hahagarden의 블로그

MPA(Multi Page Application)와 SSR(Server Side Rendering) 전통적인 웹사이트는 모두 MPA(Multi Page Application)이었다. 어떤 페이지에 접속하려면 서버에서 그 페이지의 html을 보내준다. 페이지마다 각각의 html이 있고 서버에서 렌더링 연산을 담당하고 페이지가 완성이 되면 응답한다. 따라서 페이지를 새로고침하거나 이동하면 페이지 전체가 렌더링된다. MPA는 멀티 html을 서버에서 제공해주는 SSR방식이다. SSR방식의 MPA의 장점은, 초기 로딩이 매우 짧다는 것이다. 서버에서 렌더링이 완료된 상태로 파일을 주고, 자바스크립트 파일 다운로드가 완료되지 않았어도 html이 보여지기 때문에 사용자가 대기하는 시간이 줄어든다. 또한 검색 엔진 ..

React 리액트는 프론트엔드 개발을 위한 자바스크립트 라이브러리이다. 다른 프로그래밍 언어이거나 자바스크립트로부터 독립적인 프로그램이 아니다. 리액트는 JSX문법을 이용해서 개발자가 간편하고 직관적인 코드를 작성할 수 있지만, 이것은 결국 오래된 버전의 자바스크립트로 변환된다. 리액트는 컴포넌트 기반으로 개발한다. 컴포넌트는 한 기능 단위로 만드는데, 기능에 집중하여 만들 수 있고 컴포넌트 사이에 의존성이 없어져서 독립적으로 작동한다. 클래스처럼 컴포넌트를 여러 곳에서 재사용할 수 있다. 또한 독립적인 한 묶음이기 때문에 테스트하기에 좋고 유지보수에도 좋다. 리액트는 선언형이다. 페이지에 어떻게 렌더할지가 아니라, 무엇이 페이지에 렌더링될지를 작성하는 것이다. 이는 프로그램을 예측 가능하게 하고, 덜 ..

Fetch API const promise = fetch(url[, options]); 자바스크립트에서 서버에 네트워크 요청을 보내고 데이터를 받아올 수 있다. 그 방법 중 하나는 브라우저에서 제공하는 fetch API이다. options를 주지 않으면 기본적으로 GET 메서드가 진행된다. (먼저 동기와 비동기, 자바스크립트의 비동기 처리에 대해서 다음 포스팅을 참고하자) JS 동기와 비동기, Callback, Promise, async/await 동기와 비동기 커피숍에서 커피를 시킬 때, 한명이 주문하고 그 주문이 완료되면, 다음 사람이 주문하고 그 주문을 완료하고, 그리고 또 다음 사람이 주문하고 완료시킨다면 대기 줄이 굉장히 hahagarden.tistory.com 프로미스 체이닝 fetch()를 ..

동기와 비동기 커피숍에서 커피를 시킬 때, 한명이 주문하고 그 주문이 완료되면, 다음 사람이 주문하고 그 주문을 완료하고, 그리고 또 다음 사람이 주문하고 완료시킨다면 대기 줄이 굉장히 길 것이다. 전체 주문을 완수하기에도 굉장히 오래 걸릴 것이다. 이것이 동기(synchronous)이다. 이 때 이전 주문이 진행되고 있기 때문에 다음 주문을 막는 것은 블로킹(blocking)이라고 한다. 하나의 작업이 완료될 때까지 다음 작업을 막는 것이다. 현실의 커피숍에서는 이렇게 진행되지 않는다. 주문을 받고, 주문이 들어가고, 그 음료를 제조하는 동안 또 다른 주문을 받고, 그 주문을 처리하는 방식이다. 블로킹되지 않고 비동기적으로 진행된다. 웹 개발에서 자바스크립트의 비동기적 실행은 유용하다. 다음과 같은 작..

프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. C++나 자바같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스와 상속, 캡슐화를 위한 키워드인 public, private, protected 등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우가 있다.(나도 그랬다) 하지만 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 프로토타입 객체(프로토타입)란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 ..

일급 객체 비행기의 퍼스트클래스는 특별대우를 받는다. 자바스크립트에도 특별한 대우를 받는 '일급 객체'가 있다. 일급 객체 중 대표적으로 함수가 있다. 일급 객체인 함수는 다음과 같은 특별한 대우를 받는다. 함수를 변수에 할당할 수 있다. 함수는 다른 함수의 전달인자가 될 수 있다. 함수는 다른 함수의 결과로서 반환될 수 있다. 고차함수 고차함수는 함수를 전달인자로 받을 수 있거나, 함수를 반환할 수 있는 함수이다. 이 때 어떤 함수(caller)에 전달인자로 전달되는 함수를 콜백 함수(callback function)라고 한다. 어떤 함수(caller)가 완료되었을 때 호출되는 경우가 많아서 '답신 전화'를 의미하는 콜백 함수라는 이름이 붙었다. 이 때 어떤 함수(caller)는 콜백함수를 호출(inv..

var, let, const 이전에는 var을 이용해서 변수를 선언하였는데 ES6에서 let과 const가 추가되었다. 다음의 var 문제점들로 인해 let과 const의 사용이 권장된다. var의 문제점 재선언이 가능하다. var greeting = "Nice to meet you."; var greeting = "I'm back."; var greeting = "Goodbye."; console.log(greeting); // Goodbye. let greeting = "Nice to meet you."; let greeting = "I'm back."; let greeting = "Goodbye."; console.log(greeting); // SyntaxError: Identifier 'gree..

스코프 스코프란 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는(접근할 수 있는) 유효범위가 결정된다. 스코프는 식별자가 유효한 범위이다. 위 그림은 같은 이름의 서로 다른 test.txt 파일이다. 서로 다른 폴더에 있기 때문에 같은 같은 이름을 가질 수 있다. 만약 한 폴더 내에서 새로운 파일을 만들어 중복된 이름을 사용한다면 덮어쓰기가 될 것이다. testFolder1의 test.txt의 유효범위는 testFolder1이다. 자신의 유효범위 내에서 같은 이름으로 새로운 파일을 저장하려고 한다면 대체가 될 것이고 자신의 유효범위가 아닌 다른 곳에서 같은 이름을 쓰면 영향을 받지 않을 것이다. 변수도 이처럼 영향력이 있는 유효범위,..

얕은 복사는 메모리 주소값을 복사하는 개념이고, 깊은 복사는 새로운 메모리 공간을 확보해 완전히 복사하는 개념이다. 얕은 복사와 깊은 복사는 데이터 저장 방식과 깊은 관련이 있다. 데이터 저장 방식 let A = 컵; let C = 우산; let D = 우산; let B = 컵 + 우산; 변수 선언이 일어나면 컴퓨터의 메모리에서 비어있는 공간 하나를 확보한다. 그 공간에 이름을 지정하고, 데이터를 또 다른 공간에 저장한 후, 데이터가 담긴 공간 정보를 저장한다. 다소 복잡해보이는데 왜 이렇게 할까? 데이터 변환을 자유롭게 메모리 관리를 더욱 효율적으로 하기 위해서 다음과 같이 사물함에 물건을 저장하는 그림에 비유해보았다. (실제 변수저장 메커니즘은 변수영역과 데이터영역, 메모리주소, 식별자와 값 등의 개..

객체 자바스크립트를 이루고 있는 거의 모든 것들이 객체이다. 원시타입(Primitives)를 제외한 나머지 값들(함수, 배열, 정규표현식 등) 모두 객체이다. 이에 대해서는 나중에 더 학습하기로 하고, 우선 객체는 키(Key)와 값(Value)로 이루어진 속성(property)들의 집합이다. 배열과 마찬가지로 다양한 데이터를 한번에 다룰 수 있다. 객체 생성 객체 리터럴 const myself = { name: 'hahagarden', age: 28, }; 가장 일반적인 방식이다. 중괄호 안에 프로퍼티의 키와 값을 작성한다. 아무것도 작성하지 않으면 빈 객체({})가 된다. Object 생성자 함수 const myself = new Object(); myself.name = "hahagarden"; my..

계산기 목업 프로그램을 자바스크립트로 작성하면서 Number와 parseInt와 parseFloat를 사용하게 됐는데 내용을 정리해보려고 한다. 공통점은 세가지 모두 숫자로 이루어진 문자열을 숫자로 형변환할 수 있다. 그러나 각 함수별로 예외가 있다. 아래의 코드로 테스트를 해보았다. const strs = ["10.12345", "100.0", "9.9", "-9.9", "-33", "2023년", "총3만원"]; for (const str of strs) { console.log(``); console.log("String", str); console.log("Number", Number(str)); console.log("parseInt", parseInt(str)); console.log("par..

수도코드(pseudo code) 작성하기 지난 포스팅에서 수도코드(의사코드)에 대해 학습했다. 오늘 페어프로그래밍에서 수도코드 작성하는 것을 중점적으로 연습했는데 주관적으로 작성하는 것이라서 조금 어려웠다. 여러가지 작성법을 찾아보았는데 그 중에서 코드를 어떻게 표현할지 말고, 하고 싶은 이야기가 무엇인지(일상적인 문장으로) 작성하는 연습을 해보려고 한다. 예제1 function makeDigits(num) { // 결과변수에 빈 문자열을 초기화하고 let result = ""; // 1부터 num까지 한자리씩 반복하면서 for (let i = 1; i