전체 글 287

가장 쉽게 이해할수 있는 CS 컴파일러와 인터프리터 개념

🤷‍♂️ 본론에 앞서IT분야에서 프로그래밍을 하다 보면 컴파일러(Compiler)와 인터프리터(Interpreter) 차이에 대한 개념이 필요할 때가 있고 이 두 개의 방식에 대한 개념은 개발자에게 중요한 지식이라고 생각이 듭니다. 그래서 이번 글을 통해서 컴파일러와 인터프리터의 개념을 가장 쉽게 이해할 수 있도록 정리해 보았습니다.  🤷‍♂️ 컴파일러와 인터프리터 개념프로그래밍 언어를 사용할 때 코드가 어떻게 실행되는지 이해하는 것은 개발자에게 중요합니다.여기서 프로그램 언어마다 컴파일러와 인터프리터라는 두 가지 방식이 있고 둘 다 고급언어이며 즉 기계가 이해할 수 있는 언어로 번역해 주는 프로그램입니다. 그리고 이 두 가지는 코드 실행 방식에서 큰 차이를 보입니다.컴파일러와 인터프리터 개념을 요즘..

ITstudy 2024.11.01

요즘 인기 많은 프레임워크 Svelte 개념과 Vscode 환경 셋팅 방법

Svelte(스벨트)는 2019년 출시한 최신 기술에 프레임워크입니다.개발자라면 한 번씩은 들어본 웹 프레임워크 3 대장 Angular, React, Vue 다른 방식의 프런트 프레임워크입니다.기존에 프런트 프레임워크 달리 Svelte는 컴파일러로 동작합니다. 쉽게 설명하자면 Svelte 코드를 작성하면 작성한 코드가 컴파일되어 순수 javascript로 변환되고 브라우저에서 실행됩니다.이러한 특징 때문에 기본에 프레임워크보다 훨씬 더 빠른 성능의 장점이 있습니다. Svelte 특징컴파일 타임: 다른 프레임워크들이 브라우저에서 런타임에 많은 작업을 처리하는 반면 Svelte는 컴파일 타임에 모든 작업을 처리하여 더 빠른 성능에 애플리케이션을 만듭니다.반응성(Reactivity): Svelte는 반응성을 ..

ITstudy 2024.10.29

랜딩페이지로 매출 상승시키고 구매전환율 높이는 방법 꿀팁

사업자라면 누구나 매출 상승과 웹사이트의 구매 전환율을 높이고 싶어 합니다.이러한 목표를 달성하기 위한 다양한 방법 중에 효과적인 방법으로 바로 랜딩 페이지입니다.랜딩 페이지는 고객이 웹사이트에 처음 접속했을 때 가장 먼저 보게 되는 페이지로 많은 기업들이 이를 활용하여 고객 유입을 극대화하고 있습니다.잘 설계된 랜딩 페이지는 단순한 정보 제공을 넘어 고객의 관심을 끌고 행동을 유도하는 강력한 도구로 작용합니다. 랜딩 페이지 잘 만들어진 하나의 랜딩 페이지가 10명의 세일즈맨보다 더 큰 효과를 낼 수 있다는 것입니다.이는 비용 측면에서도 효율적이며 지속적으로 고객을 유치하고 전환시키는 데 기여할 수 있습니다.랜딩 페이지는 24시간 운영되며 언제든지 고객에게 접근할 수 있는 기회를 제공합니다. 랜딩페이지 ..

ITstudy 2024.10.24

[AWS] ALB vs NLB 개념과 차이점 알아보기

