javascript

React props와 state 알아보기 React에서 props와 state는 데이터를 다루는 개념입니다. 둘 다 JavaScript 객체이고 렌더링에 영향을 줍니다. props는 단방향 데이터 흐름의 리액트에서 상위에서 하위로의 데이터 전달을 위해 사용하고, state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미합니다. 좀 더 간단하게 설명하면 props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 정도로 볼 수 있습니다. 1. props props(properties)는 컴포넌트에 값을 전달할 때 사용합니다. 다음과 같이 App.js, Component.js를 만들고 실행해보면 Component.js에 전달된 props를 확인할 수 있습니다. import React fr..

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..

JavaScript 이벤트 전파와 중단하기 JavaScript의 이벤트 전파와 중단 방법에 대해 알아보겠습니다. 1. Event 전파 브라우저에서 요소에 대한 event가 발생하면 해당 요소에 할당된 handler가 동작하게 되는데, 이 때 handler가 동작하면서 다음과 같이 Bubbling과 Capturing이 발생하게 됩니다. 1.1. Bubbling bubbling은 특정 요소에서 event가 발생했을 때 상위 요소로 event가 전파되는 것을 의미합니다. click 위의 코드를 실행하고 을 클릭하면 다음과 같이 콘솔 로그가 출력됩니다. 브라우저에서 event bubbling이 발생하면 최상위 요소인 document 객체에 도달할 때까지 상위로 이벤트가 전파됩니다. 이벤트가 전파되는 것을 확인하..

Node.js + MySQL CRUD API 구현하기 Node.js, Express, Sequelize를 이용하여 MySQL CRUD RESTful API를 구성하는 방법에 대해 알아보겠습니다. Sequelize는 MySQL, Postgres, SQLite, MS-SQL Server 등의 데이터베이스를 지원하는 promise 기반의 Node.js ORM(Object Relational Mapping)입니다. transaction, eager & lazy loading, relation, read replication 등의 다양한 기능을 지원합니다. 구현 환경은 다음의 버전을 기준으로 구성하였습니다. Node.js v12.13.1 MySQL v5.7.3 express v4.17.1 sequelize v6...

Node.js + MongoDB CRUD API 구현하기 Node.js, Express, Mongoose를 이용하여 MongoDB CRUD RESTful API를 구성하는 방법에 대해 알아보겠습니다. Mongoose는 MongoDB를 대상으로 만들어진 promise 기반의 Node.js ODM(Object Data Mapping)이며, 이것은 Java 기반의 Hibernate, iBatis와 같은 ORM(Object Relational Mapping)과 유사한 개념입니다. built-in 쿼리를 통해 간편한 CRUD 구성이 가능하며 validation, type casting 등의 기능을 제공합니다. 또한 Express와 함께 사용하면 MVC 구현이 가능합니다. 구현 환경은 다음의 버전을 기준으로 구성하..

JavaScript 배열 메서드 JavaScript 배열에서는 다양한 빌트인 메서드를 제공합니다. 배열의 메서드는 원본 배열을 변경하는 메서드(Mutator Method)와 새로운 배열을 생성하는 메서드(Accessor Method)가 있는데, 원본 배열을 변경하지 않는 메서드의 사용이 권장됩니다. 배열의 메서드 중에서 사용 빈도가 높은 메서드들을 정리하였습니다. 1. 정적 메서드 (Static Method) Array() 생성자 함수에서 제공하는 정적 메서드입니다. 1.1. Array.isArray() isArray() 메서드는 전달된 파라미터의 배열 여부를 판별하여 true/false를 반환합니다. console.log(Array.isArray([])); // true console.log(Array..

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의 값이 아닌 객체를 할당한 경우엔 값의 변경이 ..