재우니의 블로그

인기 글

주민등록표 (말소자 초본) 발급 관련✔

주민등록표 (말소자 초본) 발급 관련 주민등록표 (말소자 초본)은 상속자인 분이 돌아가신 분에 대한 서류를 제출하는 용도 입니다. 정부24 https://www.gov.kr 사이트나 무인민원발급기에서는 해당 말소자 초본 서류를 얻을 수 없습니다. 해당 문서는 가까운 동사무소 즉 자치센터나 시청 또는 구청을 통해서만 발급이 가능합니다. https://www.gov.kr 정부서비스 | 정부24 정부의 서비스, 민원, 정책·정보를 통합·제공하는 대한민국 정부 대표포털 www.gov.kr 그리고 중요한건 돌아가신 분에 대한 주민등록번호를 미리 알고 가야 합니다. 만약에 신청 서류에 주민등록번호를 모를 경우, 제적등본 발급을 요청하여(비용발생) 기재하시면 됩니다. 이런 문서는 보통 상속자로 인한 재산 부분에 대해..
생활정보 🍜
2024.03.11

ChatGpt 의 유료결제 영수증 및 청구서 다운로드

ChatGpt 의 유료결제 영수증 및 청구서 다운로드 https://chatgpt.com/ 사이트에 접속하며 회원가입을 합니다. ChatGpt 유료 결제를 위해서는 왼쪽 하단에 있는 "Team 워크스페이스 추가"를 선택합니다.   ChatGPT의 요금제는 세 가지로 나뉩니다: Free, Plus, 그리고 Custom Plan(기업용 요금제). 각 요금제의 특징과 차이점은 다음과 같습니다.1. Free Plan (무료 플랜)사용 모델: GPT-3.5제공 기능: 기본적인 질문 응답, 텍스트 생성접속 가능성: 트래픽이 많을 때는 사용이 제한될 수 있으며, 응답 속도가 느릴 수 있습니다.제한 사항: 최신 모델이나 고급 기능을 사용할 수 없고, 성능이나 속도 면에서 제한이 있습니다.2. Plus Plan (플러스..
AI 기술
2024.09.24

HTML 의 table 을 가운데 center 정렬 하는 방법

table 는 조직적인 방식으로 많은 정보를 표시하는 훌륭한 방법입니다 . 판매 데이터, 웹 페이지 트래픽, 주식 시장 동향 및 학생의 성적은 종종 table 에 표시되는 정보의 예입니다. HTML 을 사용하여 웹 페이지에 table 을 추가할 때 페이지 중앙에 table 을 배치하는 것이 시각적으로 더 매력적일 수 있습니다. 텍스트와 그림을 가운데에 맞추는 작업은 일반적으로 text-align 클래스나 CSS 를 통해 이루어 지지만, table을 가운데에 맞추려면 다른 접근 방식이 필요합니다. 웹 페이지에서 표를 가운데에 맞추는 방법에 대한 자세한 내용은 아래에 나와 있습니다. HTML 에서 table 중앙에 맞추기웹 페이지에 table 을 추가할 때 기본적으로 아래와 같이 페이지 또는 컨테이너의 왼쪽..
HTML
2022.05.19

윈도우 11 에서 검색으로 파일의 최근 수정한 날짜 기준 보는 방법

윈도우 11 에서 검색으로 파일의 최근 수정한 날짜 기준 보는 방법  windows 윈도우 11 의 하위 폴더 내의 최근 수정한 날짜를 기준으로 정렬해서 확인이 가능합니다. 윈도우 10 경우에는 "수정한날짜:" 이렇게 입력하면 달력형태의 기능을 제공해 주는데요. 윈도우 11에서는 제공되지 않으므로 직접 입력하셔야 합니다. 특정날짜는 "수정한 날짜:2022-09-22" 의 년-월-일 형태로 기재해 주시면 검색 가능합니다. 수정한 날짜:오늘수정한 날짜:어제수정한 날짜:이번 주수정한 날짜:지난 주수정한 날짜:이번 달수정한 날짜:지난 달수정한 날짜:올해수정한 날짜:작년수정한 날짜:2022-09-22       윈도우 10에서 최근에 저장된 파일을 보는 방법 https://answers.microsoft.com/..
생활정보 🍜
2024.08.15

Windows 윈도우 10 에 OpenSSL 을 설치하는 방법

OpenSSL은 TLS (Transport Layer Security) 및 SSL (Secure Sockets Layer) 프로토콜을 위한 모든 기능을 갖춘 툴킷 입니다. Apache 스타일 라이센스에 따라 라이센스가 부여됩니다. 이 튜토리얼은 Windows 운영 체제에 OpenSSL 을 설치하는 데 도움이 됩니다.  1 단계 – OpenSSL 바이너리 다운로드  아래 다운로드 URL 을 통해 최신 OpenSSL Windows 설치 프로그램 파일을 다운로드 받으세요. OpenSSL 다운로드 페이지를 방문하려면 아래 링크를 클릭하세요. http://slproweb.com/products/Win32OpenSSL.html  2 단계 – OpenSSL 설치 프로그램 실행 다운로드 ..
Server,AWS
2024.03.11

