미니멀한 IT 기록

1. Library 설치 yarn add swr 2. 폴더 구성 Counter는 참고로 작성했는데, 본 포스트에서 구성하지는 않겠습니다. 비동기로 서버에서 User목록만 불러와서 보여주는 부분만 코드로 남김니다. /src ㄴcomponents *Users.jsx ㄴcustomHooks *useUsers.js *App.js *index.js 3. 코드 (1) App.js import Users from "./components/Users"; import Counter from "./components/Counter"; function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import useSWR from "swr..

"리액트를 다루는 기술" 의 22장...mongodb 연동하기 과정에서 Koa 백엔드에 ESM을 적용하는 부분이 있는데, 현재 Node 14 버전에서 주의해야할 점과 함께 몇가지 정리해보고하 합니다. 1. 라이브러리 설치 해당 과정에서는 ESM이 외에도 몇가지 라이브러리가 필요합니다. koa, koa-bodyparser, koa-router, mongoose, dotenv 등 말이죠. ESLint옵션 설정하는 부분은 제외하도록 하겠습니다. (VSCode에 설치한 ESLint 기능에, 추가 설정했을 경우 달라지는 부분을 잘 몰라서 이부분은 제외하고 사용했습니다.) 아래의 package.json을 보면 필요한 라이브러리들을 확인할 수 있을 것입니다. { "name": "05_react_backend", "v..

비주얼 테스트 도구인 스토리북에 대해 알아보겠습니다. 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..

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..

오늘은 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..

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-..

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..

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 값에 따라 표시되는 ..

삭제는 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..

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..