Web55 05. useEffect, 웹소켓 1. useEffect 사용하기 새로운 앱(effect) 생성 ⏺ 배열을 화면에 표시해보자json 검증사이트: https://jsonlint.com/ JSON Online Validator and Formatter - JSON LintLoading... About the JSONLint Editor JSONLint is a validator and reformatter for JSON, a lightweight data-interchange format. Copy and paste, directly type, or input a URL in the editor above and let JSONLint tidy and validate your messy JSON code. What Isjsonlint.. 2024. 5. 17. 04. 배열 데이터 활용, useRef 1. 배열 데이터를 활용 React에서 배열 데이터를 활용하여 동적으로 사용자 목록을 표시하는 컴포넌트 구현해보자 array 앱 생성UserList.js 생성 UserList.js > import React from "react" function UserList() { const users = [ { id: 1, username: 'apple', email: 'apple@apple.com' }, .. 2024. 5. 16. 03. Counter, Input, useState 1. Counter 컴포넌트 Cmder 실행 Cmder > cd 경로 yarn create react-app counter cd counter yarn start 1. 경로이동 2. 앱생성 3. 앱 경로로 이동 4. yarn 시작 Counter.js 생성 Counter.js > import React from "react"; function Counter() { return ( div> h1>0h1> button>+1button> .. 2024. 5. 16. 02. 컴포넌트에 값 전달하기 1. 컴포넌트에 값 전달하기 방법 jSX > Component > function Hello(props){ 안녕하세요. {props.userid}님 } src > App.js src > App.js > import React from "react"; import Hello from "./Hello"; import './App.css'; function App(){ const userid = 'apple'; const style = { backgroundColor: 'deepskyblue', color:.. 2024. 5. 13. 01. React, 컴포넌트 생성 1. 리액트(React) - facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리 - 재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며, 데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공 - Virtual DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상 - 단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용 - JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴포넌트를 정의 라이브러리(liberary) vs 프레임워크(Framework)라이브러리 - 개발자가 필요할 때 함수 또는 모듈을 호출하여 사용하는 방식- 애플리케이션의 전체 구조를 개발자가 직접설계- .. 2024. 5. 13. 19. Mongoose 1. Mongoose - Node.js와 MongoDB를 위한 ODM(Object Data Mapping) 라이브러리 - Javascript Object와 MongoDB의 데이터를 Mapping하여 호환성을 만들어내고, 간편한 CRUD를 가능하게 한다. branch 이동/확인 git switch mongodb git branch Mongoose 설치 npm i mongoose 2. Mongoose로 DB연결하기 db > database.js database.js > import { config } from '../config.js'; //import MongoDb from 'mongodb'; //삭.. 2024. 5. 10. 18. MongoDB 1. MongoDB- NoSQL 데이터베이스 시스템 중 하나로, 문서 기반 데이터 저장 방식을 채택한 오픈소스 DBMS- 관계형 데이터 베이스와는 달리 스키마가 없다.- JSON 형식의 BSON(Binary JSON) 문서를 시용하여 데이터를 저장- 유연하고 확장 가능해서 대량의 데이터를 다루는 대규모 어플리케이션과 웹 서비스에서 주로 사용 - NoSQL 데이터베이스는 관계형 데이터베이스와 다르게 스키마가 고정되어 있지 않아 유동적인 데이터 구조를 다를 수 있다- 문서 데이터베이스 환경에서 잘 작동 (수평적 확장이 가능 ) 사이트: https://www.mongodb.com/ko-kr MongoDB: 개발자 데이터 플랫폼업계 최고의 최신 데이터베이스를 토대로 구축된 개발자 데이터 플랫폼을 사용해 아이디.. 2024. 5. 9. 17. Sequelize 1. Sequelizenode.js에서 mysql 등 RDBMS를 쉽게 다룰 수 있도록 도와주는 라이브러리 사이트: https://sequelize.org/ branch 추가 설치 npm i sequelize db > database.js : import, 객체 바꿔주기 db > database.js > // import mysql from 'mysql2'; // 삭제 import { config } from '../config.js'; import SQ from 'sequelize'; //추가 // 삭제 // const pool = mysql.createPool({ .. 2024. 5. 8. 16. ORM 1. ORM ORM (객체 관계 매핑, Object Relational Mapping)- 객체 지향 프로그래밍 언어에서 사용되는 객체와 관계형 데이터베이스 간의 불일치를 해결하기 위한 기술- 객체 모델과 관계형 데이터베이스의 테이블 간의 매핑을 수행하여 개발자가 SQL 쿼리 대신 객체 지향 코드를 사용할 수 있도록 함(데이터 베이스의 모든 쿼리를 객체로 만들어서 실행하는 매개체, Node.js에도 노드로 존재) ODM(객체 문서 매핑, Object Document Mapping)- NoSQL 데이터베이스와 객체 지향 프로그래밍 언어 간의 매핑을 제공하는 기술- 주로 문서 지향 데이터베이스(MongoDB)와 함께 사용(SQL 문법을 사용하지 않고 자바스크립트, 트리로 데이터를 넣는 방법) 2. Br.. 2024. 5. 3. 이전 1 2 3 4 ··· 7 다음
