4. Node.js | React.js (18) 썸네일형 리스트형 5/17(수) IT K-DT(54일차) / twitter 예제(6) 11. 배포 기능 실습 지금까지 refactoring한 twitter 기능의 예제를 Client단, Server단으로 나누어 hosting을 해 볼 예정. Server단은 클라우드타입을, Client단은 netlify를 통해 hosting할 예정. 11-1. Server단 배포 사용할 배포 플랫폼: 클라우드타입 (https://cloudtype.io/) 모두의 플랫폼팀, 클라우드타입 클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다. cloudtype.io 메인화면으로, 로그인이 필요함. Github에 이미 push해둔 Server단을 (별도의 repository를 생성하여 미리 push해둠) MariaDB라는 관계형데이터베이스 관리서비스를 이용.. 5/11(목) IT K-DT(49일차) / twitter 예제(5) 10. sequelize 기능 실습 'sequelize' 라이브러리 설치 npm i sequelize C:\yjcho\Node.js\Project\Server\db\database.js 경로에 해당 내용 추가/수정. import {config} from '../config.js'; import SQ from 'sequelize'; const {host, user, database, password } = config.db; export const sequelize = new SQ.Sequelize(database, user, password, { host, dialect: 'mysql', logging: false, // log를 남기지 않겠다는 의미. }) C:\yjcho\Node.js\Project\.. 4/22(토) IT K-DT(-) / 6. Component와 Props~10.리스트와key 6. Component와 Props 6-1. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것. function Welcome(props) { return Hello, {props.name}; } 이 함수는 “props” (속성을 나타내는 데이터) 객체인자를 받은 후 React 엘리먼트를 반환함. → 유효한 React 컴포넌트임. 이러한 컴포넌트는 'JavaScript 함수'이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭. ES6 class를 사용하여 컴포넌트를 정의할 수도 있음. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } Rea.. 5/11(목) IT K-DT(49일차) / 31.sequelize 31. sequelize Node.js에서 사용되는 ORM (Object-Relational Mapping) 라이브러리. Sequelize는 MySQL, PostgreSQL, SQLite, MSSQL과 같은 다양한 관계형 DB 시스템과 상호 작용할 수 있도록 설계됨. Sequelize는 개발자가 JavaScript를 사용하여 DB와 상호 작용할 수 있도록 도와줌. Sequelize를 사용하면 DB의 테이블/열을 JavaScript 객체와 속성으로 매핑하고, 객체를 사용하여 데이터를 생성, 조회, 수정, 삭제할 수 있음. Sequelize의 주요 기능: 1) 모델 정의: DB 테이블이 JavaScript 클래스로 정의. 각 클래스는 테이블의 구조, 열, 관계 등을 정의하는데 사용됨. 2) DB 마이그레이션.. 5/10(수) IT K-DT(48일차) / twitter 예제(4) 9. SQL 9-1. MySQL과의 상호작용 MySQL을 통해 node.js에 DB를 연동하는 작업 실행. 1. 스키마 생성 Create Sechema로 스키마를 새롭게 생성. Name을 'Dwitter'로 지어주고, 우측하단의 Apply 클릭 후 계속 진행후 생성. 2. 테이블 생성 Create Tables로 테이블을 새롭게 생성. 아래의 'users' 테이블, 'tweets' 테이블 내용을 모두 채운 후 Apply 클릭. foriegn key 설정 후 apply 클릭 3. 코드 작성 server 폴더 內 mysql과 nodejs의 연동에 필요한 라이브러리 설치 npm i mysql2 mysql2: Node.js를 사용하여 MySQL 데이터베이스에 연결하고 쿼리를 실행하는 데 사용되는 MySQL 클라이.. 5/9(화) IT K-DT(47일차) / twitter 예제(3) 7. dotenv 기능 실습 환경 변수를 관리하는 데 사용되는 모듈. '보안적인 이유'로 애플리케이션에서 사용되는 중요한 정보를 환경 변수로 저장하고 dotenv를 사용. → 애플리케이션에서 이러한 환경 변수에 액세스할 수 있게 함. server 폴더에 dotenv 모듈 설치 npm i dotenv C:\yjcho\Node.js\Project\Client\src\index.js const baseURL = process.env.REACT_APP_BASE_URL; 코드로 dotenv를 불러올 수 있음. → C:\yjcho\Node.js\Project\Client\.env 경로의 값을 읽어오기 위함. C:\yjcho\Node.js\Project\Server\config.js 파일 생성 후 아래의 내용 추가... 5/8(월) IT K-DT(46일차) / twitter 예제(2) 6. auth 기능 실습 6-1. GET, POST 기능에 사용자 인증 기능 추가 Server 폴더 內 controller, data, router, middleware 각 폴더에 'auth.js' 파일 생성 C:\yjcho\Node.js\Project\Server\controller\auth.js 경로에 해당 내용 추가/수정. import jwt from 'jsonwebtoken'; import bcrypt from 'bcrypt' import * as userRepository from '../data/auth.js'; const jwtSecretKey = 'Eh$nZnt8Qz&IUE*Tb3cV90wC43Ea$6T0'; // 임의의 32bit의 비밀키를 가져옴. const jwtExpiresInDay.. 5/3(수) IT K-DT(44일차) / 29.bcrypt~30.jwt 29. bcrypt 비밀번호 해싱 알고리즘 중 하나로, 보안적으로 안전한 방법으로 암호화된 비밀번호를 저장하는 데 사용됨. 단방향 해시 함수의 일종으로, 입력된 문자열을 고정 길이의 임의의 문자열로 변환함. 이 때, 변환된 값은 원래 입력값을 찾아내는 것이 거의 불가능하도록 설계되어 있음. 기존의 일반적인 해시 함수와 달리, 랜덤 솔트(salt) 값을 사용하여 강력한 보안성을 제공함. 또한 해시 함수의 작업량을 조절할 수 있는 파라미터를 제공하므로, 해시 함수의 작업량이 많아질수록 더욱 안전한 해시값을 생성할 수 있음. 이러한 특징들로 인해 많은 웹 사이트와 애플리케이션에서 사용되는 중요한 보안 요소 중 하나임. 예) password 'abcd1234'에 bcrypt를 이용하여 10번의 알고리즘을 실행 .. 이전 1 2 3 다음
