ARABOJA ARABOJA

https://gist.github.com/bradtraversy/aab26d1e8983d9f8d79be1a9ca894ab4

템플릿 리터럴은 ES2015에 명세된 문법으로 표현식, 문자열 삽입, 태깅 등의 수행하는 문법입니다. 1. 기본 문법 기존 문법은 표현식 삽입법입니다. 기존 문법을 먼저 살펴보겠습니다. var a = 10; var b = 20; var userName = "홍길동"; var userStr = "안녕하세요." + userName + "님, 당신은 " + (a + b) + "살 입니다."; 익숙하고 직관적인 방법이지만 복잡해지면 가독성이 떨어지는 문제가 있었습니다. 이에 새롭게 나온 문법이 템플릿 리터럴입니다. const a = 10; const b = 20; const userName = "홍길동"; const userStr = `안녕하세요. ${userName}님, 당신은 ${a + b}살 입니다.`; ..

회사를 다니게 되서, 자세히 쓸 시간이 언제 날진 모르겠다. 은근히 방대한지라, 개념들의 리스트만 먼저 작성 리액트가 무엇인지에 대한 이해 (CRA 말고 스크립트로만 써보기) JSX에 대한 이해 (JSX 없이 가상돔 작성해보기) 바벨에 대한 이해 웹팩에 대한 이해 ES6+의 주요 문법 (화살표함수, 삼항연산자, 새로운 변수형, 강화된 함수, 비동기처리, 템플릿 리터럴, 제너레이터, 비구조화 등등...) props, state, 컴포넌트에 대한 이해 여러가지 css 작성법 ( Styled Component, Sass, css - module 등 ) 라우팅 ( 히스토리 API, react-router-dom 등 ) 컴포넌트 생명주기에 대한 이해 콘텍스트 API ref 속성값 기본적인 작성법 ( Contain..

1. 라우팅 exports 모듈로 프로젝트를 만들어 사용하면 페이지 렌더링 기능을 활용할 수 있습니다. express 프레임워크는 자체적으로 File System 모듈을 사용해 페이지를 제공하는 render() 메서드를 제공합니다. 간단한 예제로 render() 메서드를 어떻게 사용하는지 살펴보겠습니다. views 폴더에 tempPage.jade를 생성하고, 다음처럼 입력합니다. doctype html html head title = title body h1 #{title} p Node.js Programming is fun hr * jade파일은 jade라는 템플릿 엔진의 파일 형식입니다. ejs와 비슷한 역할을 하는 템플릿 엔진이라고 보시면 됩니다. 이제 app.js에 다음과 같은 코드를 삽입합니다...

express 프레임워크에 대해서 알아봅시다. express 프레임워크를 이용해 프로젝트를 진행할 때, 도움을 주는 전역 모듈 설치부터 시작하겠습니다. npm i -g express-generator (npm i = npm install 입니다.) 그 후, 이어서 express 프로젝트 명 형식으로 입력하여 express 프로젝트를 생성할 수 있습니다. express HelloExpress 저는 이 글들을 쓰면서 ex라는 폴더로 정리해왔기 때문에, ex12로 하겠습니다. express 명령어로 express 프로젝트를 만들면 다음과 같은 메시지가 나옵니다. 시키는 대로 입력해줍니다. 여기서 run the app은 말 그대로 express 프레임워크로 만들어진 프로젝트를 실행할 때 쓰는 명령어입니다. 모두..

mysql 모듈을 사용해서 실제 데이터베이스인 MySQL과 연결해 데이터를 핸들링 하는 방법을 알아보겠습니다. mysql에 대한 기본 구문은 안다고 가정하겠습니다. 사실 저도 다 모르는데 필요할때 '뭐드라' 하면서 검색해보면서 씁니다. 뭐든 DB를 배우셨으면 됩니다. mysql 모듈을 설치해줍시다. npm install --save mysql 이제 시작해봅시다. 1. MySQL 모듈 const mysql = require('mysql') mysql에서 주로 사용하는 메서드로 createConnection(options) 이 있습니다. 데이터베이스에 접속하는 메서드입니다. options 자리에 입력해야하는 속성이 몇 있습니다. 그 중 user와 password는 필수입니다. 아래 표에서 options 자리..

1. RESTful 이 무슨 뜻인가요? - REST라는 규정을 준수하며 개발된 웹 서비스를 말합니다. 2. REST 규정은 뭔가요? - (Representational State Transfer)의 약자입니다. 정말 다양한 규정들이 있습니다만 주 목적은 '일관된 웹 서비스 인터페이스 설계' 입니다. 모든 규정을 정리하기는 너무 길고, 저도 전부 알지는 못합니다. 잘 설명된 글이 있어서 링크로 대체하겠습니다. https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html [Network] REST란? REST API란? RESTful이란? - Heee's Development Blog Step by step goes a long way. gmlwjd9405...

바로 이어서 주요 미들웨어 몇가지를 더 소개하겠습니다. 1. body parser 미들웨어 body parser 미들웨어는 post요청 데이터를 추출하는 미들웨어입니다. 설치를 해야 사용할 수 있는 미들웨어입니다. npm install body-parser body parser를 이용하여 간단한 로그인을 구현해보겠습니다. index.html 입니다. form 태그의 method가 post입니다. Login ID PW index.js 입니다. 소스가 조금 길지만 읽어보시면 이해가 되실거라고 생각합니다. const express = require('express') const fs = require('fs') const cookieParser = require('cookie-parser') const bod..