공부 및 일상기록

바닐라 자바스크립트로 SPA를 구현해보다.이번 항해99 플러스를 진행하며 바닐라 자바스크립트로 리액트와같은 SPA(Single Page Application)을 구현해보게 되었다.바닐라 자바스크립트로 일반 웹페이지는 구현해봤지만 SPA를 구현해본적은 없었기에 리액트를 이해하는 큰 도전이였다. 나의 목표만드려는 것은 하나의 간단한 쇼핑몰이다.MSW를 이용하여 실제 백엔드 데이터를 받는것처럼 작성한다.id가 root인 div 안에 전체 앱을 렌더링한다.컴포넌트 기반 함수 구조로 페이지를 구성한다.상태 관리를 위한 store를 만들고, 전역 상태와 상태 변경을 처리한다.Router를 직접 구현하여 URL에 따라 적절한 페이지를 렌더링한다.이벤트 바인딩, 데이터 fetch, 무한 스크롤, 검색, 장바구니 등 주..

다른 언어에서의 this와 자바스크립트의 this는 많이 다르다고 한다.하지만 나는 자바스크립트에서만 사용해봐서 사실 크게 체감하지는 못한다.다만.. 너무 어렵다고만 느껴왔던것 같아서 다시 한번 정리해 본다. ** 여기서 사용되는 변수, 함수, 클래스에 사용된 이름은 아무 의미가 없고, 변수명이 떠오르지 않아 사용한 것 뿐입니다.. 1. 브라우저 환경에서 this를 바로 호출해보기console.log(this) //Window 브라우저 환경에서 this를 호출하면 window객체가 보이게 될 것이다.그 이유는 자바스크립트에서 기본 컨텍스트가 전역 컨텍스트, 즉 전역 객체이기 때문이다.브라우저에서 전역객체는 window 객체이다. 2. 함수 안에 this를 넣고 호출해보기function simpleFunc..

스택이란 스택은 쌓는다는 의미로 데이터를 순서대로 쌓아올린 모습을 생각하면 된다. 흔히 LIFO (Last In First Out)라고 표현하며 말 그대로 제일 마지막에 입력한 데이터가 제일 먼저 꺼내진다. 자바스크립트의 Array 자바스크립트의 내장 자료구조 중 하나인 배열을 이용하면 스택을 매우 쉽게 구현할 수 있다. const arr: string[] = []; arr.push("a"); arr.push("b"); arr.push("c"); arr.push("d"); console.log(arr.pop()); // d console.log(arr.pop()); // c console.log(arr.pop()); // b console.log(arr.pop()); // a Array 메서드 중 pus..

parameter, argument 정의 parameter 파라미터는 매개변수로 함수에 넘겨줄 변수를 정의할 때 사용된다. argument argument는 인자로 함수가 호출될 때 넘기는 변수의 실제 값이다. 예시 const add = (a, b) => { return a + b; }; 위 함수는 매개변수 a,b를 사용하여 덧셈연산을 수행하여 리턴하는 함수이다. console.log(add(1, 2)); // 3 위 코드에서 add함수에 인자 1,2를 전달했다. 이는 매개변수 a에 인자 1을 전달했고, 매개변수 b에 인자 2를 전달하여 1+2=3을 연산한 것이다. 즉 매개변수(parameter)와 인자(argument)는 함수에서 사용되는 개념으로 매개변수는 변수이고, 인자는 각 변수에 할당 할 값이라..

호이스팅이란? 호이스팅이란 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어올려진것 같은 현상을 말합니다. 호이스팅이 발생하는 이유는 자바스크립트 엔진은 코드를 실행하기전 실행컨텍스트가 생성되는데 이 실행컨텍스트는 코드를 원활하게 실행될 수 있도록 환경을 만들어주는 역할입니다. 실행컨텍스트 실행 컨텍스트는 생성단계와 실행단계 두가지로 나눠볼수있습니다. 생성단계 선언문만 실행해서 환경레코드에 기록하는 단계입니다. 실행단계 선언문 외 나머지 코드를 순차적으로 실행하는 단계입니다. 실행 컨텍스트 스택 const x = 1; function foo() { const y = 2; function bar() { const z = 3; console.log(x + y + z); } bar(); }..

한번 정리를 했던 내용이지만 다시한번 상기시키고 스토리식으로 재정리하여 보다 강력하게 뇌리에 박아두고 싶어서 다시 작성하게 되었다. 동기와 비동기 동기적인 코드 실행은 순차적으로 실행되며, 이전 작업이 끝나야만 다음 작업을 수행하게 된다. const arr = [1, 2, 3, 4, 5]; console.log("Start"); arr.forEach(function(num) { console.log(num); }); console.log("End"); 결과는 아래와 같이 순서대로 나온다! Start 1 2 3 4 5 End 반면 비동기적인 코드 실행은 순차적으로 실행되지 않으며 비동기 함수를 호출하면 해당 함수가 완료되지 않았어도 다음 작업을 수행할 수 있게 된다. console.log("Start");..

타입스크립트 설치 후 tsconfig.json파일이 없다면 직접 설정해 주어야 한다. root위치에 tsconfig.json 파일을 직접 만든다. 그리고 아래와 같이 코드를 기입한다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. es5로 설정하면 es5버전 자바스크립트로 컴파일 해준다. 최신버전 자바스크립트로 컴파일하기를 원하면 esnext를 입력하면 된다. module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳이다. commonjs는 require 문법이다. ex2015, esnext는 import 문법을 ..

콜스택과 메모리힙 이란? 자바스크립트는 콜스택과 메모리 힙 이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 1. 콜스택(Call stack) 원시타입 데이터가 저장된다. 실행컨텍스트를 통해 변수 식별자 저장, 스코프체인 및 this 관리, 코드 실행 순서 관리 등을 수행한다. 2. 메모리힙(Memory heap) 참조타입 데이터가 저장된다. 콜스택과 메모리힙의 데이터 구조 1. 원시타입 데이터 (파란색 변수 a) 10이라는 값 자체는 원시타입이므로 콜스택에 저장된다. 변수 a에는 10이 저장된 콜스택 메모리의 주소값이 저장된다. 변수 식별자 a 자체는 콜스택 상의 실행컨텍스트의 렉시컬환경 이라는 곳에 저장된다. 2. 참조타입 데이터 (핑크색 변수 b, c, d) 배열, 객체, 함수 등은 참조..