AWS 인프라를 구축하면 필수적으로 로드밸런서를 활용해야 합니다.AWS Application Load Balancer(ALB)와 Network Load Balancer(NLB) 차이점은 통신하는 네트워크 계층의 차이가 있을 뿐만 아니라 각각 용도에 맞춰서 사용하는 것이 중요합니다. AWS에서 제공해 주는 이 두 서비스의 차이를 이해하고 애플리케이션의 요구 사항에 맞는 적절한 서비스를 구축하기 위해서 ALB vs NLB의 차이점을 알아보겠습니다. 여기서 잠깐!ALB vs NLB 개념과 차이점을 알아보기 전에 먼저 Application Load Balancer(ALB) 개념과 사용법 알아보기https://cometruedream.tistory.com/296 [AWS] Application Load Balan..

AWS 2024.10.23

[AWS] Application Load Balancer(ALB) 개념과 사용법

요즘 많은 회사들은 클라우드 서비스로 AWS를 많이 사용합니다.AWS ABL라고 불리며 애플리케이션의 수신되는 트래픽을 여러 대상에 자동으로 분산시키고 서비스의 안정성과 다양한 기능을 통해 애플리케이션의 성능을 최적화하는데 좋은 기술입니다. 이번 글을 통해서 AWS ABL를 개념과 셋팅하는 방법을 알아보겠습니다. 🤷‍♂️ AWS 로드밸런서 개념ALB는 OSI 모델의 7 계층에서 작동하는 로드 밸런서로, HTTP 및 HTTPS 트래픽을 처리합니다. 이는 웹 애플리케이션의 요청을 여러 서버에 분산시켜 부하를 줄이고 가용성을 높입니다.ALB는 SSL 종료, 세션 스티키니스, 헬스 체크 등의 기능을 제공하여 애플리케이션의 성능을 최적화합니다.  AWS EC2 개념 공부하기https://cometruedream..

AWS 2024.10.22

Nginx와 Apache Request Entity Too Large 원인과 문제해결 방법

🤷‍♂️ 본론에 앞서Nginx, Apache로 서버를 구성하고 프론트에서 서버로 요청을 보낼 때 용량이 큰 파일을 업로드하면 413 Request Entity Too Large 오류 메시지를 볼수 있습니다. 이러한 오류에 대한 원인을 파악하지 못하면 불필요한 시간낭비를 할수 있습니다. 이 글을 통해서 Request Entity Too Large 원인과 해결방법을 알아보겠습니다. 알아두면 좋은 Nginx Proxy 설정 오류 해결방법2023.02.01 - [AWS] - [Trouble Shooting] Nginx proxy 설정 [Trouble Shooting] Nginx proxy 설정🤷‍♂️ Proxy? 다른 서버에서 리소스를 찾는 클라이언트의 요청에 대한 중계자 역할을 하는 서버이다. 따라서 프록..

ITstudy 2024.10.21

Next.js 14 Middleware를 활용한 로그인 페이지 리다이렉션 방법

🤷‍♂️ 본론에 앞서 미들웨어 기본개념미들웨어는 서버 측에서 요청을 처리하기 전에 실행되는 함수이며 미들웨어를 통해서 요청에대한 작업을 사전에 수행할수 있도록 돕습니다.미들웨어 파일은 middleware.ts 또는 middleware.js 파일명으로 ./pages, ./app 폴더와 같은 계층에 위치해야됩니다. Next.js 버전 마다 루트 경로에 /pages, /app 다를수 있지만 /pages, /app 폴더와 같은 계층에 미들웨어 파일을 위치시키면 됩니다.미들웨어 파일명과 경로 규칙을 꼭 준수하셔야 미들웨어 함수가 동작합니다. "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ Middleware.ts 사용법미들웨어 사용방법import { NextResponse } from 'next/serve..

React 2024.10.15

[AWS] EC2 계정 비밀번호 변경 하는 방법

