꿈많은 DEVELOPER

🤷‍♂️ 본론에 앞서최근에 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..