React 썸네일형 리스트형 이슈 7 node-sqlite3에서 this.changes / this.lastID 사용하기 DB update가 성공했는지 확인하기 위해 node-sqlite3의 Database.run에서 제공하는 this.changes를 사용하려 한다. TL; DR 화살표 함수 대신 함수 선언문을 사용하자. 문제 확인 아래와 같이 코드를 작성하면, db.run(` UPDATE your_table_name SET value1=(?), value2=(?) WHERE id=(?) AND created=date('now', 'localtime'); `, [value1, value2, id], (err) => { if (err) console.error(err.message); handler({ status: (this.changes === 1) ? "modify_success" : "modify_failed" }) .. 더보기 이슈 6 단 한 줄! index.js로 내 코드 깔끔하게 import하기 수정 사항 이 코드는 export default class에 대해 작동하지만, export { foo, bar }와 같은 형식에선 작동하지 않습니다. 이에 대한 수정 사항이은 아래 게시글에서 확인하실 수 있습니다. 이슈 11 React.createElement: type is invalid 단 한 줄! index.js로 내 코드 깔끔하게 import하기 수정 전 코드: import React, { Component } from 'react'; import { Col, Row, Form, FormGroup, Input } from 'reactstrap'; import SearchID from '../compo.. roomedia.tistory.com 수정 전 코드: import React, { Compon.. 더보기 이슈 5 react 아이콘 사용법 react-icons 검색창 옆에 붙어있는 돋보기, 패스워드 입력창 옆의 눈 모양 아이콘, 복사-붙여넣기 시 표시되는 클립보드 아이콘 등 웹 상에서 이모지를 통한 의미 전달 사례는 이미 대세가 되었습니다. 오늘은 react 환경에서 이 아이콘들을 활용할 수 있는 방법에 대해 알아보겠습니다. 준비물: react 프로젝트 react-icons 먼저 yarn/npm 등을 사용하여 react-icons를 프로젝트에 추가하여 줍니다. npm install react-icons yarn add react-icons 이상없이 패키지 추가가 되었다면 다음으로 https://react-icons.netlify.com/#/에 접속합니다. 해당 웹사이트에 들어가면 아래와 같은 화면이 보일텐데요. Import 부분을 참고하셔서 원하는 테마의 원하.. 더보기 이슈 4 react form 버튼 새로고침 막기 요약 키워드 onSubmit={this.handleSubmit} tag="label" bootstrap, reactstrap의 힘으로 대략적인 UI가 완성되었습니다. 이제 대충 DB 연결하고 대충 CSS 맞추기만 하면 장학금 날먹이다~!~! 하고 시험 입력을 하던 중... 세상은 제 뜻대로 돌아가지 않는다는 걸 다시 한 번 느꼈습니다... form에서 아무 버튼을 누를 때마다 페이지를 새로 불러왔습니다... submit 속성을 준 적도 없고 action을 정의하지도 않았는데!! react 최대 장점인 바뀐 부분만 렌더링조차 무시해버리다니 엄청난 충격!! 이었습니다.... 해결 방법은 간단합니다. form 태그에 onSubmit 이벤트 핸들러를 추가하여 해결해봅시다. 기존 코드 export default .. 더보기 이슈 3 electron + sqlite3 "Cannot find module 'node_modules/...'" Cannot find module 'node_modules/sqlite3/lib/binding/electron-v5.0-darwin-x64/node_sqlite3.node' Require stack: node_modules/sqlite3/lib/sqlite3.js node_modules/knex/lib/dialects/sqlite3/index.js yarn add sqlite3을 통해 sqlite3을 설치했는데 위와 같은 오류가 뜨며 해당 버전을 찾을 수 없다고 한다... Failed to Compile.... node module의 경우 electron용 build가 따로 있는데, target이 electron인지 인식하지 못하고 일반적인 package를 사용하려 하니 에러가 나는 상황이다. 이런 때를.. 더보기 이슈 2 electron-webpack에서 CSS Module 사용하기 2020/01/12 - [엥휴/이슈] - electron-webpack-quick-start에 react 설치하기 import styles from './react.css'식으로 사용하는 CSS module 기능도 electron-react-boilerplate에선 분명 되던 기능인데, electron-webpack-quick-start에서는 안 됐다. webpack.config.js를 만져줘야 하지만,documentation에서는 직접 접근하기보다 아래와 같은 방식을 추천한다. { "electronWebpack": { "renderer": { "webpackConfig": "webpack.renderer.additions.js" } } } package.json과 같은 경로에 webpackConfig에.. 더보기 이슈 1 electron-webpack에 react 설치하기 2020/01/12 - [엥휴/프로젝트] - 빠른 개발의 시작, boilerplate yarn add react react-dom를 통해 react와 react-dom을 설치했지만, 바로 사용할 수 없었다. webpack이 문제였다. webpack만으로는 react에서 주로 사용하는 JSX를 해석할 수 없었기 때문. ERROR in ./src/renderer/index.js Module build failed (from ./node\_modules/babel-loader/lib/index.js): SyntaxError: /src/renderer/index.js: Unexpected token (6:16) 5 | const rootElement = document.getElementById('app'); .. 더보기 빠른 개발의 시작, boilerplate 2020/01/12 - [엥휴/프로젝트] - 와이어프레임 만들 때 기억할 세 가지 일단 와이어프레임대로 개발을 시작하기로 했다. 처음에는 던져놓은 말이 있으니 electron과 react를 동시에 사용할 수 있는 환경을 구축해보려 했다. 어떤 블로그 글을 보고 따라했는데, 느리고 버벅거려 뭔가 잘못된 건가 싶었다. 정보를 좀 더 찾다가 electron-react-boilerplate를 발견했다. 매우 fancy하게 잘 만들었다. 지금와서 생각해보니 배경 그라데이션 때문에 잘 만들었다고 생각했나보다. hot-loader를 사용하여 빠르게 결과를 볼 수 있고, electron-builder를 사용하여 배포도 간편하다. 다만, 배워야 할 게 좀 많았다... react만 얕게 알고 있는 상태에서 프로젝트를 시작.. 더보기 이전 1 2 3 다음