🤷‍♂️ 본론에 앞서AWS EC2 인스턴스에 SSH로 접속하여 계정 비밀번호를 변경해야 하는 경우가 있습니다.이 글에서는 EC2 계정의 비밀번호를 간편하게 변경하는 방법을 설명하겠습니다. 꿀팁!이 명령어를 매번 기억하기 어려우므로 이 글을 즐겨찾기에 추가하여 EC2 계정 비밀번호 변경 시 참고하시기 바랍니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 [NestJS] AWS Parameter Store AWS-SDK 프로젝트 2탄2024.09.05 - [Nest.js] - [NestJS] AWS Parameter Store 프로젝트 2탄 [NestJS] AWS Parameter Store 프로젝트 2탄🤷‍♂️ 본론에 앞서이전 글에서 환경변수를 중앙 관리 하는 이유와 ..

AWS 2024.09.27

[NestJS] AWS Parameter Store AWS-SDK 프로젝트 3탄

🤷‍♂️ 본론에 앞서이전 글에서 AWS Parameter Store 생성하고 매개변수, 문자열 암호화 하는 방법에 대해서 알아봤습니다.이번글에서는 AWS-SDK를 사용해서 Nest.js 프로젝트에 Parameter Store 접근하는 방법을 알아보겠습니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 [NestJS] AWS Parameter Store AWS-SDK 프로젝트 2탄2024.09.05 - [Nest.js] - [NestJS] AWS Parameter Store 프로젝트 2탄 [NestJS] AWS Parameter Store 프로젝트 2탄🤷‍♂️ 본론에 앞서이전 글에서 환경변수를 중앙 관리 하는 이유와 AWS Parameter Store 개념과 장점에 대해..

Nest.js 2024.09.06

[NestJS] AWS Parameter Store 프로젝트 2탄

🤷‍♂️ 본론에 앞서이전 글에서 환경변수를 중앙 관리 하는 이유와 AWS Parameter Store 개념과 장점에 대해서 알아봤습니다.이번 글에서는 실무에서 Parameter Store 파라미터 값들을 생성하는 방법에 대해서 알아보겠습니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 AWS Parameter Store 개념과 장점안전: 암호화된 형태로 저장되므로 외부에 노출될 위험이 적습니다.중앙 관리: 여러 애플리케이션에서 동일한 민감 정보를 관리하고 사용할 수 있습니다.자동화: 애플리케이션이 자동으로 필요할 때 파라미터를 가져와 사용할 수 있습니다. 🤷‍♂️ AWS Parameter Store 설정AWS Systems Manager 검색 왼쪽 카테고리에 파라미터..

Nest.js 2024.09.05

[NestJS] AWS Parameter Store 프로젝트 1탄

🤷‍♂️ 본론에 앞서프로젝트를 진행하다 보면 환경변수 관리가 어려워집니다.프로젝트 사이즈가 커지면 더욱더 환경변수 관리가 어려워지기 때문에 이번 베타서비스까지 개발을 완료하고 AWS Systems Manger 기능인 Parameter Store로 환경변수를 이관하고 환경변수 관리를 중앙 집중화하는 과정을 정리한 시리즈로 글을 작성할 생각입니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ 환경변수 중앙 집중화 하는 이유AWS Parameter Store 기능을 사용하기 전에 왜? 환경변수를 중앙 관리하고 집중화를 구축하면 우리에게 주는 편리함과 효율성을 알아보겠습니다. 기존 환경변수 작업방식 Nest.js 프로젝트에서. env 파일을 통해서 환경변수를 관리합니..

Nest.js 2024.09.04

NPM faker-js로 실무에서 활용가능한 가짜데이터 서버 만들기

🤷‍♂️ 본론에 앞서현재 진행하고 있는 프로젝트에서 가맹점 통계 가짜 데이터를 만들기 위해서 faker-js 라이브러리를 사용했습니다. 300명 이상의 유저데이터와 만 건 이상의 결제 기록데이터가 필요했기에 직접 쿼리, 코드로 중복되지 않는 데이터를 만든다는 거는 생산성도 떨어지고 효율적이지 않는 방법이라고 생각해서 방법을 찾아보다 faker-js 라이브러리를 활용해서 가짜 데이터 서버를 구축했습니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ faker-js란?faker-js 가짜 데이터를 손쉽게 생성할 수 있게 도와주는 javascript 라이브러리입니다.개발, 테스트, 베타 테스트 과정에서 실제 데이터가 없는 경우 faker-js를 활용해서 대량의 가짜..

