본문 바로가기

JavaScript

(8)
[React] 컴포넌트 1. 컴포넌트란?      - 리엑트에서 UI를 구성하는 재사용 가능한 고립된 코드의 파편 2. 컴포넌트 만들기      - 함수형, 클래스형 2가지 방법이 존재합니다 (본 글에서는 함수형을 사용합니다.)  1) 함수 정의 하기      - 함수 이름은 대문자로 시작해야 한다.      - 함수 이름이 컴포넌트의 이름이 된다.   2) 마크업 리턴 (JSX 방식)      - 함수에서 마크업(HTML)을 리턴하는 방식JSX 규칙1. 하나의 부모 태그로 감싸야 한다.2. 모든 태그가 닫혀 있어야 한다.3. 대부분 캐멀케이스를 사용한다. ※ React에서는 대부분의 코드베이스로 JSX를 사용한다.    3) 컴포넌트 사용하기      - 컴포넌트 이름을 일반 HTML 태그처럼 사용한다.   4) 컴포넌트 파..
[React] React 프로젝트 생성 1. 개발 환경NodeJSv22.14.0통합 개발 환경Visual Studio Code  1) NodeJS 설치      > 다운로드 페이지: https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org           > 원하는 버전 선택  →  [설치 프로그램] 다운로드       > 설치 프로그램을 통해 NodeJS 설치        > cmd를 통해 설치 확인 (node --version  →  설치한 버전이 출력)  2) VS Code 설치      > 다운로드 페이지: https://code.visualstud..
[Express.js] User CRUD 구현 (sequelize) 1. 구현할 기능 정의 기능 Method Url 회원가입 POST /user/register 로그인 POST /user/login 회원 정보 조회 (전체) GET /user 회원 정보 조회 (단일) GET /user/:id 회원 정보 수정 PUT /user/:id 삭제 DELETE /user/:id 2. Router 세팅 - user에 관한 기능들은 기본적으로 URL을 /user 로 분기처리 userRoute 구현 // routes/user.js const express = require("express"); const User = require("../models/user"); const router = express.Router(); // ** 회원가입 // POST /user/register rou..
[Express.js] 테이블간 관계 정의 (User - Board) 1. 테이블간 관계 2. Board.js 작성 - board 테이블에 해당하는 Board model 작성 - 1:N 관계중 N이기 때문에 belongsTo 사용 // models/board.js const Sequelize = require("sequelize"); module.exports = class Board extends Sequelize.Model { static init(sequelize) { return super.init( { title: { type: Sequelize.STRING(40), allowNull: false, }, content: { type: Sequelize.TEXT, allowNull: false, }, }, { sequelize, charset: "utf8", col..
[Express.js] Database 연결하기 (Mysql, Sequelize) 1. DB 세팅 'node_study' 이름의 데이터 베이스를 생성합니다 CREATE DATABASE node_study 2. Sequelize 세팅 - JS의 객체와 DB의 릴레이션을 매핑 해주는 ORM(object-relational mapping)이다. - JS 구문을 알아서 SQL로 바꿔준다. 패키지 설치 - sequelize : 시퀄라이즈 패키지 - sequelize-cli : 시퀄라이즈 명령어를 실행하기 위한 패키지 - mysql2 : mysql과 시퀄라이즈를 이어주는 드라이버 $ npm install sequelize sequelize-cli mysql2 Sequelize CLI 초기화 - 패키지 설치 후 seqeulize init 명령어를 호출한다. (npx : 패키지의 최신버전 파일을 불..
[Express.js] Router 세팅 1. Router의 역할 요청 메서드, 주소별로 분기처리하는 역할 2. Router 세팅 express의 Router 객체 가져오기 메서드, 주소별로 분기처리 module.export 루트 파일(app.js)에서 구현한 라우터 연결 3. 예시 1) router 폴더 생성 2) index.js, test.js 파일 작성 // router/index.js const express = require("express"); // ** express router const router = express.Router(); // ** GET / 요청 router.get("/", (req, res) => { res.send("Hello Index Router!"); }); // ** router export module..
[Express.js] 프로젝트 세팅 (2) Express 프로젝트 시작하기 package.json 설정 - script : npm 명령어를 설정해 놓는 부분 - main : 서버의 역할을 할 메인파일 명을 설정해 놓는 부분 { "name": "one-node-study", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.18.2" }, "devDependencies": { "nodemon": "^3.0.3" } } app.js 설정 - package.json의 main 부분에 해당하는 파일명으로 파일을 생성한다..
[Express.js] 프로젝트 세팅 (1) 1. Node 버전 20.11.0 LTS (2024.01.28 기준) 버전 세팅 방법 nodejs 홈페이지(https://nodejs.org)에 직접 들어가 LTS 버전 다운로드 nvm 사용 nvm install --lts nvm use 20.11.0 2. package.json 생성 설치한 패키지들의 버전을 관리하는 파일 노드 프로젝트를 시각하기 위해서는 무조건 필요한 파일 생성 방법 $ npm init package name: (폴더명) [엔터 입력] version: (1.0.0) [엔터 입력] description: [엔터 입력] entry point: (index.js) [엔터 입력] test command: [엔터 입력] git repository: [엔터 입력] keywords: [엔터 입력]..