최신 글

Next.js + Tailwind CSS 프로젝트 설정 가이드

Next.js +  Tailwind CSS  프로젝트 설정 가이드Mood Diary는 사용자 감정을 분석하고 기록하기 위한 Next.js와 Tailwind CSS 기반 웹 애플리케이션입니다. 아래 가이드를 통해 처음부터 프로젝트를 설정하고 실행하는 방법을 단계별로 설명합니다.📋 목차필수 요구 사항설치 과정Tailwind CSS 설정환경 변수 설정실행 및 테스트레이아웃 및 페이지 예시스크립트 명령어배포필수 요구 사항이 프로젝트를 실행하려면 아래의 도구가 필요합니다:Node.js: v18.17.0 이상npm: v9.6.7 이상 (또는 pnpm을 사용할 수도 있음)Git (옵션)설치 과정1. Next.js 프로젝트 초기화Next.js와 Tailwind CSS를 간단하게 설치하기 위해 create-next-a..
ReactJS 🤞
2024.11.20

사용자 이미지 업로드(JavaScript) -> Google Cloud Vision API 로 이미지 분석

이 예제는 HTML과 JavaScript를 이용하여 사용자가 이미지를 업로드하고 Google Cloud Vision API로 이미지를 분석하는 간단한 웹 애플리케이션을 구현합니다. 1. 프로젝트 폴더 생성 및 파일 준비먼저, 프로젝트를 생성하고 필요한 파일들을 준비합니다.프로젝트 폴더 생성: 프로젝트를 위한 폴더를 생성하세요. 예를 들어, image-analysis-app이라는 이름으로 폴더를 만드세요.파일 생성: 다음의 두 파일을 생성합니다.index.html: HTML 파일로 사용자 인터페이스를 정의합니다.script.js: JavaScript 파일로 이미지 업로드 및 API 호출 로직을 작성합니다.2. HTML 파일 작성 (index.html)아래와 같이 index.html 파일을 작성하세요. 이 ..
자바스크립트
2024.11.20

2024년 최신 AI 개발 도구 비교: Replit, Bolt.new, Cursor AI

2024년 최신 AI 개발 도구 비교: Replit, Bolt.new, Cursor AI2024년 현재, 인공지능(AI) 기술의 발전은 소프트웨어 개발 분야에 혁신적인 변화를 가져오고 있습니다. 특히, AI를 활용한 개발 도구들은 개발자들의 생산성을 크게 향상시키고 있습니다. 이번 글에서는 Replit, Bolt.new, 그리고 Cursor AI라는 세 가지 주요 AI 개발 도구를 비교하여 각 도구의 특징과 장단점을 살펴보겠습니다. 🚀 Replit: 클라우드 기반의 통합 개발 환경Replit은 클라우드에서 다양한 프로그래밍 언어를 지원하는 통합 개발 환경(IDE)으로, 초보자부터 전문가까지 폭넓게 활용할 수 있습니다.주요 특징다양한 언어 지원: Python, JavaScript, C++, Java 등 ..
AI 기술
2024.11.19

C# : 날짜 용도별 DateTimeLibrary 의 메소드 샘플 코드

