1. sequelize 설치 npm install sequelize path로 sequelize, path 설치 sequelize는 node.js 기반의 ORM 쿼리를 날려서 데이터베이스에 접근하는 것이 아니고 체계적이며 깔끔하고, 생산적으로 DB관리를 가능하게 해준다. 2. Models 폴더 생성 백엔드에 DB에 추가할 테이블들의 정보를 서버에 전달해주는 models 폴더 생성 여기에 작성하는 js 파일들은 마치 장고의 모델처럼 서버와 연동되면서 테이블 역할을 한다 서버가 이 modles 디렉토리를 읽기 위해 디렉토리의 테이블 js 파일들을 관리하고 연결하는 index.js 파일이 필요 models 안에 index.js 파일을 생성하고 코드 작성 'use strict'; const path = requ..
1. MySQL 설치 반드시 mysql msi installer를 다운받아 설치 mysql workbench를 옵션으로 다운받아야 편하다 설정은 찾아보면 나오니 생략하고 https://qa-testing.tistory.com/413 [데이터베이스 이론] MySQL 설치(Window 버전) 목차 MySQL 설치(Windows 사용자) MySQL을 컴퓨터에 설치해보겠습니다. MySQL에는 여러 가지 버전이 있습니다. 우리는 이 중에서도 무료로 사용할 수 있는 Community 버전의 MySQL을 설치할 겁니다. 아래 내 qa-testing.tistory.com 2. database 확인 mysql workbench로 들어가서 database 들어가준다. database - connect to database..
1. 서버와 클라이언트 연동 서버와 클라이언트 연동을 위해 Webpack을 기본적으로 사용함 Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 만들어주는 역할 npm run eject 실행 y를 누르고 계속 진행 만약 다음과 같이 "Remove untracked files, stash or commit any changes, and try again" 에러가 난다면.. 전체 commit후에 다시 진행 성공적으로 수행했다면, config와 scripts 폴더가 나온다 그리고 webpack.config.dev.js 파일을 찾아서 코드를 수정 혹시나 없다면.. 인터넷에서 찾아봐서 다운받기 그리고 plugins:를 검색해서, 바로 위에 다음과 같이 devServer~ 코드 추가 클라이언트가 ..
1. 프로젝트 시작 $npx create-react-app my-app으로 리액트 프로젝트 생성 npm start로 프로젝트 시작해서 확인해보기 2. server.js 생성 front와 back을 구분하고, back 부분에 server.js 파일을 생성 3. express 모듈 설치 npm install express 그리고 sever.js에 express 모듈을 불러오고, app이라는 변수에 express를 담는다. //backend/server.js const express = require('express'); const app = express(); 4. 포트 할당 포트는 해당 서버가 가지고 있는, 접속할 수 있게 해주는 주소 반드시 해당 서버에 적용된 포트로 접근해야만 올바르게 접속 가능 0~6..
1. CSS에 대해 웹개발에서 스타일링을 위해 대표적으로 사용하는 것이 CSS CSS는 Cascading Style Sheets의 약자, 스타일링을 위한 일종의 언어 cascading은 계단식이라는 뜻으로, 여러가지 스타일이 정의되어 있는데, 한번에 여러 스타일이 적용될 경우에 스타일 충돌을 막기 위해 계단식으로 스타일이 적용되는 규칙이 있다. 하나의 엘리먼트가 여러개의 스타일 규칙을 만족하면, 해당 스타일을 마치 계단을 한칸씩 내려가는 것처럼 우선순위에 따라 하나씩 적용하게 된다. 결과적으로 하나의 스타일이 여러개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러개의 스타일이 적용될 수 있다. 엘리먼트에 스타일이 적용되는 규칙을 selector라고 부른다. 스타일을 어떤 엘리먼트에 적용할지를 선택..
1. 컨텍스트란 무엇인가 일반적인 리액트 앱에서 데이터가 컴포넌트의 props를 통해 부모에게 자식으로 단방향 전달되었다 하지만 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우, 기존 방식으로는 코드가 너무 복잡해지고 사용하기에 불편함이 많았다. 이런 과정에서 나온 것이 바로 컨텍스트(context) 컨텍스트는 리액트 컴포넌트들 사이에서 데이터를 기존의 props를 통해 전달하는 방식 대신에 컴포넌트 트리(component tree)를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공한다 이를 통해 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있다 위 그림은 props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 일반적인 방식 하지만 이 방식에서는 여러 컴포넌트에 걸쳐 자주 사용되는 데이..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
