반응형 Programming/Javascript96 React기초-2.컴포넌트 제작 컴포넌트 제작으로부터 시작해보겠습니다. 강좌에 의하면 React의 가장 기초적인 기능이 HTML 문서가 장대해질 경우 component를 별도 구성함으로써 코드를 단순화/정리정돈하는 기능이라고 합니다. 이것 만으로도 뭔가 React를 사용하고 있다는 느낌이 드네요. 1. 우선 App.js에서 태그 사이의 내용을 지우고 아래의 내용으로 교체해 넣습니다. logo.svg파일을 임포트 하는 부분도 삭제해 줍니다. import React, { Component } from 'react'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Component { render(){ return ( {/*Subjct Component *.. 2020. 7. 25. React기초-1.설치 및 환경설정 React로 이런거 한번 만들어보겠습니다. egoing님 강좌 따라하기입니다. 방송으로만 보면 기억에 안남아서 공부할 겸 남겨놓습니다. 기능은 1. 로딩시 또는 WEB을 클릭하면 welcome 화면 띄우기 2. 각 Subject(HTML / CSS / JavaScript)를 클릭하면 그에 따른 내용 변경하기 3. create Subject 4. update Subject 5. delete Subject 입니다. 1. 우선적으로 설치해야할 것은 1. Node 2. Visual Studio Code 3. create-react-app (npm install -g create-react-app : global 설치) 입니다. 2. Visual Studio Code에 필요한 부가기능은 1. reactjs cod.. 2020. 7. 25. mongoDB Atlas Test DB 만들기(React 강좌 중에서..) 안녕하세요, 리액트를 한번 배워볼까 해서 동영상을 따라 시도해보고 있는데, 처음 MongoDB 연결하는 부분부터 막히네요. 예전에는 사용자만 생성해도 test Database가 만들어졌던 것 같은데, 최근 방법이 바뀌었나봅니다. 방법은.. 1. clusters->collections 메뉴로 이동하여 create database 를 클릭해줍니다. 2. Database이름: test, Database Collections: devices 으로 생성해줍니다. 3. 그리고 소스를 실행해서 확인합니다. const express = require('express') const app = express() const port = 5000 const mongoose = require('mongoose') mongoos.. 2020. 7. 12. electron 배포파일 만들기(electron-builder) 1. electron-builder 설치 npm install electron-builder --dev-save 2. package.json파일 수정 "scripts" 부분에 "deploy"를 추가하고, "build" 부분을 추가합니다. { "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "deploy":"electron-builder --windows nsis:ia32" }, "repository": "https://github.com/electron/electron-quic.. 2020. 7. 5. electron 실행파일 만들기(electron-packager) 1. Electron-packager 설치 npm install electron-packager --save-dev 2. package.json파일 수정 - "scripts" 내부의 "build" 부분을 추가해 줍니다. phonebook이라고 되어있는 부분이 실행앱 이름이 됩니다. { "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-packager . phonebook" }, "repository": "https://github.com/elec.. 2020. 7. 5. Javascript postgresql 연동 const { Client } = require('pg'); const client = new Client({ host : 'localhost', database: 'postgres', user: 'postgres', password: 'asdf4416', port: 5432, }); client.connect(); client.query('SELECT * FROM member', (err, res) =>{ if(err){ console.log(err); }else{ console.log(res); } }); 2020. 6. 29. 이전 1 2 3 4 다음 반응형
