React 썸네일형 리스트형 이슈 14 조금 편하려고 했을 뿐인데 마주친 오류... electron-webpack 배포하기; Uncaught Error: Cannot find module './main' 오늘은 클라이언트 프로그램 개발이 다 끝나서, 배포를 위해 yarn dist를 시도해봤습니다. 다음과 같은 에러가 발생합니다. Uncaught Error: Cannot find module './main' 무엇이 잘못되었는지 확인하기 위해 electron-webpack-quick-start로 새로운 프로젝트를 만들었습니다. 기존 코드를 새 프로젝트로 하나하나 옮기다 보니, 모듈을 dynamic import하는 index.js 부분에서 문제가 생기는 것을 확인했습니다. index.js가 어떤 파일인지는 아래 게시글을 보시면 확인하실 수 있습니다. 2020/01/17 - [ElectronWebpack + React] - 이슈 6 단 한 줄! index.js로 내 코드 깔끔하게 import하기 이슈 6 단 한.. 더보기 이슈 13 electron react-router-dom (별로 특별할 것 없음), HashRouter BrowserRouter 차이 user 페이지와 별개로, admin 페이지를 넣기 위해 react-router-dom을 사용하기로 했습니다. 먼저 프로젝트에 react-router-dom을 추가합니다. npm install react-router-dom # or yarn add react-router-dom user.js 파일과 admin.js 파일을 만든 뒤, 기존의 App 클래스의 이름을 User로 변경하여 user.js로 옮깁니다. App.js에는 다음과 같은 코드를 추가합니다. path 앞에 콜론(:)을 붙여, 변수로 넘길 수 있습니다. import React, { Component } from 'react' import { HashRouter as Router, Route, Redirect } from 'react-route.. 더보기 이슈 12 react form 초기화하는 세 가지 방법 react에서 form을 초기화하는 데에는 세 가지 방법이 있습니다. js의 event.target.reset()을 이용하는 방법 react의 ref를 이용하는 방법 react의 key를 이용하는 방법 js의 event.target.reset()을 이용하는 방법 event.target.reset()을 테스트 해보기 위해 아래와 같은 코드를 작성합니다. 직접 값을 입력하는 input과, 버튼을 눌렀을 때 값이 증가하는 input, submit 버튼이 표시됩니다. 물론 state를 끌어올리는 게 최상이지만, 그럴 수 없는 상황이라고 가정합니다. state를 끌어올리는 방법에 대해서는 아래 링크를 참고해주세요. State 끌어올리기 – React A JavaScript library for building u.. 더보기 이슈 11 React.createElement: type is invalid 2020/01/17 - [엥휴/Electron-Webpack + React] - 단 한 줄! index.js로 내 코드 깔끔하게 import하기에서 소개한대로, export default를 통해 각 파일에서 클래스를 내보낸 뒤, index.js를 통해 import 하다보니, 두 개 이상의 클래스를 export 해야하는 상황이 찾아왔다. 단 한 줄! index.js로 내 코드 깔끔하게 import하기 수정 사항 이 코드는 export default class에 대해 작동하지만, export { foo, bar }와 같은 형식에선 작동하지 않습니다. 이에 대한 수정 사항이은 아래 게시글에서 확인하실 수 있습니다. 이슈 11 React.createE.. roomedia.tistory.com 이때 export .. 더보기 이슈 10 react 다국어 지원, import { default as smt } from ... 프로젝트를 진행하다보니 다국어를 지원할 필요성이 생겼습니다. 우측 상단에 KO/EN 라디오 버튼을 배치한 뒤, KO를 누르면 한국어로, EN을 누르면 영어로 표시될 수 있게 하려 합니다. 이외에도 다른 언어가 추가될 것을 고려해 텍스트를 언어 별로 하나의 json 파일로 만들기로 했습니다. 언어 파일을 추가한 프로젝트 구조는 다음과 같고, 안드로이드 프로젝트 구조에서 영감을 받았습니다. 공통으로 사용하는 텍스트는 최상위에 두었고, 기능 별로 겹치는 명칭들은 네임스페이스로 만들어 관리합니다. ko.json 파일 구조는 다음과 같습니다. { "info": "인적사항", "studentID": "학번", "seatNum": "좌석 번호", "password": "비밀번호", "reserve": { "title.. 더보기 이슈 9 Parsing error: Unexpected token = eslint 이전 글에서 ESLint 사용을 설정해봤습니다. 'handler' is missing in props validationeslint(react/prop-types) 위대하신 ESLint에서 말하시길, props를 사용할 때 propTypes을 설정하라고 하는데요. 아래와 같이 설정하면 됩니다. class SearchID extends Component { ... } SearchID.propTypes = { handler: PropTypes.func.isRequired } export default SearchID 하지만 저는 클래스 정의와 동시에 export 하기 때문에, propTypes를 클래스 내부에 static 변수로 설정하고 싶습니다. 위와 같이 propTypes을 설정했더니 또.. 다음과 같은.. 더보기 이거 하나만 있으면 클린 코드 해결! ESLint 코딩을 하다보면 확신이 없는 순간이 생깁니다. 내가 지금 잘 하고 있나..? 남들은 어떻게 하지? 이럴 때 필요한 게 바로 Linter인데요. Linter는 코드를 분석하여 문제를 찾아낼 수 있는 도구입니다. 자바스크립트에서는 ESLint를 사용할 수 있습니다. ESLint 공식 홈페이지에서는 ESLint를 문제를 찾아주고, 자동으로 고쳐주는 도구로 소개하고 있습니다. 자, 그럼 본격적으로 ESLint를 사용하는 방법과 적용하는 법을 소개하도록 하겠습니다. https://eslint.org ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work al.. 더보기 이슈 8 Error: Cannot find module 'source-map-support/source-map-support.js' 모듈을 설치하고 나니 Electron 실행이 되지 않고, 아래와 같은 에러가 떴습니다. ┏ Electron ------------------- App threw an error during load ┗ ---------------------------- ┏ Electron ------------------- Error: Cannot find module 'source-map-support/source-map-support.js' Require stack: - ~/project/dist/main/main.js - ~/project/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js at Module._reso.. 더보기 이전 1 2 3 다음
