꼬박로그 꼬박로그

데이터 베이스(DataBase)란? 데이터 베이스는 통합하여 관리되는 데이터의 집합을 의미합니다. 중복된 데이터를 없애고 데이터를 구조화하여, 효율적으로 데이터를 다룰 수 있도록 관리합니다. 데이터 베이스를 관리하는 시스템을 DBMS(Database Management System)라고 부릅니다. SQL(Structed Query Language) SQL은 데이터 베이스에서 데이터를 정의, 조작, 제어하기 위해 사용하는 언어입니다. DDL (Data Definition Language) : 데이터 베이스나 데이블을 생성, 삭제하거나 그 구조를 변경하기 위한 명령어(CREATE, ALTER, DROP 등) DML (Data Manipulation Language): 데이터 베이스에 저장된 데이터를 처리하거..

React Router란? React Router는 리액트 애플리케이션에서 SPA의 라우팅 문제를 해결하기 위해서 표준처럼 사용되고 있는 라이브러리입니다 설치하기 npm을 사용해서 React 어플리케이션에서 react-router-dom을 설치합니다. $ npm install react-router-dom React Router 주요 컴포넌트 Link Link 컴포넌트는 HTML의 태그와 비슷하게 동작하는 컴포넌트입니다. 태그는 href 속성으로 경로를 지정하였는데, Link 컴포넌트는 'to' props를 통하여 이동하는 경로를 지정합니다. Home about Link 컴포넌트를 선언하게 되면 위와 같은 링크가 생기고 클릭할 시 to props에 선언된 경로로 이동하게 됩니다. Route Route 컴..

Redux란? 자바스크립트 생태계에서 가장 많이 사용되고 있는 상태(state) 관리 라이브러리입니다. 컴포넌트 상태 관리 로직을 다른 파일로 분리하여 더욱 효율적으로 관리할 수 있고, 글로벌 상태 관리에도 좋다고 합니다. 리덕스는 리액트에서 사용하기 위해 만들어진 라이브러리 이긴 하지만 일반 JavaScript 환경이나 Angular와 같은 다른 환경에서도 사용이 가능합니다. Redux를 왜 사용할까? 리액트를 사용하여 어플리케이션을 만들 때, 기본적으로 보통 하나의 루트 컴포넌트(App.js)에서 상태가 관리되었습니다. 상태가 자식들에게 전달이 되기 위해서는 props Drilling 패턴이 발생하게 되는데 이러한 패턴은 어플리케이션의 규모가 커졌을 때 컴포넌트의 개수, 데이터가 늘어나게 되면 코드가..

React Hook Hook은 리액트 v16.8부터 도입된 기능으로, 클래스 컴포넌트가 아닌 함수 컴포넌트에서도 State와 Lifecycle 메소드를 사용할 수 있도록 해준다. State useState를 사용하여 state를 함수 컴포넌트 안에서 사용할 수 있다. import React, { useState } from 'react'; function Example() { // ... } state 선언하기 클래스 컴포넌트는 constructor안에서 this.state를 {count : 0}이런 식으로 선언하였지만 class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } ..

List and Key const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 자바스크립트에서 map() 함수를 이용하여 numbers 배열의 값을 모두 두배로 만든 후 새로운 배열을 반환하였다. 새로운 배열에는 [2, 4, 6, 8, 10]이 담기게 되는데, React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일하다. 여러 개의 컴포넌트 렌더링 하기 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); 엘리먼트의 모음을 만들고 중괄호 {}를 이용하여 J..

State and Lifecycle State와 Lifecycle은 class컴포넌트에서만 사용이 가능했으나, 리액트 최신 버전에서는 함수 컴포넌트에서도 리액트 훅(Hook)을 사용하여 State와 Lifecycle 사용이 가능하다고 한다. 하지만 아직 훅을 배우지 않아서 class 컴포넌트에서 밖에 다루지 못할 것 같다. State란? State는 props와 같이 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고있는 객체이다. props는 컴포넌트에 전달이 되는 반면, state는 컴포넌트안에서 관리된다는 차이가 있다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new..

리액트(React)란? 리액트는 페이스북에서 제공해주는 프런트엔드 라이브러리이다. 공식문서에는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리라고 나와있다. 새로운 React 앱 만들기 Node.js의 npm을 활용하여 리액트 프로젝트를 생성할 수 있다. npx create-react-app my-app cd my-app npm start JSX란? const element = Hello, world!; 위 코드는 element라는 변수에 HTML 태그를 할당해주고 있는데, 이 문법을 JSX라고 부르며, 자바스크립트의 문법 확장이다. JSX는 React 엘리먼트를 생성한다. 자바스크립트 내부에서 마크업 코드를 작성할 수 있게 해 준다 JSX에 표현식 사용하기 import React from..

Express란? Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다. 1. 설치하기 npm을 사용하여 express를 설치합니다. $ npm install express --save 2.Express 서버 생성하기 const express = require('express'); const app = express(); const server = app.listen(3000,function(){ console.log('Express server has stared on port 3000') }) 3. 라우팅 라우팅은 애플리케이션의 엔트 포인트(URI)의 정의, 클라이언트 요청의 메소드에 따라 응답하는 방식을 말합니..