꿈많은 DEVELOPER

🤷‍♂️ 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 플랫폼에서 제공하는 메시징 서비스로 서버에서 사용자들 핸드폰으로 푸시 메시지를 안정적으로 전달할 수 있는 방법을 제..