디지털 시대에 우리를 보호하고 연결해주는 가상의 세계. VPN, VPS, VPC. 이 세 가지 기술은 어떤 차이가 있을까요?

네트워크란?

물리적인 네트워크는 선으로 꼬여있고, 이더넷은 가까운 선으로 연결되어 있을 것입니다. 예를 들어, 스타크래프트 게임에서 로컬 게임을 할 때 같은 PC방 내의 유저만 접속할 수 있는 이유는 그들이 동일한 LAN(Local Area Network)에 연결되어 있기 때문입니다.

VPN(Virtual Private Network) - 가상 사설망 🌍

VPN의 필요성

그렇다면, 집에서 PC방의 친구와 함께 스타크래프트를 하고 싶다면 어떻게 해야 할까요? 랜선을 직접 하나씩 연결한다면 매우 번거롭겠죠? VPN은 이럴 때 해결책을 제공합니다. VPN을 통해 가상의 네트워크를 구축하여, 물리적으로 떨어진 위치에 있는 기기들도 마치 같은 로컬 네트워크에 연결된 것처럼 행동하게 할 수 있습니다.

VPN의 다른 용도

VPN은 국내 IP로는 접근이 제한된 해외 사이트에 접속하고자 할 때도 사용됩니다. 예를 들어, 특정 지역에서만 볼 수 있는 콘텐츠에 접근하고자 할 때 VPN을 사용하여 해당 지역의 IP로 접속하는 것이 가능합니다.

VPN의 원리가 궁금하다면?

VPN 잘 알고 사용하시나요?: VPN 가상사설망 원리

들어가며 오늘은 VPN에 대해 함께 알아보려고 합니다. VPN은 ‘가상 사설망’으로도 알려져 있으며, 많은 사람들이 외부에서 내부 네트워크에 안전하게 접속할 때 사용합니다. 하지만 VPN의 정확한 원리와 작동 방식에 대해서는 정확히 알지 못하는 경우가 많습니다. 그래서 오늘은 VPN에 대해 좀 더 깊이 있게 알아보겠습니다. VPN의 기본 개념 VPN은 Virtual Private Network의 약자로,

DCIT 정보의 모든 것: 더티코더즈

VPS(Virtual Private Server) - 가상 사설 서버 🖥️

VPS는 Virtual Private Server의 약자로, 큰 컴퓨터 하나를 여러 파티션으로 나눈 것입니다.

VPS의 특징

VPS는 하나의 물리적 서버 안에 독립적인 여러 가상의 서버를 구축합니다. 각각의 VPS는 독립적인 자원을 갖기 때문에 서로 영향을 주지 않습니다.

VPS의 활용

예를 들어, DigitalOcean과 Linode 같은 서비스에서는 VPS 호스팅을 제공하며, 개발자들은 이를 이용해 웹사이트나 애플리케이션을 호스팅하는 데 활용합니다.

VPC(Virtual Private Cloud) - 가상 사설 클라우드 ☁️

VPC는 VPS와 비슷하나, 몇 가지 큰 차이점이 있습니다.

VPC의 특성

VPC는 VM(Virtual Machine)이 포함된 거대한 컴퓨터를 생각하면 됩니다. 하지만 VPS와는 달리 VPC는 유동적입니다. 트래픽이 갑자기 증가하게 되면 그에 맞춰 자원을 제공하는 등, 탄력적인 자원 확장이 가능합니다.

VPC의 활용 🌩

예를 들면, Amazon Web Services (AWS)의 VPC 서비스는 사용자가 가상의 사설 클라우드 환경을 구축하고 관리할 수 있도록 도와줍니다.

결론

네트워크의 발전과 함께 우리는 더욱 빠르고 효율적인 방법으로 서비스와 데이터를 연결하고 공유하게 되었습니다. VPN, VPS, VPC는 각각 그 목적과 특성에 따라 다양한 활용 범위를 가지고 있습니다. 이 기술들을 이해하고 적절하게 활용한다면 더욱 효과적인 IT 환경 구축이 가능해질 것입니다. 🚀

함께 읽으면 좋은 글

XSS, CSRF 차이점 완벽하게 이해하기: XSS, CSRF 차이

들어가며 웹 개발과 관련하여, 신입들이 저지르는 가장 흔한 실수 중 하나는 보안의 중요성을 과소평가하는 것입니다. 많은 개발자들은 특징과 사용자 경험 그리고 성능을 우선시하며, 종종 보안이 문제가 될 때까지 경시합니다. 물론 저도 그랬구요. 하지만 이것만큼 중요한 것은 제품의 기본적인 보안입니다. 🥹 보안 조치를 무시하는 것은 무책임할 뿐만 아니라 위험합니다. 무시하면 데이터 침해,

DCIT 정보의 모든 것: 더티코더즈

개발 흐름에 Pull Request(PR)를 도입하면 코드 리뷰와 협업이 한층 수월해집니다. 그러나 때로는 이러한 PR을 로컬 환경에서 직접 실행하고 테스트해보고 싶을 때가 있습니다. 복잡해 보일 수 있는 이 과정을 간단하고 명확하게 해결할 수 있는 방법을 소개합니다.

원격 저장소에서 Pull Request 가져오기

GitHub는 원격 저장소의 Pull Request를 로컬로 가져올 수 있는 기능을 제공합니다. 이 과정은 PR을 올린 사람의 저장소에서 직접 가져오는 방식이며, GitHub 인터페이스에서 안내를 제공합니다.

Pull Request 브랜치의 존재

PR은 단순 링크가 아니며, 원격 저장소에 refs/pull/NUM/head라는 형태로 실제 브랜치가 존재합니다. 여기서 NUM은 PR의 번호를 의미합니다. 이를 활용하면 다음과 같이 로컬에 PR을 가져올 수 있습니다:

bashCopy codegit fetch origin pull/NUM/head:pr-NUM

이 명령은 origin 원격 저장소에서 pull/NUM/head를 pr-NUM라는 로컬 브랜치로 가져옵니다.

자동으로 Pull Request를 로컬에 가져오기

.git/config 활용하기

