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

Dev

VPN, VPS, VPC 차이 알아보기

디지털 시대에 우리를 보호하고 연결해주는 가상의 세계. VPN, VPS, VPC. 이 세 가지 기술은 어떤 차이가 있을까요? 네트워크란? 물리적인 네트워크는 선으로 꼬여있고, 이더넷은 가까운 선으로 연결되어 있을 것입니다. 예를 들어, 스타크래프트 게임에서 로컬 게임을 할 때 같은 PC방 내의 유저만 접속할 수 있는 이유는 그들이 동일한 LAN(Local Area Network)

Dev

Github Pull Request를 로컬에서 checkout하기

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

Dev

대표적인 리액트 차트/그래프 라이브러리 7가지 추천

안녕하세요 독자님들. 프론트엔드 개발자라면 차트를 만들어야 할 때가 종종 있는데요. 이번 시간에는 리액트에서 사용할 수 있는 공신력있는 차트 도구들을 추천해보려고 합니다. 목차 인기 많았던 라이브러리: Recharts Recharts는 큰 사용자 기반과 커뮤니티를 자랑하는 가장 인기 있는 리액트 차트 라이브러리 중 하나로 두각을 나타냅니다. 재사용성과 유연성을 염두에 두고 만들어진 Recharts는 React 컴포넌트와

Dev

10분 안에 끝내는 Amplify 배포: NextJS를 Amplify로 배포하기

안녕하세요. 독자님들. 이번 아티클에서는 제가 즐겨 사용하는 NextJS 13을 Amplify에 배포하는 과정을 적어보려 합니다. 물론 NextJS 12라고 해서 크게 다를거는 없으니 천천히 따라하시면 금방 배포하실 수 있을거예요. 1) Amplify Hosting 시작하기 제일 간단한 챕터입니다. '시작하기' 버튼을 클릭해주세요. 원하시는 형상관리 툴을 선택하고 '계속'을 눌러주세요. 레파지토리를 선택해주세요. 2) 환경변수 및 빌드 설정하기

business

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

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

News

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

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

business

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

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

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

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

JavaScript에서 forEach, map 함수 내에서 throw Error가 되지 않을 때 해결 방법

많은 JavaScript 개발자들이 배열을 처리할 때 map 함수를 즐겨 사용합니다. 그러나 때때로 예상치 못한 문제에 부딪힐 수 있습니다. 이 글에서는 map 함수 내에서 throw Error가 작동하지 않는 상황을 해결하는 방법에 대해 알아보겠습니다. 1. 문제 상황 파악 자바스크립트의 map/forEach 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아

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

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

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

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

타입스크립트 lodash를 올바르게 import하는 방법

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.

javascript

자바스크립트 객체(Object) 키 값 삭제하기

개발자들이 자주 직면하는 문제 중 하나는 자바스크립트 객체에서 특정 키를 삭제하는 것입니다. 객체는 자바스크립트에서 데이터를 표현하는 핵심적인 구조입니다. 때때로, 객체에서 불필요한 키를 제거하거나 수정해야 하는 상황이 생깁니다. 이 글에서는 자바스크립트 객체에서 키 값을 어떻게 삭제하는지에 대해 알아보겠습니다. delete 연산자를 사용한 키 삭제 방법 기본 사용법 const obj = {name: "John", age:

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

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

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

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

더욱 향상된 NextJS: Next.js 13.5 버전 소식

프론트엔드 개발자들에게는 즐거운 소식입니다. NextJs 13.5버전이 릴리즈 되었습니다. 🎉 한국 사람들이 읽기 쉽게 원본글을 번역했습니다. NextJs을 애용하는 입장에서 반가운 소식이네요. (공부할 것도 많아졌네요 🥲) 💡 해당 글은 NextJs 13.5 소식을 번역하고 각색한 글입니다. Next.js 13.5Next.js 13.5 includes 22% faster local server startup, 29% faster HMR (Fast Refresh)

nextjs 13 middleware를 사용하여 인가 실패 시 redirect

안녕하세요. 독자님들 ! NextJS 13으로 버전을 업데이트하면서 많은 변화를 가져왔습니다. 사용법 또한 약간씩 차이가 있기에 헷갈릴 수 있는데요. 이번 섹션에서는 NextJS 13에서 NextAuth를 이용하여 인가에 문제가 생겼을 시 로그인을 유도하는 코드 예시를 소개해드리려 합니다. 목차 ## NextJS 13 인가(Authorization) 실패 시 리다이렉트 코드 여러분의 시간은 소중하니까 가장 핵심부인 코드를 먼저 살펴보도록

News

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

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

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

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

Next.js 13 navigation/useRouter는 어떻게 다를까?

Next.js 개발자라면 어플리케이션의 사용자 경험에 라우팅이 얼마나 중요한지 잘 알고 있을 것입니다. Next.js 13에서 useRouter 훅이 훨씬 간편해지고 많은 점이 변경되었습니다 ! 커피 한잔 손에 쥐고 편하게 읽어보세요. Next.js 13에서 무엇이 새로워졌고, Next.js 12와 어떻게 다른지에 대해 가벼우면서도 자세하게 썼으니까요. 😉 Next.js 12의 useRouter: 빠른 회고 기본

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

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

수 많은 아이콘을 하나의 라이브러리에서: React-icons 사용법

React 개발자라면 알다시피, 아이콘은 웹 사이트나 애플리케이션에서 중요한 비주얼 요소입니다. 그럼에도 불구하고, 아이콘을 다루는 일은 때로는 번거롭고 복잡할 수 있습니다. React-icons 라이브러리는 이 문제를 해결하려고 만들어졌습니다. 이 글에서는 React-icons의 기본적인 사용법을 다룰 예정입니다. 1. React-icons 사용 방법 첫번째로, React-icons를 사용하기 위해선 설치부터 시작해야 합니다. npm 또는 yarn을 사용하여 설치할 수

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

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

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

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

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

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