본문 바로가기
반응형

전체 글374

React기초-4.state 오늘은 state에 대해서 알아보도록 하겠습니다. Props가 Component를 조작하기 위해 사용자에게 제공하는 속성이라고 하면, state는 외부(상위) 사용자가 모르는 component 내부적으로 사용하는 속성입니다. 아래는 state의 예시입니다. App.js(Old) import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App extends Co.. 2020. 7. 25.
React기초-3.props 오늘은 props에 대해 알아보겠습니다. props는 사용자가 생성한 component의 속성(attribute)를 말합니다. 예를 들어 아래의 코드에서 사용자가 생성한 컴포넌트 내부에 title, sub과 같은 사용자 정의 속성을 부여할 경우 이것들을 props라고 합니다. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import Content from './components/Content'; //import logo from './logo.svg'; 삭제 import './App.css'; class App exte.. 2020. 7. 25.
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.
Github SSH 연결 사이트 OS별 SSH 연결 안내 사이트 1. Key 생성 https://docs.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent Generating a new SSH key and adding it to the ssh-agent - GitHub Docs Generating a new SSH key and adding it to the ssh-agent After you've checked for existing SSH keys, you can generate a new SSH key to use for authentication, then add it to the ssh-agen.. 2020. 7. 13.
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.
wxPython Grid에 pandas dataframe 출력하기 import wx import wx.grid as gridlib import os import psycopg2 import pandas as pd class MyFrame(wx.Frame): def __init__(self): #-------- 1. GUI 초기화 wx.Frame.__init__(self, parent=None, title="DB to Table") self.SetSize(1020, 600) self.mainPanel = wx.Panel(self) self.vtBoxSizer = wx.BoxSizer(wx.VERTICAL) # 전체 레이아웃 self.vhBoxSizer = wx.BoxSizer(wx.HORIZONTAL) # 전체 레이아웃 self.query_txt = wx.TextCtrl.. 2020. 6. 23.
반응형

티스토리툴바