.git/config 파일을 조작하여 Pull Request를 자동으로 가져오는 방법이 있습니다. 일반적으로 clone을 실행하면 해당 저장소에 대한 정보가 이 파일에 등록됩니다. 이 파일에 fetch = +refs/pull/*/head:refs/remotes/origin/pr/*라는 패치 정보를 추가하면, Git에서 fetch할 때 원격 저장소의 모든 PR을 자동으로 가져오게 됩니다.

자동 업데이트의 편리함

원격 저장소의 PR을 자동으로 가져오면, 개발 서버에 PR을 적용하고 테스트하는 과정이 간단해집니다. 이 설정을 한 번 해두면, PR의 업데이트가 있을 때마다 자동으로 반영되므로 별도의 관리가 필요 없습니다.

.git/config 파일 보기 (전/후)

아마 vim .git/config 를 입력하면 다음처럼 작성이 되어 있을거예요:

[core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
        ignorecase = true
        precomposeunicode = true
[remote "origin"]
        url = https://github.com/example.git
        fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
        remote = origin
        merge = refs/heads/main

그럼 다음과 같이 코드를 추가해줍니다:

[core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
        ignorecase = true
        precomposeunicode = true
[remote "origin"]
        url = https://github.com/example.git
        fetch = +refs/heads/*:refs/remotes/origin/*
        fetch = +refs/pull/*/head:refs/remotes/origin/pr/*
# 바로 윗줄과 같이 추가해주세요.
[branch "main"]
        remote = origin
        merge = refs/heads/main

축하 드립니다 !

이제 git pull 혹은 git fetch를 활용하여 pr에 올라온 브랜치들에 접근할 수 있어요. 🎉🎉

안녕하세요 독자님들. 프론트엔드 개발자라면 차트를 만들어야 할 때가 종종 있는데요. 이번 시간에는 리액트에서 사용할 수 있는 공신력있는 차트 도구들을 추천해보려고 합니다.

목차

인기 많았던 라이브러리: Recharts

Recharts는 큰 사용자 기반과 커뮤니티를 자랑하는 가장 인기 있는 리액트 차트 라이브러리 중 하나로 두각을 나타냅니다. 재사용성과 유연성을 염두에 두고 만들어진 Recharts는 React 컴포넌트와 SVG를 활용하여 개발자들에게 강력하면서도 사용하기 쉬운 차트 해결책을 제공합니다.

Recharts는 매우 맞춤화가 가능하게 설계되어 있어, 개발자들이 자신의 필요에 맞는 차트를 만들 수 있습니다.

• 커스터마이징이 가능합니다.
• 애니메이션을 활용할 수 있습니다.

커스터마이징 끝판왕: Nivo

Nivo는 창의적이고 맞춤화 가능한 차트 솔루션을 제공하여 리액트 개발자들 사이에서 명성을 얻고 있습니다. 시각적으로 매력적인 웹사이트와 포괄적인 문서화를 통해, Nivo는 개발자들이 다양한 차트 스타일과 디자인을 쉽게 시작하고 사용할 수 있도록 돕습니다.

• 웹 사이트 내에서 바로 실행 해보고 복사 붙여넣기 가능
• SVG, HTML, 캔버스 차트 지원
• 다양한 차트 유형 및 애니메이션 제공
• 맞춤화에 중점을 둔 디자인으로 개발자들이 독특하고 흥미로운 데이터 시각화를 만들 수 있습니다. 이는 Nivo를 다른 리액트 차트 라이브러리와 차이가 있습니다.

다양한 차트 종류: React Vis

React-vis는 일반적인 차트 유형과 사용하기 쉬운 컴포넌트를 제공하는 사용자 친화적인 리액트 차트 라이브러리입니다. 우버에 의해 개발된 React-vis는 시각적으로 매력적인 차트와 포괄적인 문서화로 인식되어, 개발자들이 빠르게 학습하고 라이브러리를 사용하기 시작할 수 있도록 합니다.

React-vis의 주요 특징으로는 다양한 차트 유형, 반응형 디자인, 쉬운 맞춤화가 있습니다. 사용자 친화성에 중점을 둔 React-vis는 개발자들이 시각적으로 매력적이고 상호작용적인 데이터 시각화를 쉽게 만들 수 있는 접근 가능한 솔루션을 제공합니다.

이 라이브러리의 차트 유형은 다음과 같은 다양한 차트를 포함합니다:

• 히트 맵
• 산점도
• 등고선 플롯
• 육각형 히트맵
• 파이 및 도넛 차트
• 선버스트
• 레이더 차트
• 평행 좌표
• 트리 맵

크로스 플랫폼 차트: Victory

Victory의 주요 특징으로는 크로스-플랫폼 호환성, 맞춤형 차트, 다양한 차트 유형 지원이 있습니다. React와 React Native 모두에서 일관된 API를 제공함으로써, 개발자들은 다양한 플랫폼에 쉽게 통합할 수 있는 차트를 만들 수 있습니다. 이는 코드 중복의 필요성을 줄이고 개발 과정을 단순화하는 데 도움이 됩니다.

• 파이 차트가 다양합니다.
• 줌 기능이 있습니다.
• 온 클릭 시 색이 변경 됩니다.

가장 인기 많은 라이브러리: ChartJS

Chart.js는 이 아티클에서 언급드린 차트 라이브러리 중에서 다운로드 수가 많은 라이브러리입니다. 커스터마이징, 차트 종류, 기본 설정 등 어느 하나 부족함 없는 것이 특징입니다. 기본적인 것은 모두 갖추어져있으니 사용만 하시면 됩니다. 그렇기에 다운로드가 가장 많은 것이 아닐까 싶네요.

Airbnb의 강력한 솔루션: Visx

Visx는 공식적으로 차트 라이브러리가 아니라고 말하고 있습니다. 다만, 독자님들이 어떻게 사용하느냐에 따라 차트 솔루션이 될 수 있습니다. 핵심은 번들 크기가 매우 작다는 것입니다. '필요한 것'만 다루고 있는 컴팩트한 데이터 시각화 라이브러리입니다. 어떻게 활용할 지는 독자님에게 달려있습니다. 😙

금융 데이터 차트 끝판왕: React StockCharts

React Stockcharts는 독자님들이 만약 금융 데이터, 주식, 비트코인 등을 시각화 하고 싶을 때 최적의 솔루션이 될 수 있습니다. D3 기반으로 개발되어 있으며 줌, 드래그, 호버 시 정보 출력 등 사용자 인터랙션이 최적화 되어있습니다. 만약 주식 차트를 만들고 싶으신가요? 최고의 솔루션이 될 수 있습니다. 👍

• 만약 독자님이 주식이나 비트코인과 같은 차트를 나타낸다면 최고의 솔루션이 될 수 있습니다.
• 줌 가능
• 드래그 가능
• 차트 봉 클릭 가능

안녕하세요. 독자님들. 이번 아티클에서는 제가 즐겨 사용하는 NextJS 13을 Amplify에 배포하는 과정을 적어보려 합니다. 물론 NextJS 12라고 해서 크게 다를거는 없으니 천천히 따라하시면 금방 배포하실 수 있을거예요.

1) Amplify Hosting 시작하기

제일 간단한 챕터입니다. '시작하기' 버튼을 클릭해주세요.

원하시는 형상관리 툴을 선택하고 '계속'을 눌러주세요.

레파지토리를 선택해주세요.

2) 환경변수 및 빌드 설정하기

만약, 독자님들의 제품이 nextauth를 활용한 인증 관리, 그리고 데이터베이스 통신 등의 기능이 있어서 환경 변수가 있다면 무턱대고 '다음'을 누르지 마세요. 물론 만약 '다음'을 눌렀더라도 수정은 가능합니다.

먼저 환경변수를 살펴볼게요.

a) 환경 변수 설정하기

환경 변수는 '고급 설정'을 클릭하여 확장해서 설정할 수 있습니다. 제품에 필요한 환경변수 값을 추가해주세요.

환경 변수는 추 후 빌드 설정에서 별도의 세팅이 필요합니다. 저는 다음과 같은 환경 변수를 추가했다고 가정하겠습니다:

DATABASE_URL=example-db.com
DATABASE_USER=example-user
DATABASE_PASSWORD=example-password
NEXTAUTH_URL=https://dirtycoders.net
NEXTAUTH_URL_INTERNAL=https://dirtycoders.net
NEXTAUTH_URL_SECRET=secret-dt

자. 이제 독자님들의 .env.production 에 맞게 환경 변수 설정을 해주세요.

모두 설정이 되셨다면 빌드 설정 챕터로 넘어갑시다.

b) 빌드 설정 하기

기본적인 빌드 설정은 위와 같을거예요. 저는 npm 을 사용하기에 다음과 같이 변경해줬습니다:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci # <-- changed
    build:
      commands:
        - npm run build # <-- changed
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/* # <-- changed

<– changed 문구가 있는 곳이 변경되었습니다. 하단에 cache.paths 에 추가된 .next/cached 경로도 함께 추가해주세요. 이는 nextjs 캐시를 사용하기 위함입니다.

그리고 조금 더 수정할게요. 지금 상태로 빌드를 하게 되면 환경 변수를 읽을 수가 없 습니다. 환경 변수를 참조하려면 다음과 같이 설정해주세요.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e DATABASE_URL -e DATABASE_USER -e DATABASE_PASSWORD -e NEXTAUTH_SECRET -e NEXTAUTH_URL -e NEXTAUTH_URL_INTERNAL >> .env.production # <-- changed
        - cat .env.production # <-- changed
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

npm run build - env | grep -e DATABASE_URL -e DATABASE_USER -e DATABASE_PASSWORD -e NEXTAUTH_SECRET -e NEXTAUTH_URL -e NEXTAUTH_URL_INTERNAL >> .env.production 가 추가되었습니다. 이것은 환경 변수에 설정된 값을 node가 읽을 수 있도록 .env.production 파일을 생성하고 빌드 하게 합니다.

그리고 cat .env.production 을 추가했는데요. 해당 행은 나중에 빌드에러가 발생하였을 때 환경 변수 체크 디버깅 용으로 추가한 것이니 패스해도 됩니다. 😉

이제 남은건 '다음'만 눌러주시면 됩니다. 😁

축하합니다. 🎉🎉

이제 남은건 배포가 될 때까지 기다리는 것 뿐이예요. 만약 도메인 네임 서비스를 사용하시고 싶으시다면 Route53을 통해서 도메인을 구매하고 Amplify 에 연결하시면 됩니다.

Q1) 빌드에서 에러가 발생했어요.

괜찮아요. 로그는 모든걸 알려줍니다.

1. Amplify 사이드 바에 모든 앱 하단에 있는 독자님의 앱으로 이동합니다.
2. X 라고 표시된 빌드 에러를 클릭하세요.
3. 로그를 다운로드해주세요.
4. 다운로드 된 로그를 통해서 어떤 에러가 발생했는지 알 수 있습니다.

간혹, !!! Build failed 라던지, Non-Zero Exit Code detected 같은 원인을 유추하기 어려운 에러가 발생하기도 합니다. 이럴 때는 amplify.yml 에서 로그를 찍어가며 디버깅을 할 수도 있습니다.

Q2) 배포된 주소로 접속하니 Application error가 발생했어요.

Application error: a server-side exception has occurred (see the server logs for more information). 라는 에러가 발생하셨나요?

걱정하지 마세요. 로그를 확인하면 대강적인 내용을 유추해볼 수 있습니다. 다음 과정을 따라해주세요.

1. AWS에서 Cloud watch를 검색합니다.

2. 그리고 /aws/amplify/ 로 시작하는 로그를 클릭하고 로그를 확인해봅니다.

로그 확인해보시고 문제를 해결하시면 됩니다. 👍

마치며

함께 읽으면 좋은 글

벌써 NextJs 14가 나온다고?: NextJs 14 버전 소식

안녕하세요 독자님들. 현재 국내 웹 프레임 워크 중 가장 많이 사용되는 NextJs의 새로운 버전이 나왔습니다. NextJs 14 버전에서는 어떤 변화가 있는지 같이 알아보도록 합시다. 🚀🚀 Turbocharged 컴파일러의 등장 NextJs 13 버전부터 로컬 개발 성능의 향상에 주력해왔습니다. 이를 위해 next dev와 NextJs의 다른 부분들을 재작성하는 작업을 진행했습니다. 그러나 접근 방식을 변경하여 더

DCIT 정보의 모든 것: 더티코더즈

모달, 다이어로그 어떤 차이일까?: Modal vs Dialog

모달과 다이어로그, 이 두 용어는 사용자 인터페이스를 설계하거나 개발할 때 자주 마주치는 용어입니다. 그렇다면 이 둘은 어떤 차이가 있을까요? 이 문서는 그 차이점과 각각 어떻게 활용되는지에 대해 설명하고자 합니다. 목차 모달 (Modal)의 정의와 특징 요약 * 모달은 사용자의 주의를 끌기 위해 현재 화면 위에 새로운 작은 창이나 뷰를 올리는 UI

DCIT 정보의 모든 것: 더티코더즈

안녕하세요 독자님들. 👋👋 창업을 준비 할 때 꼭 알아야 하는 소식들이 있죠. 정부 지원사업 소식, 지역 사업 소식 그리고 받을 수 있는 혜택들은 많은데 누군가 알려주지는 않으니까요... 🥲 그래서 스타트업을 준비하시는 예비 창업자나 초기창업자를 위해 준비했습니다 !

목차

정부지원을 노린다면 무.조.건 필수: K-STARTUP

K-Startup 창업지원포털

중소벤처기업부 운영 창업지원포털 창업지원사업 정보 통합·제공 및 온라인창업교육, 창업공간정보, 온라인법인설립 서비스 제공

K-Startup 창업지원포털

K-Startup은 정부지원 사업의 모든 정보를 제공해주는 사이트입니다. 사업 주기/지원 분야 등 원하는 항목에 따라 맞춤형으로 정보를 탐색할 수 있다는 장점이 있습니다. 최소한 한 달에 한번, 혹은 연 초에 '창업지원사업 통합공고'는 꼭 확인해보세요.

중소벤처기업 및 소상공인 관련 사업: 중소 벤처 24

중소벤처24

중소벤처24는 기업관련 인증·증명(확인)서 발급 및 지원사업 안내·신청, 중기부 소관 민원 등 중소벤처기업부 산하 다양한 기관에 흩어져 제공되던 서비스를 한곳에서 통합 제공하는 중소벤처기업을 위한 포털입니다.

중소벤처24

부처별, 사업별로 흩어져 있던 중소벤처기업 및 소상공인 관련 사업 정보, 사업 신청과 증명서/확인서 발급을 한 곳에서 이용 가능합니다.

개별 웹사이트에서 각각 신청해야 했던 중소벤처 기업부 지원 사업 중 6개 분야인 소상공인, 기술, 창업, 경영, 보증, 정책자금에 대한 조회, 신청을 한 곳에서 관리할 수 있으며, 중소기업과 소상공인이 기업 경영과 각종 입찰, 계약 추진 시 필요한 증명/확인서를 발급할 수 있습니다.

소상공인/자영업 관련 사업: 소상공인 마당(자영업지원 포털)

소상공인마당

소상공인마당 홈으로

소상공인/자영업 관련 지원 사업 정보와 정책, 상권 정보 시스템을 제공합니다. 소상공인을 위한 다양한 정보와 지원사업에 대한 정보 등을 받을 수 있습니다.

특히 창업자 및 예비창업 또는 초기창업을 위한 맞춤 지원으로 상권정보 시스템을 제공하며 정책자금 관련 정보들도 살펴볼 수 있습니다.

창업진흥원

창업진흥원

창업진흥원

창업진흥원창업진흥원

중소벤처기업부 산하의 준 정부기관입니다. 초기/예비 창업자와 기 창업자의 창업 교육, 전문가 멘토링, 초기창업 활성화 프로그램을 운영하고 창업 준비부터 실행까지 맞춤형 창업 서비스 등을 지원합니다.

특히 예비창업, 초기창업, 창업도약 패키지 등 등.. 정부지원 사업은 다양하고 현재 창업의 단계에 따라 지원 받을 수 있는 것이 다르니 초기/예비 창업자라면 꼭 확인해보세요.

중소기업 종합 정보 포털: 기업마당

기업마당

중소기업 성공 길잡이 기업마당

중소기업 성공 길잡이 기업마당

기업마당은 중소벤처기업부에서 운영하는 중소기업 종합지원 대표 브랜드입니다. 중소기업에 관련된 정부의 지원사업 공고를 확인할 수 있습니다. 복잡하고 찾기 어려운 중소 기업 지원금 소식과 지역 별 지원 사업을 한 눈에 볼 수 있습니다.

서울의 창업 중심지: 서울 창업 허브

https://www.startup-plus.kr/

서울창업허브는 서울시와 서울산업진흥원이 운영하는 창업지원기관으로, 스타트업과 초기/예비 창업자들을 위해 다양한 서비스를 제공합니다. 서울의 성수, 공덕, 창동 지역에 위치한 창업센터는 업무 환경을 향상시키는 공간과 지원을 아낌없이 제공하며, 플랫폼 내에서는 지원사업, 유관기관 업무지원, 투자자 및 스타트업 연결, 서울창업현황 등의 다양한 정보를 확인할 수 있습니다.

또한, 교육, 액셀러레이팅, 창업 행사 네트워크 등 창업에 필요한 모든 정보와 서비스를 한눈에 볼 수 있어 창업생태계를 활성화하는데 중추적인 역할을 하고 있습니다.

전문가 멘토링 지원: 창업이음

창업이음

창업진흥원 창업이음 시스템

'창업이음'은 창업진흥원에서 제공하는 온라인 멘토링 서비스로, 멘토와 멘티, 그리고 다양한 창업지원기관을 비대면 방식으로 연결합니다.

언제 어디서든 창업 관련 문제점을 해결하고, 우수한 멘토에게 질 높은 멘토링을 받을 수 있도록 영상 기반의 플랫폼을 제공합니다. 주요 기능으로는 판서, 녹화, 채팅 등을 활용한 원활한 멘토링 진행, 분야와 직군에 따라 최적화된 멘토 Pool, 그리고 편리한 멘토링 일정 관리 시스템이 포함되어 있습니다.

중소기업의 유통 파트너: 중소기업 유통 센터

중소기업유통센터

중소벤처기업 판로의 상생과 공존을 위한 혁신성장 통합유통플랫폼

sbdc

중소기업 유통 센터는 중소기업들을 위한 유통 및 마케팅 지원 정보들을 보여줍니다. 다양한 유통 채널 및 마케팅 관련 지원 정보를 제공하며, 온라인 지원사업부터 홈쇼핑 지원사업까지 광범위한 유통 관련 사업을 지원합니다.

스마트 스토어나 쿠팡과 같은 플랫폼에서의 판매, 해외에서의 구매 후 국내 판매 등 복잡하고 다양한 유통 관련 사업의 절차와 정보에 대한 궁금증을 해결하기 위해 이 센터를 방문하는 것이 좋습니다. 중소기업 유통 센터는 유통과 관련된 궁금증을 해결해 주는 신뢰할 수 있습니다.

마치며

저도 창업을 준비하면서 여러 정부 지원 사업들을 눈여겨 보는데요. 자신에게 해당되는 사업들이 워낙 다양하니, 정부지원을 받을 수 있는지 눈여겨 보는게 좋습니다. 무쪼록 모든 예비/초기 창업자분들 화이팅하고 대박나기를 기원합니다 😉😉

함께 읽으면 좋은 글

노 코드의 한계: 노 코드 플랫폼의 단점

안녕하세요 독자님들. 이번 주제는 ‘노 코드’ 주제를 두고 이야기를 풀어보려합니다. 현재 노 코드와 관련된 솔루션 개발이 원활히 이루어지고 있습니다. 생각보다 노 코드의 역사는 상당히 오래되었습니다. 흔히 국내에서는 2000년대 초 ‘제로보드‘, ‘이지보드’ 등 ‘노 코드’라고 취급할 수 있습니다. IT 시장이 나날이 커지고 개발자의 몸값은 상승하기에 자연스럽게 자신이 생각하는 아이디어 제품을 직접

DCIT 정보의 모든 것: 더티코더즈

5분 안에 AWS Lightsail로 초간단 Ghost 블로그 만들기

서론 Ghost는 사용하기 편리한 컨텐츠 경험을 제공합니다. * SEO 마케팅에 관심 있는 분 * SEO 최적화가 된 블로그를 가지고 싶으신 분 * 자체적인 기술 블로그를 운영하고 싶으신 개발자 분 * 블로그 수익 창출을 원하시는 부업거리를 찾는 분 * 워드프레스(Wordpress)의 경험이 좋지 않아 새로운 블로그 툴을 찾는 분 다양한 목적으로 사용될 수 있으며 처음

DCIT 정보의 모든 것: 더티코더즈

안녕하세요 독자님들. 현재 국내 웹 프레임 워크 중 가장 많이 사용되는 NextJs의 새로운 버전이 나왔습니다. NextJs 14 버전에서는 어떤 변화가 있는지 같이 알아보도록 합시다. 🚀🚀

Turbocharged 컴파일러의 등장

NextJs 13 버전부터 로컬 개발 성능의 향상에 주력해왔습니다. 이를 위해 next dev와 NextJs의 다른 부분들을 재작성하는 작업을 진행했습니다. 그러나 접근 방식을 변경하여 더 점진적으로 개선하기로 결정했습니다. 이로 인해 Rust 기반의 컴파일러는 곧 안정화될 것으로 예상됩니다.

Turbopack과의 통합

Turbopack은 NextJs의 Rust 엔진입니다. 현재 next dev에 대한 5,000개의 통합 테스트가 Turbopack과 함께 통과되었습니다. 이 테스트에는 7년 동안의 버그 수정 및 재현이 포함되어 있습니다.

성능 향상

vercel.com에서의 테스트를 통해 다음과 같은 성능 향상을 확인할 수 있었습니다:

• 53.3% 빠른 로컬 서버 시작
• Fast Refresh를 사용하여 94.7% 빠른 코드 업데이트

이 벤치마크는 큰 애플리케이션과 큰 모듈 그래프를 가진 경우에 예상할 수 있는 실제 성능 향상 결과입니다.

Turbopack의 안정화

next dev에 대한 테스트가 90% 통과되면, Turbopack을 다가오는 마이너 릴리즈에서 안정 버전으로 이동시킬 계획입니다. 또한 사용자 정의 설정 및 생태계 플러그인에 대한 webpack 사용도 계속 지원할 예정입니다.

테스트 진행 상황 확인

테스트의 진행 상황은 areweturboyet.com에서 확인할 수 있습니다.

NextJs 14에서의 폼과 데이터 변형

NextJs는 프론트엔드와 백엔드의 경계를 허물며, 개발자들에게 더욱 간편하고 통합된 개발 경험을 제공하고자 합니다. NextJs 14에서는 이러한 철학을 바탕으로 여러 새로운 기능들을 도입하였습니다.

API 라우트와 폼 제출

NextJs 9에서 소개된 API Routes는 프론트엔드 코드와 함께 백엔드 엔드포인트를 빠르게 구축할 수 있는 방법입니다. 예를 들어, api/ 디렉토리에 새 파일을 생성하여 API를 구현할 수 있습니다. 그리고 클라이언트 측에서는 React와 이벤트 핸들러를 사용하여 해당 API 라우트에 fetch 요청을 할 수 있습니다.

서버 액션: 더 간단하게 데이터 변형하기

NextJs 14에서는 개발자의 데이터 변형 작성 경험을 단순화하고자 합니다. 서버 액션을 통해 API 라우트를 수동으로 생성할 필요 없이, React 컴포넌트에서 직접 서버에서 안전하게 실행되는 함수를 정의할 수 있습니다.

App Router는 React의 canary 채널에 기반하며, 이는 프레임워크가 새로운 기능을 채택하기에 안정적입니다. v14에서 Next.js는 최신 React canary로 업그레이드되었으며, 이에 안정적인 서버 액션을 포함하고 있습니다.

이전의 예제는 단 한 파일로 단순화될 수 있습니다. 서버 액션은 과거에 서버 중심 프레임워크를 사용한 경험이 있는 개발자들에게 익숙하게 느껴질 것입니다. 이는 웹의 기본 요소인 폼과 FormData Web API를 기반으로 합니다.

캐싱, 재검증, 리디렉션 등의 기능

서버 액션은 App Router 모델 전체에 깊게 통합되어 있습니다. 다음과 같은 다양한 기능을 제공합니다:

• revalidatePath() 또는 revalidateTag()를 사용하여 캐시된 데이터 재검증
• redirect()를 통한 다른 라우트로의 리디렉션
• cookies()를 통해 쿠키 설정 및 읽기
• useOptimistic()를 사용하여 낙관적 UI 업데이트 처리
• useFormState()를 사용하여 서버에서의 오류 캐치 및 표시
• useFormStatus()를 사용하여 클라이언트에서의 로딩 상태 표시

NextJs 14의 부분적 사전 렌더링 (미리보기)

NextJs는 항상 프론트엔드 개발의 효율성과 성능을 향상시키기 위한 연구와 개발에 힘쓰고 있습니다. 이번에는 **부분적 사전 렌더링(Partial Prerendering)**에 대한 미리보기를 공유하고자 합니다.

부분적 사전 렌더링의 개념

부분적 사전 렌더링은 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 점진적 정적 재검증(ISR)에 대한 10년의 연구와 개발 위에 구축되었습니다.

동기

많은 개발자들의 피드백을 통해 현재 너무 많은 런타임, 설정 옵션, 그리고 렌더링 방법을 고려해야 한다는 문제점을 인식하게 되었습니다. 개발자들은 정적의 속도와 신뢰성을 원하면서도, 완전히 동적이고 개인화된 응답을 지원하길 원합니다.

React Suspense 기반

부분적 사전 렌더링은 React Suspense 경계에 의해 정의됩니다. 예를 들어, 다음과 같은 전자상거래 페이지를 고려해보세요:

이 페이지는 <Suspense /> 경계를 기반으로 정적 쉘을 생성합니다. React Suspense의 대체 항목이 사전 렌더링됩니다.

쉘 내의 Suspense 대체 항목은 사용자를 기반으로 한 배너나 쿠키를 읽어 장바구니를 결정하는 것과 같은 동적 컴포넌트로 대체됩니다.

요청이 이루어지면, 정적 HTML 쉘이 즉시 제공됩니다. <ShoppingCart />는 사용자 세션을 보기 위해 쿠키에서 읽기 때문에, 이 컴포넌트는 정적 쉘과 동일한 HTTP 요청의 일부로 스트리밍됩니다. 추가적인 네트워크 라운드트립은 필요하지 않습니다.

부분적 사전 렌더링은 React Suspense 경계에 의해 정의됩니다. 예를 들어, 다음과 같은 전자상거래 페이지를 고려해보세요:

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

이 페이지는 <Suspense /> 경계를 기반으로 정적 쉘을 생성합니다. React Suspense의 대체 항목이 사전 렌더링됩니다.

요청이 이루어지면, 다음과 같이 정적 HTML 쉘이 즉시 제공됩니다:

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <!-- Hole -->
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <!-- Hole -->
  </div>
  <section class="new-products" />
</main>

<ShoppingCart />는 사용자 세션을 보기 위해 쿠키에서 읽기 때문에, 이 컴포넌트는 정적 쉘과 동일한 HTTP 요청의 일부로 스트리밍됩니다. 이를 위한 코드는 다음과 같습니다:

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

최적의 정적 쉘을 위한 방법

가장 세밀한 정적 쉘을 얻기 위해서는 추가적인 Suspense 경계를 추가할 수도 있습니다. 그러나 이미 loading.js를 사용하고 있다면, 이것은 암시적인 Suspense 경계이므로 정적 쉘을 생성하기 위해 변경이 필요하지 않을 것입니다.

NextJs 14의 메타데이터 개선

웹 페이지의 성능과 사용자 경험은 단순히 페이지의 내용만으로 결정되지 않습니다. 서버에서 페이지 콘텐츠를 스트리밍하기 전에 브라우저에 먼저 전송해야 하는 중요한 메타데이터가 있습니다.

이러한 meta 태그들이 초기 페이지 콘텐츠와 함께 전송되면 사용자 경험을 부드럽게 만들어줍니다. 이는 테마 색상 변경으로 인한 페이지의 깜빡임이나 뷰포트 변경으로 인한 레이아웃 이동을 방지합니다.

메타데이터의 분리

NextJs 14에서는 차단 메타데이터와 비차단 메타데이터를 분리하였습니다. 메타데이터 옵션 중 일부만이 차단되며, 비차단 메타데이터가 부분적으로 사전 렌더링된 페이지의 정적 쉘 제공을 방해하지 않도록 하고자 합니다.

다음 메타데이터 옵션들은 이제 deprecated로 표시되었으며, 향후 주요 버전에서 metadata에서 제거될 예정입니다:

• viewport: 뷰포트의 초기 확대 및 기타 속성 설정
• colorScheme: 뷰포트의 지원 모드(밝음/어두움) 설정
• themeColor: 뷰포트 주변의 크롬이 렌더링될 색상 설정

새로운 옵션 도입

NextJs 14부터는 이러한 옵션들을 대체하기 위해 viewport 및 generateViewport라는 새로운 옵션이 도입되었습니다. 다른 모든 metadata 옵션은 동일하게 유지됩니다.

개발자들은 오늘날 이 새로운 API를 채택하기 시작할 수 있습니다. 기존의 metadata 옵션들은 계속해서 작동할 것입니다.

마치며

함께 읽으면 좋은 글

노 코드의 한계: 노 코드 플랫폼의 단점

안녕하세요 독자님들. 이번 주제는 ‘노 코드’ 주제를 두고 이야기를 풀어보려합니다. 현재 노 코드와 관련된 솔루션 개발이 원활히 이루어지고 있습니다. 생각보다 노 코드의 역사는 상당히 오래되었습니다. 흔히 국내에서는 2000년대 초 ‘제로보드‘, ‘이지보드’ 등 ‘노 코드’라고 취급할 수 있습니다. IT 시장이 나날이 커지고 개발자의 몸값은 상승하기에 자연스럽게 자신이 생각하는 아이디어 제품을 직접

DCIT 정보의 모든 것: 더티코더즈

벡터 데이터베이스: Vector Database란?

Vector databases는 데이터 저장 및 조회에 벡터 연산을 활용하는 현대적인 데이터베이스 시스템입니다. 기존의 데이터베이스가 텍스트나 숫자와 같은 원시 데이터 형태를 주로 다루는 반면, 벡터 데이터베이스는 데이터를 고차원 벡터로 표현하고, 이를 활용하여 더욱 효과적인 검색 및 분석을 제공합니다. 1. 벡터란 무엇인가? 벡터는 크기와 방향을 갖는 양으로, 여러 분야에서 중요한 개념으로 사용됩니다.

DCIT 정보의 모든 것: 더티코더즈

성능이 최대 300%라고?: PostgreSQL 16 버전 소식

2023년 9월 14일 - PostgreSQL 글로벌 개발 그룹은 오늘 세계에서 가장 고도로 발전한 오픈소스 데이터베이스인 PostgreSQL 16 버전을 공식적으로 발표했습니다. PostgreSQL 16은 쿼리 병렬 처리, 대량 데이터 로딩, 논리 복제 등에서 성능 향상을 이루었습니다. 이번 릴리스에는 개발자와 관리자 모두를 위한 다양한 기능들이 포함되어 있으며, SQL/JSON 문법 확장, 작업부하를 모니터링하기

DCIT 정보의 모든 것: 더티코더즈

안녕하세요 독자님들. 이번 주제는 '노 코드' 주제를 두고 이야기를 풀어보려합니다. 현재 노 코드와 관련된 솔루션 개발이 원활히 이루어지고 있습니다. 생각보다 노 코드의 역사는 상당히 오래되었습니다. 흔히 국내에서는 2000년대 초 '제로보드', '이지보드' 등 '노 코드'라고 취급할 수 있습니다.

IT 시장이 나날이 커지고 개발자의 몸값은 상승하기에 자연스럽게 자신이 생각하는 아이디어 제품을 직접 개발을 시도할 때 만만한 것이 '노 코드'이지 않을까 싶습니다. 그렇지만 '노 코드' 제품을 만들기 전 다음과 같은 사항을 고려해보는 것은 어떨까요?

1. 적절한 자원 선택의 어려움

노 코드 도구의 세계는 다양하고 방대합니다. 이런 다양성은 선택의 폭을 넓혀주지만, 동시에 적절한 도구를 선택하는 것을 어렵게 만듭니다. 특히 프로젝트의 초기 단계에서 명확한 목표나 방향성 없이 도구를 선택하게 되면, 중간에 방향을 바꾸거나 다른 도구로 전환해야 할 수도 있습니다. 이런 상황은 시간과 비용의 낭비를 초래하게 됩니다.

또한, 각 플랫폼마다 특화된 기능이 있습니다. 예를 들어, 어떤 플랫폼은 웹 애플리케이션 개발에 특화되어 있을 수 있고, 다른 플랫폼은 모바일 앱 개발에 더 적합할 수 있습니다. 따라서 프로젝트의 목적과 필요성을 정확히 파악하고, 그에 맞는 도구를 선택하는 것이 중요합니다.

2. 프로젝트의 종속성

노 코드 플랫폼을 사용하면 플랫폼에 대한 종속성이 생기게 됩니다. 이는 플랫폼의 업데이트, 서비스 중단, 비용 변동 등 다양한 요인에 따라 프로젝트에 영향을 받게 됩니다. 특히, 플랫폼이 서비스를 중단하거나 큰 변화를 가할 경우, 프로젝트 전체를 다른 플랫폼으로 이전해야 할 수도 있습니다.

또한, 플랫폼에 종속되게 되면 그 플랫폼에서 제공하지 않는 기능이나 서비스를 추가하기 어려워집니다. 이는 프로젝트의 확장성을 제한하게 되며, 장기적으로 보면 비용과 시간의 증가를 초래할 수 있습니다.

3. 기능 제한

노 코드 플랫폼은 사용자에게 간편함과 편리함을 제공하지만, 그 대가로 기능의 제한을 받아들여야 합니다. 특정 기능이나 사용자 정의 기능을 추가하기 위해서는 코드를 작성해야 할 수도 있습니다. 이는 노 코드의 원칙과는 다소 상반되는 부분이며, 이런 한계를 극복하기 위해 추가적인 비용이나 시간이 들어갈 수 있습니다.

또한, 노 코드 플랫폼에서 제공하는 템플릿이나 블록은 일반적인 경우를 위해 설계되어 있기 때문에, 특별한 요구사항이나 복잡한 기능을 구현하기 어려울 수 있습니다.

4. 비용 문제

노 코드 개발의 가장 큰 장점 중 하나는 개발 속도의 향상입니다. 하지만, 이런 편리함은 항상 저렴한 비용으로 얻어지는 것은 아닙니다. 플랫폼의 비용은 사용자 수, 데이터 저장량, 기능 등 다양한 요인에 따라 달라질 수 있습니다. 따라서 초기 비용은 저렴해 보이더라도, 장기적으로 보면 전통적인 개발 방식과 큰 차이가 없을 수 있습니다.

또한, 플랫폼에 대한 종속성으로 인해 추가적인 비용이 발생할 수 있습니다. 예를 들어, 플랫폼의 기능 제한으로 인해 추가적인 개발이 필요하거나, 플랫폼의 비용 변동으로 인해 예상보다 더 많은 비용을 지불해야 할 수도 있습니다.

5. 학습 필요성

노 코드 플랫폼은 기존의 프로그래밍 방식과는 다르게 코드를 작성하지 않고도 애플리케이션을 개발할 수 있게 해주는 도구입니다. 이로 인해 많은 사람들이 노 코드 플랫폼을 사용하기 시작하면서, 그 사용성과 접근성에 대한 인식이 높아졌습니다. 하지만, 노 코드 플랫폼을 효과적으로 사용하기 위해서는 특정한 학습과 이해가 필요하다는 것을 간과해서는 안 됩니다.

1. 노 코드 플랫폼은 직관적인 인터페이스를 제공하지만, 그렇다고 해서 모든 기능과 특성을 즉시 이해하고 사용할 수 있는 것은 아닙니다. 사용자는 플랫폼의 기본 원리와 작동 방식, 그리고 제공되는 다양한 도구와 기능에 대한 깊은 이해가 필요합니다. 이를 위해서는 플랫폼의 공식 문서나 튜토리얼, 그리고 커뮤니티에서 제공하는 자료를 참고하며 학습해야 합니다.
2. 노 코드 플랫폼을 사용하면서 특정한 문제나 오류에 직면할 수 있습니다. 이런 문제를 해결하기 위해서는 플랫폼의 내부 구조와 작동 원리에 대한 이해가 필요합니다. 또한, 플랫폼의 제한 사항과 가능성을 파악하고, 그에 따라 적절한 해결책을 찾아야 합니다.
3. 노 코드 플랫폼은 다양한 템플릿과 블록을 제공합니다. 이런 템플릿과 블록을 효과적으로 활용하기 위해서는 각각의 특성과 사용 방법을 잘 알아야 합니다. 또한, 템플릿과 블록을 조합하여 원하는 기능을 구현하기 위한 전략과 방법에 대한 학습이 필요합니다.
4. 노 코드 플랫폼을 사용하면서 사용자 경험과 인터페이스 디자인에 대한 이해도 중요합니다. 애플리케이션의 성공은 사용자 경험과 직접 연관되어 있기 때문에, 사용자 중심의 디자인 원칙과 방법론에 대한 학습이 필요합니다.
5. 노 코드 플랫폼은 지속적으로 업데이트와 발전을 거치게 됩니다. 이로 인해 새로운 기능이 추가되거나 기존의 기능이 변경될 수 있습니다. 따라서 사용자는 플랫폼의 최신 동향과 변화에 대해 지속적으로 학습하고, 그에 따라 자신의 지식과 기술을 업데이트해야 합니다.

결론적으로, 노 코드 플랫폼은 코드를 작성하지 않고도 애플리케이션을 개발할 수 있게 해주는 강력한 도구이지만, 그 효과적인 활용을 위해서는 지속적인 학습과 노력이 필요합니다. 사용자는 플랫폼의 기능과 특성, 그리고 최신 동향에 대한 깊은 이해와 지식을 갖추어야 합니다.

마치며

'노 코드'는 많은 장점을 가지고 있는 것은 분명합니다. 그렇지만 쉽고 간편한 만큼 기능적 한계에 부딪힐 확률이 높습니다. 자신의 제품이 흔히 있는 아이디어(게시판, 블로그, 동영상 플랫폼 등)라면 '노 코드'로서 충분하겠지만, 제품 니즈가 커지거나 더욱 발전시키기 위해서는 '개발'이 필요해지게 될 수도 있습니다.

물론 MVP 혹은 프로토타입을 목적으로 하거나 제품의 지속 가능성이 낮다면 '노 코드'는 훌륭한 대안이 될 것입니다.

함께 읽으면 좋은 글

2024년 초기 예비 창업자라면 필수로 북마크 해야 할 사이트 8 곳

안녕하세요 독자님들. 👋👋 창업을 준비 할 때 꼭 알아야 하는 소식들이 있죠. 정부 지원사업 소식, 지역 사업 소식 그리고 받을 수 있는 혜택들은 많은데 누군가 알려주지는 않으니까요... 🥲 그래서 스타트업을 준비하시는 예비 창업자나 초기창업자를 위해 준비했습니다 ! 목차 정부지원을 노린다면 무.조.건 필수: K-STARTUP K-Startup 창업지원포털중소벤처기업부 운영 창업지원포털 창업지원사업 정보 통합·제공

DCIT 정보의 모든 것: 더티코더즈

5분 안에 AWS Lightsail로 초간단 Ghost 블로그 만들기

서론 Ghost는 사용하기 편리한 컨텐츠 경험을 제공합니다. * SEO 마케팅에 관심 있는 분 * SEO 최적화가 된 블로그를 가지고 싶으신 분 * 자체적인 기술 블로그를 운영하고 싶으신 개발자 분 * 블로그 수익 창출을 원하시는 부업거리를 찾는 분 * 워드프레스(Wordpress)의 경험이 좋지 않아 새로운 블로그 툴을 찾는 분 다양한 목적으로 사용될 수 있으며 처음

DCIT 정보의 모든 것: 더티코더즈

Vector databases는 데이터 저장 및 조회에 벡터 연산을 활용하는 현대적인 데이터베이스 시스템입니다. 기존의 데이터베이스가 텍스트나 숫자와 같은 원시 데이터 형태를 주로 다루는 반면, 벡터 데이터베이스는 데이터를 고차원 벡터로 표현하고, 이를 활용하여 더욱 효과적인 검색 및 분석을 제공합니다.

1. 벡터란 무엇인가?

벡터는 크기와 방향을 갖는 양으로, 여러 분야에서 중요한 개념으로 사용됩니다. 특히, 머신 러닝과 데이터 과학에서는 고차원 벡터로 데이터를 표현하는 것이 일반적입니다.

1.1. 벡터의 기본

벡터는 방향과 크기를 가진 양입니다. 예를 들어, 물리학에서는 속도나 힘을 벡터로 표현합니다.

# Python에서의 벡터 표현
vector = [2, 3]

1.2. 고차원 벡터

데이터 과학에서, 고차원의 벡터는 여러 특성이나 차원을 가진 데이터를 표현하는 데 사용됩니다. 예를 들어, 이미지나 텍스트 데이터는 수천에서 수백만의 차원을 가질 수 있습니다.

# 고차원 벡터의 예
high_dimensional_vector = [0.2, 0.4, 0.5, ..., 0.1]

2. Vector Database의 동작 원리

전통적인 데이터베이스는 우리가 잘 알고 있는 방식으로 동작합니다. 주로 텍스트, 숫자와 같은 스칼라 데이터를 행과 열에 저장합니다. 그러나 벡터 데이터베이스는 벡터를 중심으로 동작하기 때문에, 최적화 방식과 쿼리 방식이 전혀 다릅니다.

2.1. 데이터의 벡터화

데이터가 벡터 데이터베이스에 저장되기 전, 해당 데이터는 고차원 벡터로 변환됩니다. 이 변환 과정은 대개 머신 러닝 알고리즘을 사용하여 수행되며, 변환된 벡터는 원본 데이터의 의미적 연결성을 유지하면서도 더욱 효과적인 검색을 가능하게 합니다.

2.2. 벡터 기반의 데이터 검색

전통적인 데이터베이스에서는 주로 데이터의 값이 쿼리와 정확히 일치하는 행을 검색합니다. 그러나 벡터 데이터베이스에서는 유사도 메트릭을 적용하여 우리의 쿼리와 가장 유사한 벡터를 찾습니다. 이때 사용되는 주요 알고리즘은 근사 최근접 이웃(Approximate Nearest Neighbor, ANN) 검색을 위한 것입니다. 이러한 알고리즘은 해싱, 양자화, 그래프 기반 검색 등을 통해 검색을 최적화합니다.

2.3. Vector Database 파이프라인

• 인덱싱: 벡터 데이터베이스는 PQ, LSH, HNSW와 같은 알고리즘을 사용하여 벡터를 인덱싱합니다. 이 단계에서 벡터는 빠른 검색을 가능하게 하는 데이터 구조로 매핑됩니다.
• 쿼리: 벡터 데이터베이스는 인덱싱된 쿼리 벡터와 데이터셋 내의 인덱싱된 벡터를 비교하여 최근접 이웃을 찾습니다. 여기서 사용되는 유사도 메트릭은 해당 인덱스에 따라 다를 수 있습니다.
• 후처리: 경우에 따라, 벡터 데이터베이스는 데이터셋에서 최종 최근접 이웃을 검색하여 후처리를 수행하고 최종 결과를 반환합니다. 이 단계는 다른 유사도 측정법을 사용하여 최근접 이웃을 재정렬하는 것을 포함할 수 있습니다.

3. Vector Database의 장점

벡터 데이터베이스는 전통적인 데이터베이스와는 다르게 설계되었기 때문에, 여러 독특한 장점을 가지고 있습니다.

3.1. 복잡한 데이터 형식에 대한 탁월한 성능

벡터 데이터베이스는 이미지, 텍스트, 음성과 같은 복잡한 데이터 형식을 효과적으로 처리할 수 있습니다. 전통적인 데이터베이스에서는 이런 데이터 형식의 처리가 어려울 수 있는데, 벡터 데이터베이스는 이를 위해 특별히 최적화되어 있습니다.

3.2. 유사도 검색의 우수성

전통적인 데이터베이스는 정확한 일치를 기반으로 검색을 수행하는 반면, 벡터 데이터베이스는 유사도 기반의 검색을 제공합니다. 이로 인해 사용자는 훨씬 더 관련성 높은 결과를 빠르게 얻을 수 있습니다. 이것은 추천 시스템, 이미지 인식, 음성 인식 등 다양한 애플리케이션에서 큰 장점으로 작용합니다.

마치며

함께 읽으면 좋은 글

당신이 IT 종사자라면 옵시디언(Obsidian) 노트 앱을 꼭 써야하는 이유

노트 작성과 정보 관리는 개발자, 학자, 작가, 그리고 일반인들에게 필수적인 작업입니다. 어쩌면 당신은 Evernote, Notion, 또는 기본 메모 앱을 사용하고 있을지 모릅니다. 하지만 오늘은 특별한 노트앱, 옵시디언(Obsidian)에 대해 이야기해보려 합니다. 이 앱이 왜 주목받고 있는지, 그리고 당신이 이를 사용해야 하는 이유에 대해서 깊게 들어가보겠습니다. 옵시디언(Obsidian)의 기본

DCIT 정보의 모든 것: 더티코더즈

2D와 3D를 웹에서 자유롭게 렌더링 할 수 있다면?: WebGL이란?

들어가며 웹 개발이라고 하면 HTML, CSS, JavaScript만 떠올리기 쉽습니다. 하지만 그 이상의 다이나믹한 시각적 표현이 가능합니다. 그 중 하나가 바로 WebGL입니다. 이 기술을 통해 웹에서 2D와 3D 그래픽을 자유자재로 다룰 수 있게 되었습니다. 이 글에서는 WebGL에 대한 모든 것을 알아보겠습니다. WebGL이란? WebGL은 Web Graphics Library의 약자로, 웹 브라우저에서 2D와 3D

DCIT 정보의 모든 것: 더티코더즈

참고 문헌

What is a Vector Database? | Pinecone

Vector databases have the capabilities of a traditional database that are absent in standalone vector indexes and the specialization of dealing with vector embeddings, which traditional scalar-based databases lack.

Pinecone

많은 JavaScript 개발자들이 배열을 처리할 때 map 함수를 즐겨 사용합니다. 그러나 때때로 예상치 못한 문제에 부딪힐 수 있습니다. 이 글에서는 map 함수 내에서 throw Error가 작동하지 않는 상황을 해결하는 방법에 대해 알아보겠습니다.

1. 문제 상황 파악

자바스크립트의 map/forEach 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환합니다. 때로는 배열 내의 특정 요소에 대한 조건을 검사하고 해당 조건이 충족되지 않을 경우 에러를 발생시키고 싶을 때가 있습니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => {
  if (num > 3) {
    throw new Error('Number is too big');
  }
  return num * 2;
});

이 코드에서 숫자 4와 5는 3보다 크기 때문에 오류를 발생시키려고 했지만, 실제로는 그렇게 동작하지 않습니다. 이러한 상황이 발생하는 주된 원인은 map/forEach 함수가 동기적으로 동작하기 때문입니다.

2. Promise와 함께 사용하는 경우

비동기 작업을 수행할 때 Promise와 함께 map/forEach 함수를 사용하면 예외 처리가 더 복잡해질 수 있습니다. Promise에서 발생한 오류는 .catch 메소드를 통해 캐치할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(async num => {
  if (num > 3) {
    throw new Error('Number is too big');
  }
  return num * 2;
});

Promise.all(doubled).catch(error => console.error(error.message));

위 코드에서 Promise.all은 모든 프로미스가 성공적으로 완료되거나 첫 번째 프로미스가 거부될 때까지 기다립니다. 이렇게 하면 map 내에서 발생하는 오류를 캐치할 수 있습니다.

3. 해결 방법

map 함수 내에서 명시적으로 예외처리

가장 간단한 해결책은 map/forEach 함수 내에서 발생하는 예외를 명시적으로 캐치하는 것입니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => {
  try {
    if (num > 3) {
      throw new Error('Number is too big');
    }
    return num * 2;
  } catch (error) {
    console.error(error.message);
    return null;
  }
});

위 코드에서는 각 숫자를 처리하는 동안 오류가 발생하면 콘솔에 오류 메시지가 출력되고 해당 숫자의 결과 값은 null이 됩니다.

for ... of 를 사용하는 방법

for...of를 사용하면 반복문 내에서 개별 요소에 접근하면서 에러를 직접 처리할 수 있습니다. 이 방식은 코드의 명확성을 높여줍니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = [];

for (const num of numbers) {
  if (num > 3) {
    console.error('Number is too big');
  } else {
    doubled.push(num * 2);
  }
}

3.3 Promise.all을 사용하는 방법

비동기 작업을 수행할 때 Promise와 함께 map 함수를 사용하면, Promise에서 발생한 오류는 .catch 메소드를 통해 캐치할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const doubledPromises = numbers.map(num => {
  return new Promise((resolve, reject) => {
    if (num > 3) {
      reject(new Error('Number is too big'));
    } else {
      resolve(num * 2);
    }
  });
});

Promise.all(doubledPromises)
  .then(results => console.log(results))
  .catch(error => console.error(error.message));

이렇게 Promise.all을 사용하면, 모든 프로미스가 성공적으로 완료되거나 첫 번째 프로미스가 거부될 때까지 기다리게 됩니다.

마치며

이 세 가지 방법을 적절하게 활용하면, map/forEach 함수 내에서의 오류 처리 문제를 효과적으로 해결할 수 있습니다. 필요에 따라 적합한 방법을 선택하면, 예상치 못한 문제를 효과적으로 대응하고 코드의 안정성을 높일 수 있습니다.

함께 읽으면 좋은 글

MVC, MVP, MVVM 패턴 차이: 개발자를 위한 아키텍처 패턴 이해하기

개발자라면 아키텍처 패턴에 대한 이해는 필수입니다. 특히, MVC, MVP, MVVM은 가장 널리 사용되는 디자인 패턴 중 하나로, 앱의 로직과 UI를 분리하며 유지보수를 쉽게 해줍니다. 이 글에서는 이 세 가지 아키텍처 패턴의 차이와 각각의 구조를 깊이 있게 살펴보겠습니다. 목차 1. MVC 패턴의 구조 flowchart TD User --> Controller Controller --> Model

DCIT 정보의 모든 것: 더티코더즈

옵셔널 체이닝(Optional Chaining) 연산자: 예시와 특징

개발자들 사이에서 자주 나오는 옵셔널 체이닝(optinal chaining) 연산자에 대해서 자세히 알아보겠습니다. 이 연산자는 자바스크립트에서 객체의 키에 안전하게 접근할 수 있게 도와줍니다. 1. 옵셔널 체이닝 연산자란? 옵셔널 체이닝 연산자는 ‘?.’로 표시되며, 객체의 키에 접근할 때 해당 키가 존재하는지 여부를 체크하지 않고도 접근이 가능하게 해줍니다. const value = obj?.key; 이

DCIT 정보의 모든 것: 더티코더즈

자바스크립트 물음표 두개 ‘??’는 뭘까?: JS Nullish Coalescing Operator

안녕하세요. 독자 여러분! 최근 자바스크립트에서 흔히 볼 수 있는 물음표 두 개 (??) 가 뭔지 궁금해하시는 분들이 많았습니다. 오늘은 바로 이 Nullish Coalescing Operator에 대해 알아보도록 하겠습니다. 1. ?? 연산자의 정의 1.1. 무엇을 위한 연산자인가? Nullish Coalescing Operator (??) 는 자바스크립트에서 relatively 최신 문법입니다. 이 연산자는 왼쪽 피연산자가 null 또는 undefined일 경우

DCIT 정보의 모든 것: 더티코더즈

개발자들 사이에서 자주 나오는 옵셔널 체이닝(optinal chaining) 연산자에 대해서 자세히 알아보겠습니다. 이 연산자는 자바스크립트에서 객체의 키에 안전하게 접근할 수 있게 도와줍니다.

1. 옵셔널 체이닝 연산자란?

옵셔널 체이닝 연산자는 '?.'로 표시되며, 객체의 키에 접근할 때 해당 키가 존재하는지 여부를 체크하지 않고도 접근이 가능하게 해줍니다.

const value = obj?.key;

이 연산자가 도입되기 전에는 obj && obj.key의 형식으로 체크를 해야 했습니다. 하지만 옵셔널 체이닝 연산자를 사용하면 코드가 더 간결해지며, 가독성도 향상됩니다.

주요 특징:

• ?. 앞의 평가 대상이 **nullish (undefined 또는 null)**일 경우 평가를 멈추고 undefined를 반환합니다.

2. 옵셔널 체이닝 활용 시나리오

생각해보세요, 우리가 온라인 쇼핑몰의 사용자 정보와 그들의 주문 내역을 관리하는 시스템을 가지고 있다고 가정해봅시다. 사용자마다 주문 내역이 있을 수도, 없을 수도 있습니다. 만약 어떤 사용자의 최근 주문 상품 이름을 가져오려고 한다면 어떻게 할까요?

const users = {
    minji: {
        age: 28,
        orders: [
            { id: 1, product: 'laptop' },
            { id: 2, product: 'phone' }
        ]
    },
    taeho: {
        age: 32
    }
}

전통적인 방법으로 taeho의 최근 주문 상품 이름을 가져오려고 하면, orders 배열이 존재하는지 확인하는 과정이 필요합니다.

const taehoLatestOrder = 
    users.taeho && 
    users.taeho.orders && 
    users.taeho.orders[0] ? 
    users.taeho.orders[0].product : 'No orders yet';

이 코드는 길고 복잡해 보입니다. 하지만 옵셔널 체이닝을 사용하면 다음과 같이 간결하게 표현할 수 있습니다.

const taehoLatestOrder = users.taeho?.orders?.[0]?.product || 'No orders yet';

이렇게 옵셔널 체이닝 연산자를 사용하면 코드의 가독성을 크게 향상시킬 수 있습니다. 코드의 복잡한 조건 체크를 줄이면서도 안전하게 데이터에 접근할 수 있게 도와줍니다.

3. 옵셔널 체이닝의 장점

옵셔널 체이닝 연산자는 코드를 작성할 때 다양한 이점을 제공합니다. 여기서 그 장점들을 자세히 알아보며 각 장점에 해당하는 예시 코드를 함께 확인해보겠습니다.

3.1. if문 줄임으로 코드 간결화

옵셔널 체이닝을 사용하면 깊게 중첩된 객체 구조에서 값에 접근하려 할 때, 해당 경로에 값이 존재하는지 매번 확인하는 번거로운 if문을 줄일 수 있습니다.

예시

기존 방법:

if (user && user.friends && user.friends.bob) {
    console.log(user.friends.bob.age);
}

옵셔널 체이닝 사용:

console.log(user?.friends?.bob?.age);

이렇게 간결하게 코드를 작성할 수 있어 가독성이 향상되며, 코드의 길이도 줄일 수 있습니다.

3.2. nullish 연산자와의 조합

nullish 연산자(??)와 함께 사용하면, 값이 존재하지 않을 때 기본값을 설정하는 것이 매우 간편해집니다.

예시

const username = user?.info?.name ?? 'Guest';

위 코드에서 user?.info?.name의 값이 undefined나 null일 경우 'Guest'를 기본값으로 설정합니다.

3.3. 대괄호 표기법과의 호환

옵셔널 체이닝은 객체의 속성에 접근하는 일반적인 방법인 점 표기법뿐만 아니라 대괄호 표기법과도 잘 작동합니다.

예시

const key = 'location';
const city = user?.[key]?.city;

동적으로 속성의 이름을 가져와야 할 때 이러한 방식이 유용하게 사용됩니다.

3.4. 메서드 호출의 안전성 보장

존재하지 않을 수 있는 메서드를 호출할 때 옵셔널 체이닝을 사용하면, 해당 메서드가 없을 때 자동으로 평가가 중단되어 에러를 방지할 수 있습니다.

예시

user?.sayHello?.();

이렇게 옵셔널 체이닝 연산자를 활용하면, 객체의 속성이나 메서드의 존재를 확인하는 부가적인 코드 없이 안전하게 접근할 수 있게 됩니다.

4. 옵셔널 체이닝의 주의사항

옵셔널 체이닝 연산자는 코드의 간결성과 안전성을 향상시켜주는 강력한 도구이지만, 그만큼 주의해야 할 부분도 있습니다. 다음은 주의사항과 그에 대한 설명 및 예시 코드입니다.

1. 항상 존재해야 하는 값에는 사용하지 않는 것이 좋습니다.

옵셔널 체이닝은 값이 없을 수도 있는 경우에 사용하는 것이 바람직합니다. 만약 어떤 값이 반드시 존재해야 한다면, 옵셔널 체이닝을 사용하지 않고 에러를 발생시켜 개발자에게 알려주는 것이 더 좋습니다.

const user = {
  name: "John",
  address: {
    city: "Seoul",
    zipcode: "12345"
  }
};

// 좋은 예
console.log(user.address.city); // "Seoul"

// 나쁜 예
console.log(user.address?.city); 

위의 예에서 사용자의 주소는 반드시 있어야 하므로 옵셔널 체이닝을 사용하지 않는 것이 바람직합니다.

2. 옵셔널 체이닝 앞의 변수는 반드시 선언되어 있어야 합니다.

옵셔널 체이닝을 사용하더라도 앞의 변수가 선언되지 않았다면 참조 에러(ReferenceError)가 발생합니다. 따라서 옵셔널 체이닝을 사용하기 전에 변수의 선언 여부를 반드시 확인해야 합니다.

// 나쁜 예
console.log(notDeclaredVariable?.property); // ReferenceError: notDeclaredVariable is not defined

// 좋은 예
let possiblyUndefinedVariable;
console.log(possiblyUndefinedVariable?.property); // undefined

결론적으로, 옵셔널 체이닝은 특정 상황에서 매우 유용한 도구이지만, 그만큼 주의하여 사용해야 합니다. 코드의 가독성과 안전성을 동시에 고려하면서 옵셔널 체이닝의 장점을 최대한 활용하는 것이 중요합니다.

마치며

함께 읽으면 좋은 글

자바스크립트 물음표 두개 ‘??’는 뭘까?: JS Nullish Coalescing Operator

안녕하세요. 독자 여러분! 최근 자바스크립트에서 흔히 볼 수 있는 물음표 두 개 (??) 가 뭔지 궁금해하시는 분들이 많았습니다. 오늘은 바로 이 Nullish Coalescing Operator에 대해 알아보도록 하겠습니다. 1. ?? 연산자의 정의 1.1. 무엇을 위한 연산자인가? Nullish Coalescing Operator (??) 는 자바스크립트에서 relatively 최신 문법입니다. 이 연산자는 왼쪽 피연산자가 null 또는 undefined일 경우

DCIT 정보의 모든 것: 더티코더즈

모달, 다이어로그 어떤 차이일까?: Modal vs Dialog

모달과 다이어로그, 이 두 용어는 사용자 인터페이스를 설계하거나 개발할 때 자주 마주치는 용어입니다. 그렇다면 이 둘은 어떤 차이가 있을까요? 이 문서는 그 차이점과 각각 어떻게 활용되는지에 대해 설명하고자 합니다. 목차 모달 (Modal)의 정의와 특징 요약 * 모달은 사용자의 주의를 끌기 위해 현재 화면 위에 새로운 작은 창이나 뷰를 올리는 UI

DCIT 정보의 모든 것: 더티코더즈

안녕하세요. 독자 여러분! 최근 자바스크립트에서 흔히 볼 수 있는 물음표 두 개 (??) 가 뭔지 궁금해하시는 분들이 많았습니다. 오늘은 바로 이 Nullish Coalescing Operator에 대해 알아보도록 하겠습니다.

1. ?? 연산자의 정의

1.1. 무엇을 위한 연산자인가?

Nullish Coalescing Operator (??) 는 자바스크립트에서 relatively 최신 문법입니다. 이 연산자는 왼쪽 피연산자가 null 또는 undefined일 경우 오른쪽 피연산자를 반환합니다. 만약 왼쪽 피연산자가 그렇지 않으면, 왼쪽 피연산자를 반환합니다.

let result = value ?? "default";

1.2. 왜 필요한 연산자일까?

기존에 우리는 || 연산자를 사용하여 동일한 목적으로 사용했습니다. 그런데 ||는 falsy 값에 대해서도 오른쪽 피연산자를 반환하는 반면, ??는 오직 null과 undefined에 대해서만 오른쪽 피연산자를 반환한다는 점에서 차이가 있습니다.

2. ??와 ||의 주요 차이점

2.1. Falsy 값과 Nullish 값

자바스크립트에서 falsy 값에는 false, 0, "", null, undefined, NaN 등이 있습니다. 반면, nullish 값은 null과 undefined 두 가지입니다.

2.2. 코드 스니펫을 통한 차이점 이해

let falsyValue = 0;
let result1 = falsyValue || "default";  // "default"
let result2 = falsyValue ?? "default";  // 0

위의 예시를 보면, || 연산자는 falsyValue가 falsy값이기 때문에 "default"를 반환합니다. 그러나, ?? 연산자는 falsyValue가 nullish값이 아니기 때문에 0을 반환합니다.

3. 언제 ?? 연산자를 사용해야 할까?

3.1. 디폴트 값 설정 시

?? 연산자는 주로 객체의 속성값이 null 또는 undefined일 때 디폴트 값을 설정하는데 유용합니다.

let user = {
  name: "John",
  age: null
};

let age = user.age ?? 25;  // 25

3.2. 함수 매개변수의 기본값 설정

함수의 매개변수 값이 전달되지 않았을 때 디폴트 값을 설정하는 데에도 ?? 연산자를 활용할 수 있습니다.

function greet(name = null) {
  let greetingName = name ?? "Guest";
  console.log(`Hello, ${greetingName}!`);
}

greet();  // Hello, Guest!

마치며

요약하면, ?? 연산자는 자바스크립트에서 null과 undefined 값을 체크하고 그에 따라 다른 값을 반환할 때 유용한 도구입니다. 기존의 || 연산자와의 차이점을 정확히 이해하고 적절한 상황에서 사용하는 것이 중요합니다.

함께 읽으면 좋은 글

2D와 3D를 웹에서 자유롭게 렌더링 할 수 있다면?: WebGL이란?

들어가며 웹 개발이라고 하면 HTML, CSS, JavaScript만 떠올리기 쉽습니다. 하지만 그 이상의 다이나믹한 시각적 표현이 가능합니다. 그 중 하나가 바로 WebGL입니다. 이 기술을 통해 웹에서 2D와 3D 그래픽을 자유자재로 다룰 수 있게 되었습니다. 이 글에서는 WebGL에 대한 모든 것을 알아보겠습니다. WebGL이란? WebGL은 Web Graphics Library의 약자로, 웹 브라우저에서 2D와 3D

DCIT 정보의 모든 것: 더티코더즈

VPN 잘 알고 사용하시나요?: VPN 가상사설망 원리

들어가며 오늘은 VPN에 대해 함께 알아보려고 합니다. VPN은 ‘가상 사설망’으로도 알려져 있으며, 많은 사람들이 외부에서 내부 네트워크에 안전하게 접속할 때 사용합니다. 하지만 VPN의 정확한 원리와 작동 방식에 대해서는 정확히 알지 못하는 경우가 많습니다. 그래서 오늘은 VPN에 대해 좀 더 깊이 있게 알아보겠습니다. VPN의 기본 개념 VPN은 Virtual Private Network의 약자로,

DCIT 정보의 모든 것: 더티코더즈

1. 문제 상황: lodash import 오류

1.1 오류의 발생

타입스크립트 프로젝트에서 lodash를 ES6 스타일로 import 할 때, 아래와 같은 문제가 발생한다.

import _ from 'lodash'; // 오류 발생

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

1.2 오류 메세지 파악

오류 메세지를 보면, export = 형식으로 선언된 모듈은 allowSyntheticDefaultImports 플래그가 활성화될 경우에만 default import 형식을 사용할 수 있다.

1.3 오류없는 import 방법

하지만 아래와 같이 lodash를 import하면 오류가 발생하지 않는다.

import * as _ from 'lodash';

2. 해결 방법: tsconfig.json 수정

2.1 필요한 수정사항

tsconfig.json, 타입스크립트 컴파일 옵션을 정하는 파일에서 compilerOptions의 esModuleInterop 플래그를 true로 설정한다.

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

2.2 결과

이렇게 설정 후 다시 lodash를 ES6 스타일로 import하면, 오류가 발생하지 않는다.

import _ from 'lodash'; // 이제 오류 발생안함

3. 원인 파악: lodash의 모듈 스타일

3.1 lodash의 export 스타일

기본적으로 lodash는 ES6 모듈 스타일의 export가 아닌, CommonJS 스타일의 모듈 export를 사용한다.

3.2 타입스크립트의 컴파일러 옵션

따라서 ES6 스타일로 import 해오려면, 타입스크립트의 컴파일러 옵션으로 esModuleInterop 플래그를 활성화해야 한다.

마치며

함께 읽으면 좋은 글

당신이 IT 종사자라면 옵시디언(Obsidian) 노트 앱을 꼭 써야하는 이유

노트 작성과 정보 관리는 개발자, 학자, 작가, 그리고 일반인들에게 필수적인 작업입니다. 어쩌면 당신은 Evernote, Notion, 또는 기본 메모 앱을 사용하고 있을지 모릅니다. 하지만 오늘은 특별한 노트앱, 옵시디언(Obsidian)에 대해 이야기해보려 합니다. 이 앱이 왜 주목받고 있는지, 그리고 당신이 이를 사용해야 하는 이유에 대해서 깊게 들어가보겠습니다. 옵시디언(Obsidian)의 기본

DCIT 정보의 모든 것: 더티코더즈

성능 향상을 위한 Mongoose lean(): MongoDB Lean은 왜 빠를까

개발자로서, 성능 최적화는 우리가 고려해야 할 중요한 부분 중 하나입니다. MongoDB와 Mongoose를 사용할 때, lean() 함수를 사용하여 성능을 향상시킬 수 있습니다. 이 글에서는 lean() 함수가 무엇인지, 왜 이것이 빠른지, 그리고 어떻게 사용하는지에 대해 알아보겠습니다. lean 예시 lean() 함수의 사용법을 이해하는 것은 중요합니다. 이 섹션에서는 lean의 실제 사용 예시와 체인을 사용할

DCIT 정보의 모든 것: 더티코더즈

웹에서 GPU를 쓴다고? WebGPU: WebGPU란?

들어가며 웹의 세계에서 GPU를 이용해야 할 이유가 점점 늘고 있다. 그래픽 처리, 데이터 분석, 심지어는 웹 기반 게임까지, 이러한 다양한 분야에서 GPU의 힘은 무시할 수 없다. 하지만 웹에서 GPU를 이용하는 방법에는 여러가지 제약이 따른다. 이제 그 해결책으로 주목받고 있는 것이 바로 WebGPU입니다. 본 글에서는 WebGPU의 개념부터 실제 사용법, 그리고 WebGL과의

DCIT 정보의 모든 것: 더티코더즈

개발자들이 자주 직면하는 문제 중 하나는 자바스크립트 객체에서 특정 키를 삭제하는 것입니다. 객체는 자바스크립트에서 데이터를 표현하는 핵심적인 구조입니다. 때때로, 객체에서 불필요한 키를 제거하거나 수정해야 하는 상황이 생깁니다. 이 글에서는 자바스크립트 객체에서 키 값을 어떻게 삭제하는지에 대해 알아보겠습니다.

delete 연산자를 사용한 키 삭제 방법

기본 사용법

const obj = {name: "John", age: 30};
delete obj.age;

위 코드는 age라는 키를 객체에서 성공적으로 삭제합니다.

delete의 반환 값

delete 연산자는 성공적으로 키를 삭제하면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 하지만 주의해야 할 점이 있습니다. 삭제할 수 없는 속성을 대상으로 할 때도 true를 반환하기 때문에 항상 성공적으로 삭제되었는지 확인이 필요합니다.

키 삭제시의 주의점과 한계

상속된 속성 삭제하기

delete 연산자는 객체의 고유 속성만 삭제할 수 있습니다. 프로토타입 체인을 통해 상속받은 속성은 삭제할 수 없습니다.

글로벌 변수와 delete

글로벌 변수는 delete 연산자로 삭제할 수 없습니다. var, let, const로 선언된 변수는 delete로 삭제할 수 없습니다.

키 삭제의 대안

undefined 할당하기

키를 완전히 삭제하는 것이 아닌, 해당 키의 값을 undefined로 설정하는 방법도 있습니다. 하지만 이 방법은 키 자체는 여전히 객체에 남아 있게 됩니다.

const obj = {name: "John", age: 30};
obj.age = undefined;

Object spread를 활용한 키 삭제

ES6의 spread 연산자를 활용하면, 특정 키를 제외한 나머지 키들만을 가진 새로운 객체를 생성할 수 있습니다.

const obj = {name: "John", age: 30, country: "USA"};
const {age, ...rest} = obj;

rest는 age 키를 제외한 {name: "John", country: "USA"} 객체를 가지게 됩니다.

왜 키를 삭제해야 하는가?

데이터 정리

개발 과정에서 불필요한 정보는 코드의 효율성을 떨어뜨릴 수 있습니다. 불필요한 키 값은 메모리를 불필요하게 차지하며, 애플리케이션의 성능을 저하시킬 수 있습니다.

데이터 보안

모든 키와 값을 클라이언트에게 노출시키지 않는 것이 좋습니다. 민감한 정보를 삭제하여 클라이언트에게 전달하면 데이터의 안전성을 높일 수 있습니다.

자바스크립트 객체에서 키 값을 삭제하는 방법은 간단합니다. 하지만 올바른 방법을 선택하고, 각 방법의 특징과 한계를 이해하는 것이 중요합니다. 이를 통해 더 효율적이고 안전한 코드를 작성할 수 있습니다.

함께 읽으면 좋은 글

당신이 IT 종사자라면 옵시디언(Obsidian) 노트 앱을 꼭 써야하는 이유

노트 작성과 정보 관리는 개발자, 학자, 작가, 그리고 일반인들에게 필수적인 작업입니다. 어쩌면 당신은 Evernote, Notion, 또는 기본 메모 앱을 사용하고 있을지 모릅니다. 하지만 오늘은 특별한 노트앱, 옵시디언(Obsidian)에 대해 이야기해보려 합니다. 이 앱이 왜 주목받고 있는지, 그리고 당신이 이를 사용해야 하는 이유에 대해서 깊게 들어가보겠습니다. 옵시디언(Obsidian)의 기본

DCIT 정보의 모든 것: 더티코더즈

VPN 잘 알고 사용하시나요?: VPN 가상사설망 원리

들어가며 오늘은 VPN에 대해 함께 알아보려고 합니다. VPN은 ‘가상 사설망’으로도 알려져 있으며, 많은 사람들이 외부에서 내부 네트워크에 안전하게 접속할 때 사용합니다. 하지만 VPN의 정확한 원리와 작동 방식에 대해서는 정확히 알지 못하는 경우가 많습니다. 그래서 오늘은 VPN에 대해 좀 더 깊이 있게 알아보겠습니다. VPN의 기본 개념 VPN은 Virtual Private Network의 약자로,

DCIT 정보의 모든 것: 더티코더즈

모달과 다이어로그, 이 두 용어는 사용자 인터페이스를 설계하거나 개발할 때 자주 마주치는 용어입니다. 그렇다면 이 둘은 어떤 차이가 있을까요? 이 문서는 그 차이점과 각각 어떻게 활용되는지에 대해 설명하고자 합니다.

목차

모달 (Modal)의 정의와 특징

요약

• 모달은 사용자의 주의를 끌기 위해 현재 화면 위에 새로운 작은 창이나 뷰를 올리는 UI 요소를 일반적으로 나타냅니다.
• 모달이 활성화되면, 사용자는 모달 외의 다른 부분과 상호작용할 수 없습니다.
• 모달은 사용자가 결정을 내리거나 추가 정보를 제공해야 할 때 주로 사용됩니다.
• 모달은 어떤 정보를 보여주거나, 설정을 조정하거나, 입력을 받는 등 다양한 용도로 사용할 수 있습니다.

모달의 기본 구조와 사용목적

모달은 사용자의 주의를 집중시키기 위해 디자인된 UI 구성요소입니다. 그 목적은 사용자가 중요한 정보를 인지하거나 결정을 내리도록 하는 것입니다. 모달은 사용자에게 추가 정보를 제공하거나, 설정을 조정하게 하며, 때로는 사용자의 입력을 받기도 합니다.

모달의 특징

모달은 활성화되면, 사용자는 모달 외의 다른 부분과 상호작용할 수 없습니다. 이는 사용자의 주의를 모달에 집중시키고, 주요 작업에 방해받지 않게 하는 역할을 합니다.

다이어로그 (Dialog)의 정의와 특징

요약

• 다이얼로그는 사용자에게 정보를 제공하거나, 사용자로부터 정보를 수집하기 위한 간단한 대화창을 일반적으로 나타냅니다.
• 다이얼로그는 종종 사용자의 확인, 선택, 입력 등의 행동을 요구하는 모달의 한 형태로 볼 수 있습니다.
• 다이얼로그는 주로 경고, 확인 메시지, 입력 필요 등을 사용자에게 알릴 때 사용됩니다.

다이어로그의 기본 구조와 사용목적

다이어로그는 사용자에게 정보를 제공하거나 사용자로부터 정보를 수집하기 위해 사용됩니다. 다이어로그는 주로 경고, 확인 메시지, 입력 필요 등을 사용자에게 알릴 때 사용됩니다. 다이어로그는 사용자와의 직접적인 대화를 가능케 합니다.

다이어로그의 특징

다이어로그는 종종 모달의 한 형태로 볼 수 있으며, 사용자의 확인, 선택, 입력 등의 행동을 요구합니다. 이렇게 다이어로그를 통해 사용자의 행동을 유도하고, 사용자의 의사를 파악할 수 있습니다.

모달과 다이어로그의 차이점

모달과 다이어로그의 가장 큰 차이점은 상호작용의 방식과 범위에서 나타납니다. 모든 다이어로그는 모달일 수 있지만, 모든 모달이 다이얼로그인 것은 아닙니다. 모달은 주로 정보의 제공과 사용자의 결정을 도출하는데 중점을 둡니다. 반면 다이어로그는 사용자와의 상호작용과 대화에 더 초점을 맞춥니다.

정리와 결론: 어떤 것을 사용해야 할까?

모달과 다이어로그의 적절한 사용

모달과 다이어로그를 적절하게 사용하려면 사용자의 상황과 필요성을 잘 고려해야 합니다. 사용자에게 중요한 정보를 전달하거나 결정을 요구할 때는 모달을, 사용자의 의견이나 선택을 얻고자 할 때는 다이어로그를 사용하는 것이 좋습니다.

사용자 경험의 중요성

최종적으로, 모달이나 다이어로그를 사용하는 목적은 사용자에게 보다 나은 사용자 경험을 제공하는 것입니다. 이를 위해, 디자이너와 개발자는 사용자의 필요와 기대를 충족시키는 방법을 항상 고민해야 합니다.

마치며

함께 읽으면 좋은 글

웹에서 GPU를 쓴다고? WebGPU: WebGPU란?

들어가며 웹의 세계에서 GPU를 이용해야 할 이유가 점점 늘고 있다. 그래픽 처리, 데이터 분석, 심지어는 웹 기반 게임까지, 이러한 다양한 분야에서 GPU의 힘은 무시할 수 없다. 하지만 웹에서 GPU를 이용하는 방법에는 여러가지 제약이 따른다. 이제 그 해결책으로 주목받고 있는 것이 바로 WebGPU입니다. 본 글에서는 WebGPU의 개념부터 실제 사용법, 그리고 WebGL과의

DCIT 정보의 모든 것: 더티코더즈

당신이 IT 종사자라면 옵시디언(Obsidian) 노트 앱을 꼭 써야하는 이유

노트 작성과 정보 관리는 개발자, 학자, 작가, 그리고 일반인들에게 필수적인 작업입니다. 어쩌면 당신은 Evernote, Notion, 또는 기본 메모 앱을 사용하고 있을지 모릅니다. 하지만 오늘은 특별한 노트앱, 옵시디언(Obsidian)에 대해 이야기해보려 합니다. 이 앱이 왜 주목받고 있는지, 그리고 당신이 이를 사용해야 하는 이유에 대해서 깊게 들어가보겠습니다. 옵시디언(Obsidian)의 기본

DCIT 정보의 모든 것: 더티코더즈

개발자로서, 성능 최적화는 우리가 고려해야 할 중요한 부분 중 하나입니다. MongoDB와 Mongoose를 사용할 때, lean() 함수를 사용하여 성능을 향상시킬 수 있습니다. 이 글에서는 lean() 함수가 무엇인지, 왜 이것이 빠른지, 그리고 어떻게 사용하는지에 대해 알아보겠습니다.

lean 예시

lean() 함수의 사용법을 이해하는 것은 중요합니다. 이 섹션에서는 lean의 실제 사용 예시와 체인을 사용할 경우의 사용 방법을 알아보겠습니다.

lean 사용 방법

const results = await Model.find().lean();

이 코드는 Model의 모든 문서를 찾아 POJO로 반환합니다.

체인을 사용할 경우 lean 사용 방법

const results = await Model.find().sort({ name: 1 }).lean();

이 코드는 Model의 모든 문서를 찾아 이름으로 정렬한 후 POJO로 반환합니다.

lean() 함수란?

lean() 함수는 Mongoose 쿼리의 한 부분입니다. 이 함수는 쿼리의 결과를 JavaScript 객체로 반환합니다. 이는 Mongoose 문서 인스턴스 대신 POJO(Plain Old JavaScript Object)를 반환함으로써 성능을 향상시킵니다.

lean이 빠른 이유

Mongoose의 lean() 메서드는 MongoDB에서 데이터를 조회할 때 뛰어난 속도를 제공합니다. 그 이유는 여러 가지가 있으며, 이는 개발자가 효율적인 코드를 작성할 때 중요한 부분입니다.

Mongoose 문서의 부담 감소

Mongoose는 MongoDB를 위한 ODM(Object Data Modeling) 라이브러리로, 데이터를 조작하고 쿼리하는데 사용됩니다. 기본적으로 Mongoose는 조회한 각 문서를 Mongoose 문서 인스턴스로 변환합니다. 이 인스턴스는 다양한 메서드와 속성을 가지고 있어, 데이터를 쉽게 다룰 수 있게 해주지만, 이러한 변환 과정이 성능에 부담을 줍니다.

lean() 메서드를 사용하면 이 변환 과정을 건너뛰고, POJO로 데이터를 반환합니다. 따라서 lean()을 사용하면, 불필요한 변환 과정이 없어져, 처리 속도가 빨라지고 메모리 사용량이 감소합니다.

메모리 효율성

lean()이 반환하는 플레인 JavaScript 객체는 Mongoose 문서 인스턴스보다 메모리를 훨씬 적게 사용합니다. Mongoose 문서 인스턴스는 여러 메서드와 속성을 포함하고 있어 메모리 소모가 큰 반면, lean()은 최소한의 메모리만 사용하여 효율적입니다. 이로 인해 대용량 데이터를 처리할 때나 많은 사용자가 동시에 서비스를 이용할 때 서버의 부하를 줄일 수 있습니다.

빠른 쿼리 응답 시간

lean()을 사용하면, 반환된 객체가 훨씬 간단하므로 쿼리의 응답 시간이 단축됩니다. 쿼리의 성능이 향상되면, 사용자는 데이터를 더 빠르게 받을 수 있으며, 이는 사용자 경험의 향상으로 이어집니다. 특히, 실시간성이 중요한 서비스에서는 lean()의 사용이 큰 장점이 될 수 있습니다.

마치며

lean() 메서드는 Mongoose 문서의 변환 과정을 생략함으로써 속도를 향상시키고, 메모리 효율성을 높이며, 빠른 쿼리 응답 시간을 보장합니다. 따라서, 개발자들은 성능이 중요한 상황에서 lean() 메서드를 적절히 활용하여 사용자에게 더 나은 서비스를 제공할 수 있습니다.

함께 읽으면 좋은 글

Mognodb lookup을 활용한 데이터 조작: MongoDB Aggregate lookup

모던 개발 환경에서 데이터베이스는 필수 불가결한 요소입니다. MongoDB는 그 중에서도 확장성과 유연성을 제공하는 뛰어난 NoSQL 데이터베이스입니다. 오늘은 MongoDB의 강력한 특성 중 하나인 Aggregate와 Lookup을 활용해 데이터를 어떻게 더 효율적으로 조작할 수 있는지 알아보겠습니다. 목차 1. MongoDB Aggregate란? 개요 MongoDB에서 Aggregate는 컬렉션의 데이터를 다양한 방식으로 처리하고 분석하는 기능입니다. Aggregate 함수는 일련의

DCIT 정보의 모든 것: 더티코더즈

당신이 IT 종사자라면 옵시디언(Obsidian) 노트 앱을 꼭 써야하는 이유

노트 작성과 정보 관리는 개발자, 학자, 작가, 그리고 일반인들에게 필수적인 작업입니다. 어쩌면 당신은 Evernote, Notion, 또는 기본 메모 앱을 사용하고 있을지 모릅니다. 하지만 오늘은 특별한 노트앱, 옵시디언(Obsidian)에 대해 이야기해보려 합니다. 이 앱이 왜 주목받고 있는지, 그리고 당신이 이를 사용해야 하는 이유에 대해서 깊게 들어가보겠습니다. 옵시디언(Obsidian)의 기본

DCIT 정보의 모든 것: 더티코더즈