본문 바로가기

분류 전체보기505

웹페이지 파비콘을 이미지로 사용하기 link 태그에 아래와 같은 형식으로 이모지를 넣어 주면 된다. Emoji 2021. 4. 21.
vscode에서 한번에 여러 프로젝트 한번에 불러 오기 vscode로 작업 하면서, 프론트와 백엔드를 별도의 제작해서 사용하는 경우가 있습니다. 매번 실행 프로젝트를 띄울때 마다.. 여러개의 창을 띄워야 하는데.. 이게 귀찮아서 한방에 띄우는 batch 파일을 한번 만들어 봤습니다. @echo off set paths[0]="C:\workspace\project-frontend\" set paths[1]="C:\workspace\project-backend\" set paths[2]="C:\workspace\project-cms\" for /F "tokens=2 delims==" %%s in ('set paths[') do ( echo run %%s cd %%s CALL code . ) 위에서 코드에서 paths의 폴더와 숫자를 신경써서 넣어 주시면 됩니다. 2021. 3. 10.
Typescript로 만든 react 프로젝트에서 경로 별칭 사용하기.. react 프로젝트를 진행하다 보면 아래와 같이 경로가 복잡해 지는 경우가 있습니다. import MyComponent from "../../../../../components/MyComponent" 이럴때 간단하게 별칭을 사용해서 아래와 같이 줄이는 방법을 소개 합니다. import MyComponent from "@/components/MyComponent" tsconfig.json에 아래와 같이 추가를 해 줍니다. { "compilerOptions": { // 추가 룰 "baseUrl": "./src", "paths": { "@/*": ["*"], } } } create-reacte-app으로 프로젝트를 만들었다면, npm run eject를 해 주시고 tsconfig-paths-webpack-pl.. 2020. 11. 23.
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.