꿈많은 DEVELOPER

[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 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 개념과 장점에 대해..

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

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

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

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

🤷‍♂️ 본론에 앞서본론에 앞서 리액트(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..

🤷‍♂️ 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..

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

🤷‍♂️ 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..

🤷‍♂️ 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 활용해서..

🤷‍♂️ 실시간 로또 회차별 당첨번호최신 로또 회차별 당첨번호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..

🤷‍♂️ 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..

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

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

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

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

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

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

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

🤷‍♂️ 본론에 앞서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 확장한 문법으..

🤷‍♂️ 본론에 앞서 중요한 객체 지식 공부하기  "> HTML 삽입미리보기할 수 없는 소스 가장 중요한 객체의 개념과 다루는 방법https://cometruedream.tistory.com/261 HTML 삽입미리보기할 수 없는 소스 배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/259 HTML 삽입미리보기할 수 없는 " data-og-host="cometruedream.tistory.com" data-og-source-url="https://cometruedream.tistory.com/261" data-og-url="https://cometruedream.tistory.com/261" data-og-image="https://scrap..

🤷‍♂️ 타입스크립트란?요즘 타입스크립트(typescript)는 국룰처럼 프런트엔드, 백엔드에서 많이 사용되는 오픈소스 프로그래밍 언어입니다.저 또한 타입스크립트 활용하며 더욱 안전하고 좋은코드를 만들기 위해서 노력합니다.본론으로 가서 타입스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로 자바스크립트 슈퍼셋으로 즉 자바스크립트의 상위 확장자로 자바스크립트 엔진을 활용하며 변수의 타입을 정의하고 프로그래밍하면 자바스크립트로 컴파일되어 실행할 수 있습니다. "> HTML 삽입미리보기할 수 없는 소스 [TypeScript] 타입스크립트 타입정의 공부하기https://cometruedream.tistory.com/125 [TypeScript] 타입스크립트 타입정의🤳 TypeScript 기본 ..

🤷‍♂️ 본론에 앞서 중요한 객체 지식 공부하기자바스크립트에서 객체와 배열은 가장 중요한 데이터 자료구조 입니다.javascript 객체(object)는 key와 value 형태로 이루어져 있으며 객체에는 많은 유용한 기능들이 있지만 객체를 읽고 key와 value 값에 대한 목록이 필요한 상황이 많습니다.자바스크립트에서는 이러한 경우를 위해서 Object.keys()와 Object.values() 함수를 사용하면 객체를 유용하게 활용할 수 있습니다.Object.keys()와 Object.values() 함수의 개념과 사용방법에 대한 예제를 알아보겠습니다. "> HTML 삽입미리보기할 수 없는 소스 가장 중요한 객체의 개념과 다루는 방법https://cometruedream.tistory.com/261..

" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 많은 업종에 사람들이 ChatGPT 활용해서 필요한 정보를 얻거나 문제를 해결합니다.본론에 앞서 ChatGPT 개발을 보다 쉽게 이해하기 위해서 영상을 시청 후에 생성형 AI, ChatGPT API 개념과 활용방법에 대해서 알아보겠습니다.  🤷‍♂️ AI란? "> HTML 삽입미리보기할 수 없는 소스 AI는 “인공지능”의 약자이며 컴퓨터가 사람처럼 학습하고 문제를 해결하고 다양한 답변을 만들어주는 기술을 뜻합니다.  왜 AI가 중요한가?코로나 시국 이후로 AI, IT 기술은 더 빠르게 발전하고 진화하고 있습니다.AI는 지금도 우리의 일상생활에서 사람들에게 많은 일을 도와주고 있습니다.의료진단, 자율주행차, 언어번역등 다양한 분..

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 "> HTML 삽입미리보기할 수 없는 소스배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/256 [자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개cometruedream.tistory.com  배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트]..

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 "> HTML 삽입미리보기할 수 없는 소스 배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/259 HTML 삽입미리보기할 수 없는 소스배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/256 [자바스크립트] 배열(array) redu" data-og-host="cometruedream.tistory.com" data-og-source-url="https://cometruedream.tistory.com/259" data-og-url="https://cometruedream.tistory.com/259" data-og-image="h..

🤷‍♂️ 본론에 앞서 "> HTML 삽입미리보기할 수 없는 소스  Firebase Cloud Messaging(FCM)? 앱에서 알람,공지을 보내기위해서 사용되는 알림을 보내는 도구입니다.우리가 사용하는 앱/웹에서 우리는 알림을 공지, 업데이트, 알림을 휴대폰 메세지로 받는데 이 푸시 알림을 보낼수 있도록 도와주는 클라우드 기반 메세징 솔루션 기술입니다.저는 Nest.js 백엔드로 FCM을 구축해서 푸시알림 서비스를 개발할 예정이지만 개발에 앞서 FCM의 개념및 아키텍처를 알아보겠습니다. FCM 이란?💡 Firebase Cloud Messaging(FCM)는 Google Firebase 플랫폼에서 제공하는 메시징 서비스로 서버에서 사용자들 핸드폰으로 푸시 메시지를 안정적으로 전달할 수 있는 방법을 제..