전체 글 (29) 썸네일형 리스트형 ORM Object-Relational Mapping의 줄임말로써, mysql모듈을 사용할때보다 좀더 친숙한 코드형식(객체형식?)으로 작성할 수 있다. 먼저 sequelize모듈을 npm을 이용해 설치해야하며, 예시코드는 다음과 같다. const { Sequelize } = require('sequelize'); const db = new Sequelize('chat', 'root', '', { //차례대로 데이터베이스 이름, 유저이름, 비밀번호가 들어간다. host: 'localhost', dialect: 'mysql' // mysql, mariadb, postgres, mssql이들어갈 수있으며, }) // mysql의 경우는 mysql2모듈이 필요하다..? var users = db.define('user.. mysql module mysql module은 nodejs와 MySQL 연동을 위한 대표적인 모듈중 하나이다. 사전에 MySQL은 설치가 되어있어야 하며, mysql모듈은 npm을 통해 설치가 가능하다. $ npm install mysql 간단한 사용방법은 아래와 같다. const mysql = require('mysql'); const db = mysql.createConnection({ host: 'localhost', // host 이름 (생략가능?) user: 'root', // user이름 password: "", // mysql root의 비밀번호 port: 3000 // 포트이름 (생략가능?) database: "chat" // db.connect(); // mysql 데이터베이스와 연결을 활성화 db.query.. Promise 자바스크립트에서 동기적인 처리를 위해서는 아래 코드처럼 const printString = (string, callback) => { setTimeout( () => { console.log(string) callback() }, Math.floor(Math.random() * 100) + 1 ) } const printAll = () => { printString("A", () => { printString("B", () => { printString("C", () => {}) }) }) } 콜백을 이용하여 처리해주어야 했었다. 하지만 Promise라는 새로운 기능덕에 위의 코드를 const printString = (string) => { return new Promise((resolve, rejec.. 20.02.04 http 헤더의 Content-type과 accept에 관하여.. 클라이언트 측에서의 Accept: 이런 형식의 데이터를 받기를 원한다! Content-type : 이런 형식의 데이터를 보낼거다! 서버측의 Content-type: 이런형식의 데이터를 응답으로 줄거다! 새로 알게 된 문법 : let obj = { 'a': 1, 'b': 2, 'c': 3 } let obj2 = { 'c': 100, 'd': 200 } let result = { ...obj, ...obj2 } console.log(result) // {a: 1, b: 2, c: 100, d: 200} console.log(obj) // {'a': 1, 'b': 2, 'c': 3} console.log(obj2) // {'c': 100, 'd.. react-redux practice 1. react-redux를 사용하는 기본적인 index.js파일 세팅 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import reducer from './js/reducers' import { Provider } from 'react-redux' import { applyMiddleware, createStore } from 'redux'; import { logger } from 'redux-logger' // const store = createStore(reducer, applyMiddleware(logger)) // 디버깅에 유용한 logger를 사용하고 싶을 때 const store .. React-practice ● 리액트를 사용하여 유튜브 페이지 만들어보기 1. 터미널에서 npx create-react-app (원하는 파일이름) 을 입력하여 프로젝트를 생성한다. 원래는 프로젝트 구조나 연결들 하나하나를 모두 설정해줘야 하지만 create-react-app이라는 기본적인 구조와 연결을 모두 갖춰서 프로젝트를 생성하는 기능을 사용하는것! 2. 나에게 맞게 폴더 구성을 수정한다. 이때, import로 연결되어있는 주소값들도 같이 수정해주어야한다 3. 전체적으로 어떤 식으로 컴포넌트들이 구성될지 그림을 그려본다. 기본적으로 트리모양으로 종속관계를 나타내어 보고, 재사용 가능한 컴포넌트들을 표시해본다. 이때, state는 어디서 관리해야할지, 어떤 메소드들이 필요할지, 어떤것들을 props로 내려줘야할지 어느정도 생각해.. CORS 클라이언트측에서 서버로 simple requests(아래 링크 참고)에 해당하는 요청이 아닌 요청을 보내면 https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS HTTP 접근 제어 (CORS) cross-origin request의 예: https://domain-a.com에서 제공되는 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json를 요청. developer.mozilla.org CORS preflight 가 발생하게 된다. CORS preflight는 OPTION이라는 HTTP메소드로 서버측에 먼저 헤더의 내용들이 허가되는지를 요청한다. 서버측에서 허락.. HTTP http란 웹 상에서 클라이언트와 서버 간 통신을 위해 개발된 프로토콜(규약)을 의미한다. 클라이언트와 서버 사이에 요청과 응답(request & response)이 이루어지는 과정이기도 하다. 예를 들어, 클라이언트인 웹 브라우저가 http를 통하여 서버에 웹 페이지, 그림등의 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 사용자에게 전달한다. 그 결과, 이러한 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나게 된다. http는 주로 HTML 문서를 주고받는 데에 쓰이며, TCP와 UDP를 통해 이루어지며, 80번 포트를 사용한다. 한번에 한 요청만 수행하며, 그렇기 때문에 모든 요청은 서로 독립적이라 할 수 있다. 요청과 응답 모두 Header와 Body로 이루어져 있다. htt.. 이전 1 2 3 4 다음 목록 더보기