[Node] Node.js 스프레드 연산자(Spread Operator)

1. 스프레드 연산자(Spread Operator) ES6에서는 "..." 와 같이 다소 특이한 형태의 문법이 추가됨 점 3개가 연달아 붙어있는 이 표시를 스프레드 연산자 혹은 전개 구문이라 함 배열, 함수, 객체 등에서 주로 사용되며, 편리한 기능을 제공한다. 배열, 함수, 객체 등의 연결, 복사 등의 용도로 꽤 활용도가 높은 편이다. 스프레드 연산자를 사용하는 것에 대표적으로 배열 병합, 배열 복사, 구조 분해 이 세가지가 있다. - 배열 병합(Array Concatenation) - 배열 복사(Copying Arrays) - 구조 분해(Destructing) 2. 기본 문법 // Array var arr1 = [1, 2, 3, 4, 5]; var arr2 = [...arr1, 6, 7, 8] con..

[Node] Node 내장 객체, console, timer 객체

Node 내장 객체 : 노드에서 자주 사용되는 객체로 미리 만들어져 있는 객체를 말함 1. 기본적인 객체 global - global은 브라우저의 window와 같은 전역 객체이다. - 따라서 모든 파일에서 접근 가능한 객체이고, global은 생략가능하다. - require, cosnole도 모두 global이 생략된 것이다. __filename - 현재 실행 중인 파일의 경로를 알려준다. - console.log(__filename) __dirname - 현재 실행 중인 폴더 경로를 알려준다. - console.log(__dirname) path - path 모듈은 파일 명을 얻거나 운영체제별 경로 구분자가 달라 생기는 문제를 쉽게 해결하기 위해 만들어졌다. - Windows: c:\Users\ano..

[Node] 모듈(module)

1. 모듈(module) - 연관된 코드들을 하나의 단위로 그룹화하여 관리하기 위한 개발 방법 - Javascript 객체 생성과 방법이 비슷하지만 객체는 내부에서 그대로 쓰는 것이 목적이라면 모듈은 그룹화를 시켜서 외부에서 재사용하는 것이 목적이라는 것에 차이점이 있다. 모듈 생성 // module.exports를 exp 변수에 넣는다. // 변수에 따로 넣는 이유는 밑에 처럼 새로운 값들을 추가하기 위해서 한다. // 하지만 상대적으로 한번에 그룹화하는 경우가 많다. const exp = module.exports = { add: function(a, b) { return a + b; }, sub: (a, b) => a - b } exp.mul = function(a, b) { return a * b..

[Node] RestAPI, URI 고려사항, 응답 상태 코드

1. RestAPI - Rest는 Represetational State Transfer이라는 용어의 약자로 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 발표 - 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미하며 자원의 표현과 상태(정보) 전달을 하는 것 - URI를 통해 자원을 명시하고, HTTP Method(GET, POST, DELETE, PUT...)를 통해 자원에 대한 행위(CRUD Operation)를 적용하고 자원을 JSON, XML, TEXT ... 들 여러 형태의 표현으로 나타내어 데이터를 주고 받는다 GET 해당 리소스를 조회(데이터를 가져오는 요청) POST 리소스를 조회하고 자세한 정보를 가져온다.(데이터 전달) PUT 해당 리소스를 ..

[Node] FrontEnd & BackEnd 연동

- FrontEnd는 React.js - BackEnd는 Node.js 먼저, 둘을 연동하기 위해서는 데이터를 주고 받기 위한 통신 라이브러리인 axios를 설치해야 한다. - npm install axios 그리고 FrontEnd(React.js) 쪽에 있는 package.json에 proxy를 추가해 줘야 한다. 이 proxy는 Front 쪽에서 axios로 요청하는 모든 것은 proxy에 적혀 있는 포트로 연결해서 요청하고 데이터를 가져온다. "proxy" : "http://localhost:8080" 이처럼 적혀 있다면 Front에서 3000포트로 연결하더라고 Back의 8080 포트에 접속하는 것이다. axios.get("주소").then(res => {}).catch(error => {}); ..

