- 방문자수
- Best Story
전체 방문자
오늘 방문자
어제 방문자
Hot
-
[Python] 정규표현식과 re모듈 사용법
학습목표 정규표현식(re)에 대한 이해 및 숙지 정규표현식이란? regular expression 특정 패턴에 상응하는 문자열을 '검색', '치환', '제거' 하는 기능을 가짐 정규표현식의 도움없이도 패턴을 찾는 작업(Rule 기반)은 불완전하거나, 작업의 cost가 높음 ex) 이메일 형식 판별, 전화번호 형식 판별, 숫자로만 이루어진 문자열 등 raw string 문자열 앞에 'r'이 붙으면 해당 문자열이 구성된 그대로 문자열로 반환한다. a = 'abcdef\n' #escape 문자열 print(a) ''' abcdef ''' b = r'abcdef\n' print(b) ''' abcdef\n ''' escape string이란 escape sequence를 따르는 문자들로서 다음 문자가 특수문자임..
파이썬(Python) -
[BackEnd] 자바/스프링(Java/Spring)와 Node.js | 대기업은 자바, 스타트업은 Node.js(노드)? (Spring과 Nodejs 중에 고민이신가요?) + 스프링과 노드(node)의 역사
이번에 포스팅 할 주제는 자바/스프링과 Node.js의 차이점에 대한 내용입니다. 각각이 나오게 된 이유와 어떠한 이유로 사용되고 있는지에 대해 역사부터 시작하여 차근차근 적었으니 굉장히 알찬 포스팅이 될 것 같습니다. 제일 중요한 내용은 4, 5, 6번에 있기때문에 해당 내용으로 건너 뛰셔도 좋습니다. 1. 내가 사용하고 있는 프레임워크 개발자를 지망하시는 분들 혹은 IT업계 현업에서 종사하시는 분들이시라면 "대기업은 자바를, 스타트업은 Node.js를 대개 사용한다."라는 말을 많이 들어보셨을텐데요.내로라하는 기업의 백엔드 개발자 채용 공고를 살펴보면 'Java 기반 개발 경험이 있는 분'을 찾는다는 문구가 눈에 띕니다. 이와 반대로 스타트업의 채용공고에서는 Node.js로 개발을 해 본 경험이 있는..
백엔드 관련 지식 -
[React Native] 리액트 네이티브 1-개발 환경 세팅 및 기본 다지기
리액트 네이티브에 대한 소개와 개발 환경 세팅을 진행하면서 발생한 문제점들에 대해서 서술하였다. Chapter 1. 리액트 네이티브 개발 환경 갖추기 리액트 네이티브 소개 리액트 네이티브를 소개하기 전에 리액트 프레임워크에 대해서 먼저 알아보자면 리액트는 2013년에 페이스북에서 발표한 오픈소스 자바스크립트 프레임워크이다. 네이티브(native)라는 단어는 운영체제를 만들 때 사용한 프로그래밍 언어와 똑같은 언어로 만든이라는 의미를 내포하고 있는 것으로 네이티브 앱은 모바일 운영체제(안드로이드-자바, IOS-objectC, 오브젝티브-C)로 만든 앱을 의미한다. 네이티브 앱은 실행 속도가 빠른 장점이 있지만 습득해야 할 지식이 많고 똑같은 기능을 안드로이드와 ios용으로 따로 만들어야 한다. 그래서 크로..
ReactNative -
[컴퓨터구조] 12. Multi-cycle MIPS
Review: Processor Performance Program Execution time = (# instructions)(cycles/instruction)(seconds/cycle) = # instructions x CPI x TC HDL description Review: Processor Performance Program Execution Time= # instructions x CPI x TC = (#instructions/program)(cycles/instruction)(seconds/cycle) Single-Cycle Performance Critical path combinational logic에서 어떤 거는 데이터가 빠르게 오고 어떤 거는 느리게 올텐데 이 중 가장 느린 경로를..
컴퓨터구조 -
[자료구조와 알고리즘 | 파이썬] Trees (트리 자료구조)
Trees(트리 자료구조) 1. Terminology (용어) tree 자료구조: 저장할 data를 노드에 저장하면서 노드들이 트리형태로 나열된 형태. root node:위 그림에서 44번 노드 parent node(ancestor;조상) / children node(desendant;후손) 25번 노드의 ancestor -> 20, 39, 44 번 노드 오른쪽 점선 네모 박스는 67의 desendant node들이지만 왼쪽 박스는 67의 desendant node가 아니다. 2. Binary trees (이진 트리) Binary tree는 모든 노드가 두 자식을 최대로 갖는 구조입니다.(자식 노드가 최대 2개) binary tree에서 노드들 배치는 왼쪽 서브 트리와 오른쪽 서브 트리의 형태로 조직화되..
자료구조와 알고리즘(Python)
Latest Article
-
npm과 yarn을 비교한 글
1. 들어가며NPM(Node Package Mangaer)과 YARN(Yet Another Resource Negotiator)은 둘 다 자바스크립트 프로젝트에서 의존성을 관리하기 위해 사용되는 패키지 매니저입니다. (주로 Node.js 기반의 프로젝트에서 사용됩니다.) 이 둘은 같은 목적을 위해 기능을 제공하지만, 성능이나, 특징, 접근 방식에서의 약간씩 차이가 존재합니다. 사실 취향에 따라 사용하는 경우가 많아 새로운 프로젝트를 진행하실 분들이나 현재 프로젝트에서 패키지 관련한 불편함이 있다면 둘 간의 차이를 통해 어떤 것을 사용하는 것이 좋을지에 대해 방향성을 잡아주는 글이 되었으면 좋겠습니다. 2. 설치npm은 Node.js를 설치하면 같이 설치가 됩니다. 그렇기에 추가적인 설치가 필요하지 않습니..
자바스크립트(JavaScript) -
[React] 알아두면 쓸 데 있는 React Custom Hooks 10가지
1. 들어가며React 개발을 하다보면 custom hooks를 구현해주어야 할 일이 많이 있는데요. 커스텀 훅을 사용하면 개발자가 여러 컴포넌트에서 로직을 재사용할 수 있기 때문에 코드를 더 유지보수하기 쉽고, 모듈화하여 읽기 쉽게 만들 수 있다는 장점이 있습니다. 다음에 나올 10가지의 커스텀 훅은 실제로 많이 사용되는 것들이며, 경우에 따라 유용한 커스텀 훅이 있으니 참고하시면 좋을 것 같습니다. 2. useFetchuseFetch 훅은 일반적으로 API에서 데이터를 가져오는 데 사용될 수 있습니다. loading, error 및 response status를 관리하며 데이터 검색에 필요한 모든 로직들을 캡슐화하고 있습니다. import { useState, useEffect } from 'reac..
Front-end -
[JavaScript] JavaScript에서 우아하게 에러 핸들링(Error Handling)하기 (try-catch)
1. 들어가며JavaScript에서 에러 핸들링(Error Handling) 작업은 굉장히 유연하지만, 양날의 검과도 같습니다. 사실 에러 핸들링을 전혀 사용하지 않고도 굉장히 규모가 있는 서비스를 구현하는 경우도 많이 있습니다. 임의로 거대한 코드 블록을 try-catch 블록으로 감싸서 모든 잠재적 오류를 한 번에 처리할 수 있는 것이죠. 하지만 그러면 어떻게 될까요? 물론 코드 작성이야 빨라지겠지만, 견고함이 떨어지고 에러의 명확도가 떨어져 디버깅하기도 더 어렵습니다. 그리고 이러한 현상은 코드의 규모가 커지면 커질수록 더 강조되는 문제이죠. 이번 포스팅에서는 TypeScript와 ESLint를 활용하여 보다 명시적인 에러 핸들링을 처리하는 방법에 대해 공유하고자 합니다. 일단, 그 전에 먼저 자바..
자바스크립트(JavaScript) -
[프로젝트 | 트러블 슈팅] 강의 수강 완료의 기준 설정 및 트리거 방식
만났던 문제해당 프로젝트에서 겪었던 가장 크리티컬 했던 이슈는 강의를 다 들었는지에 대한 기준을 어떻게 잡을 것인가에 대한 것이었습니다초기에 클라이언트 측에서 제시한 요구사항은 플레이어바가 마지막에 도달하는 트리거(onPlayerEnd)를 기반으로 완료 처리를 하자는 의견이 나왔지만, 이는 강의를 실제로 다 듣지 않고 플레이어바를 끝으로 넘기는 인원이 있을 수 있기 때문에 다른 방식을 고안해야 했습니다. 첫 번째로 떠올린 방법은 setInterval() 을 통해 1초마다 상태를 업데이트하다가 영상의 길이와 똑같아 졌을 때 완료 처리를 하는 API를 보내는 방식으로 진행을 하기로 했습니다.실제로 이 방식으로 몇 주간 사용을 했었는데 사용자들의 불만이 몇 가지가 존재하였습니다.“강의를 끝까지 들었는데 체크가..
프로젝트 -
[React] Tanstack Query(구 React-Query)에서 query key 관리하는 라이브러리(query-key-factory)
1. 들어가며Tanstack Query는 React에서 데이터 페칭을 위해 다양한 기능을 제공하는 라이브러리로, 캐싱 및 동기화, 데이터 업데이트 등을 효율적으로 관리할 수 있습니다. Tanstack Query에서 'Query Key'는 핵심 요소 중에 하나로, 데이터를 식별하는 key로 동작하여 데이터의 고유성(unique)을 식별하고 알맞은 캐싱 동작이 이루어지도록 하는 데 중요한 역할을 합니다. 2. Query Key FactoryQuery Key Factory는 Tanstack Query에서 Query Key를 생성하기 위한 함수나 객체 자체를 의미하빈다. 복잡하거나 계층적인 구조를 갖는 Query Key를 관리해야 하는 경우 유용하게 사용될 수 있는데요. Query Key Factory 기법을 ..
Front-end -
[React] Zustand Deep DIVE 하기
1. 들어가며개인적으로 Zustand 라이브러리를 여태껏 사용해보면서 굉장히 만족감을 느끼고 있고 가히 최신 상태 관리 라이브러리 중에 앞서고 있는 라이브러리가 아닐까 생각이 듭니다. 이에 Zustand의 기본적인 사용만 해보는 것이 아니라 조금 더 다양한 기능들을 알아보면서 심화된 기능들도 사용해보고자 글을 작성하게 되었습니다. 2. Zustand의 위엄Zustand는 모던 React 라이브러리로 React 웹 개발 생태계에 상당히 뜨거운 바람을 불어 넣고 있습니다. 그 단순함은 Redux와 비교했을 때 엄청난 차이를 보여주기도 합니다.(안정성 측면은 모르겠지만...) 제가 체감했을 때는 난이도도 난이도지만 코드 양 자체가 별찍기 문제를 C언어로 푸는 것과 파이썬을 푸는 것을 비교하는 것과 비슷하다고 ..
Front-end -
[Next.js] Sentry로 효율적인 에러 모니터링하는 법(자동화 에러 추적 도구)
최근 프론트엔드 개발을 진행하면서 Sentry라는 에러 모니터링 도구를 알게되었습니다. 제가 맨 처음 프론트엔드 개발을 했을 때는 에러가 발생하는 경우 그냥 브라우저의 console.error()를 통해 에러 로그를 찍었었는데 이는 사용자 입장에서는 보이지도 않을 뿐더러 개발자 도구를 열어서 본다고 하더라도 의미없는 에러 로그만 보이게 됩니다. 개발자 입장에서도 어떤 에러가 발생했는지 사용자 브라우저에 들어가보지 않는 이상 모르기 때문에 디버깅을 하기 또한 어렵습니다. 그래서 최근에는 사용자 입장에서 유의미한 에러 문구를 보여주기 위해 콘솔을 찍지 않고 toast UI에 에러 메세지를 담아 보여주는 방식으로 사용하고 있습니다. 하지만 그렇다고 해도 그러한 에러를 수집하지 않는 이상 개발을 하는 제 입장에..
Front-end -
[AWS] 서버가 갑자기 다운되는 문제 (CPU 점유율 100%, Memeory 부족)
해당 문제는 AWS EC2에 올려 운영 배포 중이던 서버가 중간중간 죽는 문제를 겪게 되면서 이를 해결하기 위해 시도했던 방식들을 바탕으로 글을 작성해보았습니다. 아직도 정확한 원인은 파악하지 못해 계속해서 찾아보고 있는 중이며, 관련된 내용에 대해 의심이 가는 부분이 있다면 댓글로 남겨주시면 감사하겠습니다 :) 1. 문제 상황AWS EC2에 클라우드 환경을 구축하여 NestJS, NextJS, MySQL, Nginx를 Docker를 통해 컨테이너로 띄워 서비스를 운영을 하던 와중이었습니다. 실제 사용자를 받아 운영 중이던 서비스였고 사용자를 정식으로 받기 전부터 3명 정도가 미리 사용해보면서 문제가 되는 부분을 수정하는 느낌으로 미리 QA도 진행하여 성공적으로 서비스 런칭을 하게 되었습니다. 서버 스..
CS 지식 -
[kakao tech bootcamp] React 컴포넌트를 PDF로 만들기(react-pdf(O), react-to-pdf(X))
본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 react-pdf과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며'깃트폴리오'에서는 사용자의 이력서를 자동으로 생성해주며 AI와 같이 수정해 나가면서 최종적으로 나에게 온전히 맞춰진 이력서를 손쉽게 만들어 주는 것에 초점을 두고 있습니다. '이력서를 만들어준다'라는 것은 AI를 통해 만들어진 이력서의 내용을 단순히 보는 것에 그치는 것이 아니라 해당 이력서를 pdf 등의 문서로 저장하는 것까지 포함해야 했습니다. react 컴포넌트를 pdf로 저장하는 기능을 구현하려는 분들에게 제가 대신 겪었던 문제와 해결 방법을 공유하여 이 글이 조그만 이정표가 되어줬으면 하는 바램으로 글을 작성해보았습니다...
Front-end -
OpenAI(ChatGPT)가 Next.js에서 Remix로 전환한 이유
1. 들어가며2024년 9월 초 즈음에 OpenAI에서 기술 스택 전환에 대한 내용이 화두가 된 적이 있습니다. 생태계가 꾸준히 RSC(React Server Component), SSR(Server Side Rendering)으로 발전하고 있으며, 머지 않아 SPA(Single Page Application)이 없는 것처럼 동작하는 react 생태계를 보게될 것이라는 예측이 항간에 나오고 있습니다. Vercel은 Next.js와 자사의 플랫폼 사용을 증가시키고, 이를 통해 수익을 창출하기 위해 노력해왔습니다. 이런 행보는 매우 자연스러운 일이죠. 하지만 여기서 문제가 되는 것은 많은 React Core 팀 멤버들이 Next.js 팀으로 이동하면서, React의 방향을 Next.js의 우선순위에 맞추는..
Front-end -
[React] Redux가 좋은 경우 vs Zustand가 좋은 경우
1. React 상태 관리React에서 상태 관리는 애플리케이션 내에서 데이터의 동적인 변화를 추적하고 조작하는 그 행위 자체를 의미합니다. React에서 '상태(state)'는 컴포넌트의 렌더링 결과에 직접적인 영향을 미치는 데이터로, 사용자 입력, 서버로부터 받은 응답, 혹은 기타 이벤트에 따라 변경될 수 있다는 특징을 가지고 있습니다. 주요 특징은 아래와 같습니다.컴포넌트 상태: 각 컴포넌트는 자체적으로 상태를 가질 수 있도록, useState와 같은 훅을 통해 관리합니다.상태의 복잡성 증가: 애플리케이션 규모가 커지면서 여러 컴포넌트 간에 상태를 공유해야 하는 상황이 발생합니다.상태 관리의 중요성: 효율적인 상태 관리는 코드의 가독성, 유지보수성, 그리고 애플리케이션의 성능에 직접적인 영향을 줍니..
Front-end -
[kakao tech bootcamp] 카카오테크 부트캠프 챗봇(피카부) - 2 (트러블 슈팅)
1. 들어가며[프로젝트] - [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1 [kakao tech bootcamp] 카카오 테크 부트캠프 챗봇 프로젝트(피카부) - 1카카오테크 부트캠프(카테부) 챗봇, "피카부"는 카카오테크 부트캠프에서 진행한 팀 미션으로부터 시작된 프로젝트입니다. 카카오테크 부트캠프에서는 각 과정별로(풀스택, 인공지능, 클라우cdragon.tistory.com지난 포스팅에서 카테부 챗봇인 "피카부(Pikaboo)" 프로젝트에 대한 내용을 정리하였습니다. 이번 포스팅에서는 개발을 진행하면서 발생했던 트러블 슈팅과 개인적으로 최적화를 진행했던 내용에 대해서 정리해보려 합니다. 2. 내용메시지를 스트림으로 받아올 때 문제사이드바 데이터 공백 문제채..
프로젝트 -
[kakao tech bootcamp] React에서 드래그한 텍스트를 관리 하는 방법 (text selection, getSelection API)
본 포스팅은 '카카오 테크 부트캠프'에서 진행한 프로젝트인 '깃트폴리오'를 진행하면서 겪었던 트러블 중 text selection과 관련된 내용을 바탕으로 작성하였습니다. 1. 들어가며 깃트폴리오의 궁극적인 목표는 이력서를 생성해주는 데에서 그치지 않고 AI와 커뮤니케이션을 통해 나에게 맞는 최적의 이력서를 뽑아내는 데에 있습니다. 그렇기 때문에 '내 이력서'를 확인하는 화면에서는 이력서의 내용뿐만 아니라 AI에게 이력서의 특정 부분을 수정 요청할 수 있도록 우측에 마련한 '채팅 사이드바'가 존재하는데요. 기획 단계에서 이 부분을 구현하는 방식에 있어서 팀원들끼리 다양한 의견이 오고 갔었습니다. 물론 가장 이상적인 상황은 요구사항만 딱 보내도 AI가 알잘딱하게 알아서 수정해주는 것일 것입니다. 하지만 ..
Front-end -
[CS 지식] GraphQL이 뜨는 이유(feat. RESTful API 와 다른 점은?)
이 글은 최근 다양한 기업들의 기술 스택을 보면서 GraphQL이 많이 보이는 현상에 대한 궁금증으로부터 비롯되어 왜 요즘 많이 사용되고 있는 기술이며 어떻게 발전되었는지 그 과정들을 함께 살펴보려고 합니다. 1. "API를 위한 쿼리 언어""API를 위한 쿼리 언어" GraphQL 공식문서에 들어가보면 첫 페이지에 대문짝만하게 박혀있어서 가장 먼저 볼 수 있는 문장입니다.GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임입니다. GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.- ..
CS 지식 -
[Front-End] React 렌더링 방식 (React 탄생 배경)
1. 들어가며[Front-end] - [Front-End] 웹 브라우저 동작 방식 이해 (feat. 렌더링) [Front-End] 웹 브라우저 동작 방식 이해 (feat. 렌더링)1. 들어가며우리가 컴퓨터를 하면서 가장 많이 사용하는 프로그램은 무엇일까요? 단연 웹 브라우저(크롬, 사파리, Edge,...)일 것입니다. 웹 프론트엔드의 근간이라고도 할 수 있는 웹 브라우저가cdragon.tistory.com 지난 포스팅에서 브라우저가 어떤 방식으로 화면을 그리는지에 대해서 알아보았습니다. 이번 포스팅에서는 그렇다면 React는 어떤 과정들을 거쳐 브라우저에게 파일을 전달하며, 렌더링은 어떻게 되는 것인지에 대해 알아보도록 하겠습니다. 지난 시간 다루었던 웹 페이지가 렌더링 되는 과정을 간단히 요약하면 아..
Front-end -
JWT는 안전할까?
1. 들어가며그동안 많은 프로젝트에서 대부분 토큰 방식의 인증 방식을 채택하여 진행을 한 경우가 많았는데, 최근 진행한 프로젝트에서는 세션 방식의 인증을 사용해보았습니다. 카카오 OAuth2 로그인을 제공하는 Spring Security의 강력한 기능으로 백엔드에서도 적은 코드 양으로 구현을 할 수 있었지만 프론트엔드에서 토큰 관리를 따로 해줄 필요가 없다보니 너무 편해서 로그인에 거의 시간을 소모하지 않아 다른 기능에 온전한 집중을 할 수 있어 굉장히 큰 메리트로 다가왔었습니다. 하지만 서버 측에서 관리하는 세션이다보니 k8s 배포 환경에서 여러 가지 문제가 생기는 것을 볼 수 있었는데, JWT를 사용했을 때도 그러한 문제가 전혀 없던 것은 아니었기 때문에 이와 관련된 인사이트를 얻고자 올라온 글 중..
CS 지식
NestJS
-
[NestJS | Docs] Testing 알아보기
1. Testing자동화된 테스트는 소프트웨어 개발에 들어가는 모든 공수(effort)의 핵심 파트로 여겨집니다. 테스트를 자동화하면 개발 도중에 개별 테스트 또는 테스트 묶음들을 빠르고 쉽게 반복하여 테스트 해볼 수 있게 됩니다. 또한 제품을 출시할 때 품질과 성능의 만족을 보장하기도 합니다. 이렇듯 자동화는 개발자들에게 커버리지(테스트 범위)를 증가하는데 도움을 주며 더 빠른 피드백 순환을 가능하게 합니다. 그리고 각 개발자들의 생산성을 증가시키고 개발 생명주기의 정점(소스 코드 제어 체크인, 기능 통합, 버전 릴리즈 등)에서 테스트가 실행됨을 보장합니다. 그러한 테스트는 unit 테스트, end-to-end(e2e) 테스트, integration 테스트 등을 포함하여 다양한 유형에 걸쳐 분포합니다...
NestJS -
[NestJS | Docs] Exception filters (예외 필터)
1. Exception filters (예외 필터)Nest에는 애플리케이션 전체에서 처리되지 않은 모든 예외를 처리하는 예외 계층이 내장되어 있습니다. 애플리케이션 코드에서 처리되지 않은 예외가 발생하면 이 계층에서 해당 예외를 포착하여 적절한 사용자 친화적인(user-friendly) 응답을 자동으로 전송합니다. 기본적으로 이러한 작업은 Nest에 내장된 전역 예외 필터(global exception filter)에 의해 수행되며, 이 필터는 일반적으로 HttpException 유형(및 그 하위 클래스)의 예외를 처리합니다. 예외가 인식되지 않는 경우(HttpException도 아니고 HttpException을 상속하는 클래스도 아닌 경우)에는 예외 필터에서 기본(default)값으로 다음과 같..
NestJS -
[NestJS | Docs] Middleware 알아보기
1. Middleware미들웨어는 라우트 핸들러 전에 호출되는 함수입니다. 미들웨어 함수는 애플리케이션의 request-response 사이클에서 request, response 객체, 그리고 next() 미들웨어 함수에 대한 접근을 갖습니다. next 미들웨어 함수는 next라는 이름을 가진 변수로 흔히 표기됩니다. Next 미들웨어는 기본적으로 express 미들웨어와 동일합니다. express 공식 문서에서는 다음과 같이 미들웨어를 설명하고 있습니다. 미들웨어 함수는 다음과 같은 작업들을 수행할 수 있다:- 어떠한 코드든 실행한다.- request와 response 객체를 수정한다.- request-response 사이클을 종료시킨다.- 스택에서 다음 미들웨어 함수를 호출한다.- 만약..
NestJS -
[NestJS | Docs] Execution context 알아보기 (feat. ArgumentHost)
1. Execution contextNest는 여러 컨텍스트(예: Nest HTTP 서버 기반, 마이크로서비스 및 웹소켓 애플리케이션 컨텍스트)에서 작동하는 애플리케이션을 쉽게 작성할 수 있도록 도와주는 여러 유틸리티 클래스를 제공합니다. 이러한 유틸리티는 현재 실행 맥락(execution context)에 대한 정보를 제공하여 더 광범위한 컨트롤러, 메서드 및 실행 컨텍스트에서 동작하는 범용 guard, filter 및 interceptor를 구축하는 데 사용할 수 있습니다. 이번 포스팅에서는 두 개의 클래스를 다룰 것입니다: ArgumentHost & ExecutionContext 1-1. ArgumentHost classArgumentsHost 클래스는 핸들러에 전달되는 인자를 가져오는 ..
NestJS -
[NestJS | Docs] Configuration 사용법
1. Configuration애플리케이션은 대개 서로 다른 환경에서 실행됩니다. 그렇기에 환경에 따라 다른 구성 설정을 사용해야 해주어야 하는데요. 예를 들어, 일반적으로 로컬 환경에서는 로컬 DB 인스턴스에만 유효한 특정 데이터베이스 자격 증명에 사용되는 경우가 있습니다. 프로덕션 환경에서는 별도의 DB 자격 증명 세트를 사용합니다. 구성 변수(configuration variables)는 변경되기 때문에 해당 환경에 구성 변수를 저장하는 것이 가장 좋은 방법입니다. 외부에서 정의된 환경 변수는 process.env를 통해 Node.js 내부에서 볼 수 있습니다. 환경 변수를 각 환경에서 개별적으로 설정하여 여러 환경이라 발생할 수 있는 문제를 해결할 수 있습니다. 하지만 이러한 값을 쉽게 ..
NestJS -
[NestJS | Docs] Custom Decorators 알아보기 (커스텀 데코레이터)
1. Custom decoratorsNest는 데코레이터라는 언어 기능을 중심으로 구축되었습니다. 데코레이터는 일반적으로 사용되는 많은 프로그래밍 언어들에서 잘 알려진 개념이지만 자바스크립트 세계에서는 아직까진 비교적 생소한 개념입니다. 데코레이터의 작동 방식을 더 잘 이해하려면 이 글을 읽어보시기 바랍니다. 다음은 데코레이터에 대한 간단한 정의입니다:ES2016 데코레이터는 함수를 반환하고 target, name 및 property descriptor를 인자로 받을 수 있는 표현식입니다. 데코레이터 앞에 '@' 문자를 붙이고 데코레이터를 적용하려는 대상의 맨 위에 배치합니다. 데코레이터는 클래스, 메서드 또는 프로퍼티에 대해 정의할 수 있습니다. 1-1. Param decoratorsNe..
NestJS -
[NestJS | Docs] Passport 알아보기 (feat. authentication)
1. PassportPassport는 node.js 인증 라이브러리 중 커뮤니티에서 잘 알려져 있고 많은 운영 단계의 애플리케이션들에서 성공적으로 사용되고 있는 것 중에 하나입니다. 이 라이브러리를 Nest 애플리케이션과 통합하는 방법은 @nestjs/passport 모듈을 사용하는 것입니다. 고수준에서 Passport는 다음과 같은 몇가지 단계들을 실행합니다:'credentials'(예: 사용자 이름/비밀번호, JWT(JSON 웹 토큰) 또는 ID 공급자의 ID 토큰)을 확인하여 사용자를 인증합니다.인증 상태 관리(JWT와 같은 휴대용 토큰을 발급하거나 Express 세션을 생성함을 통해 관리)라우트 핸들러에서 추가 사용을 위해 인증된 사용자에 대한 정보를 Request 객체에 첨부합니다...
NestJS -
[NestJS] NestJS 트랜잭션(Transaction) 관리하기(With TypeORM)
1. 트랜잭션 with NestJS & TypeORM 데이터베이스 트랜잭션(Database Transaction)은 DBMS(Database Management System)내에서 수행되는 작업의 단위를 형상화하고, 다른 트랜잭션들과 독립되어 일관적이고 안전한 방식으로 처리되도록 하는 기술입니다. TypeORM에는 트랜잭션을 다루는 몇가지 다른 전략들이 존재합니다. 공식문서에서는 QueryRunner 클래스가 트랜잭션에 대한 완전한 제어를 할 수 있기 때문에 이를 사용할 것을 권장하고 있습니다. 먼저 우리는 일반적인 방식으로 클래스에 DataSource 객체를 주입해줍니다. @Injectable() export class UsersService { constructor(private dataSource:..
NestJS -
[NestJS] Logging 알아보기 (feat. winston)
이번 포스팅은 Interceptor의 개념을 알고 있는 상태여야 이해하기가 쉬운 내용이 포함되어 있습니다. Interceptor에 대한 설명은 다음 링크를 참고해주세요. [NestJS] Interceptor 개념정리 (+간단한 Logger)1. Interceptors란? 통상적으로 interceptor는 요청과 응답을 가로채서 중간에 로직에 변화를 줄 수 있도록 하는 컴포넌트를 말합니다. Nest에서는 이를 @Injectable() 데코레이터가 붙은 클래스를 통해 만들cdragon.tistory.com 1. Logging1-1. LoggerNest는 내장된 텍스트 기반의 logger를 가지고 있는데, 이는 애플리케이션 부팅 중에 사용되며 잡은 예외를 보여주는 일부 다른 환경들에서..
NestJS -
[NestJS | Docs] Guard 알아보기 (feat. athentication & athorization: 인증과 인가)
1. Guardsguard는 NestJS에서 @Injectable() 데코레이터가 붙은 클래스로 CanActivate 인터페이스를 구현합니다. 이 친구도 역시 단일 책임을 갖는데요. 런타임에 존재하는 특정 조건(permissions, roles, ACL 등)에 따라 특정 요청이 라우트 핸들러에 의해 처리될지 여부를 결정하는 책임을 갖습니다. 이는 일반적으로 authorization을 처리하기 위해 사용합니다. 권한부여-authorization(그리고 일반적으로 함께 사용되는 사촌격인 authentication)는 일반적으로 기존 Express 애플리케이션의 미들웨어가 처리해 왔습니다. 토큰 유효성 검사(token validation) 및 요청 객체에 속성을 추가하는 작업은 특정 route 컨..
NestJS -
[NestJS] TypeORM으로 MySQL 데이터베이스 연결하기(TypeORM 기능 다 알아보기)
Nest는 데이터베이스에 구애받지 않기 때문에 모든 SQL 혹은 NoSQL 데이터베이스들과 쉽게 통합할 수 있습니다. 개인 선호도에 따라 다양한 선택지를 선택할 수 있지만 저는 이 포스팅에서 MySQL을 Nest에서 어떻게 구성하는지에 대해서 글을 써보도록 할 것입니다. 가장 일반적인 경우에 Nest를 데이터베이스와 연결시키기 위해선 Express나 Fastify를 사용할 때와 마찬가지로 단순히 그 데이터베이스에 적합한 Node.js 드라이버를 불러와야 합니다. 혹은 더 높은 수준의 추상화로 동작하기 위해서 MikroORM, Sequalize, Knex.s, TypeORM, Prisma 등의 범용 Node.js 통합 라이브러리나 ORM을 직접 사용할 수도 있는데 이 중에서 TypeORM을 사용해볼 것입니..
NestJS -
[NestJS] Validation과 Transformation (검증과 변환) (feat. Serialization-직렬화)
1. Validation (검증) 웹 애플리케이션에서는 전달되는 모든 데이터의 정확성을 검증하는 것이 가장 좋은 시나리오일 것입니다. 그래서 들어오는 요청이 유효한지를 자동으로 검사하기 위해 Nest는 바로 사용할 수 있는 몇 가지의 내장 기본 pipes를 제공하고 있습니다. ValidationPipe ParseIntPipe ParseBoolPipe ParseArrayPipe ParseUUIDPipe 이러한 ValidationPipe는 강력한 class-validiator 패키지와 선언적인 validation 데코레이터를 사용합니다. ValidationPipe는 모든 들어오는 클라이언트의 페이로드(payload)에 대한 검증 규칙을 강화하기 위해 간편한 접근을 제공합니다. 그 구체적인 규칙은 local ..
NestJS -
[NestJS | Docs] Pipes 알아보기 (feat. 변환과 검증)
1. Pipes란?Pipe는 Nest에서 PipeTransform 인터페이스를 구현하는 클래스이며 이 클래스 역시 @Injectable() 데코레이터가 붙습니다. pipe는 두 가지의 전형적인 사용 사례를 갖습니다.transformation(변환): 입력 데이터를 원하는 형태로 변환합니다. (e.g., 문자열에서 정수형 변환)validation(검증): 입력 데이터를 검증하고 만약 통과되면 그 값을 바꾸지 않고 그대로 보내고, 검증에 실패하면 예외를 발생시킵니다. 두 경우 모두에서 Pipe는 컨트롤러 라우트 핸들러가 처리 중인 인수를 대상으로 작동합니다. Nest는 메서드(핸들러)가 호출되기 직전에 pipe를 삽입하고, pipe는 메서드로 전달되는 인수를 받아 이를 대상으로..
NestJS -
[NestJS | Docs] Interceptor 개념정리 (+간단한 Logger)
1. Interceptors란?통상적으로 interceptor는 요청과 응답을 가로채서 중간에 로직에 변화를 줄 수 있도록 하는 컴포넌트를 말합니다. Nest에서는 이를 @Injectable() 데코레이터가 붙은 클래스를 통해 만들 수 있고, Nest에서 제공하는 NestInterceptor 인터페이스를 상속받아 구현할 수 있습니다. interceptor는 AOP 기법으로부터 영감을 받아 그와 관련된 몇 가지 유용한 기능들을 할 수 있습니다.부가적인 로직을 메서드 실행 전 후에 바인딩함수의 반환 결과를 변환함수의 에러를 변환함수의 기본 동작을 확장특정 조건에 의존하는 함수를 완전히 override(e.g., 캐싱 목적) interceptor는 그 개념만 보면 middleware..
NestJS -
[NestJS | Docs] Module 알아보기 (+동적 모듈/Dynamic modules)
1. Module 이란?소프트웨어 설계에서 module이란 '애플리케이션을 기능 단위로 분해하고 추상화하여 재사용 및 공유 가능한 수준으로 만들어진 단위'를 의미합니다. 이를 통해 나온 '모듈화'의 의미는 소프트웨어의 성능을 향상시키거나 시스템의 디버깅, 테스팅, 통합 및 수정을 용이하도록 하는 작업입니다. Nest에서의 module도 이러한 개념에서 크게 벗어나지 않습니다. Nest에서 module이란 @Module() 데코레이터가 붙은 클래스를 의미합니다. @Module() 데코레이터는 Nest가 애플리케이션 구조를 조직할 때 보다 더 용이하게 만들어주는 메타데이터를 제공하는 역할을 합니다. 각 애플리케이션은 적어도 하나의 module을 가지게 되는데, 그 module은 root m..
NestJS
자료구조와 알고리즘(Python)
-
[자료구조와 알고리즘 | 파이썬] Shortest Path Algorithms(최단 거리 알고리즘) & Dijkstra Algorithm(다익스트라 알고리즘) & Bellman-Ford Algorithm(벨만-포드 알고리즘) + 위상 정렬(Topology sort)
1. Shortest Path Algorithms (최단거리 알고리즘) 1-1. Single-Source Shortest Paths 최단 거리 문제에서, 우리는 weight(가중치)가 부여된 방향 그래프(directed graph) G = (V, E)가 주어집니다. (앞으로 나오는 G=(V, E) 에서 대문자 V와 대문자 E는 각각 노드(vertex)와 간선(edge)의 집합을 의미합니다.) 가중치 함수(weight function)는 아래 식과 같습니다. 위 식의 의미는 edge를 real-valued weights(실수 가중치)에 매핑하겠다는 의미입니다.즉, 각 edge마다 주어지는 path에 대한 값이 존재한다는 것인데요. 특정 path의 weight를 의미하는 w(p) (p = 인 곳에서)는 해당..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Greedy Algorithms(그리디 알고리즘)
1. Greedy Algorithms다양한 최적화 문제들 중에서 최선의 선택을 결정하기 위한 방법으로 다이나믹 프로그래밍(동적계획법)을 사용하는 것은 다소 지나친 행동일 수 있습니다. 그렇기 때문에 더 단순하고 효율적인 알고리즘을 택해야 하는데, 그러한 관점에서 그리디 알고리즘(Greedy Algorithm)은 항상 그 순간에 최선으로 보이는 선택을 하는 알고리즘으로, 이는 내가 한 선택이 globally optimal solution(결과적으로 최선의 선택)을 이끌기 희망하는 locally optimal choice(당장의 최선의 선택)을 만들어 내는 알고리즘입니다. 그리디 알고리즘에 대해 요약을 한 내용은 다음과 같습니다.현재 상황에서 가장 좋아보이는 선택을 한다.local optimum(극댓값)(..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Dynamic Programming(동적계획법) - 다이나믹 프로그래밍; DP
자료구조와 알고리즘(with Python) 카테고리에서는 해당 알고리즘 및 자료구조로 코딩 문제를 잘 풀기 위해 파이썬 언어로 중요한 점들을 위주로 기술한 글입니다. 만약 DP에 대한 더 심화적이고 구체적인(이론) 내용을 보고 싶으신 분들은 아래 링크를 참고해주세요. [CS 지식/자료구조와 알고리즘(Java)] - [Algorithm] Dynamic Programming(다이나믹 프로그래밍) 알고리즘 [Algorithm] Dynamic Programming(다이나믹 프로그래밍) 알고리즘 이번 시간에는 다이나믹 프로그래밍(동적 계획법 ,DP)에 대해서 배워 보도록 하겠습니다. 1. 다이나믹 프로그래밍이란? Dynamic Programming 줄여서 DP(또는 동적 계획법)는 특정 범위까지의 값을 구하 cd..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Heaps (힙) 자료구조
1. Heapsheap을 이용하여 sorting을 하는 것을 heap sort라고 합니다. heap이 주로 사용되는 곳은 priority queue(우선순위 큐)입니다. 2. Complete binary tree (완전 이진 트리)완전 이진 트리는 그 높이에 대한 노드 수가 최대인 트리를 말합니다. 즉, 모든 레벨에서 노드들로 꽉 채워져 있는 것을 말합니다. 즉, 첫 번째 그림(height = 0) 에서 height 0에 대해 node를 maximum으로 채우는 경우는 오직 1개가 들어가는 구조입니다. 이진 트리(Binary tree)는 거의 완전합니다. 다음 두 조건만 만족한다면.마지막 레벨을 제외하고 모든 노드가 채워진 트리 구조입니다.노드는 왼쪽에서 오른쪽으로 채워져야 합니다. Propertie..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Graphs - 그래프 자료구조(+약간의 python 개념)
1. Dictionary and Copy in Python 그래프는 자료구조의 꽃이라 불릴 정도로 굉장히 중요하고 그 만큼 어려우며 대부분의 코딩테스트의 문제 중에서 킬러 문제를 담당하는 문제입니다. 그렇기 때문에 이를 제대로 이해해 보기 위해 파이썬의 개념을 먼저 익혀보도록 하겠습니다. 만약 파이썬 개념에 대해서 잘 아시는 분이시라면 중반부로 넘어가셔도 좋습니다! Python Dictionary (파이썬 딕셔너리) 우리가 많이 쓰는 리스트 자료구조에는 순서가 존재했습니다.(ordered) 하지만 딕셔너리는 순서가 없는 item의 모음으로 각 item이 key/value 쌍을 갖습니다. (즉, 순서가 없다! - unordered) Dictionary is mutable(변경 가능) and iterable..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Trees (트리 자료구조)
Trees(트리 자료구조) 1. Terminology (용어) tree 자료구조: 저장할 data를 노드에 저장하면서 노드들이 트리형태로 나열된 형태. root node:위 그림에서 44번 노드 parent node(ancestor;조상) / children node(desendant;후손) 25번 노드의 ancestor -> 20, 39, 44 번 노드 오른쪽 점선 네모 박스는 67의 desendant node들이지만 왼쪽 박스는 67의 desendant node가 아니다. 2. Binary trees (이진 트리) Binary tree는 모든 노드가 두 자식을 최대로 갖는 구조입니다.(자식 노드가 최대 2개) binary tree에서 노드들 배치는 왼쪽 서브 트리와 오른쪽 서브 트리의 형태로 조직화되..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Stacks and Queues (스택 & 큐)
1. Stack ADT(스택) 1-1. Stacks(스택) stack은 부엌에서 접시를 쌓는 것과 유사한 방식으로 data를 저장하는 자료구조입니다. 우리는 스택의 제일 윗 부분(top)에 접시를 둘 수 있고, 접시가 필요할 때 이 스택의 제일 윗 부분(top)으로부터 가져올 수 있습니다. 즉, 스택에 추가되는 마지막 접시는 그 스택으로부터 제일 먼저 집어 들어지는 것입니다. 이와 유사하게 stack 자료구조는 우리로 하여금 하나의 말단(end)으로부터 data를 읽고 저장할 수 있게끔 해주고 마지막에 추가되는 element가 첫 번째로 집어집니다. 따라서, stack은 last in, first out(즉, LIFO) 구조라고 합니다. 1-2. Basic operations(기본 연산) stack구조에..
자료구조와 알고리즘(Python) -
[Python] Abstract Data Types
Abstract Data Types(ADT) 1) Encapsulation (캡슐화) 2) Inheritance (상속) 3) Polymorphism (다형성) Encapsulation 멤버 함수의 구현과 object의 data에 대한 구현이 class를 사용하는 programmer들에게 알려지지 않도록 혹은 적어도 무관하게끔 class 정의하는 것은 여러 용어를 통해 알려져 있습니다. 사용되는 용어 중에 가장 흔한 것은 information hiding, data abstraction, and encapsulation이고 이것들 모두는 어떠한 class의 구현 시 세부사항이 그 class를 사용하는 programmer로부터 숨겨져 있다는 것을 의미합니다. 이러한 원칙은 OOP(Ojbect Oriente..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Linked List(연결 리스트) | Singly linked list(단일 연결 리스트)와 Doubly linked list(이중 연결 리스트)
1. Linked List ADTs Linked List를 ADT(Abstract Data Types)로 만들어 볼 것입니다. 참고로 파이썬의 리스트라고 하는 자료구조는 링크드리스트입니다! 그래서 생각해 보시면 다른 언어와 달리 파이썬에서 리스트(다른 언어의 배열)를 선언할 때는 그 크기를 지정하지 않고도 원소를 삽입하는 것을 아실 수 있습니다. 그래서 다른 언어의 배열에서 특정 인덱스에 접근하는 것은 random access이기 때문에 시간 복잡도가 O(1)이지만 파이썬에서는 노드를 타고 쭉 가기 때문에 O(N)의 시간복잡도를 갖습니다. 그렇다면 이제 링크드리스트에 대해서 알아볼까요? 2. Singly linked lists (단일 연결 리스트) 중요한 컨셉 head node: 리스트에서 가장 앞에 있..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Sorting (정렬)
1. Sorting (정렬) 이란? Sorting Algorithms의 종류 Bubble sort (버블 정렬) Insertion sort (삽입 정렬) Quick sort (퀵 정렬) Merge sort (병합 정렬) Topological sort (위상 정렬) Sorting이란 크기 순으로 오름차순 정렬된 리스트로 모든 아이템을 배치하는 것을 말합니다. 위 (a) 리스트에는 숫자가 212인 item이 여러개가 있기 때문에 숫자를 key값으로 sorting하게 되면 그들 간의 순서를 정하기가 모호합니다. 이 경우에, 같은 숫자의 key에 대한 item들이 정렬되지 않은 리스트에서 정렬되어있던 순서가 sorted data에 반영되어 정렬되면 Stable sort(안정 정렬)라 하고, 그렇지 않으면 Uns..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Recursion and Backtracking(재귀 & 백트래킹) + Divide and Conquer(분할정복) 알고리즘
1. Recursion 우리는 목표를 달성하기 위해 어떠한 메소드 안에서 또 다른 메소드를 호출할 수 있다는 사실을 알고 있습니다. 이와 유사하게 메소드는 자기 스스로 또한 호출할 수 있습니다. Recursion(재귀) 방식은 programming technique 중 하나로 어떤 메소드가 목적을 달성하기 위해서 본인 스스로를 호출할 수 있는 메소드를 말합니다. 두 가지 접근 to repetitive algorithms(반복 알고리즘) iteration(순회) loops(for, while, do-while) recursion(재귀) Function calls itself 즉, 함수가 자기 자신을 계속해서 반복하여 호출하는 방법 문제를 breaking down 하기에 적절한 방식 break down: 주..
자료구조와 알고리즘(Python) -
[자료구조와 알고리즘 | 파이썬] Searching(탐색)과 Complexity(복잡도) + 빅오표기법
1. Search Algorithmslinear search(선형 탐색)'The searching operation'은 정렬된 데이터로부터 주어진 item을 찾아내는 것입니다.만약 발견한 item이 정렬된 리스트에서 가져올 수 있다면 그것이 위치한 index 위치를 반환하거나 발견하지 못했다는 사실(None)을 반환합니다. (발견하지 못한 것이 0이 아님에 주의! -> 0 또한 index이기 때문에) 리스트 안의 item을 search하는 가장 쉬운 방식은 linear search 방법이며, 이는 전체 리스트의 item을 하나씩(one-by-one) 찾는 방식입니다. 이 포스팅에서는 개념 이해를 돕기 위해서 리스트의 item's type을 integer 변수로 할 것인데요, 정수가 비교적 제일 이해가 쉽..
자료구조와 알고리즘(Python) -
[python] Python objects(객체)란?
1. Object(객체) 전반적인 의미, 보여지고 만질 수 있는 물질적인 것. 프로그래밍 관점, 메모리 상에 존재하는 함수와 변수의 조합 파이썬에서 모든 것은 object입니다. integers strings functions files etc. 2. 파이썬 정수(Integer)는 단순 정수보다 더 많은 것을 의미한다. 표준 파이썬의 구현은 C로 쓰여졌다. 이는 이것은 모든 파이썬 object가 단순히 교묘하게 위장된 C 구조체라는 것을 의미하며, 이 구조체는 그 가치뿐만 아니라 다른 정보도 포함합니다. 예를 들어, x = 10000과 같이 파이썬에서 정수를 정의할 때 x는 단순히 'raw' 정수가 아닙니다. 이것은 실제로 여러 값을 포함하는 복합적인 C 구조에 대한 포인터입니다. 3. Python va..
자료구조와 알고리즘(Python) -
[python] Python 기본
자료구조와 알고리즘 with 파이썬은 위와 같은 영어 교재를 기반으로 작성한 내용입니다. 자료구조와 알고리즘 카테고리에 python 문법이 있으셔서 놀랐겠지만 아무래도 파이썬으로 해당 부분을 진행해 나갈 것이기 때문에 기본적으로 알아야 하는 파이썬 문법들을 정리해 보았습니다. 만약 파이썬을 이미 잘 아시는 분이라면 해당 포스팅은 건너 뛰셔도 좋습니다! 1. Python Flow Control 프로그램은 통상적으로 순서에 따라 실행되지만 프로그램 실행의 흐름(flow)를 제어하기 위한 주된 두 가지 방식이 존재합니다. conditional statements(is, else,...) loops(for, while ...) 2. if - else statements if...else 와 elif statem..
자료구조와 알고리즘(Python)