HTML 동적 콘텐츠 제이쿼리로 다루기

🤷‍♂️ 본론에 앞서최근에 HTML, CSS 퍼블 프로젝트를 하면서 동적인 기능은 JS와 jQuery 사용하고 있습니다. 오랜만에 HTML, CSS, JS 전통적인 웹 퍼블 작업을 하다 보니 생각지도 못한 에지케이스들이 발생하는 경우가 많았습니다.이 또한 좋은 경험이고 다시 한번 기본기를 리마인드 할 수 있어서 좋았습니다. 이 글은 저에 개인적인 오류를 해결했던 방법을 공유드립니다. "> HTML 삽입미리보기할 수 없는 소스 웹개발자라면 알아야 하는 jQuery란?https://cometruedream.tistory.com/5 jQuery에 정의제이쿼리(jQuery)란? 제이쿼리는 오픈 소스 기반에 자바스크립트 라이브러리로 자바스크립트를 더욱 쉽고 편리하게 이해하고 사용할수있게 해주는 라이브러리 입니다..

Jquery 2024.08.29

URLSearchParams 개념과 쿼리 사용법

🤷‍♂️ 본론에 앞서본론에 앞서 리액트(react) 프로젝트를 진행 중에 쿼리 스트링 다루기 위해서 URLSearchParams API를 활용해 쿼리 스트링을 다루면서 겪은 저의 경험을 공유해 드립니다.  "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ URLSearchParams 개념URLSearchParams는 JavaScript 웹 API중 하나로 URL 주소에서 가장 다루기 까다로운 쿼리 스트링을 쉽게 다룰수 있도록 돕는 객체입니다. URLSearchParams MDNhttps://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams URLSearchParams - Web APIs | MDNThe URLSearchParams interface..

JavaScript 2024.08.28

PostgreSQL UUID uuid-ossp 사용법

🤷‍♂️ UUID 개념UUID(Universally Unique Identifier)는 전 세계에서 고유한 식별자를 생성하는 표준 방법입니다.고유한 식별자를 만들기 위해서 UUID 라이브러리를 활용한 경험들이 있으실겁니다. PostgreSQL에서도 UUID 데이터 타입을 사용하여 고유한 식별자를 만들 수 있습니다.  PostgreSQL 사용해야 하는 이유?https://itibiza.tistory.com/entry/%EA%B0%80%EC%9E%A5-%ED%95%AB%ED%95%9C-DB-postgresql-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 가장 핫한 DB..

ITstudy 2024.08.27

도커 platform 버전 오류 해결 방법

🤷‍♂️ docker platform 설정이 필요한 이유도커에서 platform 설정을 사용하는 이유는 컨테이너 이미지를 호스트 서버의 CPU 아키텍처와 호환되도록 하기 위해서입니다. 예를 들어 로컬에서 이미지를 빌드하고 ECR PUSH 후에 클라우드 서버에서 ECR PULL을 받고 컨테이너를 실행하면 플랫폼 버전이 맞지 않아서 오류가 발생합니다. 또한, 맥 OS에서는 platform 옵션을 설정해주지 않으면 다른 플랫폼으로 빌드를 할 때 platform 버전 오류가 발생하기 때문에 platform 옵션 설정이 필요합니다. 이러한 문제를 해결하기 위해서 platform 설정이 필요합니다.  도커란?https://itibiza.tistory.com/entry/%EB%8F%84%EC%BB%A4-%EC%9E..

관리자단 필수 기능 react-csv 활용한 CSV 파일 다운로드