[Node] Node.js 초기 설치, 설정, 용어, 동작

1. npm init(package.json 설정) - 먼저, npm init을 터미널에 입력을 해 package.json을 설정한다. 2. express 설치 - npm install express -save 을 이용해 express 설치 3. 실제 사용할 server.js 작성 // node_modules의 express 패키지를 가져온다. var express = require("express"); // app이라는 변수에 express 함수의 값을 저장한다. var app = express(); // 환경변수(process.env.PORT)에서 port를 가져온다. 그러나 환경변수 값이 없으면 5050 포트를 지정한다. var port = app.listen(process.env.PORT || 5..

[Node] BackEnd 개요 및 Node.js

1. BackEnd ▷ BackEnd 란? - FrontEnd를 클라이언트라 하고 BackEnd를 서버라고도 함 - BackEnd는 웹 애플리케이션의 사용자가 보지 못하는 영역인 원격인 프로그램 및 데이터베이스를 관리하는 기술 - 일반적으로 BackEnd라고 하며 데이터베이스와 연동하여 동작하는 것을 말함 ▷ BackEnd 대표적인 개발 언어 Java - 대표적인 객체지향언어(OOP)로 가장 인기있는 서버 개발 언어 - 웹 개발 이외에도 모바일, 임베디드 등 다양한 분야에 사용 Python - 파이썬은 개발자들이 시스템을 효율적으로 통합하고, 빠르게 작업할 수 있게 해주는 프로그래밍 언어로 많은 사용자에게 선택받고 있는 추세 - 비교적 자연어와 유사하기 때문에 개발을 처음 접하는 사람도 용이하게 이용가능..

[React] Project 관련 내용

1. 반복 태그 -> 컴포넌트 - input처럼 반복적인 써야 되는 태그들을 그냥 사용하게 되면 내용이 길어지고 가독성이 떨어진다. - 이럴 때 그 태그들을 컴포넌트로 따로 빼서 import 해주는 식으로 하면 더 간단해지게 된다. - 그리고 그 태그에 관련된 속성들을 props로 전달시켜줘서 속성들도 또한 맞게 사용하면 된다. - 밑에 사진처럼 위치에 따라 만든 컴포넌트에 내용들에 더해서 더 필요할 수도 있고 아닐 수도 있다. - 이럴 때는 삼항연산자를 이용해서 넘어온 props가 있냐 없냐로 나눠서 필요한 태그를 넣어줄지 아니면 그냥 빈값을 넣어줄지 하면 된다. 2. 반복 태그 -> 컴포넌트 - onClick 사용 - 반복적인 태그에서 onClick을 통해서 클릭한 것에 표시를 해야 할 때가 있다. ..

[React] TailwindCSS

1. TailwindCSS - 외부 라이브러리를 통해 보다 쉽고 빠르게 컴포넌트들을 디자인 하는 방법 - 미리 정해진 스타일의 클래스명을 통해 빠르게 디자인이 가능하다. - 아래 사이트에 들어가면 다양한 스타일에 관한 클래스의 정보가 들어있다. - 아래 사이트에서 기능들을 확인할 수 있기에 여기서 기능은 따로 설명하지 않겠다. https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 2. TailwindCSS를 사용하기 위한 준비 관련 패키지 설치 - VS code에서 사..

[React] SCSS, styled-components

* 가장 기본적인 방법(원시적인 스타일시트 파일을 이용한 방법) CSS - default.css SCSS - default.scss * 리액트에서 제공하는 스타일시트 코딩 방법(비추천) styled-components * 생산성 향상을 위해 외부 라이브러리를 이용한 방법(추천) tailwindcss 기타 등등... * 가장 추천하는 방법 = 외부 라이브러리 + CSS/SCSS를 병행 이용 * SCSS는 SASS의 버전으로 나온 언어로, SASS 기능을 지원하면서 CSS와 거의 같은 문법으로 사용된다는 점에서 많이 사용되고 있다. * SASS보다 SCSS가 뒤에 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장하고 있다. * 따라서 ..