개요 Lookahead, Lookbehind 기능은 다소 고급 문법에 속합니다. 자 일단 선 요약하면 다음과 같습니다. 패턴 타입 matches X(?=Y) Positive lookahead X if followed by Y X(?!Y) Negative lookahead X if not followed by Y (?<=Y)X Positive lookbehind X if after Y (?<!Y)X Negative lookbehind X if not after Y 이러한 기능을 모아서 Lookaround 라고 합니다. 본 기능이 동작하는 방식은, 이해하기 쉽게 설명을 하자면, […]
[Node.js] pug + inline-css로 이메일 템플릿 만들어 보내기 (작성중)
개요 pug 란 html 을 좀 더 쉽게 생성하게 해주는 도구입니다. pug 는 자신만의 문법이 있으며, 이는 기존에 태그를 열고 닫는 html 보다 편한 건지는 사람마다 다르겠지만, 문서의 같은 양으로 보자면 실제로 타이핑하는 것들이 훨씬 적어지는 것도 사실입니다. 그리고 pug에는 상속 기능, mixin, interpolation, 변수 기능 등을 제공해주기 때문에 좀 더 원활하게 상황에 맞는 html […]
나의 POP!_OS 설치기 (+ 세팅)
개요 윈도우에서 wsl 로 리눅스 환경을 테스트 하다가 못해먹겠어서 그냥 스스디 하나 더 사고 리눅스를 깔았다. POP!_OS 란 System76 이라는 컴퓨터 만드는 회사에서 배포하고 있는 리눅스 운영체제이다. 우분투 베이스일 것이다. 그러므로 검색할 때 잘 모르겠으면 그냥 ubuntu 를 붙이면서 검색하면 됨. 어떻게 해서 POP!_OS 를 설치하게 되었는지에 대한 스토리가 있다. 처음엔 그래픽카드 때문에 리눅스에서 드라이버가 […]
[리뷰] 귀멸의 칼날 애니메이션 + 극장판 후기
참고로 이 글은 이미지가 없다. 스포일러를 원하지 않으시는 분들은 뒤로가기를 권장합니다. 이전부터 계속 보고 싶었던 작품이었다. 만화로는 완결까지 진작에 다 보았지만, 한 번에 몰아서 보면 뒤에 기억이 날 안난다는 단점이 있어서, 세부적인 스토리는 까먹은 채로 애니메이션을 보기 시작했다. 본인은 극장판을 먼저 보고 난 후 애니메이션을 보았다. 처음에 극장판은 하나의 스토리로 완전하게 이루어져 있는 줄 알았는데, […]
Typescript + React + Tailwind + styled-components 맛보기 (작성중)
개요 극한의 효율적인 개발 환경을 만들기 위해 혼종을 만들어봅시다. 하하. 일단 실제로 프로젝트를 개발하고 나서 쓰는 포스팅은 아닙니다. 다만 다른 Vue 프로젝트를 진행해본 바 있고, 컴포넌트를 활용할 때 맞닥뜨리는 다양한 상황들을 미리 고려해보면서 작업 환경을 만들고자 했습니다. 실제로 개발했을 때 어느 부분에서는 실용적이지 않을 수 있습니다. 콘셉 Typescript 로 타입 자동완성 및 타입 불일치와 같은 […]
Google Workspace 에서 우리 회사의 고객센터 이메일을 만들어 운영하기 + node.js googleapis 활용하여 이메일 발송하기
들어가기 전에 자 일단 고객센터 이메일이란 것은 그냥 비유적인 표현일 뿐입니다. 우리의 목표는 Google Workspace 구성원들과 함께 쓸 수 있는 별도의 이메일 계정을 하나 만들어 관리하는 것입니다. 이 메일은 고객센터 이메일 될 수도 있고, 홍보 이메일 발송용이 될 수도 있고 여러가지 비즈니스 목적에 따라 다양해질 수 있겠지요. 여기서의 핵심은 새로운 사용자를 추가하는 것이 아니라 Groups […]
실제로 사용 가능한 nginx 프록시 서버 만들기 (docker-compose)
개요 실제로 사용 가능한 nginx 프록시 서버를 만들기 위한 여정입니다. 필자는 보안에 대한 전문가도 아니고 nginx 전문가도 아닙니다만 그 과정을 최대한 종합적으로 정리해보고자 합니다. 본 글에서는 docker 를 활용하므로, docker 에 대한 기본적인 개념 및 docker-compose 를 간단하게 이용할 수 있는 정도의 지식만 있으면 됩니다. 또한 nginx 를 활용하므로 nginx 가 어떤 웹서버인지 간단하게나마 알면 […]
[Vue.js] Higher Order Component (고차 컴포넌트) 를 활용하여 로딩 버튼 만들기
개요 본 글은 vue 버전이 2 입니다! 대상 독자는 외부 컴포넌트를 불러올 수 있고, Single File 컴포넌트를 직접 만들어 사용할 줄 아는 분들입니다. 즉 props와 이벤트의 구조도 알고 있어야 글을 이해하실 수 있을 것입니다. 우리는 종종 래퍼 컴포넌트가 필요할 때가 있습니다. 우리는 bootstrap-vue 라이브러리의 Button 의 기능을 확장하여, 만약 로딩이라면 로딩바가 돌아가는 버튼을 만들고자 합니다. […]
[javascript] 중첩된 객체에서 원하는 필드를 뽑아오기
개요 본 글에서는 중첩된 객체에서 어떤 값을 가져온다는 간단한 유틸리티 함수를 만듭니다. 하지만 이미 너무나도 유명한 유틸리티 라이브러리인 Lodash 등을 이용해보는 것이, 라이브러리 자체를 익히는 데 시간과 노력이 많이 들 수 있지만, 추후 생산성 측면에서 훨씬 좋아질 수도 있습니다. 동기 중첩된 객체에서 정보들을 한번에 손쉽게 가져오는 방법을 계속 재사용해야 했습니다. 예를 들어 obj 가 뭐가 […]
mongoose 에서 search 필드를 만들어 간단한 검색 지원하기
개요 MongoDB 에서 하나의 document 가 생성되거나 업데이트될 때마다, search 필드에 검색가능한 문자열을 저장하고, 추후 정규식을 이용하여 검색할 문자열이 포함되어 있는지 아닌지의 여부를 확인하는 방식을 통해 검색 기능을 구현해보도록 하겠습니다. 한글이 좀 더 원활하게 검색되게 하기 위해서 hangul-js 를 사용하여 한글을 낱낱히 흩어놓을 것입니다. 만약 검색해야 할 대상이 html 코드일 경우, HTML 태그와 같은 부분은 […]