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.. 더보기 이슈 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 .. 더보기 이슈 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'); .. 더보기 이전 1 2 다음