여기 제공된 DateTimeLibrary의 메소드를 사용하는 예제를 각 메소드별로 구체적으로 설명하고 샘플 코드를 추가했습니다. 이 라이브러리를 사용하는 데 있어 개발자들에게 도움을 주기 위해 작성되었습니다. 각 메소드의 설명과 예시를 통해 라이브러리의 기능을 명확히 이해할 수 있을 것입니다.  1. FirstDayOfCurrentMonth 메소드 사용 예시설명:현재 달의 첫 번째 날을 반환합니다. 예를 들어, 현재가 2024년 11월이라면 "2024-11-01"을 반환합니다.사용 예시:using System;namespace DateTimeLibraryUsage{ class Program { static void Main(string[] args) { ..
CSharp 🍚
2024.11.19

12일차: Angular 16 Observable과 RxJS 기초

Observable 개념 이해하기 - 비동기 데이터 다루기 & RxJS 기초 - 데이터 스트림과 구독하기 실습 (Angular 16 기준)서론Angular 16에서는 비동기 데이터 처리를 위해 Observable과 RxJS 라이브러리를 활용합니다. Observable은 비동기 데이터를 처리하는 강력한 도구로, 이벤트, HTTP 요청, 타이머 등에서 데이터를 스트림 형태로 전달받아 관리할 수 있게 합니다. 이번 글에서는 Observable의 개념을 이해하고, RxJS의 기초적인 사용법을 통해 Observable을 생성하고 구독하는 실습을 코드 위주로 상세히 알아보겠습니다.본론1. Observable이란 무엇인가?Observable의 개념Observable은 비동기적으로 발생하는 데이터 스트림을 다룰 수 있..
Angular
2024.11.18

React 프로젝트 : Node.js 와 Vite 기반 구축 및 팀원 설치 가이드

Node.js와 Vite로 React 프로젝트 설정 가이드Node.js와 Vite를 사용하여 React 프로젝트를 설정하고, 팀원들이 동일한 환경에서 작업할 수 있도록 돕는 실무적인 가이드를 제공합니다. 이 글은 프로젝트 초기 설정부터 Docker를 활용한 환경 통일, 그리고 Windows 환경에서 발생할 수 있는 문제 해결 방법까지 다룹니다.💡 개요팀 프로젝트에서 동일한 개발 환경을 유지하는 것은 생산성 향상과 오류 감소의 핵심입니다. 특히, Node.js와 Vite 기반의 React 프로젝트에서는 아래 내용을 포함한 설정이 중요합니다:Node.js 버전 관리Vite 설정 최적화Docker를 활용한 일관된 개발 환경Windows 사용자 고려 사항🚀 React 프로젝트 설정1. Node.js 설치 및..
ReactJS 🤞
2024.11.18

실무에서 협업과 프로젝트 개발 시에는 NPX 보다 NPM 또는 Yarn 사용

실무에서 협업과 프로젝트 개발 시에는 NPX보다 NPM 또는 Yarn을 사용하는 것이 더 적합합니다. 그 이유를 단계별로 살펴보겠습니다.NPX vs NPM/Yarn: 실무 환경에서의 적합성1. 프로젝트의 일관성 유지NPM/Yarn은 프로젝트 내에 패키지를 설치하고, package.json과 package-lock.json 또는 yarn.lock 파일로 의존성을 관리합니다.팀원 모두 동일한 의존성을 설치하고 실행할 수 있습니다.이는 협업 프로젝트에서 일관성과 재현성을 보장합니다.NPX는 패키지를 임시로 실행하므로, 의존성 정보가 package.json에 기록되지 않습니다.다른 팀원이 동일한 명령을 재현하려면 직접 명령어를 알아야 하므로 비효율적입니다.실무 적용:NPM/Yarn을 사용해 프로젝트 의존성을 명..
기타(툴)
2024.11.17

🌐 CORS(Cross-Origin Resource Sharing) '동일 출처 정책' 이란 무엇인가요?

CORS의 역사와 필요성을 최대한 간단하고 직관적으로 설명해 보겠습니다.🌍 CORS: 웹이 우리를 안전하게 지켜주는 방법인터넷은 어떻게 안전하게 발전했을까요?인터넷은 처음 개발된 이후로 많은 변화를 겪었습니다. 매일 사용하는 웹사이트들 간의 정보 공유가 점점 더 중요해졌고, 이 과정에서 중요한 문제 하나가 등장했습니다. 바로 보안 문제입니다.  1. 인터넷 초창기: 정보를 안전하게 보호하기 위해 등장한 규칙 초기 인터넷 시대에는 "동일 출처 정책(Same-Origin Policy)"이라는 규칙이 도입되었습니다. 쉽게 말해, 같은 웹사이트에만 정보를 주고받도록 하는 규칙이었어요. 예를 들어, example.com이라는 웹사이트에 로그인했을 때, 이 정보는 같은 example.com 안에서만 사용할 수 있..
생활정보 🍜
2024.11.17

React.js와 Node.js를 활용한 TODO List 개발: CORS 문제와 해결 방안

React.js와 Node.js를 활용한 TODO List 개발: CORS 문제를 해결하는 시나리오React.js와 Node.js로 간단한 TODO List 애플리케이션을 개발할 때 CORS(Cross-Origin Resource Sharing) 문제가 발생하는 상황을 직접 경험하며 해결하는 방법을 알아보겠습니다. 이 시나리오는 CORS 설정을 생략한 상태에서 시작하여 오류를 디버깅하고, CORS 패키지를 설치하고 적용하는 과정을 다룹니다.📌 프로젝트 개요 및 목표목표React.js를 이용해 TODO List UI를 개발.Node.js(Express)를 이용해 RESTful API 서버 구성.CORS 오류를 직접 경험하고 이를 해결하는 방법 익히기.프로젝트 구조react-node-todo/├── bac..
ReactJS 🤞
2024.11.17

11일차: Angular 16 에서 HTTP 요청하기

HttpClient로 외부 API 데이터 가져오기 & JSONPlaceholder로 간단한 GET 요청 실습하기 (Angular 16 기준)서론Angular 16에서는 HttpClient 모듈을 사용하여 외부 API와의 통신을 간편하게 처리할 수 있습니다. 이를 통해 데이터를 가져오거나 서버에 데이터를 보내는 작업이 쉽고 효율적이며, 특히 RESTful API와의 연동에 최적화되어 있습니다. 이번 글에서는 HttpClient 모듈을 사용해 JSONPlaceholder API에서 데이터를 가져오는 방법을 설명하고, GET 요청을 활용한 실습을 통해 Angular 애플리케이션에서 데이터를 불러오는 과정과 코드를 자세히 살펴보겠습니다.본론1. HttpClient 모듈 설정Angular의 HttpClient 모..
Angular
2024.11.17

티스토리툴바