본문 바로가기

Programming133

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 --typescript $ cd my-app-name 위와 같이 명령어를 넣어 주면 타입스크립트 기반으로 react와 webpack 설정이 되어 있는 프로젝트가 설정 됩니다. 이제 Electron과 실행에 필요한 패키지를 설치해 줍니다. 아래 패키지들은 개발에서만 사용되는 패키지라서 --dev를 붙여 줬습니다. $.. 2020. 9. 15.
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.
TypeORM 데이터베이스 자료형 TypeORM에서 자료형이 데이터베이스 마다 약간이 다른게 지원하고 있어서.. 정리 해 본 김에 공유 합니다. 표를 다시 만들려고 했지만, 너무 번거로워서 캡쳐 본을 올립니다. 자세한 내용은 아래 링크를 봐주시면 됩니다. https://docs.google.com/spreadsheets/d/1YqU1048fIpxxLMJ5eOxLEfxKUAN9AdVuTaL4kbPad7g/edit?usp=sharing 2020. 1. 12.
타입스크립트, AWS 서버리스로 들어올리다. 올해 초에 쓰기 시작했는데.. 연말이 돼서야 겨우 완료했습니다. 실무 개발을 해 보면서 프로젝트를 진행할 때, 최소한 이런 건 알고 하면 좋겠다 싶은 것들을 넣다 보니까 페이지가 많이 늘어나 버렸습니다. 뭔가 하나를 깊게 파는 서적인 아니지만, 전체적인 흐름 파악이나 개발의 선택 과정을 파악 할 때는 도움이 될 것이라는 생각으로 글을 썼습니다. 책 소개 타입스크립트를 활용한 웹 애플리케이션 개발 가이드 북 현재 웹 애플리케이션을 개발하기 위한 많은 개발 환경과 그 환경에 맞는 다양한 방법들이 생겨나고 있다. 그래서 우리는 어떤 방법으로 개발을 시작해야 할지 선택하기를 주저하게 된다. 이 책에서는 실무에 적합한 플랫폼과 다양한 개발 프레임워크 및 라이브러리를 소개하고, 각 상황에 맞는 플랫폼 및 프레임워크.. 2019. 12. 9.
Typescript에서 default import 개선.. express를 import하면 아래와 같이 import 했을 겁니다. import * as Express from 'express'; 하지만 tsconfig.json 파일에 아래 내용을 추가 하면.. { "compilerOptions": { "allowSyntheticDefaultImports": true, "esModuleInterop": true, } } 이렇게 import가 가능해 집니다. import Express from 'express' ​ 2019. 8. 12.
vscode에서 현재 Typescript 파일 디버깅... 먼저 node_modules에 ts-node와 typscript를 추가해 준다. $ npm install --save-dev ts-node typescript .vscode/launch.json 파일에 아래와 같이 추가.. { "version": "0.2.0", "configurations": [ { "name": "Debug Current ts file", "type": "node", "request": "launch", "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js", "args": ["${relativeFile}"], "cwd": "${workspaceRoot}", "protocol": "inspector", "env": { "stag.. 2019. 3. 12.
Node.js에서 euc-kr 인코딩 하기... node에서 어쩌다 보니.. euc-kr을 인코딩 디코딩 할 일이 생겨서 해 보고 고생한 김에.. 메모를 남긴다. 우선 iconv-lite 패키지를 설치해야 한다. $ npm install iconv-lite 아래는 euc-kr인 문서를 읽어서 utf-8로 바꾸고 euc-kr로 바꾸는 예제이다. let iconv = require('iconv-lite'); let fs = require('fs'); // 처음 로딩시 enc-kr 파일 let content = fs.readFileSync('content-kr.txt'); console.log(content.toString()); let utf8Str = iconv.decode(content, 'euc-kr'); console.log(utf8Str); //.. 2019. 3. 7.
Serverless를 사용해서 S3에 파일 바로 업로드 하기 Serverless file upload to S3 동작 구조 먼저 lambda 서버에 s3의 올릴 url을 요청 한다. 업로드 할 url을 받는다. 받은 s3 url에다가 파일을 보내 준다. 위와 같이 업로드를 진행 해서 자바스크립트 코드에 aws의 인증키를 노출하지 않고 S3에 바로 업로드를 진행 할 수 있다. Serverless 설치 $ npm i serverless -g # AWS 계정 설정하기 $ serverless config credentials --provider aws --key --secret Serverless 기본 프로젝트 만들기 $ serverless create --template aws-nodejs -p serverless-file-upload Serverless: Genera.. 2018. 10. 10.