분류 전체보기 검색 결과

해당 글 777건

더 나은 node.js 기반 server를 위한 아키텍쳐 + 팁들!

cineps를 만든 후 복기 겸 더 나은 node.js 아키텍쳐를 위해서 정리해보았습니다. 견고한 node.js 프로젝트 설계하기 본 글은 Sam Quinn의 “Bulletproof node.js project architecture” 글을 번역한 것입니다. [Bulletproof node.js project architecture 🛡️ Express.js is great frameworks f velog.io 원본 : softwareontheroad.com/ideal-nodejs-project-structure/ 특정한 사람만이 사용하는 아키텍쳐가 아닌 node.js 기반의 서버에서는 이런 아키텍쳐를 많이 사용합니다. 위와 같은 아키텍쳐를 프레임워크로 고정시킨 것이 Nest.js입니다. Nest.js를..
Node, Nest, Deno/🚀 Node.js (+ Express) 2021. 2. 15. 03:36

데이터 정제를 위한 정규식 tips

예시로 공부하는 javascript 정규식 : https://darrengwon.tistory.com/1420 정규식 분석에 유용한 사이트 : regexr.com/ 텍스트 마이닝을 마쳤다면 해당 문장을 정제하는 과정이 필요하다. 우선적으로 해야하는 것은 정규식으로 html 태그를 떼는 등 기본적인 정제가 이루어지고 다음에 맞춤법 교정 등이 들어가게 된다. 에를 들면 한국어 챗봇을 제작할 때, 한국어, 숫자를 제외한 문자는 제거하고, 웹 소스, 문장기호, 특수 문자 등을 제거하게 된다. 어쨌거나 핵심은 서비스에 불필요한 문자/문자열을 제거하는 것이다. 여기서는 데이터 정제에 자주 사용되는 정규식을 살펴보기로 한다. [a-zA-Z] a부터 z까지, A부터 Z까지. 즉, 영어 알파벳과 일치 [가-힣] 조합된 ..
🤖 ML/🔠 NLP 2021. 2. 14. 02:42

아나콘다 말고 미니콘다 합시다.

docs.conda.io/en/latest/miniconda.html Miniconda — Conda documentation Miniconda Miniconda is a free minimal installer for conda. It is a small, bootstrap version of Anaconda that includes only conda, Python, the packages they depend on, and a small number of other useful packages, including pip, zlib and a few others. Use th docs.conda.io anaconda는 너무 무겁다. 미니콘다를 하자. 어차피 주피터 노트북만 쓸 거 다 안다... 물론 ..
Programming Language/🐍 Python 2021. 2. 13. 17:13

key의 필요성, force rendering, index key 안티 패턴 제거

ko.reactjs.org/docs/lists-and-keys.html 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org list를 component로 뿌리기 위해서 다음과 같은 작업을 진행한 적이 있을 것이다. 사실 아래와 같은 방법은 안티 패턴이다. 반복되는 Component에 고유한 식별자인 key를 넣어주는 것이다. 추가적으로, 컴포넌트가 많아질때면 props를 기억하기 위해 React.memo를 이용하는 방법까지 살펴보았을 것이다. [1, 2, 3].map((el, i) => {el}) key를 이용한 force rendering 조금 변칙적인 사용법으로, 본래 사용법은 아니지만 force updat..
React, Next, Redux/⚛ React.JS 2021. 2. 10. 14:10

FileReader로 브라우저에서 file 다루기

developer.mozilla.org/ko/docs/Web/API/FileReader FileReader - Web API | MDN FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 developer.mozilla.org FileReader는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. 쉽게 말해 클라이언트단에서 file이랑 blob 사용할 수 있게 해준다는 겁니다. canvas..
웹 전반, 브라우저/Web API 2021. 2. 9. 17:48

mailto 프로토콜을 통해 메일을 수발신을 해보자

랜딩 페이지를 만들 때 잠재 고객으로부터 메일을 받기 위해 지금까지 해왔던 방법은 다음과 같다. 메세지 전송을 누르면 DB에서 이미 메일을 보냈는지 duplicate check를 하고 중복되지 않았다면 email을 DB에 저장 => 그 후, mailgun API를 통해 해당 이메일에게 감사 메세지 발송 => 메일을 보내는 데 성공하면 toast를 띄우거나 (react-toastify 가 참 디자인이 잘 되어 있다), Thanks you 페이지로 이동시켰다. 이렇게 번거롭게 한 이유는 누구도 outlook을 사용하지 않기 때문이다. 윈도우에서는 브라우저에서 별도 설정을 하지 않는 경우 outlook이 켜지는 것으로 알고 있다. 그런데 일반 기업 페이지에서 mail을 받아야 할 때는? 쉽게 말해 우리가 아쉬..
웹 전반, 브라우저/HTML, CSS 2021. 2. 9. 14:27

Intersection Observer를 활용한 이미지 동적 로딩

다른 포스트에서 옵저저 패턴 ~ Reactive Programming 패러다임 ~ RxJS으로 연결되는 프로그래밍 패러다임을 살펴본 바 있습니다. 여기서는 Intersection Observer(줄여서 io)를 활용하여 이미지를 동적으로 로딩해는 기능을 만들어보고자 합니다. 왜냐하면 Fuze에서 모델들의 사진을 뿌릴 때 이미지를 동적으로 로딩시켜야할 필요가 있기 때문입니다. intersection Observer는 또 뭐야 특정 DOM 객체가 우리가 보는 화면 영역(viewport)과 겹치는 교차 이벤트를 감시합니다. 쉬운 말로, dom이 우리가 보는 스크린에 노출이 되었냐? 아니냐?를 감지하는 겁니다. 기존에 scroll 이벤트를 감지하여 하용하는 방식은 스크롤이 내려가면 계속 트리거되기 때문에 성능에..
Programming Language/🟨 Javascript 2021. 2. 8. 09:06

Observer pattern, Observer API

옵저버 패턴? 디자인 패턴에 대한 글을 읽어봤다면, 옵저버 패턴을 들어본 적 있을 것이다. 데이터 종속적인 인터페이스가 데이터의 변화를 감시하는 구조이다. 쉽게 말해서, 표의 정보를 읽어 차트를 그렸고, 표의 정보를 바꿨다면, 그 값을 관찰(Observe)하는 차트는 실시간으로 변경되는 것을 말합니다. 신속한 동기화를 위해 '관찰'한다는 이 디자인 패턴이 발전하여 Reactive Programming 패러다임이 되었고, 이를 실행하기 위한 구체적인 수단으로 마이크로소프트에서 발표한 ReactiveX 라는 프레임워크가 등장했습니다. reactivex.io/ React에서 state를 변경하면 해당 state를 참고하는 컴포넌트가 재 랜더링되는 것도 옵저터 패턴 ~ Reactive Programing으로 이..
웹 전반, 브라우저/Web API 2021. 2. 8. 08:14

input checkbox 디자인하기

이번 프로젝트에서 아래와 같이 체크 박스를 스타일링해야 할 일이 생겼다. 1. ::before, ::after 가상 선택자 스타일링은 input, image에서는 동작하지 않는다. 쓰지 마세요.. 의미 없이 시간을 날렸... 참고: stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field input[type='checkbox'] { &:checked { // 안 된다. &::after { content: ''; background: red; padding: 1px 4px; } } } 2. appearance로 기본 스타일링은 날릴 수 있지만, 이용하지 않는 것이 좋다. 왜냐하면 checkb..
웹 전반, 브라우저/HTML, CSS 2021. 2. 7. 11:55

Next + Typescript (2) 기본 컴포넌트 타이핑

_app.tsx AppProps만 넣어주면 된다. 참고 ) nextjs.org/docs/basic-features/typescript#custom-app // import App from "next/app"; import type { AppProps /*, AppContext */ } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { return } // Only uncomment this method if you have blocking data requirements for // every single page in your application. This disables the ability to // perform autom..
React, Next, Redux/▲ Next.js 2021. 2. 3. 23:08