🤷‍♂️ react-csv란?리액트로 관리자단 프로젝트를 진행하다 보면 엑셀 파일, CSV 파일 등등 파일을 다운로드 해주는 기능이 필요합니다.  위와 같이 기간별, 유형별로 통계한 데이터들을 CSV 파일로 다운로드 해주는 기능입니다.   "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ react-csv 라이브러리 선택한 이유보통은 서버에서 데이터를 처리해 파일을 만들어 프론트에서 다운로드 받는 방식이 많이 사용됩니다. 그러나 저는 서버에서 파일을 처리하기보다 프론트에서 직접 CSV 파일을 다운로드하는 것이 더 효율적이라고 판단하여 react-csv 라이브러리를 사용해 기능을 구현했습니다. 이 라이브러리를 선택한 이유중에 하나는 주간 다운로드 횟수도 375,547 이며 가장 최근 까지 git활동이..

React 2024.08.22

가장 쉽게 SEO 태그를 만드는 웹 메타태그 생성기

🤷‍♂️ SEO 최적화 메타태그 생성기가장 쉽게 만드는 메타태그 생성기https://webtool.everyday-365.com/make-meta https://webtool.everyday-365.com/make-meta webtool.everyday-365.com    재밌는 오늘의 띠별 운세 보고 가세요!   https://cometruedream.tistory.com/247 [React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하comet..

ITstudy 2024.08.20

[AWS] EC2 리눅스 버전 확인 및 AWS CLI 설치 방법

