본문 바로가기

컴퓨터/인터넷21

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.
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.
MediaWiki에 VisualEditor 설치하기 어쩌다 미디어위키에 Visual Editor를 설치 할 일이 생겨서 설치 하면서 고생을 많이 해서 정리해 둡니다 ㅜ.ㅜ. Visual Editor Extension 설치 하기 https://www.mediawiki.org/wiki/Extension:VisualEditor 우선 이 사이트에 방문해서 아무런 생각없이 사이트에서 git으로 설치 하라는 대로 설치하고 띄워 봤더니.. 하얀 화면만 나오고 아무것도 없이 먹통이 되더군요 -_-;; 뭐가 잘 못 된지도 모르고 하얀 먹통이라서 뭐가 잘 못 된지도 모르는 채 하루를 날려 버렸습니다. 😨 결국 알아 낸것이 버전에 맞는 extension을 설치해야 하는 것이였습니다.. 아래 url에 가서 내가 설치한 mediawiki와 맞는 버전을 찾아서 받아서 설치해야 합.. 2020. 1. 11.
Express with typescript and webpack Express with typescript and webpack 기본 패키지 설정 package.json 파일을 만들어 줍니다. npm init -y express에 필요한 패키지를 설치해 줍니다. yarn add express body-parser Typescript 설정 typescript에 사용할 패키지를 설치 합니다. yarn add --dev typescript ts-loader ts-node tslint @types/node @types/express typescript에 필요한 내용을 설치 합니다. 그리고 tsconfig.json파일을 아래와 같이 입력 해 줍니다. { "compilerOptions": { "target": "es6", "module": "commonjs", "moduleRe.. 2018. 11. 13.
AWS DynamoDB 로컬 개발 환경 만들기.. AWS DynamoDB 로컬 개발 서버 구성하기 DaynmoDB 로컬 서버 띄우기는 의외로 쉽습니다. 쿼리가 더러워서 그렇지 -_-; 다운로드 : DynamoDB 로컬 설정(다운로드 버전) 우선 위 URL에서 압축 파일을 받습니다. 다운로드는 링크는 어디든 별 상관 없습니다. 압축을 풀고 해당 디렉토리에 들어가서.. java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar -sharedDb 그리고, 위 처럼 띄워 주시면 끝~ 하지만, 이제부터 더러운 일이 -_-;; 쿼리도 읽기 힘들고.. 타이핑하기도 힘듭니다… 그래서, GUI를 찾아 봤더니.. 간단한게 있더군요.. npm install dynamodb-admin -g 이렇게 설치 하고 ex.. 2018. 9. 13.
highlight.js를 tistory에서 사용하기. 얼마전 까지 블로그에서 SyntaxHighlighter를 사용 했습니다.기능도 많고, 좋은데... 뭔가 약간 마음에 들지 않아서..정확하게 이야기 하면.. 블로그에 이쁘게 붙는 느낌이 안 들어서 ^^;;;;다른 소스 하이라이터를 찾아 보다가.. highlight.js를 찾았습니다. 이 하이라이터가 마음에 드는건... 테마가 다양하고, 홈페이지에 붙어 있는데..이질감이 많이 들지 않는다는 점입니다.하지만, 마음에 들어도..쓰기 힘들다면, 말짱 도루묵이겠죠?그런데, 이 놈은.. 쓰는 것도 SyntaxHighlighter보다 편하네요 ^^;아주 딱이네요. 이제 사용법을 설명 드리겠습니다. 먼저 http://softwaremaniacs.org/soft/highlight/en/download/ 여기로 갑니다. 원.. 2013. 1. 17.
이메일과 클라우드 200GB 짜리 이벤트... 어쩌다가 보니.. 지금 쓰고 있는 PC가 회사와 집에서 옮겨 가면서 쓰고 있습니다. 거기다가, mac과 윈도우를 혼용해서 쓰고 있는 상황이라서. 요즘 요긴하게 쓰고 있는게 바로 클라우드 서비스 입니다. 덕분에 USB나 하드로 파일 옮기는 일이 없어지고, 여러 컴퓨터와 모바일 기기에서 파일 보는게 자유로워 졌죠. 그 중에서 용량을 많이 주는 Daum 클라우드를 주로 쓰고 있었습니다. 하지만, 지금 제 컴퓨터에 깔려있는 클라우드 서비스만 해도.. Daum 클라우드, uCloud, Naver N드라이버, DropBox -_-;; 이렇게 4개나 깔려 있네요.. 정리 좀 해야 하는데, 정리 할려는 찰나에 tistory에서 대박 이벤트를 진행하네요. @tistory.com 이메일을 만들면, 이메일로 클라우드 해서 .. 2011. 6. 23.
구글의 다양한 개발자 툴 보기 http://code.google.com/intl/ko-KR/more/table/ 여기에서 구글에서 지원하는 다양한 개발 툴을 테이블로 보여 줍니다. 무슨 화학 주기표 같네요 -_-;; 여기서는 10개의 그룹으로 나눠져 있는데, 각각은 모바일, 검색, 가젯, 데이터 APIs, 쇼셜, 기타, 광고, 지리, 툴, 크롬 등과 같습니다. 각 그룹별로 오버레이 되여서 사용되고 있습니다. 이 많은걸 정복하면, 뭘 또 만들지 궁금하네요. 구글에서 제공하는 개발툴을 이용하실 분들은 참고들 하세요. 2011. 1. 27.
국내 토렌트(torrent) 공개 트래커 사이트 정리.. #2 https://spreadsheets.google.com/ccc?key=0AhFSQd6VlsujdG50cnRZWi1XaUhOakR5RVhvS3k5bXc&hl=ko&authkey=CNfnn-wF 위 주소는 구글 문서도구 주소 입니다. 추가되는 사이트나 수정 사항이 있으면 수정해 주세요. 이름 주소 다루는 자료 신규가입가능 비고 투쉐어 http://www.toshare.kr/ 종합 신규 가입 중단 보고보고 http://www.bogobogo.net/ 종합 장수 사이트 폐인2 http://www.pain2.net/ 종합 신규 가입 중단 배달넷 http://www.baedalnet.com/ 종합 칠성상회 http://www.7-star.net/ 종합 드라마인포 http://dramainfo.com/ 종합 신규 .. 2010. 7. 30.
내 블로그에 구글 다국어 번역기를 달아 보세요. 내 블로그를 외국인도 보기를 원한다면, 사이트 번역기를 달아 주는 것도 좋을 꺼 같습니다. 블로그에서 간단한게 버튼 클릭만으로 다른 언어를 번역하는 방법을 소개 합니다. 원본 사이트 : http://jonraasch.com/blog/translate-it-easy-translation-for-multiple-languages 다운로드 : 위 translate-it.js파일은 원본 소스에서 영어를 추가하고, 한국어를 기본값으로 변경해 줬습니다. 다운로드 받은 파일을 블로그 사이트에 올려 주시고, 아래와 같이 스크립트를 html에서 script위치에 넣어 줍니다. TranslateIt.init(); 번역기 버튼들은 아래 코드를 html소스 코드에서 원하는 위치에 넣어 주시면 됩니다. 이렇게 5줄만 넣어 주시.. 2009. 11. 13.

티스토리툴바