반응형 Programming/Javascript96 Newsapi api 키 발급받기 1. https://newsapi.org/register에 가입합니다. News API – Search News and Blog Articles on the Web Get JSON search results for global news articles in real-time with our free News API. newsapi.org 가입 완료시 나오는 API Key를 저장해둡시다. 나중에 API 요청할 때 써먹어야 합니다. 2. 한국 Link에 들어가봅니다. https://newsapi.org/s/south-korea-news-api News API – Search News and Blog Articles on the Web Get JSON search results for global news a.. 2021. 3. 23. Storybook 사용하기 비주얼 테스트 도구인 스토리북에 대해 알아보겠습니다. 1. 설치 npx -p @storybook/cli sb init .storybook폴더가 자동 생성되고, 그 안에 story파일을 로딩해주는 main.js 와 preview.js 파일이 있습니다. main.js에는 ...story.js파일을 자동 추가/로딩해주는 부분과 addon 설정부분이 있습니다. (preview.js는 아직 잘 모르겠습니다.ㅠㅠ) package.json에도 storybook 스크립트가 추가되었습니다. (모두 이전 버전에서 수동 생성해주던 부분임...) 2. Sample 컴포넌트 작성 기존 컴포넌트들이 있으면 활용해도 되지만, 저는 새로 만든 프로젝트에서 테스트할 용도로 간단한? 컴포넌트 하나를 만들겠습니다. import React.. 2021. 3. 18. MongoDB 다운로드 설치 및 Compass 연결 MongoDB 설치파일 다운로드 위치를 몰라서 기록해놓습니다. 아울러 Compass에서 처음 접속하는 방법도 함께 공유합니다. 1. Download Site (www.mongodb.com/try/download/community)접속 2. 설치 (설치 중간에 함께 추천하는 Compass 도 설치합니다.) 3. 확인 정상 설치되었을 경우 커맨드 창에 mongo 라고 입력해보면 버전정보 등이 나타납니다. 4. Compass 실행 'mongodb://localhost:27017'을 입력하고 Connect를 누르면.. 현재의 데이터베이스들이 나타납니다. ~끝~ 2021. 3. 7. React - Apache에 배포하기 1. Build "create-react-app ." 명령으로 react app 생성 후 배포를 위해서는 아래의 명령으로 buid 합니다. npm run build 이렇게 하면 build 폴더가 생성되는데 필요한 파일을 서버가 작동하는 폴더에 위치시키면 됩니다. 2. httpd.conf 항목 추가 매번 build된 파일을 apache가 서비스하는 폴더로 옮기는 작업은 번거롭습니다. 현재 작업중인 폴더를 직접 서비스하도록 추가하고 싶다면, httpd.conf파일에 아래의 항목을 추가해줍니다. Alias /react "D:/05_Program_dev/03_web/04_react_hello/build" Options Indexes FollowSymLinks AllowOverride None Require al.. 2021. 2. 27. 캐러셀 만들기 - with Owl Carousel owl carousel 한 화면에 여러개의 이미지를 나타내며 돌아가는 기능을 합니다. 1. 다운로드 owlcarousel2.github.io/OwlCarousel2에서 압축 파일을 다운로드 합니다. 필요한 파일은 dist\assets폴더 내부의 css파일과 src\js폴더에 있는 js 파일입니다. 그리고 jquery파일도 필요하니 다운받아놓습니다. Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your need.. 2021. 2. 24. 캐러셀 만들기 - with bxSlider 1. bxSlider 프러그인 다운로드 bxslider.com에서 다운로드에서 다운로드 가능합니다. 링크로 연결하는 방법이 기본으로 나와있는데, The other ways에 직접 다운로드하여 사용할 수 있도록 다운로드 경로도 제공합니다. 그리고 jquery도 필요하니, 다운받아놓습니다. jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 2. 복사하기 압축을 풀면 dist 폴더 안에 있는 css파일과 js파일을 원하는 폴더로 옮겨서 사용합니다. 주의할 점은 images 폴더를 css 파일들을 옮겨놓은 폴더에 함께 복사해 놓아야 한다는 점입니다. 이 이미지는 스타일시트에서 사용하는 이미지들입니다. 3.. 2021. 2. 24. 무료 간트 차트 라이브러리 Gantt chart library ourcodeworld.com/articles/read/434/top-5-best-free-jquery-and-javascript-dynamic-gantt-charts-for-web-applications 2020. 12. 2. Node강좌 - 미들웨어 1. 미들웨어미들웨어는 http요청과 routing 사이에 들어가는 작업입니다.예)var express = require('express'); var app = express(); var user = require('./routes/user'); // 미들웨어 작성 var myLogger = function (req, res, next) { console.log(req.url); next(); }; // 미들웨어 사용 app.use(myLogger); app.get('/', function (req, res) { res.send('Hello World'); }); app.use('/user', user); app.listen(3000, function () { console.log('Example App.. 2020. 8. 9. Node강좌 - express 설치 / router설정 1. 설치 npm install --save express 2. main.js var express = require('express'); var app = express(); var user = require('./routes/user'); app.get('/', function (req, res) {// 기본 root('/') 는 main.js에서 routing res.send('Hello World'); }); app.use('/user', user); // 나머지 접근은 router(/routes/user)에서 routing app.listen(3000, function () { // 3000 포트로 서버 실행 console.log('Example App is listening on port 30.. 2020. 8. 9. React강좌3 - Redux0. redux 구조 과제를 따라 수행하면서도 리덕스(Redux) 개념이 잘 안서는데, 나름 이해한 부분을 정리해봅니다. 리덕스는 store로부터 데이터를 직접 공급받기 위한 관리체계 개념입니다. 1개의 store에서 모든 데이터를 관리하죠. 동작 순서는 아래와 같으며, Action, Reducer를 별도 파일로 구성하고, Store도 App.js에서 생성해주어야 합니다. 1. Action '액션 생성자'에서 Action에 대한 정의만합니다. 단순히 어떤 동작(타입)인지만 정의합니다. 실제 'Action' 이라고 할 수 있는 '동작'의 개념은 Reducer가 수행합니다. 예로 아래와 같이 사용합니다. 이전 수행한 과제 블로그를 보시면 type 마져도 ActionType.js에 모아서 정의해 놓고 import해서 쓰기도 합니다.. 2020. 8. 9. React강좌3 - Redux5. react-redux를 이용한 store연결 1. Provider: 서비스 제공 컴포넌트 예) 2.컴포넌트를 redux에 연결하는 또다른 함수를 반환함 connect({...options]) 예) connect()(Counter) store에 연결 된 새로운 컴포넌트 클래스가 반환됨. 옵션이 없으면 this.props.store로 접근 가능 옵션 connect( [mapStateToProps], //state 를 해당 컴포넌트의 props로 연결 [mapDispatchToProps], //dispatch한 함수를 props로 연결 [mergeProps], //state와 dispatch를 동시에 사용할 경우. 잘 사용되지 않음 [options] // pure=true: 불필요한 업데이트를 하지 않음, withRef=false: 잘 사용하지 않음 ).. 2020. 8. 9. React강좌3 - Redux4. Store 예시 어플리케이션의 현재 상태를 지니고 있음 store역할 dispatch(action) : 새 상태를 현 상태에 갈아끼움 getState() : 현재 상태를 반환 subscribe(listener): 상태가 바뀔때마다 실행할 콜백함수(listener) 등록 replaceReducer(nextReducer) 추가로, redux-devtools-extension을 설치하고, 크롬에서 Redux DevTools를 설치한다. yarn add redux-devtools-extension --dev 1. src/index.js store예시 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from '.. 2020. 8. 8. React강좌3 - Redux3. Reducers 변화를 일으키는 함수 순수해야함 비동기 X 전달받은 인수변경 X 동일한 인수 = 동일한 결과 이전상태와 액션을 받아서 다음상태를 반환한다. (이전상태 변경이 아님) (previous State, Action) => newState SRC/Reducers 폴더안에 아래 3 파일을 만든다. 1. Counter.js (숫자 계산) 2. ui.js (색상 변경) 3. index.js (Reducer 통합) 1. Counter.js import * as types from '../Actions/ActionTypes'; //초기상태 정하기 const initialState = { number: 0, //최초 초기상태 정의 }; export default function counter(state = initialSt.. 2020. 8. 8. React강좌3 - Redux2. Action작성 1. 값 증가 액션 2. 값 감소 액션 3. 색 변경 액션 SRC/Actions폴더에 아래 2개의 파일 생성 1. ActionTypes.js export const INCREMENT = "INCREMENT"; export const DECREMENT = "DECREMENT"; export const SET_COLOR = "SET_COLOR"; 2. index.js // 액션 생성자 //import { INCREMENT, DECREMENT, SET_COLOR } from './ActionTypes'; import * as types from './ActionTypes'; //위 구문과 동일한 의미 export function increment() { return { type: types.INCREMENT .. 2020. 8. 8. React강좌3 - Redux 1. Redux 설치 및 기본 컴포넌트 작성 1. Redux 설치 npm install --save redux react-redux 2. 3개의 컴포넌트 작성 (src/components 폴더에 작성) Value.js : 멍청이 Control.js : 멍청이 Counter.js : 똑똑이 (1) Value.js import React, { Component, PropTypes } from 'react'; const defaultProps = { number: -1 }; class Value extends Component { render() { return ( {this.props.number} ); } } Value.defaultProps = defaultProps; export default Value; (2) Control.js import .. 2020. 8. 8. React에서 Highchart 사용하기 기초 예제 오늘은 React에서 Highchart 사용하여 아래와 같은 BAR 차트를 한번 그려보려고 합니다. 1. 설치 우선 create-react-app으로 리액트 환경을 구축하고, Highcharts 와 highcharts-react-official을 설치해 줍니다. create-react-app .// '.' 을 입력하면 현재 폴더에 리액트를 설치합니다. npm install highcharts --save npm install highcharts-react-official --save 2. High.js (Highchart 컴포넌트) 작성 이번 예제에서는 App.js에서 데이터를 props로 전달해주고, Highchart 컴포넌트에서 이를 받아 그래프를 그리도록 구성하겠습니다. 따라서 그래프를 그리는 Hi.. 2020. 8. 8. React강좌2, 전화번호부 - 0.기본 파일 1. App.js import React from 'react'; import Contact from './Contact'; import './App.css'; function App() { return ( ); } export default App; 2. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; class Contact extends Component { constructor(props) { super(props); this.state = { selectedKey: -1, keyword: '', contactData: [{ name: 'Abet', phone: '010-000-.. 2020. 8. 4. React강좌2, 전화번호부 - 6.LocalStorage에 저장하기 LocalStorage에 저장하여 update되어도 데이터가 초기상태로 돌아가지 않도록 하는 기능을 구현하겠습니다. componentWillMount API와 componentDidUpdate API만 구현해주면 됩니다. Contact.js import React, { Component } from 'react'; import ContactInfo from './ContactInfo'; import ContactDetails from './ContactDetails'; import ContactCreate from './ContactCreate'; class Contact extends Component { constructor(props) { super(props); this.state = { sele.. 2020. 8. 3. React강좌2, 전화번호부 - 5.Update 기능 Update기능은 좀 어렵습니다. 구현해야 할 내용으로는 ContactDetails 컴포넌트에서 1. Edit 버튼을 만듭니다. 이 버튼은 Edit모드와 비 Edit모드사이를 토글할 수 있도록 합니다. 2. 토글 함수를 선언해줍니다. isEdit 값이 false이면 Edit 폼에 name과 phone이 변경 가능하도록 데이터를 보여주며, true이면(수정 완료버튼 클릭) name과 phone 값을 상위요소인 Contact 컴포넌트로 전달해줍니다. 전달함수는 별도로 3번에서 만듭니다. 3. handleEdit 함수를 선언합니다. 이 함수에서 isEdit가 true일 때 name과 phone 을 Contact 컴포넌트로 전달해줍니다. 4. Edit 폼을 만들어줍니다. 그리고 isEdit 값에 따라 표시되는 .. 2020. 8. 3. React강좌2, 전화번호부 - 4.Delete 기능 삭제는 1. ContactDetails컴포넌트에서 삭제버튼을 추가하고 onRemove(props) 이벤트를 추가하는 것과 2. Contact 컴포넌트에서 handleRemove 함수를 선언하고 onRemove이벤트에 연결하는 것 이 필요합니다. ContactDetails.js import React, { Component } from 'react'; class ContactDetails extends Component { render() { const details = ( {this.props.contact.name} {this.props.contact.phone} ); const blank = (Not Selected) return ( Details {this.props.isSelected ? deta.. 2020. 8. 3. React강좌2, 전화번호부 - 3.Create 기능 Create 기능구현은 두 부분으로 나누어 생각할 수 있습니다. 1. ContactCreate 컴포넌트(신규)에서 신규 데이터 생성 기능, 과 2. Contact 컴포넌트에서 전달받은 data를 기존 state(배열)에 추가하는 기능 입니다. ContactCreate.js import React from 'react'; export default class ContactCreate extends React.Component { constructor(props) { super(props); this.state = { name: '', phone: '' }; this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClic.. 2020. 8. 3. React강좌2, 전화번호부 - 2.Detail 보기 기능 1. ContactInfo 컴포넌트에서 phone 번호를 삭제하고, Click 이벤트를 연결합니다. ContactInfo.js import React, { Component } from 'react'; export default class ContactInfo extends React.Component { render() { return ( {this.props.contact.name} // onClick 을 Props로 받음 ); } } 2. Contact 컴포넌트에서 onClick 이벤트에 해당하는 연결함수(handleClick)를 선언하고, 컴포넌트 내부에서 연결해줍니다. handleClick(i) 함수에서는 selectedKey 변수에 몇번째 요소인지(i)를 나타내는 key를 할당합니다. 그리고 .. 2020. 8. 1. React강좌2, 전화번호부 - 1.Search기능 App.js import React from 'react'; import './App.css'; import Contact from './Contact'; function App() { return ( ); } export default App; ContactInfo.js import React, { Component } from 'react'; export default class ContactInfo extends React.Component { render() { return ( {this.props.contact.name} // onClick 을 Props로 받음 ); } } Contact.js import React, { Component } from 'react'; import ContactI.. 2020. 8. 1. React기초- 9.Delete 마지막으로 Delete 기능을 알아보겠습니다. Delete 기능은 App.js 내부에서만 다루며, 그 중에서도 Control 컴포넌트 안에서만 구현하는 것으로 충분합니다. App.js import React, { Component } from 'react'; import Subject from './components/Subject'; import TOC from './components/TOC'; import ReadContent from './components/ReadContent'; import CreateContent from './components/CreateContent'; import UpdateContent from './components/UpdateContent'; import Co.. 2020. 7. 29. React기초- 8.Update 업데이트하는 방법에 대해 알아보겠습니다. 업데이트는 기존의 contents를 불러와서 보여주는 read 기능과 form의 형태로 다시 입력하는 create 기능이 결합된 기능이라고 할 수 있습니다. 1. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { constructor(props) { super(props); this.state = { id: this.props.data.id, title: this.props.data.title, desc: this.props.data.desc } this.inputFormHandler = this.inputFormHandler.bind(t.. 2020. 7. 29. React기초- 7.Create 이번에는 아이템 추가하는 기능을 구현해보도록 하겠습니다. 1. 신규요소 (Control.js) 추가 각 링크에는 onClick 이벤트 요소를 선언하고 onChangeMode함수와 연결을 해 줍니다. 이때, 모드를 인자로 넘겨줍니다. import React, { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Control; 2. 신규요소(CreateContent.js) 추가 신규 생성시 입력폼을 작성합니다. 폼은 아래 그림의 아래부분과 같이 구성되어 있습니다. 이때 onSubmit 함수로 title 과 desc 값이 전달될 수 있도록 아래와 같이 .. 2020. 7. 29. React기초- 6.이벤트 이번 시간에는 클릭 이벤트에 대해 Content가 변경되도록 App을 구성해보겠습니다. 1. 아래 화면에서 WEB을 클릭하면 그 아래 HTML / HTML is HyperText Markup Language 부분이 그에 맞는 내용으로 변경되게 할 것입니다. 우선 WEB 부분에 해당하는 영역에 링크를 달아줍니다. Subject.js import React, { Component } from 'react'; class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } export default Subject; 페이지 첫 로딩시와 WEB을 클릭하면 웰컴페이지가 나타나도록 하기 위해 state에 'm.. 2020. 7. 28. React기초-5.state2 여러개의 list를 state로 선언 후 하위 컴포넌트에 전달하는 방법. 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 extends Component { constructor(props) { super(props); this.state = { subject: { title: 'WEB', sub: 'world wide web!' .. 2020. 7. 27. 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. 이전 1 2 3 4 다음 반응형
