본문 바로가기

전체 글511

Create React App으로 만든 electron앱에서 fs 사용하기.. fs 모듈을 쓰려고 하면 `Module not found` 라고 오류가 발생합니다. 문제는 webpack 타겟을 electron-renderer으로 잡아야 하는데, CRA(Create React App)으로 만든 프로젝트는 yarn eject를 해서 수정을 해 줘야 한다. 여기서는 eject를 하지 않고 해결하는 방법이 2가지을 소개 합니다. craco를 사용하기 craco는 CRA로 만든 프로젝트를 eject하지 않고 간단하게 설정하게 해 주는 패키지이다. 먼저 craco를 설치해 줍니다. $ npm i -D @craco/craco 그리고, craco.config.js 파일을 만들고 아래 내용을 입력해 줍니다. module.exports = { webpack: { configure: { target: .. 2020. 9. 20.
react-create-app으로 만든 typescript 프로젝트에 eslint 적용하기 적용해 보면서 하도 고생해서 정리해 봅니다. Create-react-app 먼저 create-react-app를 통해서 프로젝트를 생성합니다. $ yarn create react-app my-app-name --template=typescript $ cd my-app-name Eslint 생성된 프로젝트 폴더로 이동한 후 eslint를 설치 해 줍니다. $ yarn add -D eslint 이게 yarn eslint --init을 통해서 eslint를 설정해 줍니다. $ yarn eslint --init ? How would you like to use ESLint? To check syntax only To check syntax and find problems ❯ To check syntax, fin.. 2020. 9. 15.
Typescript 기반으로 React Electron App 시작하기. 먼저 기본적으로 node.js가 설치가 되어 있다는 가정으로 설명 합니다. yarn이 설치 되어 있지 않다면 먼저 yarn을 설치해 줍니다. yarn은 npm과 같은 node의 패키지 매니저 입니다. $ npm install -g yarn 그리고, create-react-app을 통해서 타입스크립트 기반의 프로젝트를 생성해 줍니다. $ npx create-react-app my-app-name --template typescript $ cd my-app-name 위와 같이 명령어를 넣어 주면 타입스크립트 기반으로 react와 webpack 설정이 되어 있는 프로젝트가 설정 됩니다. 이제 Electron과 실행에 필요한 패키지를 설치해 줍니다. 아래 패키지들은 개발에서만 사용되는 패키지라서 --dev를 붙.. 2020. 9. 15.
vscode에서 vue 프로젝트 생성시 ESlint와 Prettier 설정해 주기 기존에 사용하던 TSLint가 더이상 지원을 받지 못 하게 되면서, ESlint로 넘어가야 상태가 되었습니다. 여기서는 Vue 프로젝트를 생성하면서 ESlint와 Prettier를 사용하는 세팅을 간단하게 설정하려고 합니다. 사용하는 툴은 vscode입니다. vue create myproject 형태로 기본 프로젝트를 선택 합니다. > npx vue create myproject ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel (*) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex (*) CS.. 2020. 4. 19.
Postman에서 응답으로 받은 변수 사용하기 Postman을 사용하다 보면 요청한 값을 변수를 이용해서 저장하고 싶은 데이터가 있을 경우가 많습니다. 예를 들면 인증키 값이라던지, 사용자 정보 등등.. 이 있는데.. 이럴때 사용할 수 있는 유용한 기능이 있어서 소개 합니다. Tests를 기능을 이용하는 방법입니다. 물론 테스트용도로 사용한다면 더욱 훌륭하게 사용 할 수 있을 겁니다. 먼저 사용할 요청에서 Tests 탭을 선택하고 아래와 같이 넣어 줍니다. var jsonData = JSON.parse(responseBody); if (jsonData.result === true) { pm.environment.set("authToken",jsonData.data.authToken); } 그리고 혹시 요청의 내용을 보고 싶다면 아래와 같이 conso.. 2020. 4. 7.
medis를 윈도우용으로 빌드하기.. https://github.com/luin/medis medis는 앱스토어에서 $4.99에 판매하는 redis용 gui 어플리케이션입니다. 하지만, 소스를 직접 컴파일하면 사용이 가능 합니다. 그런데 윈도우용 컴파일 링크가 있는데.. 이상한 설치 화면이 나오고, 빌드 한지도 2년이 넘었길래 빌드 하는 스크립트를 만들어서 직접 빌드를 해 봤습니다. https://github.com/gyuha/medis 아래 주소에서 소스를 clone 받으신 후 > npm install > npm run packWin 이렇게 하면 .\dist\out\Medis-win32-ia32 폴더에 실행 파일이 생깁니다. 실행하면 아래와 같이 나옵니다. https://github.com/gyuha/medis/commit/acf42bec.. 2020. 4. 4.
자바스크립트 배열 메서드 정리 Array 추가/삭제 Array.push() 배열의 마지막 요소를 추가해 줍니다. let number_arr = [ 1, 2, 3, 4, 5 ]; number_arr.push(6); console.log(number_arr); // [ 1, 2, 3, 4, 5, 6 ] Output : [1, 2, 3, 4, 5, 6] Array.unshift() 배열의 가장 첫번째 요소를 추가해 줍니다. let number_arr = [ 1, 2, 3, 4, 5 ]; number_arr.unshift(6); console.log(number_arr); // [ 6, 1, 2, 3, 4, 5 ] Output : [6, 1, 2, 3, 4, 5] Array.pop() 배열의 가장 마지막 요소를 삭제 합니다. let numb.. 2020. 2. 2.
윈도우 터미널 프리뷰 복사/붙여 넣기 단축키 설정하기 Windows Terminal (preview)를 기본 cmd 대신 써 볼까하고 사용중인데.. 복사/붙여넣기가 잘 동작하지 않아서 방법을 찾아서 공유 합니다. 메뉴에서 settings 또는 Ctrl + ,을 누르면 메모장에 설정값이 표시 됩니다. 여기서 keybindings에 아래와 같은 내용을 추가 하면 됩니다. "keybindings": [ { "command": "paste", "keys": ["ctrl+shift+v", "shift+ins"] }, { "command": "copy", "keys": ["ctrl+shift+c"] } ] 복사는 ctrl+shift+c로 가능하고 붙여 넣기는 ctrl+shift+v또는 shft+ins로 가능해 집니다. 잘 사용하세요~ ​ 2020. 1. 28.
vscode에서 JetBrains Mono 폰트 사용하기 개발툴로 유명한 JetBrains에서 코딩용 새로운 고정폭폰트를 공개 했습니다. 상업적용도와 비상업적용도 모두 사용이 가능한 아파치2.0 라이센스 입니다. 그런데, 이 폰트에 보면 합자(ligature)기능이 있습니다. 이 기능은 코딩하다 보면 많이 쓰이는 ==이나 !=를 합자 형태로 표시해서 가독성을 높여주는 기능입니다. 대략적으로 보면 아래와 같이 차이가 있습니다. 그리고, vscode에서는 합자 기능을 사용할 수 있습니다. 설정하는 방법은 File > Preferense > Settings (단축키: Ctrl + ,)을 선택하고 상단에 Open Settings(JSON) 버튼을 눌러 줍니다. 그리고, 아래 내용을 추가해 주면 됩니다. { "editor.fontFamily": "Jetbrains Mo.. 2020. 1. 17.

티스토리툴바