분류 전체보기 검색 결과

해당 글 188건

NestJS를 배우기 전에 알아야 할 것 (1)

웹 프레임워크(Web Framework) 웹 개발에 필수적인 요소들을 묶어 개발자들이 쉽게 쓸 수 있게 하고자 하는 시도가 생겨났고, 이를 웹 프레임워크라고 부릅니다. 데이터베이스에 연결을 설정하고 데이터를 관리하거나, 세션을 맺고 유지하는 등의 동작을 정해진 방법과 추상화된 인터페이스로 제공합니다. 이 방법들이 프레임워크 사용자의 자유도를 제약한다고 생각할 수 도 있지만 프레임워크에서 표준으로 제시하는 방법을 이용하면 쉽고 빠르게 안정적인 애플리케이션을 구축할 수 있습니다. 웹 프레임워크에는 다음과 같은 것들이 있습니다.(백엔드와 프론트엔드 구분X) 프레임워크 개발언어 설명 React JavaScript TypeScript SPA(Single Page Application)나 모바일 앱 개발에 사용된다..
JavaScript/Nest 2022. 8. 9. 13:51

NestJS(Node.js Backend Framework)

NestJS 란? Node.js에 기반을 둔 웹 API 프레임워크 Express 또는 Fastify 프레임워크를 래핑하여 동작함 (기본으로 설치하면 Express를 사용함) Node.js는 손쉽게 사용할 수 있고 뛰어난 확장성을 가지고 있지만, 과도한 유연함으로 인해 SW의 품질이 일정하지 않고 알맞은 라이브러리를 찾기 위해 사용자가 많은 시간을 할애해야압니다. 이에 반해 NestJS는 데이터베이스, ORM, 설정(Configuration), 유효성 검사 등 수 많은 기능을 기본 제공하고 있습니다. 그러면서도 필요한 라이브러리를 쉽게 설치하여 기능을 확장할 수 있는 Node.js의 장점은 그대로 가지고 있습니다. NestJS는 Angular로부터 영향을 많이 받았습니다. 모듈/컴포넌트 기반으로 프로그램을..
JavaScript/Nest 2022. 8. 8. 15:49

Vite에 jsconfig 설정하기

막상 쓰려고하니, jsconfig.json으로 src 경로를 편하게 하던게 그리워져서 찾아보았습니다. vite.config.js 설정하기 다음과 같이 추가해주면, @를 ./src로 인식해준다. import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { port: 3000, }, resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }) 확인하기 기존에 assets 폴더에 있던..
JavaScript/Vite 2022. 8. 5. 16:42

Vite 프로젝트 생성해보기(with Tailwind CSS)

맥북에어(M1)이며, VSCode를 사용하였습니다. 노드는 16버전과 14버전을 번갈아가면서 사용하고 있지만, 해당 프로젝트를 만들 땐 14버전을 사용하였습니다. Vite 프로젝트 만들기 저는 npm을 사용하기에 npm으로 진행하였습니다. NPM $ npm create vite@latest Yarn $ yarn create vite PNPM $ pnpm create vite Project name 입력 생성할 프로젝트의 폴더명을 입력하시면 됩니다. 사용할 프레임워크 선택하기 저는 vue를 선택하였습니다. 그 이외에도 vanilla, react, preact, lit, svelte를 지원합니다. JavaScript와 TypeScript 중 선택하기 저는 자바스크립트를 더 선호하는 편이라 vue를 선택하였습..
JavaScript/Vite 2022. 8. 5. 15:26

Vite 정리

Vite 프랑스어로 '빠르다(Quick)'를 의미 HTML 삽입 미리보기할 수 없는 소스 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구 두 가지 컨셉을 중심으로 하고 있다. 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement (HMR)과 같은 것들 말이죠. 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. vite는 기본적으로 최적화된 설정을 제공하지만, Plugin API 또는 JavaScript API를 이용할 수 있습니다. (물론 T..
JavaScript/Vite 2022. 8. 4. 17:43

VSCode 글자 제한 세로 줄 긋기

실질적으로 기능은 없으나, 심적안정감 또는 자신과의 약속같은 느낌으로 긋게 되는데 맨날 찾아서 하다가보니 '뭐라고 검색했더라..'하면서 시간을 낭비하는 것 같아서 정리합니다. 1. 설정창 들어가기 2. ruler 검색하고 'settings.json에서 편집' 클릭하기 3. 원하는 길이로 설정하기 저는 80자, 100자, 120자로 설정을 하였고, 80자가 넘어가면 가독성이 불편하여 초록색 100자는 주의의 느낌으로 노란색 120자는 위험의 느낌으로 빨간색으로 설정했습니다. { "workbench.iconTheme": "vscode-icons", "editor.tabSize": 2,// 탭 크기 "git.autofetch": true, "editor.rulers": [// 세로줄 설정 { "column":..
잡학 2022. 7. 5. 10:54

Javascript: Optional Chaining (옵셔널 체이닝) ?.

Optional Chaning optional chaining 연산자(?.)는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?.연산자는 .체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (en-US) (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. 따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다..
JavaScript/javascript 2022. 6. 28. 14:54

버전의 LTS의 의미

LTS 버전이란? 대부분의 사용자게 권장한다는 멘트가 적혀있습니다. Long Term Support의 약자입니다. 즉, 장기간동안 지원을 한다는 의미입니다. 지원하는 부분은 취약점 패치, 개선사항에 대한 패치입니다. 노드에서의 오랜기간의 단위는 2년입니다. Current 버전이란? 최신기능이란 멘트가 적혀있습니다. 현재(Current)버전은 아직 개발 중인 버전입니다. 해당버전에 존재하는 기능이 패치를 통해 사라지거나 변경되어 새로 코드를 작성해야할 가능성이 존재합니다. 나의 생각 정리 왜 회사에서는 최신버전을 사용하지 않는가에 대한 의문점이 있었는데 '확실히 회사에서는 위험한 도박이겠구나'라는 생각이 들었습니다. 또한 개인 프로젝트를 진행하더라도 중간에 업데이트로 인해 코드를 변경해야하는 상황이 발생할..
잡학 2022. 5. 27. 10:36