전체 글
-
실무에서 쓰는 유용한 타입스크립트 5가지카테고리 없음 2023. 5. 10. 16:12
Without falsy 배열을 인수로 받아, null, undefined, false와 같은 Falsy 값이 제외된 배열을 반환합니다 function withoutFalsy(arr: T[]) { return arr.filter( (value): value is Exclude => !(value === null || value === undefined || value === false) ); } const items = [1, null, undefined, 3, 0]; // (number | null | undefined)[]; const numbers = withoutFalsy(items); // number[]; Merge type 두 개의 타입을 병합하여 새로운 타입을 생성합니다. type Merg..
-
[오픈소스코드리뷰] cookie카테고리 없음 2022. 8. 12. 09:28
들어가며 Cookie는 대부분의 웹사이트에서 사용되는 강력한 브라우저 API 이며 key=value로 쌍을 이루고 ;(Semicolon)으로 구분합니다. 브라우저마다 조금씩 다르지만 한 사이트 당 20개 정도로 한정되어 있고, key=value 를 인코딩 이후 4kb 가 넘지 않아야 하고, 모든 문자가 허용되기 때문에 저장할 때는 반드시 encode 하여 저장하는 것이 좋습니다. 작은 단위 정보로만 사용할 수 있기 때문에, 주로 사용자 정보, 통계 수치, 토큰 저장과 같은 기능 개발에 사용됩니다. 현재 리뷰 버전은 0.4.1 입니다. 리뷰 ... .travis.yml eslintrc.yml ... 특별한 설정은 없네요. Dayjs와 마찬가지로 Travis CI를 사용하고 있습니다. rules: eol-l..
-
[오픈소스코드리뷰] Dayjs카테고리 없음 2022. 8. 5. 17:33
들어가며 기존에 브라우저의 날짜와 시간을 쉽게 표현할 수 있는 Moment.js 를 많이 사용했었는데, 무겁기도 하고(18kb), 더 이상 개발을 진행하지 않아 대안으로 떠오른 경량화된 라이브러리입니다. Moment.js 와 매우 흡사하여 이미 사용해보신 경험이 있다면 금방 사용 하실수 있고, 모든 브라우저를 지원하며 ie는 9 이상부터 지원됩니다. 현재 리뷰 버전은 1.10.7 입니다. 주요 기능 - 날짜 포맷팅 - 다국어 - 플러그인 확장 리뷰 // files and folder ... .eslintrc.json babel.config.js .travis.yml prettier.config.js ... Babel과 테스트 러너인 Karma를 사용 하고, 테스트 프레임워크는 Jest를 사용하네요. 코드..
-
토이프로젝트에 시용하기 좋은 무료 웹호스팅 및 서비스카테고리 없음 2021. 8. 24. 19:14
들어가며 간단하게 도메인 1개, API 서버, Database, Github action CI/CD 구성, SSL, DNS, 통계만 하면 되는 작은 토이 프로젝트를 만들일이 생겼다. 일단 웹페이지는 추후에 SEO도 붙일까 해서 nextjs로 만들었고, API는 adonisjs, DB는 mariadb를 마지막으로 Github action으로 Docker로 배포까지 완성!! hosting.kr에서 도메인 구입 후 SSL, DNS, Cache 이용을 위해 Cloudflare를 붙였다. 잘 돌아가는 구만! (며칠 후) ... 음?? 왜 접속이 안되지? DNS 구성은 잘 되어 있는데, Docker와 NAS 접속이 안된다. 고정 IP가 아니다 보니 ddns를 이용 하고 있었는데, IP가 바뀌었나 해서 공유기 접속을..
-
[오픈소스코드리뷰] classNames카테고리 없음 2021. 1. 25. 21:44
들어가며 문자열로만 처리해야 하는 class name을 조건부로 결합하기 위한 간단한 Javascript 유틸리티입니다. 하지만 classnames project는 2년간 업데이트되지 않고 있으니, 사용법이 같은 clsx 도 같이 살펴봐 두시면 좋습니다. classnames는 동적 스타일에 주로 사용되며, react project에서도 굉장히 많이 사용되고 있습니다. tailwind, bulma, bootstrap과 같은 css framework를 사용하고 계신다면 더할 나위 없는 좋은 유틸리티입니다. 코드가 길지 않으니 빠르게 훑어보겠습니다. 현재 리뷰 버전은 2.2.6입니다. 리뷰 // packages.json // 생략 ... "scripts": { "benchmarks": "node ./bench..
-
node에서 nodemon과 babel-cli 로 실시간 콘솔 출력카테고리 없음 2020. 2. 18. 18:45
들어가며 Node.JS 에서 ES6로 함수 실행 결과를 확인하기 위해 매번 터미널에 node./index.js를 타이핑해야 하는 귀찮음이 있는데, 이를 nodemon으로 해결하고자 한다. $ npm i -D @babel/core @babel/node @babel/preset-env nodemon $ npx nodemon --exec babel-node --presets @babel/preset-env ./app.js TIP 실행하려는 파일 제일 상단에 console.clear()를 넣어 두면 갱신 시 터미널이 깨끗해진다. package.json 에 script로 nodemon 명령어를 작성해 두고 npm run 로 실행 하자. 마무리 VS Code와 Jetbrain에 Quokka js plugin 이 있..
-
PHP에서 Google Analytics API 이용하기카테고리 없음 2020. 1. 22. 11:37
들어가며좋은 서비스를 만들기 위해 수개월 동안 개발을 끝내고 나면 서비스의 안정성 및 개선을 위해 사용자가 어떻게 우리 서비스를 이용하는지 행동 파악이 중요하다.Google Analytics 사이트를 매번 접속해서 보고서를 확인하는 것은 매우 불편하거니와 원하고자 하는 정보를 정확하게 파악하기 어렵다. 그러니 Google Analytics API를 이용하여 통계 데이터를 쉽게 만들어 보자. 사전 준비Google Analytics 계정Analytics와 연동된 사이트Analytics IDPHP Laravel frameworkCredentials Key Analytics IDhttps://analytics.google.com/analytics/web/ 접속상단에 "전체 웹사이트 데이터"를 선택애널리틱스 계정..
-
Terminal command cheat sheet카테고리 없음 2020. 1. 21. 14:43
Shortcut (mac) Ctrl + A : 커서를 처음으로 이동 Ctrl + E : 커서를 마지막으로 이동 Ctrl + B : 커서를 한글자 앞으로 이동 Ctrl + F : 커서를 한글자 뒤로 이동 Ctrl + P : 입력 했던 이전 커맨드 Ctrl + N : 입력 했던 다음 커맨드 Ctrl + L : 전체 라인 지우기 Ctrl + R : 입력 했던 히스토리 검색 Command history copy mv grep less SSH Connect $ ssh @ -p // e.g user@123.45.67.89 -p 22 SCP - File/Folder copy $ scp [-P, -r] // e.g : scp -P 8080 -r ./hello.txt user@123.45.67.89:/www/home G..
-
웹 개발에 유용한 생성기카테고리 없음 2020. 1. 15. 16:01
들어가며 지금까지 배우고, 알게 된 것들을 정리할 겸 생성기를 만들어 보았다. 틈틈이 시간 되면 하나씩 만들어 보려고 한다. Random string 지정한 길이만큼 임의의 문자열을 생성한다. Youtube의 vid, facebook user hash와 같은 unique 한 아이디로 많이 사용된다. UUID 파일 업로드 시 파일 이름이 겹치지 않도록 하거나, 웹로그 저장 시 사용하였다. AWS S3 기반으로 Backoffice 개발 시에 Post 아이디로도 사용했었다. Metadata tags metadata 입력은 매번 귀찮은 작업이다. 내용을 알맞게 구성하여, 복사/붙여 넣기 하자. 사이트가 한번 공유 되면 각 서비스마다 Cache 가 남아 수정해도 반영되지가 않으니, 아래에 캐쉬 삭제 URL 참고 ..
-
Vue 개발자가 React로 사이트를 만들어 보았다카테고리 없음 2020. 1. 9. 19:04
들어가며 이용하는 서비스마다 비밀번호 규칙이 달라 오랜만에 접속하는 서비스는 비밀번호를 잊어버려 패스워드를 재설정하는 일이 빈번하게 발생했다. 명색이 개발자인데 서비스를 이용하는데 불편하면 안 되지 해서 패스워드를 관리하는 사이트를 만들기로 결심했다. 기능 정리 비밀번호를 관리하는 데 있어 제일 중요한 부분은 보안이다. 인터넷상에 비밀번호를 그대로 저장하는 것은 위험하니 비밀번호를 암호화 후에 필요할 때마다 복호화하는 기능과 아무나 내 비밀번호 리스트를 보이면 안 되니 로그인 기능이 필요했다. 필요한 페이지는 로그인, 새로 만들기, 목록, 수정/삭제의 4개의 페이지만 필요했고, Database, Auth는 Firebase로 구현했다. create-react-app my-password --template..