본문 바로가기

JavaScript

(12)

[ TypeScript ] 협업을 위한 interface 에 힌트 주석 달기. ts로 프로젝트를 개발 중에 interface에 추가적인 설명이 있으면 좋겠다~! 라는 생각이 들어서 평소에는 method나 method parameter에 대한 설명을 달아줄 때 자주 사용하던 JSDoc을 이용하여 interface 설명을 추가해 보았다. 먼저 JSDoc에 대해 설명하자면, JSDoc은 자바스크립트용 API 문서 생성기로 자바스크립트 애플리케이션 또는 라이브러리의 API를 문서화하는 목적으로 사용한다. module, namespaces, classes, methods, method parameters 등과 같은 항목들을 문서화할 수 있다. JSDoc은 코드 자체와 함께 소스코드에 직접 문서 주석을 추가하는 기능을 가지고있다. JSDoc 주석은 일반적으로 문서화하려는 코드 바로 앞에 위치..

[ WEB ] CSR과 SSR 비교하기 CSR(client-side-rendering)과 SSR(server-side-rendering)은 웹 페이지와 콘텐츠를 사용자에게 렌더링하는 기술이다. SSR과 CSR은 렌더링 과정이 일어나는 위치에서 차이가 있다. CSR (Client-Side-Rendering) CSR은 클라이언트 측에서 렌더링을 하는 기술로 사용자의 웹 브라우저의 JavaScript를 통해 웹 페이지를 렌더링한다. 서버에서 최소한의 HTML 파일을 보내고, 클라이언트 측 JavaScript 코드가 콘텐츠를 가져와 렌더링한다. 이 경우 사용자에게 보다 더 인터렉티브하고 동적인 사용자 경험을 제공할 수 있고 전체 페이지를 다시 로드하지 않고도 콘텐츠를 업데이트할 수 있는 기능이 있다. 하지만 초기 페이지 로딩 시간이 오래 걸리는 경우..

[ JavaScript / Promise ] 자바스크립트의 Promise에 대하여 자바스크립트는 싱글 스레드 방식으로 동작하는 언어이기 때문에 동기 방식으로 태스크를 처리한다. 그래서 비동기 방식으로 처리를 하려면 과거에는 주로 콜백 패턴을 사용했는데, 콜백 패턴은 콜백 헬로 인해 가독성이 좋지 않고 에러 처리 및 여러 개의 비동기 처리를 한번에 하기도 힘들다는 단점이 있기 때문에 ES6에서 도입된 Promise를 이용하면 이러한 단점들을 보완하며 비동기 처리를 가능하게 한다. 비동기 함수란? 작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술로 작업이 완료되면 프로그램이 결과를 제공한다. 이 때문에 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결괴를 외부로 반환하거나 상위 스코프의..

[ React / Redux ] Redux 상태 관리 개념정리. 기존에 내가 React 프로젝트에 즐겨 사용하던 상태 관리 라이브러리는 recoil 이었다. 하지만 새로운 회사에서는 Mobx와 Redux를 사용하고 있었다. 그래서 Redux 공부를 위해 공식 홈페이지를 보며 개념 정리를 해보려고 한다. Redux 기본 개념 Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 한다. 일관적으로 동작하고 서로 다른 환경 (서버, 클라이언트, 네이티브)에서 작동하고, 테스트 하기 쉬운 앱을 만들도록 도와주며 Redux는 React뿐만아니라 다른 UI 라이브러리와 함께 사용할 수 있으며, 매우 작은 용랑(의존 라이브러리 포함 2KB)으로 여러 기능들을 편리하게 사용할 수 있다. Redux는 자바스크립트 SPA에서 갖추어야 할 요건들이 점점 복잡해짐에 따라 많은..

[ JavaScript ] undefined와 null의 차이에 대해 알아보기. 자바스크립트에서 '빈'값을 의미하는 비슷한 원시 값이 존재하는데 바로 null과 undefined 이다. 1. undefined ES6기준 7개의 데이터 타입중 하나인 undefined는 var 키워드를 통해 선언을 하면 선언과 동시에 자바스크립트 엔진에 의해 undefined로 초기화 되기 때문에, 할당문 이전에 변수를 참조하려고 하면 undefined가 반환된다. ( let 키워드와 const 키워드는 undefined로 초기화되지 않음. ) var user; console.log(user); // undefined undefined의 값은 undefined가 유일하며 개발자가 의도적으로 준 빈 값이 아니라, 자바스크립트 엔진에 의해 undefined로 초기화된 값이다. console로 찍었을 때 u..

[ JavaScript ] var, let, const 파헤치기. 자바스크립트에서 변수를 선언할 때 사용하는 키워드는 var, let, const 이렇게 총 3가지가 존재한다. 1. var var 키워드는 ES6 이전( let, const가 나오기 이전 )에 변수를 선언할 때 사용하던 키워드였다. var 키워드를 사용하여 변수를 선언하면 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언"단계와 "초기화"단계를 거치게 된다. 선언 단계에서는 스코프에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알리고 그 즉시 초기화 단계에서 undefined로 변수를 초기화한다. var 키워드는 변수 블록을 고려하지 않고, 현재 함수(var 키워드를 선언한 함수)또는 전역 스코프 어디에서나 접근할 수 있는 변수를 선언한다. // 변수 a에 대해 선언. var a; 이렇..

[ JavaScript / Error ] 자바스크립트의 Error 객체 자바스크립트에서 런타임 오류가 발생하면 Error 객체를 던져주고 개발자들은 이를 통해 에러 처리를 해주고 디버깅을 할 수 있다. Error생성자 함수를 통해 에러 객체를 생성할 수 있다. Error 생성자 함수를 통해 생성된 에러 객체는 message 프로퍼티(Error 생성자 함수에 인수로 전달된 에러 메세지)와 stack 프로퍼티(에러를 발생시킨 콜스택의 호출 정보를 나타내는 문자열)를 갖는다. 아래의 표를 통해 자바스크립트의 표준 내장 오류 유형에 대해 알아보자. 유형(생성자 함수) 인스턴스 EvalError 전역 함수 eval()에서 발생하는 에러 객체 RangeError 숫자 변수나 매개변수가 유효 범위를 벗어났을 때 발생하는 에러 객체 ReferenceError 잘못된 참조에 대해 발생하는 ..

[ Javascript ] 원시 값과 객체의 차이에 대해 알아보기. 원시 값 (Primitive) MDN - 원시 값 설명 원시 값 - 용어 사전 | MDN JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값에는 7종류, string, number (en-US), bigint (en-US), boolean, undefined, symbol, 그리고 null이 developer.mozilla.org 자바스크립트에서 원시 값은 객체가 아니고, 메서드를 가지지 않는 데이터로 아래와 같이 총 7가지의 종류가 존재한다. - string - number - bigint - boolean - undefined - symbol - null 원시 타입의 값은 변경 불가능한 값으로, 변수에 원시 값을 재할..

이전 1 2 다음

티스토리툴바