분류 전체보기 (11) 썸네일형 리스트형 [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.. [JSP] 기본 문법 (스크립트 태그) 1. 스크립트 태그 종류선언문 (declaration) ... %>자바 변수 or 메소드 정의하는데 사용스크랩틀릿 (scriptlet) ... %>자바 로직을 작성하는데 사용표현문 (expression) ... %>변수, 계산식, 메서드 호출 결과를 문자열 형태로 출력하는데 사용 2. 선언문 태그 (declaration tag) - 전역 변수, 메서드 등을 선언하는 태그 (Class 상의 멤버변수 (전역 변수)로 선언된다.) ※ 각 행은 세미콜론으로 끝나야 한다! - 예시1 > 단순 변순 선언 Count: - 예시2 > 메소드 선언 Method Result: 3. 스크립틀릿 태그 (scriptlet tag) - 자바 코드로 이루어.. [JSP] 개발 환경 구축 1. 개발 환경자바 환경JDK 20웹 서버 환경Apache Tomcat 10통합 개발 환경Eclipse IDE for Enterprise Java and Web Developers 1) 자바 설치 > 이전 글 확인해 주세요 (https://jooman-study.tistory.com/7) 2) 톰캣 설치 (Window) > 톰캣 공식 홈페이지 접속 (https://tomcat.apache.org/) > JAVA 버전에 맞는 톰캣 설치 - 호환 버전 확인 - [Download] → 버전 선택 - [Core] → Window.zip 선택 (웬만하면 64-bit) > 다운로드한 파일 압.. [JAVA] 자바 설치 1. Java SE vs Java EESE (Standard Edition)기본적이고 대중적인 플랫폼EE (Enterprise Edition)SE 플랫폼 위로 웹 프로그래밍을 위한 추가 기능들이 포함된 플랫폼 2. JDK vs JRE vs JVMJDK (Java Development Kit)자바 개발 키트로자바를 사용하기 위해 필요한 모든 기능을 갖춘 Java용 Software Development Kit (SDK) 이다.JRE (Java Runtime Environment)자바 런타임 환경으로컴파일 된 자바 프로그램을 실행하는데 필요한 패키지이다.JVM (Java Virtual Machine)자바를 실행하기 위한 가상 기계로OS에 종속받지 않고 CPU 가 Java를 실행 할 수 있도록 한다.. [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 부분에 해당하는 파일명으로 파일을 생성한다.. 이전 1 2 다음