🤷‍♂️ EC2 리눅스 버전 확인 방법이 명령어를 사용하면 리눅스 버전 정보가 상세하게 나타납니다. grep . /etc/*-release EC2 리눅스 버전을 상세하게 나타납니다.  "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ EC2 AWS CLI 설치 방법 AWS CLI 란?https://cometruedream.tistory.com/276 [AWS] CLI 개념과 설치 및 configure 등록🤷‍♂️ AWS CLI(Command Line Interface)란?AWS CLI(Amazon Web Services Command Line Interface)는 AWS를 관리하고 상호작용하기 위한 명령어 도구입니다. 2022.11.16 - [AWS] - AWS EC2 인스턴스 Putty 활용해서..

AWS 2024.08.19

최신 로또 회차별 당첨번호

🤷‍♂️ 실시간 로또 회차별 당첨번호최신 로또 회차별 당첨번호https://webtool.everyday-365.com/lotto https://webtool.everyday-365.com/lotto webtool.everyday-365.com      재밌는 오늘의 띠별 운세 보고 가세요!   https://cometruedream.tistory.com/247 [React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하cometruedream.ti..

ITstudy 2024.08.18

[AWS] CLI 개념과 설치 및 configure 등록

🤷‍♂️ AWS CLI(Command Line Interface)란?AWS CLI(Amazon Web Services Command Line Interface)는 AWS를 관리하고 상호작용하기 위한 명령어 도구입니다. 2022.11.16 - [AWS] - AWS EC2 인스턴스 Putty 활용해서 서버 접속 AWS EC2 인스턴스 Putty 활용해서 서버 접속🤳 Putty를 활용해서 EC2 인스턴스 접속. puttygen를 활용해서 EC2 인스턴스 생성시 받은 키페어 pem 파일을 ppk 파일로 변환을 해줘야 윈도우에서 EC2 인스턴스에 접속이 가능하다. Key passphrase 보안을cometruedream.tistory.com  "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ AWS CLI..

AWS 2024.08.14

NextJS에서 Prisma를 사용한 Vercel에 배포 오류 해결 방법

🤷‍♂️ Next.js, Prisma, Postgresql 프로젝트지금 Next.js, Prisma, Postgresql 활용해서 개인 프로젝트로 Vercel에 배포하려는 첨 보는 에러 메시지에 황당했습니다. 로컬에서 빌드도 잘되고 환경변수도 잘 세팅되어 있고 계속 문제해결을 위해서 골머리를 앓고 있었습니다.  "> HTML 삽입미리보기할 수 없는 소스 문제의 에러 메시지Learn how: https://pris.ly/d/vercel-build at fa (/vercel/path0/node_modules/@prisma/client/runtime/library.js:33:69) at new t (/vercel/path0/node_modules/@prisma/client/runtime/libra..

React 2024.08.09

React 개발자를 위한 TypeScript와 Hooks 사용 팁 및 예제

🤷‍♂️ 리액트와 타입스크립트 조합React와 Typescript는 강력한 조합으로 코드 베이스를 더욱 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.하지만 입문자 분들께서는 React hook에 Typescript를 정의하는 게 불편하고 까다로울 수도 있습니다. 이 글을 통해서 useState, useEffect, useContext, useRef 그리고 Custom Hook에서 Typescript를 정의하는 방법을 자세히 알아보겠습니다. React Hook 사용개념보다는 TypeScript를 정의하고 사용하는 방법에 대해서 자세히 다루고 있습니다.  "> HTML 삽입미리보기할 수 없는 소스 2024.07.31 - [React] - 리액트 useLayoutEffect 개념 및 사용법 리액트 ..

React 2024.08.08

리액트 제어 vs 비제어 컴포넌트 알아보기

🤷‍♂️ 리액트 폼 요소란?리액트에서 폼(form) 요소에 상태값을 다루는 방식에 따라 제어 컴포넌트(controlled component)와 비제어 컴포넌트(uncontrolled component) 방식으로 나눠집니다. 이 두 가지 접근 방식엔 장단점이 있으며 상황에 맞게 선택해서 효율적으로 사용할 수 있습니다.  "> HTML 삽입미리보기할 수 없는 소스  2024.07.31 - [React] - 리액트 useLayoutEffect 개념 및 사용법 리액트 useLayoutEffect 개념및 사용법🤷‍♂️ Rendering란?useLayoutEffect에 대해서 알아보기 전에 리액트에서 가장 중요한 렌더링 과정 간단하게 알아보겠습니다. 렌더링(Rendering)이란?쉽게 설명해서 HTML, CSS..

React 2024.08.02

리액트 useLayoutEffect 개념및 사용법

🤷‍♂️ Rendering란?useLayoutEffect에 대해서 알아보기 전에 리액트에서 가장 중요한 렌더링 과정 간단하게 알아보겠습니다. 렌더링(Rendering)이란?쉽게 설명해서 HTML, CSS, JavaScript 문서를 읽고 브라우저에 UI 그리는 과정을 말합니다.  "> HTML 삽입미리보기할 수 없는 소스  React hooks useSate 에 대해서https://cometruedream.tistory.com/73 React hooks useSate 에 대해서리액트 프레임워크중에 꼭알아야할 React hooks 중에 가장 중요한 useState 상태관리 입니다. useState 간단하게 컴포넌트 상태를 간단하게 생성하고 업데이트를 시킬수있는 도구를 제공합니다. 기본cometruedre..

React 2024.07.31

[Git] 깃 로컬 및 원력 브랜치(Branch) 삭제와 복구하는 방법

🤷‍♂️ 본론에 앞서개발자라면 Git을 필수적으로 사용하는 버전관리시스템입니다.Git의 버전관리시스템을 활용해서 프로젝트에 버전을 추적, 관리, 팀원과 협업합니다. 저는 이번 프로젝트에서 브랜치를 로컬, 원격에서 삭제하다가 실수로 다른 브랜치를 삭제했습니다.아이러니하게도.. 하루뒤에 다른 브랜치를 삭제한 것을 알아차리긴 했습니다.그래서 부랴부랴 삭제한 브랜치를 복구하고 다시 원상복구를 시켰습니다. GIt에서 제공하는 다양한 기능과 옵션들이 있지만 이 글에서는 브랜치(branch)에 대해서 알아보겠습니다.  "> HTML 삽입미리보기할 수 없는 소스  git clone -- recursive 옵션의 의미https://cometruedream.tistory.com/217 git clone -- recurs..

Git 2024.07.23

[타입스크립트] typescript keyof 특정 객체 유니온 타입 기법

🤷‍♂️ 타입스크립트 keyof란?자바스크립트에서는 존재하지 않는 keyof 연산자입니다.타입스크립트는 자바스크립트의 슈퍼셋이며 자바스크립트를 컴파일해서 실행합니다. 타입스크립트에서 keyof 타입 연산자는 주어진 객체의 모든 속성의 key값을 유니온 타입으로 반환합니다.이 keyof 연산자를 활용하면 더 안전하고 강력한 코드로 유지보수할 수 있습니다.  "> HTML 삽입미리보기할 수 없는 소스  [타입스크립트] 타입스크립트 개념과 실무에 유용한 Type Narrowing 기법https://cometruedream.tistory.com/265 [타입스크립트] 타입스크립트 개념과 실무에 유용한 Type Narrowing 기법🤷‍♂️ 타입스크립트란?요즘 타입스크립트(typescript)는 국룰처럼 프런..

[자바스크립트] javascript 숫자 금액 표시 3자리 마다 콤마 사용법

🤷‍♂️ 본론개발을 하다 보면 가격표, 금액을 표시해야 될 때가 있습니다.10000원 가격을 표시해야 된다고 가정하면 10000 보다 10,000 가격 표시가 가독성이 더 좋습니다.가격표와 금액은 개발을 하면서 자주 마주할수 있는 데이터이며 단순히 숫자 그대로 표시하는 것보다 콤마와 함께 표시해 주는 것이 좋습니다.사용자 편의성을 위해서 가격표, 금액을 표시할때 자바스크립트(javascript)에서 콤마를 표시하는 다양한 방법을 알아보겠습니다. "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ 3자리마다 콤마를 추가하는 방법  1. toLocaleString() 메서드 사용toLocaleString() 메서드를 사용하면 숫자를 지역별 형식에 맞게 변환할 수 있습니다.이 방법은 가장 많이 쓰이는 방법..

JavaScript 2024.07.19

[Mac] iTerm 터미널 Shell 개념 / alias 설정 명령어와 편리한 사용법

IT 업계 사람들은 MasOS 운영체제의 전자기기를 많이 사용합니다.특히, Mac을 사용하는 개발자분들이 많습니다.MacOS 기반에 iTerm 터미널에서 Shell 명령어, 커스텀 명령어, alias 설정 명령어들이 있습니다.편리하고 효율적으로 생산성을 높이기 위해서 기본적인 개념과 alias를 사용방법에 대해서 알아보겠습니다. 🤷‍♂️ 본론에 앞서 Shell(셸) 이란?Shell은 사용자가 컴퓨터와 상호 작용하는 인터페이스로 명령어를 입력하고, 파일을 관리하고, 다양한 프로그램을 실행할 수 있습니다.즉, 명령어를 입력하면 입력한 명령어를 해석하고 실행하는 프로그램이다.MasOS에서는 기본적으로 Unix 기반의 Shell을 사용합니다.다양한 프로그램을 보다 보면 파일명을. js,. py 파일로 구성되어..

ITstudy 2024.07.18

[React-query] 데이터통신을 위한 useMutation 개념과 hooks 사용법

🤷‍♂️ 본론에 앞서react-query는 React에서 많이 사용되는 라이브러리이며 다양한 훅과 유틸리티를 제공해 주며 개발자의 편리성과 생산성을 높여줍니다.본론에 앞서 아래의 글들을 읽고 오시는 것을 추천드립니다. useMutation대한 글을 이해하는데 많은 도움이 됩니다. "> HTML 삽입미리보기할 수 없는 소스 react-query 사용법에 대해 알아보기https://cometruedream.tistory.com/130 React-query 상태 관리📖React-query 알기전에 JSX란?JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다.JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다.JSX는 javascript 확장한 문법으..

React 2024.07.16