SPA

React Redux 알아보기 React에서 많이 사용하는 상태 관리 라이브러리인 Redux에 대해 정리한 내용입니다. 1. Redux Redux는 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리입니다. 여러 개의 컴포넌트에서 같은 상태를 공유할 때도 손쉽게 상태를 변경하고 관리할 수 있습니다. 프로젝트의 규모가 커지면 서로 다른 컴포넌트를 오가며 props와 state를 관리하는 것이 복잡해지기 때문에 외부에 store를 두고 관리하는 방식입니다. 전역 상태만 관리하고자 한다면 Context API를 사용하는 것으로 충분하지만, 프로젝트 규모가 큰 경우엔 리덕스를 사용하여 효율성과 유지 보수성을 높여주는 것이 좋습니다. 또한 리덕스는 리액트에 종속되는 라이브러리가 아니기 때문에 Angula..
React JSX 알아보기 React JSX에 대해 정리한 내용입니다. 1. JSX JSX(JavaScript Syntax Extension)는 React에서 사용하는 JavaScript 확장 문법입니다. XML과 비슷하게 생겼으며 작성한 코드는 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태로 변환됩니다. JSX는 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높습니다. 또한 HTML 태그도 사용이 가능하고 내부에 컴포넌트도 작성이 가능하여 활용도가 높습니다. JSX의 기본적인 문법에 대해 알아보겠습니다. 1.1. 태그 감싸주기 다음과 같이 코드를 작성하고 실행하면 에러가 발생합니다. import React from 'react'; function App() { return ( Hell..
React 프로젝트 생성하기 React 프로젝트을 생성하고 실행하는 방법에 대해 정리한 내용입니다. 1. React React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React는 UI를 구축을 위해 Facebook에서 만든 효율적이고 유연한 JavaScript 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다. Component 단위의 코드 조각들을 이용한 UI 구성 함수형, 클래스형 component 단방향(uni-directional) 데이터 바인딩 및 props를 이용한 속성 전달 JSX (Javascript + HTML) Virtu..
Angular ngx-pagination 구현하기 Angular ngx-pagination을 이용하여 페이징을 구현하는 방법에 대해 알아보겠습니다. ngx-pagination은 페이징 처리를 위해 만들어진 Angular 라이브러리입니다. Angular5+ 이상에서 동작하며 보다 자세한 내용과 live demo는 아래 링크를 통해 확인할 수 있습니다. ngx-pagination Pagination for Angular www.npmjs.com angular-e1f9hq - StackBlitz ngx-pagination demo / bug reproduction starter. stackblitz.com 구현 환경은 다음의 버전을 기준으로 구성하였습니다. Node.js v12.13.1 MySQL v5.7.3..
JavaScript 배열 배열은 여러 개의 요소들을 순차적으로 나열한 자료구조입니다. JavaScript에서는 배열은 다루기 위한 유용한 메서드들을 제공합니다. 1. 배열의 특징 화살표 함수는 ES6에서 도입된 문법입니다. function 키워드를 사용하는 것보다 간결하고 항상 익명으로 동작합니다. 1.1. JavaScript의 배열 JavaScript의 배열은 우리가 일반적으로 알고있는 배열처럼 요소(element)라고 부르는 값을 가지며 배열의 요소는 위치를 나타내는 index를 가지고 있습니다. JavaScript에서 배열은 객체 타입으로 분류되지만, 배열은 값의 순서와 length 프로퍼티를 갖는 특징으로 인하여 일반 객체와 구분됩니다. const arr = ['macbook', 'iphone',..
JavaScript 상수와 리터럴 상수와 리터럴은 대부분의 언어에서 많이 사용하지만 분명한 차이가 있는 개념입니다. JavaScript를 기준으로 각각의 차이점에 대해 정리해봤습니다. 1. 상수 상수는 일종의 변수이며 변수처럼 값을 저장하기 위한 메모리 공간을 필요로 합니다. 일반적인 변수는 재할당을 통하여 값을 변경할 수 있지만 상수로 사용하는 변수에는 값의 재할당을 할 수 없다는 차이점이 있습니다. 상수는 상태 유지, 가독성, 유지보수의 편의성 등을 위해 사용하는 것이 좋습니다. JavaScript에서 상수는 const 키워드를 사용하여 선언합니다. const 키워드로 선언한 변수는 재할당을 할 수 없게 됩니다. 하지만 상수에 primitive type의 값이 아닌 객체를 할당한 경우엔 값의 변경이 ..
JavaScript 객체 JavaScript의 객체는 0개 이상의 프로퍼티(key, value) 또는 메서드로 구성된 집합체입니다. JavaScript는 객체 기반의 스크립트 언어이며 JavaScript의 거의 모든 것들이 객체로 구성되어 있습니다. 따라서 JavaScript에서 사용 가능한 모든 값은 프로퍼티 값으로 사용이 가능합니다. 프로퍼티 (property) key와 value로 구성되어 객체의 상태를 나타내는 값 메서드 (method) 프로퍼티의 value가 함수로 구성된 경우이며, 프로퍼티를 참조하고 조작할 수 있는 동작을 정의 또한 원시 타입(primitive type)은 하나의 값만 나타내는 변경 불가능한 값이지만, 객체 타입(object type)은 다양한 타입의 여러 값을 하나의 단위로..
JavaScript Math 객체 JavaScript의 Math 객체는 수학적인 연산을 위한 함수와 상수를 위한 프로퍼티와 메서드를 제공합니다. 빌트인 객체이며 생성자 함수가 아니기 때문에 프로퍼티와 메서드는 static으로 제공됩니다. 1. Math 객체의 Property 1.1. Math.PI Math 객체의 PI 프로퍼티는 원주율 값을 반환합니다. 1 2 3 4 // Math.PI const pi = Math.PI; console.log(pi); // 3.141592653589793 cs 2. Math 객체의 Method 2.1. abs() abs() 메서드는 파라미터로 전달된 숫자값의 절대값을 반환합니다. 반환되는 절대값은 0 또는 양수이며 그 외의 경우는 NaN으로 반환됩니다. 1 2 3 4 5..
JavaScript Moment.js 라이브러리 Moment.js 라이브러리는 날짜와 시간에 관련된 데이터의 파싱, 검증, 조작 등을 위해 만들어진 유용한 라이브러리입니다. 이전에 Date 객체를 이용하여 날짜와 시간에 관련된 연산을 할 때는 별도의 공통 함수를 만들어 사용해야 했지만, Moment.js를 사용하면 내장된 함수를 이용하여 간단하게 처리할 수 있습니다. https://momentjs.com/docs/ 1. Moment.js 라이브러리 사용하기 1.1. Node.js Node.js에서 Moment.js 라이브러리는 다음과 같이 사용합니다. 1 npm install moment cs 1 2 var moment = require('moment'); // require moment().format..
freestrokes
'SPA' 태그의 글 목록