키자드에 등록된 hgko-dev의 티스토리 포스트 목록

hgko-dev의 등록된 링크

hgko-dev로 등록된 티스토리 포스트 수는 390건입니다.

[.NET Core] 코드 예제를 통해 멀티스레딩 마스터하기 [내부링크]

C# .NET Core의 멀티스레딩과 관련하여 최적의 성능을 달성하고 일반적인 함정을 피하기 위해 명심해야 할 몇 가지 모범 사례가 있습니다. 몇 가지 코드 예제를 통해 각각에 대해 자세히 살펴보겠습니다. 과도한 잠금 방지 다중 스레드 코드로 작업할 때 흔히 저지르는 실수 중 하나는 너무 많은 잠금을 사용하는 것입니다. 여러 스레드가 동시에 액세스하지 못하도록 공유 리소스를 보호하려면 잠금이 필요하지만 과도한 잠금은 스레드 경합 및 성능 저하를 초래할 수 있습니다. 대신 필요한 경우에만 잠금을 사용하고 적절한 경우 Interlocked 작업 또는 Concurrent 컬렉션 클래스와 같은 다른 동기화 메커니즘을 사용하는 것을 고려하십시오. private readonly object _lock = new o..

Node.js, Express를 사용하여 간단한 웹 크롤러 만들기 [내부링크]

스파이더라고도 알려진 웹 크롤러(Web crawler)는 인터넷을 탐색하고, 웹사이트를 방문하고, 다양한 목적으로 데이터를 추출하는 자동화된 프로그램입니다. 웹 크롤러를 구축하는 것은 복잡한 작업일 수 있지만 올바른 도구와 지침을 사용하면 보람 있는 경험이 될 수 있습니다. 이 글에서는 Node.js, Express 및 TypeScript를 사용하여 간단한 웹 크롤러를 구축하는 방법을 살펴보겠습니다. 프로젝트 설정 시작하려면 새 Node.js 프로젝트를 만들고 필요한 종속성을 설치해야 합니다. 우리는 다음 패키지를 사용할 것입니다. Express — 쉽게 서버를 생성하고 HTTP 요청을 처리할 수 있게 해주는 인기 있는 Node.js 웹 프레임워크입니다. Cheerio — HTML 및 XML 문서를 탐색..

[Angular] Tree Shaking: 애플리케이션 크기 최적화 [내부링크]

Angular는 단일 페이지 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. 그러나 애플리케이션이 복잡해지면 크기도 커지며 이로 인해 로드 시간이 느려지고 성능이 저하될 수 있습니다. Angular 애플리케이션의 크기를 최적화하는 한 가지 기술은 트리 쉐이킹(Tree Shaking)을 이용하는 것입니다. 이 글에서는 트리 쉐이킹이 무엇인지, 어떻게 작동하는지, Angular 프로젝트에서 구현하는 방법을 살펴보겠습니다. 트리 쉐이킹(Tree Shaking)이란 무엇입니까? 트리 쉐이킹은 애플리케이션에서 사용되지 않는 코드를 제거하는 프로세스입니다. 코드와 해당 종속성을 분석하고 사용되지 않는 부분을 식별한 다음 안전하게 제거할 수 있는 방식으로 작동합니다. 트리 쉐이킹은 모듈과 종속성이 많은 대규모 ..

[Angular] Zone.js 파일: 성능 향상을 위해 이해하고 사용하기 [내부링크]

Angular는 가장 널리 사용되는 JavaScript 프레임워크 중 하나이며 개발을 보다 효율적으로 만들어주는 많은 도구와 기능을 갖추고 있습니다. 그러한 도구 중 하나가 개발자가 애플리케이션의 변경 사항을 추적하고 성능을 향상시키는 데 도움이 되는 라이브러리인 Zone.js입니다. 이 글에서는 Zone.js가 무엇인지, 어떻게 작동하는지, 그리고 이를 사용하여 Angular 애플리케이션을 최적화할 수 있는 방법에 대해 자세히 살펴보겠습니다. Zone.js 란 무엇입니까? Zone.js는 개발자가 애플리케이션의 변경 사항을 추적하는 데 도움이 되는 JavaScript 라이브러리입니다. 타이머, 이벤트, XHR 요청과 같은 브라우저의 API에 연결하여 이를 수행합니다. Zone.js가 설치되면 추적하려는..

[.NET Core] RabbitMQ 사용 가이드 [내부링크]

RabbitMQ는 안정적이고 확장 가능한 메시징을 위해 최신 분산 시스템에서 널리 사용되는 오픈 소스 메시지 브로커 소프트웨어입니다. Erlang으로 작성되었으며 AMQP, MQTT, STOMP와 같은 여러 프로토콜을 지원합니다. RabbitMQ는 확장성이 뛰어나며 다양한 프로그래밍 언어 및 프레임워크와 통합될 수 있습니다. 이 글에서는 크로스 플랫폼 웹 애플리케이션 구축을 위한 인기 있고 강력한 프레임워크인 .NET Core와 함께 RabbitMQ를 사용하는 방법을 살펴보겠습니다. RabbitMQ의 기본 사항, 아키텍처 및 개념, .NET Core 애플리케이션과 통합하는 방법을 다룹니다. RabbitMQ란 무엇입니까? RabbitMQ는 다양한 소프트웨어 애플리케이션 간의 통신을 가능하게 하는 메시지 브..

OAuth와 JWT 차이점 및 사용 사례 [내부링크]

OAuth와 JWT는 웹 애플리케이션에서 일반적으로 사용되는 두 가지 보안 메커니즘입니다. 둘 다 인증 기능을 제공하지만 접근 방식과 사용 사례가 다릅니다. 이 글에서는 OAuth와 JWT의 차이점과 각각을 언제 사용하는지 살펴보겠습니다. Section 1: OAuth OAuth는 자격 증명을 노출하지 않고 타사 애플리케이션이 사용자의 리소스에 액세스 할 수 있도록 하는 개방형 인증 표준입니다. OAuth 흐름에는 리소스 소유자(사용자), 클라이언트(애플리케이션) 및 권한 부여 서버 이 세 가지가 관련됩니다. 클라이언트는 Authorization Server를 통해 리소스 소유자에게 Authorization(권한부여)을 요청하고, 승인이 나면 클라이언트는 리소스에 접근하기 위한 Access Token을 ..

.NET Core에서 Swagger를 사용하는 방법 [내부링크]

Swagger는 RESTful API를 문서화하고 테스트하는 데 널리 사용되는 오픈 소스 도구입니다. 개발자가 API를 테스트하고 실시간으로 문서를 생성할 수 있는 사용자 친화적인 인터페이스를 제공합니다. 이 글에서는 .NET Core와 함께 Swagger를 사용하여 API Endpoint를 문서화하고 테스트하는 방법을 살펴보겠습니다. Endpoint는 API가 RESTful API를 인터페이스를 통해 서버의 리소스에 액세스 할 수 있도록 해주는 URL입니다. 전제 조건 c️ 컴퓨터에 .NET Core 3.1 이상이 설치되어 있어야 함 RESTful API 아키텍처에 대한 기본 이해 Visual Studio Code 또는 Visual Studio 2019 이상 시작하기 .NET Core 웹 API 프..

웹 개발자를 위한 AWS 소개 [내부링크]

Amazon Web Services(AWS)는 웹 애플리케이션 구축, 배포 및 관리를 위한 다양한 서비스를 제공하는 클라우드 기반 플랫폼입니다. AWS는 컴퓨팅, 스토리지, 네트워킹 기능을 포함한 다양한 서비스를 제공합니다. 이 글에서는 AWS의 기본 사항과 AWS가 웹 개발자에게 어떤 이점을 줄 수 있는지 살펴보겠습니다. AWS 서비스 AWS는 웹 애플리케이션을 구축하는 데 사용할 수 있는 다양한 서비스를 제공합니다. 가장 인기 있는 서비스 중 일부는 다음과 같습니다. EC2(Elastic Compute Cloud): 클라우드에서 크기 조정 가능한 컴퓨팅 용량을 제공하는 서비스입니다. S3(Simple Storage Service): 안전하고 내구성이 뛰어나며 확장성이 뛰어난 객체 스토리지를 제공하..

효율적인 버전 제어를 위한 Git 명령 [내부링크]

Git은 코드베이스를 효율적으로 관리할 수 있는 강력한 버전 제어 시스템입니다. 이는 협업, 디버깅 및 깔끔한 코드베이스 유지에 필수적입니다. 이 글에서는 효율적인 버전 관리를 위해 알아야 할 몇 가지 필수 Git 명령을 다룰 것입니다. Git 시작하기 Git은 일반적으로 대부분의 시스템에 사전 설치되어 있지만, 그렇지 않은 경우 공식 웹사이트에서 다운로드할 수 있습니다. 설치가 완료되면 다음 명령을 사용하여 사용자 이름과 이메일을 구성해야 합니다. git config --global user.name "Your Name" git config --global user.email "[email protected]" Git이 올바르게 설치 및 구성되었는지 확인하려면 다음 명령을 실행하십시오. git..

소프트웨어 개발에서 테스트의 중요성 [내부링크]

테스트는 소프트웨어 개발의 필수적인 부분으로, 개발자가 오류를 파악하고 코드 품질을 보장할 수 있도록 해줍니다. 이 글에서는 테스트의 중요성을 살펴보고 다양한 테스트 유형의 예를 제공합니다. 테스트가 중요한 이유 테스트를 통해 코드가 의도한 대로 작동하고 이해관계자가 설정한 요구 사항을 충족하는지 확인합니다. 테스트하지 않으면 오류와 버그가 쉽게 빠져나가 사용자에게 문제를 일으키고 소프트웨어의 평판을 손상시킬 수 있습니다. 또한 테스트를 통해 개발 초기에 문제를 파악하고 장기적으로 시간과 리소스를 절약할 수 있습니다. 테스트 유형 단위 테스트 단위 테스트는 메서드나 함수와 같은 단일 코드 단위의 기능을 확인하는 자동화된 테스트입니다. 이는 일반적으로 개발자가 작성하며 개발 프로세스 초기에 오류를 포착할 ..

[HTTP] POST와 GET 차이점 및 사용 시기 [내부링크]

HTTP(Hypertext Transfer Protocol)는 인터넷을 통해 데이터를 전송하는 데 사용되는 프로토콜입니다. 다양한 HTTP 방법이 있지만 가장 일반적으로 사용되는 두 가지 방법은 HTTP POST와 HTTP GET입니다. 이러한 방법에는 서로 다른 목적이 있으므로 효과적인 웹 애플리케이션을 개발하려면 각 방법을 언제 사용해야 하는지 아는 것이 필수적입니다. 이 글에서는 HTTP POST와 HTTP GET의 차이점을 살펴보고 각 방법을 사용하는 경우의 예를 제공합니다. 또한 웹 애플리케이션에서 이러한 방법을 사용하는 몇 가지 모범 사례에 대해서도 알아보겠습니다. HTTP POST와 GET이란 무엇입니까? HTTP POST 및 HTTP GET은 웹 서버에 데이터를 보내는 데 사용되는 두 가지..

Angular 패키지 생성 및 NPM에 게시 [내부링크]

Angular 패키지를 만드는 것은 여러 프로젝트에서 코드를 재사용하는 효율적인 방법이므로 시간과 노력을 절약할 수 있습니다. 이 글에서는 Angular 패키지를 생성하고 이를 NPM 레지스트리에 게시하는 방법에 대해 설명합니다. 새 패키지를 만들고, 새 모듈을 만들고, 패키지에 코드를 추가하는 데 필요한 단계를 진행하겠습니다. 프로젝트 설정 첫 번째 단계는 프로젝트를 설정하는 것입니다. Angular CLI를 사용하여 새 프로젝트를 생성하겠습니다. 터미널을 열고 다음 명령을 실행하십시오. ng new my-package --create-application=false 그러면 애플리케이션 없이 새로운 Angular 프로젝트가 생성됩니다. 이제 다음 명령을 사용하여 프로젝트 폴더로 이동할 수 있습니다. c..

사용자 정의 스크립트로 Angular 워크플로우(Workflow) 자동화 [내부링크]

Angular는 확장 가능한 웹 애플리케이션을 구축하기 위한 강력한 프레임워크입니다. 그러나 이를 사용하는 것은 때로는 시간이 많이 걸리고 지루할 수 있습니다. 특히 반복적인 작업의 경우 더욱 그렇습니다. 다행히 약간의 자동화를 통해 작업 흐름을 간소화하고 일반적인 작업에 소요되는 시간을 절약할 수 있습니다. 이 글에서는 사용자 정의 스크립트(Custom Scripts)를 사용하여 Angular 워크플로우를 자동화하는 방법을 살펴보겠습니다. 몇 가지 일반적인 사용 사례를 다루고 시작하는 데 도움이 되는 몇 가지 코드 예제를 알아보겠습니다. 환경 설정 사용자 정의 스크립트를 시작하기 전에 환경을 설정해야 합니다. 먼저 시스템에 Node.js와 NPM이 설치되어 있는지 확인하세요. 공식 웹사이트에서 최신 버..

[Angular] Http Client 사용 방법 [내부링크]

Angular의 HttpClient 모듈은 HTTP 요청을 만들고 응답을 처리하는 간단한 방법을 제공합니다. @angular/common/http 패키지의 일부이며 XMLHttpRequest API 위에 구축되었습니다. 이 글에서는 HttpClient 모듈의 다양한 기능을 자세히 살펴보고 이를 사용하여 Angular에서 HTTP 요청을 만드는 방법을 알아봅니다. Getting started Angular 애플리케이션에서 HttpClient 모듈을 사용하려면 루트 모듈(일반적으로 app.module.ts)에서 HttpClientModule을 가져와야 합니다. import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angula..

[JavaScript] Array Methods [내부링크]

JavaScript는 배열 작업을 위한 많은 강력한 도구를 제공하는 다용도 언어입니다. 가장 일반적으로 사용되는 도구 중 하나는 배열을 조작하고 변환하기 위한 다양한 메서드를 제공하는 Array 개체입니다. 이 글에서는 JavaScript에서 가장 중요하고 유용한 배열 메서드 중 일부를 자세히 살펴보겠습니다. forEach() forEach() 메서드는 배열을 반복하고 각 요소에 대해 콜백 함수를 실행합니다. 예는 다음과 같습니다. const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) => { console.log(number); }); 그러면 다음이 출력됩니다. 1 2 3 4 5 map() map() 메서드는 배열의 각 요소에 콜백 함수를 적용하여 새 ..

[Angular] Error Handling [내부링크]

Error Handling는 모든 애플리케이션의 필수적인 부분이며 Angular도 예외는 아닙니다. Angular 프레임워크는 다양한 시나리오에서 오류를 처리할 수 있는 강력한 도구 세트를 제공합니다. 이번 글에서는 Angular의 다양한 오류 유형과 이를 효과적으로 처리하는 방법을 살펴보겠습니다. Types of Errors in Angular Angular 애플리케이션에서 발생할 수 있는 오류에는 주로 두 가지 유형이 있습니다. 컴파일 시간 오류: 이러한 오류는 Angular 애플리케이션이 빌드되는 컴파일 단계에서 발생합니다. 컴파일 시간 오류는 일반적으로 코드의 구문 또는 논리적 오류를 나타내며 애플리케이션이 실행되지 못하게 합니다. 런타임 오류: 이러한 오류는 Angular 애플리케이션을 실행하는..

Node.js 와 TypeScript 콜백(callback) 지옥 피하는 방법 [내부링크]

Node.js는 Chrome의 V8 JavaScript 엔진을 기반으로 구축된 이벤트 중심의 non-blocking I/O 플랫폼입니다. 웹 서버를 포함하여 확장 가능한 네트워크 애플리케이션을 구축하는 데 널리 사용됩니다. 이러한 애플리케이션을 구축할 때 콜백 지옥(callback hell) 문제가 발생할 수 있습니다. 이는 여러 개의 중첩된 콜백이 있어 코드를 읽고 유지 관리하기 어렵게 만드는 문제를 의미합니다. 이 글에서는 Express 웹 프레임워크와 TypeScript를 사용하여 Node.js 애플리케이션을 구축할 때 콜백 지옥을 피하는 방법에 대해 설명합니다. Promises Promises 은 보다 읽기 쉽고 관리하기 쉬운 방식으로 비동기 작업을 처리하는 방법입니다. 이는 아직 사용할 수 없지..

C# and .NET Core 멀티스레딩(multithreading) [내부링크]

멀티스레딩은 프로그램을 여러 스레드로 나누는 방식을 의미하며, 각 스레드는 독립적으로 동시에 실행될 수 있습니다. 이로 인해 특히 I/O 또는 네트워크 통신과 같은 작업의 경우 성능과 응답성이 향상될 수 있습니다. C# 및 .NET Core에서는 System.Threading 네임스페이스를 사용하여 스레드를 만들고 관리할 수 있습니다. 다음은 Thread 클래스를 사용하여 C# 에서 새 스레드를 만드는 예입니다. using System; using System.Threading; class Program { static void Main(string[] args) { Thread thread = new Thread(new ThreadStart(Worker)); thread.Start(); Console...

[Angular] 재사용 가능한 컴포넌트(Component) [내부링크]

웹 애플리케이션 구축에 Angular를 사용하는 주요 이점 중 하나는 재사용 가능한 컴포넌트를 생성할 수 있다는 것입니다. 이 글에서는 컴포넌트 구조, 입력 및 출력 속성, 콘텐츠 프로젝션을 포함하여 Angular를 사용하여 재사용 가능한 컴포넌트를 구축하기 위한 사례를 살펴보겠습니다. Component Structure Angular에서 재사용 가능한 컴포넌트를 만들려면 다양한 상황에서 쉽게 사용할 수 있는 방식으로 컴포넌트를 구성하는 것이 중요합니다. 컴포넌트에는 입력 및 출력 속성이 잘 정의된 명확한 API가 있어야 하며 다양한 사용 사례를 처리할 수 있을 만큼 유연해야 합니다. 다음은 항목 목록을 표시하는 재사용 가능한 간단한 컴포넌트의 예입니다. import { Component, Input }..

[Angular] 애니메이션(Animation) 설명 [내부링크]

Angular는 동적 웹 애플리케이션을 생성하기 위한 다양한 도구와 기능을 제공하는 강력한 JavaScript 프레임워크입니다. Angular의 주요 기능 중 하나는 애니메이션을 만드는 기능입니다. Angular 애니메이션은 움직임, 전환 및 기타 시각 효과를 추가하여 웹 애플리케이션에 생기를 불어넣는 방법을 제공합니다. 이 글에서는 interfaces, functions, classes, type aliases 및 lifecycle hooks 등을 포함하여 Angular 애니메이션의 다양한 측면을 다룰 것입니다. Animations Module Angular 애니메이션 모듈은 Angular 애플리케이션에서 애니메이션을 정의하고 관리하는 기본 모듈입니다. 복잡하고 아름다운 애니메이션을 만드는 데 사용할 ..

[Angular] 성능 최적화(Performance optimization) [내부링크]

Angular는 개발자가 고성능 웹 애플리케이션을 구축하는 데 도움을 줄 수 있는 강력한 프런트 엔드 프레임워크입니다. 그러나 애플리케이션이 복잡해짐에 따라 원하는 수준의 성능을 유지하는 것이 더욱 어려워질 수 있습니다. 이 글에서는 Angular 성능을 최적화하는 몇 가지 기술을 살펴보겠습니다. 지연 로딩 모듈(Lazy Loading Modules) 애플리케이션 성능이 저하되는 주요 이유 중 하나는 애플리케이션을 로드하는 데 걸리는 시간입니다. 이 문제를 해결하는 한 가지 방법은 지연 로딩을 사용하는 것입니다. 지연 로딩은 특정 경로에 필요한 모듈만 로드하는 기술입니다. 즉, 초기 로드 시간이 줄어들고 애플리케이션의 응답 속도가 빨라집니다. 다음은 Angular 애플리케이션에서 지연 로딩을 구현하는 방..

[C#] 콘솔 프로그램 백그라운드(창 없이) 실행 방법 [내부링크]

일반적으로 C#에서 외부 프로그램(.exe 등)을 실행시킬 때 Process를 많이 사용합니다. 콘솔(Console; 도스 커맨드 창)로 실행되는 프로그램을 실행하는 경우 콘솔 창이 화면에 나타나서 UI 상으로 불편한 경우가 있습니다. 이 글에서는 Process로 콘솔 창을 띄우는 외부 프로그램을 실행 시 콘솔 창을 백그라운드로 실행해 보이지 않도록 하는 방법에 대해 살펴보겠습니다. 코드는 아래와 같습니다. using System; using System.Diagnostics; namespace Test.Utils { public class Program { public static void Main(string[] args) { string arg = "..."; Process process = new..

자동가입 방지문자(SimpleCaptcha) 사용 방법 [내부링크]

로그인 또는 회원가입 시 자동 등록 방지가 필요할 경우가 있다. 이를 구현하기 위해 여러 가지가 있는데 CATPCHA를 사용하는 방법을 사용하였다. CAPTCHA는 HIP 기술의 일종으로, 어떠한 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법이다. 사람은 구별할 수 있지만 컴퓨터는 구별하기 힘들게 의도적으로 비틀거나 덧칠한 그림을 주고 그 그림에 쓰여 있는 내용을 물어보는 방법이 자주 사용된다. 위키백과 다운로드 CATPCHA를 사용하기 위해선 https://sourceforge.net/projects/simplecaptcha/ 사이트로 이동해서 jar 파일을 다운로드 받는다. jar 파일 추가 사용하는 툴이 이클립스 일 경우 jar 파일을 프로젝트에 포함시켜야 한다. [Ecl..

[Eclipse] 프로젝트에 jar 파일 추가하는 방법 [내부링크]

이클립스에서 라이브러리(jar 파일)를 추가하는 방법입니다. 일반적인 자바 프로젝트와 웹 프로젝트일 경우 두 가지로 방법으로 나눠집니다. 자바 프로젝트 1. 프로젝트 우클릭 > properties 2. Java Build Path > Libraries > Add External JARs 3. 폴더에서 jar 파일 선택 4. 라이브러리 추가 후 [Apply and Close] 클릭 웹 프로젝트(Maven) 1. 아래와 같이 src/main/web/WEB-INF/lib 폴더를 생성하고 lib 폴더에 라이브러리 파일을 넣어준다. 2. 프로젝트 우클릭 > properties 3. Java Build Path > Libraries > Add Library 4. Web App Libraries 선택 후 [Next]..

[Angular] DI 수명(lifetime) [내부링크]

Transient Transient 서비스는 주입될 때마다 생성됩니다. 즉, 컴포넌트(component)가 서비스를 주입할 때마다 서비스의 새 인스턴스가 생성됩니다. Transient 서비스의 예는 다음과 같습니다. import { Injectable } from '@angular/core'; @Injectable() export class TransientService { private data: number; constructor() { this.data = Math.random(); } getData() { return this.data; } } 컴포넌트가 TransientService를 주입하면 매번 서비스의 새 인스턴스가 생성됩니다. Scoped Scoped 서비스는 Angular 모듈당 한 번..

[C#] FileSystemWatcher 파일 감시 모니터링 [내부링크]

FileSystemWatcher는 특정 폴더 경로(디렉터리)의 모든 파일이 생성되거나 변경되면 함수 호출을 해줍니다. 사용 방법 사용 방법 순서입니다. FileSystemWatcher 생성자 호출 감시할 폴더 설정(디렉토리) 감시할 항목들 설정 (파일 생성, 크기, 이름, 마지막 접근 변경 등) 감시할 이벤트 설정 (생성, 변경, 삭제 등) FIleSystemWatcher 감시 모니터링 활성화 감시할 폴더 내부 변경 시 event 호출 구현 using System; using System.IO; namespace Test.Utils { public class FileWatcher { public void initWatcher() { string filePath = $"D:\\files\\"; // 1. ..

[Angular] OpenLayers로 지도 생성 [내부링크]

OpenLayers는 개인 또는 상업 프로젝트에 지도를 추가해야 하는 경우 광범위한 사용 사례에 적합한 오픈 소스 라이브러리입니다. 아래 단계를 따라 하면 몇 분 안에 빠르게 실행할 수 있습니다. Angular 프로젝트를 한 번도 해본 적이 없는 경우 새 프로젝트를 만드는 방법을 보여 드리겠습니다. 하지만 해당 부분을 건너뛰고 OpenLayers를 기존 프로젝트에 추가할 수 있습니다. 새 Angular 프로젝트 만들기 이 시점에서 첫 번째 Angular 프로젝트를 설정하는 방법을 보여 드리겠습니다. 모든 컴퓨터 운영 체제를 사용할 수 있으며 Angular는 macOS, Linux 및 Windows에서 작동합니다. 이것은 지금 사용하는 설정입니다. Angular CLI: 16.1.0 Node: 18.15...

[Angular] cross-fetch 사용 방법 [내부링크]

Angular 개발 시 api 통신을 하기 위한 Fetch API에 대해 알아보겠습니다. Fetch API 란 Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다. 설치 Fetch API를 사용하기 위해 cross-fetch 패키지를 설치한다. # npm 을 사용하여 설치하는 경우 npm install --save cross-fetch # yarn 을 사용하여 설치하는 경우 yarn add cross-fetch ApiService 구축 api는 전역에서 사용하는 것이기 때문에 service로 만..

[Angular] HttpClient 사용 방법 [내부링크]

Angular 개발 시 프로젝트 초기에 api 통신에 대해 설정 파일을 생성하고 설정해 두면 작업하기가 편합니다. Angluar는 @angular/common 안에 존재하는 http 패키지를 사용하면 됩니다. import http 작업을 하기 위해 src/app.module.ts 파일에 HttpClientModule을 import 해야 합니다. // src/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule..

Flutter 업그레이드 방법 [내부링크]

Flutter 버전 오류 Flutter 프로젝트를 진행하면서 http 패키지를 설치하려고 flutter pub get 명령어를 실행했을 때 다음과 같은 오류가 발생했습니다. [flutter\example] flutter pub get Resolving dependencies... The current Dart SDK version is 3.0.0-431.0.dev Because example depends on http >=1.0.0 which requires SDK version ^3.0.0, version solving failed. exit code 1 http 패키지의 1.0.0 버전을 설치하는데 현재 Dart SDK 버전이 >=3.0.0 =3.0.0 collection 1.17.2 (was 1...

[NestJS] End-to-end 테스트 [내부링크]

End-to-end 테스트 개별 모듈과 클래스에 중점을 두는 Unit 테스트와 달리 end-to-end(e2e) 테스트는 보다 종합적인 수준에서 클래스와 모듈의 상호 작용을 다룹니다. 애플리케이션이 성장함에 따라 각 API endpoint의 E2E 동작을 수동으로 테스트하기가 어려워집니다. 자동화된 E2E 테스트는 시스템의 전반적인 동작이 정확하고 프로젝트 요구 사항을 충족하는지 확인하는 데 도움이 됩니다. Nest 를 사용하면 SuperTest 라이브러리를 사용하여 HTTP request 를 쉽게 시뮬레이션할 수 있습니다. SuperTest는 superagent를 기반으로 하는 HTTP 검증 라이브러리입니다. request() SuperTest 의 request(app.getHttpServer()) 함..

[NestJS] Jest 사용 방법 [내부링크]

NestJS에서 Jest를 사용하는 방법에 대해 간략하게 알아보겠습니다. Jest Jest는 단순함에 초점을 맞춘 유쾌한 JavaScript 테스팅 프레임워크입니다. Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동합니다. 시작하기 describe() describe() 함수를 사용하면 작은 단위의 테스트 코드를 그룹화할 수 있습니다. 작성하는 테스트 코드가 특정 component에 속하는 테스트 코드라면 다음과 같이 describe() 함수를 사용해서 해당 테스트 코드들을 그룹화하는 것이 좋습니다. 테스트 결과를 확인할 때 가시적으로 보기 편하게 테스트 케이스들을 확인할 수 있습니다. describe('StudentService', () =..

[NestJS] Mapped types의 Partial 사용 방법 [내부링크]

Mapped types CRUD(Create/Read/Update/Delete)와 같은 기능을 구축할 때 기본 엔터티 클래스를 기능에 맞게 변형하는 것이 필요한 경우가 많습니다. Nest는 이 작업을 보다 편리하게 만들기 위해 클래스 변환을 수행하는 여러 유틸리티 기능을 제공합니다. Partial input validation types(DTO라고도 함)을 빌드할 때 동일한 클래스에 대한 create 및 update 클래스로 변형하는 것이 필요한 경우가 많습니다. 예를 들어, create에는 모든 필드가 필요할 수 있지만 update는 모든 필드를 선택 사항으로 만들 수 있습니다. Nest는 이 작업을 더 쉽게 만들고 보일러플레이트(Boilerplate) 코드를 최소화하기 위해 PartialType() ..

[NestJS] ValidationPipe 사용 방법 [내부링크]

Validation 웹 애플리케이션으로 전송되는 데이터의 검증을 도와줍니다. 들어오는 요청을 자동으로 검증하기 위해 Nest는 즉시 사용할 수 있는 여러 파이프를 제공합니다. ValidationPipe ValidationPipe는 강력한 클래스 유효성 검사기 패키지와 선언적 유효성 검사 데코레이터를 사용합니다. ValidationPipe는 들어오는 모든 클라이언트 페이로드에 대해 유효성 검사 규칙을 적용하는 편리한 접근 방식을 제공합니다. ValidationPipe 사용을 위한 class-validator, class-transformer 패키지를 설치합니다. npm i --save class-validator class-transformer 사용 예시 ValidationPipe 를 사용하기 위해 mai..

[NestJS] Param decorators [내부링크]

Param decorators Nest는 HTTP 라우트 핸들러와 함께 사용할 수 있는 유용한 매개변수 데코레이터 세트를 제공합니다. 다음은 제공된 데코레이터와 이들이 나타내는 일반 Express(또는 Fastify) 객체의 목록과 사용 예시입니다. @Param Param은 Path Variable을 받아올 때 사용합니다. (예, /users/123) // NestJS @Param(param?: string) // ExpressJS req.params / req.params[param] import { Controller, Get, Param } from '@nestjs/common'; @Controller('users') export class UserController { @Get('/:id') ge..

[NestJS] Controller, Provider, Module 이란? [내부링크]

NestJS에서 사용하는 Controller, Provider, Module에 대한 간략하게 알아보겠습니다. Controllers 컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답을 반환하는 역할을 합니다. express의 라우터 같은 역할을 합니다. import { Controller, Get } from '@nestjs/common'; import { AppService } from './app.service'; @Controller() export class AppController { constructor(private readonly appService: AppService) {} @Get() getHello(): string { return this.appService.getHello();..

[NestJS] 설치 및 프로젝트 생성 [내부링크]

설치 Nest CLI를 사용하면 새 프로젝트를 설정하는 것이 매우 간단합니다. npm이 설치된 상태에서 터미널에서 다음 명령을 사용하여 Nest CLI를 설치합니다. npm i -g @nestjs/cli 프로젝트 생성 nest new 명령어로 새 Nest 프로젝트를 만들 수 있습니다. nest new project-name nest new로 프로젝트 생성이 안된다면 npx nest new로 진행합니다. 예시로 프로젝트를 생성해 보겠습니다. D:\project\Study\nestjs> nest new test-nestjs We will scaffold your app in a few seconds.. ? Which package manager would you ️ to use? (Use arrow k..

[Git] detached HEAD 문제 해결 방법 [내부링크]

git을 사용할 때 add와 commit 까진 실행이 잘 되는데 아래와 같이 detached HEAD 문제로 push 가 안 될 때 해결 방법을 정리하였습니다. D:\project\Study\react> git push fatal: You are not currently on a branch. To push the history leading to the current (detached HEAD) state now, use git push origin HEAD: Detached Head 란, 말 그대로 head가 (branch로부터) 떨어져 있는 상태를 뜻한다. 즉, branch 를 통해서가 아니라 직접 다이렉트로 commit을 참조하고 있는 상태를 뜻한다. git branch 명령어를 사용하여 살펴보니..

Chocolatey를 이용한 Flutter 설치 방법 [내부링크]

윈도우 환경에서 Chocolatey를 이용해서 Flutter를 설치하고 안드로이드 기기와 연결하는 방법에 대해 알아보겠습니다. Chocolatey 설치 이전 글 Chocolatey 설치를 참고해서 Chocolatey를 먼저 설치를 합니다. Flutter 설치 관리자 권한으로 PowerShell을 열고 다음 명령어를 실행하여 설치를 합니다. choco install flutter 설치가 완료되면 flutter 명령어를 실행하였을 때 다음과 같이 메시지가 나옵니다. C:\Windows\system32> flutter Common commands: flutter create Create a new Flutter project in the specified directory. flutter run [option..

[Dart] 클래스(Class) 사용 방법 [내부링크]

Dart에서 클래스(Class) 사용 방법에 대해 알아보겠습니다. Class 클래스 안에서 property를 선언할 때는 타입을 사용해서 정의합니다. class Player { final String name = 'eden'; final int age = 3; void sayName() { print("Hi my name is $name"); } } void main() { // new 를 꼭 붙이지 않아도 됩니다. var player = Player(); player.sayName(); } 클래스 메서드 안에서는 this 를 붙이지 않는 것을 Dart에서는 권장하나, 어쩔 수 없이 같은 변수명이 있을 때는 this를 붙여서 사용해야 합니다. Constructor 생성자(constructor) 함수는 클..

[Dart] 함수(Function) 사용 방법 [내부링크]

Dart에서 함수(Function) 사용 방법에 대해 알아보겠습니다. Functions Dart는 진정한 객체 지향 언어이므로 함수도 객체이며 타입이 Function입니다. 이는 함수를 변수에 할당하거나 다른 함수에 인수로 전달할 수 있음을 의미합니다. // 하나의 표현식만 포함하는 함수의 경우 아래와 같이 단축 구문을 사용할 수 있습니다. String sayHello(String name) => "Hello ${name} nice to meet you!"; num plus(num a, num b) => a + b; void main() { print(sayHello("eden")); // Hello eden nice to meet you! } Positional Paramaters 함수을 호출할 때 필..

[Dart] Data Types [내부링크]

Dart에서 데이터 타입 사용 방법에 대해 알아보겠습니다. 기본 데이터 타입 Dart에는 대표적으로 String, bool, int, double, num 타입이 있습니다. 중요한 점은 이 모든 게 객체(object)라는 것입니다. Dart가 진정한 객체 지향 언어로 불리는 이유입니다. void main() { String name = "eden"; bool isPlay = true; int age = 3; double money = 59.99; num x = 12; num y = 1.2; } String Interpoldation String Interpoldation은 텍스트에 변수를 추가하는 방법입니다. 단순히 변수의 값을 넣고 싶다면 $달러 기호 뒤에 사용할 변수를 적어주면 됩니다. 변수의 값을 ..

[Dart] Null Safety [내부링크]

Null Safety는 개발자가 null 값을 참조할 수 없게 하는 것입니다. 다음 코드를 봅시다. bool isEmpty(String string) => string.length == 0; main(){ // [오류] isEmpty(null); } 다음과 같은 코드는 어떻게 실행될까요? 정답은 NoSuchMethodError를 실행합니다. 왜 이렇게 실행될까요? 바로 String을 보내야 할 곳에 null을 보냈기 때문입니다. null 에는 length 라는 속성이 없기 때문이기도 합니다. 이와 같은 에러는 컴파일러에서 잡을 수 있는 에러가 아닙니다. 이런 상황이 발생하지 않도록 null 를 삭제하기에는 null 값은 유용합니다. 그럼 어떻게 null 값을 참조하는 것을 dart는 어떻게 보호할까요?..

[Dart] 변수(Variable) 사용 방법 [내부링크]

Dart에서 변수 사용 방법에 대해 알아보겠습니다. 변수를 만드는 2가지 방법 dart에서는 변수를 var 키워드 또는 명시적으로 변수의 타입을 지정해서 사용합니다. 다른 타입의 변수는 서로 대입할 수 없습니다. // 방법 1 void main() { var name = "car"; name = "bus"; // [오류] name = 1; } // 방법 2 void main() { String name = "car"; name = "bus"; } var를 사용하는 게 dart 스타일가이드의 권장 방식입니다. 함수나 메소드 내부에 지역변수를 선언할 때는 var를 사용하고 class에서 변수나 property를 선언할 때는 타입을 지정해 줍니다. Dynamic 타입 여러 가지 타입을 가질 수 있는 변수에..

[Dart] 시작하기 [내부링크]

Dart 란 Dart는 모든 플랫폼에서 빠른 앱을 위한 클라이언트 최적화 언어입니다. UI 최적화용 사용자 인터페이스 생성 요구에 특화된 프로그래밍 언어로 개발합니다. 생산적인 개발 핫 리로드를 사용하여 실행 중인 앱에서 즉시 결과 확인 가능합니다. 모든 플랫폼에서 빠름 모바일, 데스크톱 및 백엔드용 ARM 및 x64 머신 코드로 컴파일합니다. 또는 웹용 JavaScript로 컴파일합니다. Why Dart Dart 의 컴파일러 기술을 사용하면 다양한 방식으로 코드를 실행할 수 있습니다. 기본 플랫폼(Dart Native): 모바일 및 데스크톱 장치를 대상으로 하는 앱의 경우 Dart 에는 JIT(Just-In-Time) 컴파일 기능이 있는 Dart VM과 기계 코드 생성을 위한 AOT(Ahead-of-T..

[TypeScript] JSDoc Reference 사용 방법 [내부링크]

JavaScript 파일에서 TypeScript처럼 코드를 보호받을 수 있도록 하는 방법에 대해 알아보겠습니다. @ts-check JavaScript 파일에서 오류를 활성화하려면 // @ts-check를 .js 파일의 첫 번째 줄에 추가하여 TypeScript가 오류를 발생시키도록 합니다. TypeScript는 여러 오류를 제공할 수 있습니다. 아래 코드는 TypeScript와 같이 함수 파라미터에 정의가 되어 있지 않아 오류가 발생합니다. // @ts-check // [오류] export function init( config) { return true; } // [오류] export function exit( code) { return code + 1; } 이러한 오류를 무시하고 싶다면 // @t..

[TypeScript] 설치 및 설정 방법 [내부링크]

NextJS, Create React App(CRA)를 사용하지 않고 초기 프로젝트에 TypeScript를 설치하고 설정하는 방법에 대해 알아보겠습니다. 프로젝트 시작 프로젝트 디렉터리를 생성합니다. $ mkdir typescripttest $ cd typescripttest 다음 명령어를 실행하여 package.json을 초기화합니다. $ npm init -y TypeScript 설치 다음 명령어를 실행하여 TypeScript를 설치합니다. $ npm i -D typescript tsconfig.json 설정 TypeScript 설정은 tsconfig.json 파일에서 합니다. 디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 TypeScript 프로젝트의 루트임을 나타냅니다. tsco..

[TypeScript] 인터페이스(Interface) 사용 방법 [내부링크]

TypeScript에서 인터페이스(Interface)를 생성하고 사용하는 방법에 대해 알아보겠습니다. Interfaces 객체의 모양을 특정해 주기 위해 사용합니다. 여기서는 firstName 및 lastName 필드가 있는 객체를 설명하는 인터페이스를 사용합니다. interface Person { firstName: string; lastName: string; } 다른 인터페이스를 상속 받아 사용할 수 있습니다. interface User { name: string; } interface Player extends User {} const eden: Player = { name: 'eden', }; 인터페이스 이름이 같도록 3번 각각 만들어도 타입스크립트는 알아서 하나로 합쳐줍니다. Type과 차이점..

[TypeScript] 클래스(Class) 사용 방법 [내부링크]

TypeScript에서 클래스(Class)를 생성하고 사용하는 방법에 대해 알아보겠습니다. 클래스(Class) 가장 기본적인 클래스입니다. class Player {} 필드를 선언해서 사용 가능합니다. class Player { firstname: string; lastname: string; } const eden = new Player(); eden.firstname = 'ko'; eden.lastname = 'eden'; 생성자에 매개변수를 추가해서 선언할 수 있습니다. class Player { constructor( private firstname: string, private lastname: string, public nickname: string ) {} } const eden = new ..

[WPF] 문자열(string)의 가로 세로 길이 계산 [내부링크]

WPF에서 글꼴 크기(FontSize)와 폰트(FontFamily)를 통해 문자열의 크기를 계산하는 방법에 대해 알아보겠습니다. FormattedText를 사용하여 텍스트의 서식을 지정한 후 크기를 계산할 수 있습니다. 소스코드 TextBlock 컨트롤을 사용할 경우 아래와 같이 작성하여 문자열의 크기를 구합니다. /// /// 글자 가로 세로 길이 계산 /// /// /// private Size MeasureString(TextBlock textBlock) { FormattedText formattedText = new FormattedText ( textBlock.Text, CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, new Typeface ..

[TypeScript] 다형성(Polymorphism) [내부링크]

다형성(Polymorphism) 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미합니다. poly: many, serveral, much, multi 등과 같은 뜻 morphos: form, structure 등과 같은 뜻 polymorphos = poly + morphos: 여러 다른 구조 예시 type SuperPrint = { (arr: T[]): T; }; const superPrint: SuperPrint = (arr) => { return arr[0]; }; const a = superPrint([1, 2, 3]); const b = superPrint([true, false, true]); const c = superPrint(['a', 'b']); const d = su..

[TypeScript] Function Overloads [내부링크]

Function Overloads 동일한 이름에 매개 변수와 매개 변수 타입 또는 리턴 타입이 다른 여러 버전의 함수를 만드는 것을 말합니다. TypeScript에서는 오버로드 signatures을 작성하여 "다양한 방식으로 호출할 수 있는 함수"를 지정할 수 있습니다. 사용 예제 매개변수의 데이터 타입이 다른 경우 매개변수의 데이터 타입이 다른 경우 예외 처리를 합니다. type Add = { (a: number, b: number): number; (a: number, b: string): number; }; const add: Add = (a, b) => { if (typeof b === 'string') return a; return a + b; }; add(1, '2'); add(1, 2); 매..

[WPF] Grid를 Bitmap 이미지로 변환 후 저장하기 [내부링크]

WPF의 Grid를 사용하여 사용자의 입력을 받는 문서를 작성하거나 여러 이미지를 가시화할 시, 이를 이미지로 저장하는 기능이 필요할 경우가 있습니다. 따라서 Grid 컨트롤을 하위 요소들과 함께 Bitmap으로 변환하고 이미지를 저장하는 방법에 대해 알아보겠습니다. 소스코드 먼저 Grid 컨트롤 내용들을 Bitmap으로 변환합니다. /// /// Grid를 Bitmap이미지로 변환 /// /// /// public static RenderTargetBitmap GetBitmapFromControl(FrameworkElement element) { Size size = new Size(element.ActualWidth, element.ActualHeight); if (size.IsEmpty) retur..

[TypeScript] Types [내부링크]

타입스크립트란? TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor 와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다. TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다. TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다. Types(기본) 배열: 자료형[] 숫자: number 문자열: string 논리: boolean type Player = { name: string; age: number; weapons: string[];..

[Angular] FormGroup 관련 에러 [내부링크]

Angular에서 FormGroup 사용 시 아래와 같이 에러가 발생할 경우 해결 방법에 대해 알아보겠습니다. Error ERROR Error: NG01350: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate th..

[Next.js] Dynamic Routes 사용 방법 [내부링크]

Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다. Dynamic Routes Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다. pages/movies 경로에 [id].js 파일을 생성하면 /movies/1, /movies/abc 등과 같은 경로로 접속할 수 있습니다. 다음 예제처럼 useRouter()의 query를 통해 /movies 다음의 하위 경로를 확인할 수 있습니다. // pages/movies/[id].js import { useRouter } from 'next/router'; export default function Detail() { const router = useRouter(); const {..

엘라스틱 스택 개발부터 운영까지 [내부링크]

책 정보 책 소개 데이터를 처리하는 데 서로 잘 맞지도 않는 오픈소스 기술들을 굳이 동원해야 할까? 제각각인 오픈소스들을 통합하고 운영하느라 지친 개발자와 운영자들을 위한 솔루션! 이제 엘라스틱 스택 기술 하나면 OK! 어느덧 엘라스틱 스택은 검색 엔진을 넘어서 데이터 처리 시스템의 최강자로 자리 잡았다. 이 책에서는 빠르게 변화하는 세상에서 엘라스틱 스택을 지렛대로 삼아 기업의 생존 능력을 극대화하는 방법을 체계적으로 정리한다. 엔터프라이즈 빅데이터 파이프라인을 만들어 기업의 데이터를 처리하고 싶다면? 기업 내에 검색 엔진을 구축해서 빠르게 자료를 검색하고 싶다면? 방대한 데이터를 잘 가공해서 저장한 후에 멋진 시각화로 인사이트를 얻고 싶다면? 여러 서버에서 데이터들을 가져와 하나로 통합한 다음에 추이..

[Next.js] Redirect and Rewrite [내부링크]

Next.js에서 Redirect와 Rewrite 설정 방법에 대해 알아보겠습니다. Redirect와 Rewrite 설정은 next.config.js 파일에서 설정하게 됩니다. next.config.js Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있습니다. next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈입니다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, }; module.exports = nextConfig; Next.js 서버 및 빌드 단계에서 사용되며 브라우저 ..

[Next.js] Head 사용 방법 [내부링크]

Next.js에서 Head 사용 방법에 대해 알아보겠습니다. Title 설정 Next.js에는 페이지 헤더의 제목을 변경하고 meta를 추가할 수 있는 내장 컴포넌트를 가지고 있습니다. import Head from 'next/head'; export default function Home() { return ( Hello ); } 태그 중복 방지 head에 태그가 중복되는 것을 방지하려면 다음 예제와 같이 태그가 한 번만 렌더링 되도록 하는 key 속성을 사용할 수 있습니다. import Head from 'next/head'; export default function Home() { return ( Hello ); } 이 경우 두 번째 meta property="og:title"만 렌더링 됩니다. ..

[Next.js] Styles 사용 방법 [내부링크]

Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다. CSS-in-JS 가장 간단한 방법은 인라인 스타일입니다. export default function Home() { return ( Hello ); } CSS Modules Next.js는 [name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다. Common.module.css 파일을 생성하고 스타일을 아래와 같이 작성합니다. 중요한 것은 .module.css 패턴을 사용하는 것입니다. .nav { display: flex; justify-content: space-between; background-color: red; } .text { color: blue; } 생성된 module을 import 해서 ..

[Next.js] Routing 사용 방법 [내부링크]

Next.js에서 Rouing 하는 방법에 대해 알아보겠습니다. a 태그 사용 태그를 사용해서 페이지 이동을 할 수 있습니다. 하지만 페이지 이동 시 전체 페이지 새고로침이 되는 문제가 발생했습니다. export default function NavBar() { return ( Home About Us ); } Link 사용 single-page app 환경의 페이지 전환을 하려면 Link 컴포넌트를 사용해야 합니다. import Link from 'next/link'; export default function NavBar() { return ( Home About Us ); } useRouter() 컴포넌트에서 router 객체 내부에 접근하려면 userRouter() hook 을 사용할 수 있습니다..

[Next.js] 프로젝트 생성 및 시작 방법 [내부링크]

Next.js를 사용하는 프로젝트 생성 하는 방법에 대해 알아보겠습니다. 시스템 요구 사항 Node.js 14.6.0 이상 MacOS, Windows(WSL 포함) 및 Linux가 지원됩니다. 프로젝트 생성 리액트 프로젝트를 생성하는 방법과 비슷하게 create-next-app 명령어를 사용합니다. @latest를 추가하면 최신 버전으로 프로젝트를 생성합니다. npx create-next-app@latest # or yarn create next-app TypeScript 프로젝트로 시작하려면 --typescript 옵션을 추가합니다. npx create-next-app@latest --typescript # or yarn create next-app --typescript 위의 방법으로 프로젝트를 생성..

라이브러리와 프레임워크 차이점 [내부링크]

라이브러리와 프레임워크의 주요 차이점에 대해 알아보겠습니다. 라이브러리 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내립니다. 우리 프로젝트에 가져와서 쓰는 방식 예) React: 렌더링 할 때 ReactDOM.render()를 불러와서 사용합니다. 프레임워크 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따릅니다. 정해진 틀 안에서 커스터마이징 방식 예) NextJS: 정해진 규칙에 따라 코드를 작성하면 렌더링됩니다. 차이점 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)입니다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있습니다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출합니다. 참고 https://www...

WPF에서 Windows Forms(WinForm) Control 사용하기 [내부링크]

WPF에서 Windows Forms(WinForm) Control 사용하는 방법에 대해 알아보겠습니다. 참조 추가 프로젝트에 다음 어셈블리에 대한 참조를 추가합니다. WindowsFormsIntegration System.Windows.Forms XAML에 추가 WinForm 컨트롤을 사용하려는 XAML 파일을 열고 아래 네임스페이스 매핑을 추가합니다. wf 네임스페이스 매핑은 Windows Forms 컨트롤이 포함된 어셈블리에 대한 참조를 설정합니다. xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" ... 사용 WindowsFormsHost 컨트롤을 사용하고 자식으로는 WinForm 컨트롤을 사용합니다. 전체 소스 ..

[Kibana] 사용 방법 [내부링크]

키바나(Kibana) 사용 방법에 대해 알아보겠습니다. 운영환경 Windows Kibana Version: 7.17.8 키바나를 실행합니다. 키바나는 기본적으로 5601 포트를 사용하는데, 웹 브라우저를 열고 http://localhost:5601 주소를 입력합니다. 서버 상태 확인 키바나의 서버 상태는 http://localhost:5601/status 에서 확인할 수 있습니다. 키바나 콘솔 사용법 키바나 Dev Tools에 있는 콘솔을 이용해 엘라스틱서치 REST API를 호출합니다. 키바나 왼쪽 상단의 토글 메뉴를 클릭하면 키바나 메뉴를 확인할 수 있는데 Management -> Dev Tools를 선택하면 됩니다. 왼쪽 입력창에서 엘라스틱서치에서 제공하는 REST API를 입력하고 실행 버튼을 누..

[Kibana] 윈도우에 설치 및 실행 방법 [내부링크]

Kibana(키바나): 시각화와 엘라스틱서치 관리 도구 키바나는 오픈서치의 자유-오픈 소스 후계자가 오픈서치 대시보드인 일래스틱서치용의 소스 이용이 가능한 데이터 시각화 대시보드 소프트웨어이다. 일래스틱서치 클러스터에 색인된 내용 기반의 시각화 기능을 제공한다. 사용자는 막대, 선, 산점도 플롯, 원 그래프, 지도를 다량의 데이터에 맞추어 만들 수 있다. 위키백과 엘라스틱서치는 REST API가 잘 설계된 제품이긴 하지만 복잡한 요청을 일일이 작성하기 에는 다소 불편할 수 있습니다. 키바나는 이런 불편함을 해소해 줍니다. 엘라스틱서치에 대한 대부분의 관리 기능, API를 실행할 수 있는 콘솔, 솔루션 페이지들, 모니터링 페이지 등이 모두 카바나에 포함되어 있습니다. 개요 윈도우 환경에서 Kibana 7...

[Elasticsearch] 윈도우에 설치 및 실행 방법(8.X 버전) [내부링크]

윈도우 환경에서 Elasticsearch 8.X 버전을 설치 및 실행하는 방법에 대해 알아보겠습니다. 윈도우에서는 파일을 다운로드하고 압축을 푼 다음 실행 파일을 실행하면 엘라스틱서치가 설치되는 구조입니다. 다운로드 먼저 설치를 위해 공식홈페이지로 이동합니다. https://www.elastic.co/kr/downloads/elasticsearch Download Elasticsearch Download Elasticsearch or the complete Elastic Stack (formerly ELK stack) for free and start searching and analyzing in minutes with Elastic.... www.elastic.co 현재 기준으로 8.5.3 버전이 최..

[Elasticsearch] 윈도우에 설치 및 실행 방법(7.X 버전) [내부링크]

Elasticsearch(엘라스틱서치): 분산 검색 엔진 루씬 기반의 검색 엔진이다. HTTP 웹 인터페이스와 스키마에서 자유로운 JSON 문서와 함께 분산 멀티테넌트 지원 전문 검색 엔진을 제공한다. 일래스틱서치는 자바로 개발되어 있으며 아파치 라이선스 조항에 의거하여 오픈 소스로 출시되어 있다. 위키백과 엘라스틱서치는 모든 레코드를 JSON 도큐먼트 형태로 입력하고 관리하고 있으며, 일반적인 데이터베이스와 마찬가지로, 쿼리 한 결과에 대해 일치하는 원본 도큐먼트를 반환합니다. 또한 엘라스틱서치는 텍스트 외에도 숫자, 날짜, IP 주소, 지리 정보 등 다양한 데이터 타입에 대해 최적화되어 있습니다. 또한 엘라스틱서치는 사용자의 모든 입력을 REST API 형태로 받아들이기 때문에 별도의 드라이버 라이브..

SHACL(Shapes Constraint Language) 란 [내부링크]

데이터를 검증하는 데 사용되는 SHACL(Shapes Constraint Language)에 대해 공부하고 정리한 내용입니다. SHACL(Shapes Constraint Language) 란 Shapes Constraint Language(SHACL)는 RDF(Resource Description Framework) 그래프를 설명하기 위한 W3C(World Wide Web Consortium) 표준 언어입니다. SHACL은 RDF 그래프로 표현되는 온톨로지의 의미 체계 및 기술 상호 운용성 계층을 향상하도록 설계되었습니다. SHACL 모델은 그래프의 내용, 구조 및 의미에 대한 제약 조건으로 정의됩니다. SHACL은 표현력이 뛰어난 언어입니다. 무엇보다도 속성이 가질 수 있는 값의 수, 이러한 값의 유형..

[Gatsby] Page Query [내부링크]

gatsby-source-filesystem 로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 sourcing 하기 위한 Gatsby 소스 플러그인입니다. 플러그인은 파일에서 파일 노드를 생성합니다. 다양한 "transformer" 플러그인은 파일 노드를 다양한 다른 유형의 데이터로 변환할 수 있습니다. Markdown, JSON, 이미지, YAML, CSV 및 기타 수집 가지 데이터 유형이 지원됩니다. 설치 $ npm install gatsby-source-filesystem 사용 방법 예시로 blog-posts 디렉토리를 생성하고 디렉터리 안에 post1.md, post2.md 파일을 생성합니다. gatsby-config.ts 파일의 plugin 부분을 아래와 같이 수정합니다. path 속성..

[Gatsby] useStaticQuery(정적 쿼리 사용) [내부링크]

useStaticQuery useStaticQuery는 빌드 시 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리 하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다. useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할 수 있습니다. const data = useStaticQuery(graphql` query HeaderQuery { site { siteMetadata { title } } } `); 사용 방법 TypeScript를 사용하고 gatsby-config.ts 파일에서 GraphQL 타입 생성에 관한 항목인 graphqlTypegen 값이 true로 설정되어..

[Gatsby] Head API 사용 방법 [내부링크]

Gatsby Head API Gatsby 에는 페이지의 문서 헤드에 요소를 추가할 수 있는 내장 head가 포함되어 있습니다. react-helmet 또는 기타 유사한 솔루션과 비교할 때 Gatsby Head는 사용하기 쉽고 성능이 우수하며 번들 크기가 더 작고 최신 React 기능을 지원합니다. // ex) export const Head = () => Home Page; SEO Component 를 사용하여 Head 함수를 정의할 수 있습니다. // src/components/Seo.tsx import React from 'react'; interface ISeoProps { title: string; } export default function Seo({ title }: ISeoProps) { r..

[Gatsby] Layout Components [내부링크]

Layout Components Gatsby는 기본적으로 레이아웃을 페이지에 자동으로 적용하지 않습니다. 대신 Layout Component를 사용하면 Header 및 Footer, 그리고 일부 페이지에서 사용하는 사이드바와 같은 여러 가지 레이아웃을 만들 수 있습니다. 또한 레이아웃과 페이지 컴포넌트 간에 데이터를 전달할 수 있습니다. 즉, Layout Component를 사용하여 여러 페이지에서 일반적으로 사용하는 Header 및 Footer의 레이아웃을 공유하도록 구성할 수 있습니다. 예제 src/components/ 디렉터리를 생성하고 Layout.tsx 파일을 생성합니다. 아래와 같이 Gatsby 의 Link를 사용하여 페이지를 이동하는 Layout Component를 구성합니다. // src/..

[Gatsby] Routing [내부링크]

Routing 리액트 라우터를 사용하여 페이지를 생성하는 것과 달리 Gatsby는 src/pages 안에 각 .tsx 파일에 대한 페이지를 생성합니다. 예를 들어 src/pages/contact.tsx는 yoursite.com/contact 페이지를 생성하고 src/pages/home.tsx는 yoursite.com/home 페이지를 생성합니다. Gatsby로 Routing 하는 것은 간단하고 리액트 라우터도, 스크린도 만들 필요 없고 그 경로와 요소들을 일일이 설명할 필요도 없다는 장점이 있습니다. // src/pages/index.tsx import React from 'react'; export default function Index() { return Hello world; } 참고 https:..

[MySQL] 5분 단위로 그룹핑하여 평균값 계산 [내부링크]

MYSQL을 사용하여 5분 단위로 그룹핑하여 평균값 계산하는 방법에 대해 알아보겠습니다. 테이블 생성 먼저 분 단위로 그룹핑과 평균값 계산을 위해 DATETIME, FLOAT 타입이 포함된 테이블을 생성합니다. CREATE TABLE test ( id INT NOT NULL AUTO_INCREMENT, sensor_value FLOAT, log_time DATETIME, PRIMARY KEY(id), ) ENGINE=MYISAM CHARSET=utf8; 테이블이 생성되면 값을 입력합니다. 첫 번째 방법 시간 단위로 먼저 그룹핑한 후 분단위를 5로 나누어 그룹핑합니다. SELECT date_format(log_time, '%Y%m%d%H%i%S'), AVG(sensor_value) FROM test GRO..

[Spring Boot] MultipartFile transferTo() 사용 파일 저장시 주의사항 [내부링크]

multipart 기본 경로 Spring Boot 설정에서 spring.servlet.multipart.location를 특정 경로로 설정하지 않을 경우 기본적으로 tmp 폴더로 지정됩니다. 각 운영체제 tmp 경로 Windows: C:\User\사용자\AppData\Local\Temp Linux: \tmp 각 운영체제 basedir 경로 Windows: C:\User\사용자\AppData\Local\Temp\tomcat.xxxxxx.8080\work\Tomcat\localhost\ROOT Linux: \tmp\tomcat.xxxxxx.8080\work\Tomcat\localhost\ROOT 위와 같이 눈으로 보기에도 많이 지저분한 경로에 저장이 되므로 작업과 관리가 용이하도록 경로를 직접 설정해 주는 ..

Gatsby 설치 및 사용 방법 [내부링크]

Gatsby 설치 및 사용 방법에 대해 알아보겠습니다. Gatsby(개츠비) 란 개츠비는 리액트 기반의 프레임워크입니다. 리액트를 이용하면서도 리액트에 새로운 규칙 몇 가지를 추가해 주면서 아주 약간의 복잡함을 더해주고 있습니다. 주로 서버사이드 렌더링을 위해 사용하는 Next.js 와는 달리 개츠비는 서버 없이, 오로지 정적 웹사이트 생성을 위해 사용하는 오픈소스 프레임워크입니다. 정적 웹 페이지, 플랫 페이지는 저장된 그대로 사용자에게 전달되는 웹 페이지로서, 이는 웹 애플리케이션에 의해 생성되는 동적 웹 페이지와 반대되는 용어이다. 즉, 정적 웹 페이지는 모든 상황에서 모든 사용자에게 동일한 정보를 표시하며, 콘텐츠 타입이나 문서 언어의 협상(negotiate)을 위해 웹 서버의 현대적 기능에 종속..

[Spring Boot] MultipartFile + Modal 사용 파일 업로드 [내부링크]

Spring Boot에서 MultipartFile와 Bootstrap의 Modal을 사용하여 이미지 파일을 업로드하는 방법에 대해 알아보겠습니다. Spring Boot 2.6.11 버전과 Bootstrap 5를 사용하였습니다. MultipartFile MultipartFile이란 스프링에서 업로드한 파일을 표현할 때 사용되는 인터페이스입니다. 파일 내용은 메모리에 저장되거나 임시로 디스크에 저장됩니다. 요청 처리가 끝나면 임시 저장소는 지워집니다. 설정 Spring Boot application.properties 설정 파일에 파일 업로드 경로와 파일 사이즈를 설정합니다. 윈도우 기준으로 d:/upload/ 경로로 파일을 업로드합니다. # 지도 파일 업로드 경로 spring.servlet.multipar..

[리눅스] mount --bind 사용 방법 [내부링크]

mount 명령어는 디스크 드라이브와 같은 블록 디바이스(Block Device)만 마운트가 가능합니다. --bind 옵션을 추가하면 특정 디렉터리를 다른 디렉터리에 마운트(mount)해서 양쪽 디렉터리가 같은 곳으로 연결되도록 할 수 있습니다. $ mount --bind [원본 디렉토리] [붙일 디렉토리] 사용 예시 먼저 두 개의 디렉토리를 생성합니다. $ mkdir src $ mkdir dest --bind 또는 -B 옵션을 사용해서 src 디렉토리를 dest 디렉토리에 연결합니다. $ mount --bind src dest dest 디렉토리 하위에 파일을 생성을 하면 src 디렉토리에도 반영이 됩니다. $ touch dest/test 변경된 내용을 양쪽 모두 확인이 가능합니다. $ ls dest t..

[리눅스] 네트워크 설정 [내부링크]

리눅스 환경에서 ifconfig를 이용하여 네트워크 설정하는 방법을 알아보겠습니다. ifconfig 란 TCP/IP를 사용하여 네트워크의 네트워크 인터페이스 매개변수를 구성 또는 표시합니다. ifconfig 명령을 사용하여 네트워크 인터페이스에 주소를 지정하고 현재 네트워크 인터페이스 구성 정보를 구성 또는 표시할 수 있습니다. IP 주소 확인 옵션 없이 ifconfig 명령어만 실행하면 서버에 할당된 IP 주소를 확인합니다. $ ifconfig enp5s0: flags=4163 mtu 1500 inet 192.168.0.19 netmask 255.255.255.0 broadcast 192.168.0.255 inet6 fe80::d487:3f17:d845:654b prefixlen 64 scopeid 0..

[CentOS] netstat 사용 포트 확인 [내부링크]

리눅스 환경에서 netstat 명령어를 사용하여 네트워크 정보를 확인하는 방법에 대해 알아보겠습니다. netstat 란 netstat는 전송 제어 프로토콜, 라우팅 테이블, 수많은 네트워크 인터페이스, 네트워크 프로토콜 통계를 위한 네트워크 연결을 보여주는 명령 줄 도구이다. 위키백과 netstat는 네트워크 관련한 정보를 보는 유틸리티로 오래전부터 Unix 계열의 운영체제에서 사용되어 왔으며 현재 LISTEN 중인 포트, 모든 내외부/연결 정보 등을 확인할 수 있습니다. 자주 사용하는 netstat 옵션 -a : 모든 소켓보기, 이 옵션이 없으면 상태가 ESTABLISHED 인 것만 나옵니다. --all 옵션과 동일합니다. -n : 도메인 주소를 읽어들이지 않고 숫자로 출력합니다. -p : PID(프로..

[Spring Boot] WebSocket & STOMP 사용 방법 [내부링크]

WebSocket 이란 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. 웹소켓 프로토콜은 2011년 IETF에 의해 RFC 6455로 표준화되었으며 웹 IDL의 웹소켓 API는 W3C에 의해 표준화되고 있다. 위키백과 HTTP 프로토콜과 호환되며, 실시간 양방향 통신을 제공하기 위한 프로토콜이며 Spring 4.0에서 등장한 네트워크 서비스입니다. (접속까지는 HTTP 프로토콜을 사용하지만 이후 WebSocket 프로토콜로 변경) Spring Boot로 구현하기 Spring Boot에서 WebSocket과 자바스크립트에서 STOMP을 사용하여 메시지를 주고받는 예제를 구현해 보려고 합니다. 의존성 추가 pom.xml에 spring-boot-star..

[CentOS] PM2 서비스 등록 [내부링크]

리눅스 환경에서 PM2 서비스 등록하는 방법에 대해 알아보겠습니다. PM2에서는 시스템이 부팅되고 나서 자동으로 실행되도록 하는 서비스를 등록해 주는 startup 명령어가 있습니다. pm2 등록 $ pm2 start [파일명] --name test $ pm2 list 서비스 등록 pm2 startup 명령어를 사용하여 PM2 서비스를 등록합니다. $ pm2 startup [PM2] Init System found: systemd Platform systemd Template [Unit] Description=PM2 process manager Documentation=https://pm2.keymetrics.io/ After=network.target [Service] Type=forking User=..

메타마스크(MetaMask) 설치 및 사용 방법 [내부링크]

메타마스크 설치 및 사용 방법에 대해 알아보겠습니다. 메타마스크(MetaMask) 란 Ethereum 블록체인과 상호 작용하는 데 사용되는 소프트웨어 암호 화폐 지갑입니다. 이를 통해 사용자는 브라우저 확장 프로그램이나 모바일 앱을 통해 이더리움 지갑에 액세스 할 수 있으며, 이를 통해 분산 애플리케이션과 상호 작용할 수 있습니다. 위키백과 이더리움 지갑 중 메타마스크는 커뮤니티에서 사용죄는 가장 인기 있는 지갑 중 하나입니다. 설치 및 사용 방법 설치 메타마스크 웹사이트에서 크롬 플러그인으로 설치 할 수 있습니다. 사이트로 접속하여 Download 버튼을 클릭합니다. 크롬 웹 스토어 창이 열리게 되고 "Chrome에 추가" 버튼을 클릭합니다. 크롬 확장프로그램에 MetaMask가 추가됩니다. Mnemo..

[OpenLayers] Feature Drag and Drop [내부링크]

이전 글에서 추가된 Icon Feature를 Drag and Drop 하는 예제입니다. [OpenLayers] Custom Icon Feature 추가 이전 글 [OpenLayers] Static Image 에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추 hgko-dev.tistory.com Script ol.interaction.Modify 을 이용해서 Drag and Drop 기능을 구현합니다. modifystart, modifyend 이벤트를 등록하여 Icon을 선택하거나 이동 시 커서가 변경되도록 하였습니다. const styles..

[OpenLayers] Custom Icon Feature 추가 [내부링크]

이전 글에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. [OpenLayers] Static Image OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지 hgko-dev.tistory.com OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추가되었습니다. 먼저 ol.style.Icon 을 이용해서 아이콘 경로를 설정합니다. const styles = { icon:..

[CentOS] Node.js 및 NPM 설치 [내부링크]

리눅스 환경에서 Node.js 와 NPM 설치하는 방법에 대해 알아보겠습니다. 운영환경 CentOS 7.6 저장소 추가 설치하려는 Node.js 버전을 확인하여 NodeSource yum 저장소를 추가합니다. NodeSource Node.js Binary Distributions 사이트에 아래와 같은 내용이 정리되어 있습니다. Node.js v19.x # As root $ curl -fsSL https://rpm.nodesource.com/setup_19.x | bash - # No root privileges $ curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash - Node.js v18.x # As root $ curl -fsSL https:/..

[OpenLayers] Static Image 사용 방법 [내부링크]

OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지도 정보 const mapInfo = { map: null, extent: null, projection: null, setProjection: function (w, h) { this.extent = [0, 0, w, h]; this.projection = new ol.proj.Projection({ code: 'pixel', units: 'pixels', extent: this.extent, }); }, init: funct..

[Ethereum] ganache-cli 설치 및 실행 방법 [내부링크]

ganache-cli 를 설치하고 실행하는 방법에 대해 알아보겠습니다. Ganache "가나슈"라고 읽으면 되고, 가상의 이더리움 네트워크를 생성해서 Smart Contract를 실행할 수 있도록 해주는 프로그램입니다. 이런 가상 환경을 TestRPC라고 합니다. Ganache CLI Ganache CLI는 빠르고 사용자 정의 가능한 블록체인 에뮬레이터인 TestRPC의 최신 버전입니다. 실제 이더리움 노드를 실행하는 오버헤드 없이 블록체인을 호출할 수 있습니다. Transactions are “mined” instantly. No transaction cost. Accounts can be re-cycled, reset and instantiated with a fixed amount of Ether ..

[CentOS] 사용자 계정 관리 [내부링크]

리눅스 환경에서 사용자 계정 조회, 추가, 수정, 삭제하는 방법에 대해 알아보겠습니다. 사용자 조회 모든 사용자를 출력합니다. $ cat /etc/passwd root:x:0:0:root:/root:/bin/bash bin:x:1:1:bin:/bin:/sbin/nologin daemon:x:2:2:daemon:/sbin:/sbin/nologin adm:x:3:4:adm:/var/adm:/sbin/nologin ... 사용자 계정 확인 root와 useradd 또는 adduser 명령어를 통해 생성한 사용자 계정을 출력합니다. $ grep /bin/bash /etc/passwd root:x:0:0:root:/root:/bin/bash hgko:x:1000:1000:hgko:/home/hgko:/bin/ba..

리눅스 명령어 [내부링크]

자주 사용하는 리눅스 명령어에 대해 알아보겠습니다. 명령어 설명 cdcd ..cd -cd ~cd /cd [path] 디렉토리 이동 cp [path] [target] -R 파일 복사 tar cvfz backup.tar.gz [target] tar 로 압축 tar cvfz backup.tar.gz /test --exclude "/test/backup" 특정 디렉토리 제외하고 tar 로 압축 tar xvfz backup.tar.gz 압축 풀기 which [command]예) which find 특정 명령어의 위치 source /etc/profile 환경 설정 적용 find / -name [파일명]예) find / -name 'test' 파일 찾기 ls -al 디렉토리 조회 du -skh 디렉토리 용량 확인 d..

[JPA] CascadeType 정리 [내부링크]

동일 트랜잭션 내부 연관 엔티티가 수정되었을 경우 CascadeType과 상관없이 자동으로 수정됩니다. 같은 트랜젝션이라 하더라도 해당 엔티티가 CasecadeType.PERSIST 로 설정 되어 있지 않으면 연관 엔티티를 추가하더라도 반영되지 않습니다. (CascadeType.MERGE 로 설정 되어도 추가는 되지 않음) CascadeType 별 동작 CascadeType.ALL 상위 엔티티에서 하위 엔티티로 모든 작업을 전파합니다. 모든 Cascade 설정을 적용합니다. CascadeType.PERSIST 상위 엔티티를 생성하고, 하위 엔티티를 추가하였을 때 persist()를 수행하면 하위 엔티티도 같이 persist()가 수행됩니다. 만약, 하위 엔티티가 DB에 등록된 키값을 가졌다면 detach..

[Spring] QuerydslRepositorySupport 사용 [내부링크]

QueryDslPredicateExecutor를 이용하는 findAll, findOne 등은 where, Sort, Limit 등의 조건만 넣을 수 있습니다. 하지만 Join이나 Group by 등의 기능을 사용하려면 인터페이스 선언만으로는 기능을 구현하기 힘듭니다. 이를 해결하기 위해서 Spring Data JPA에서 제공하는 QuerydslRepositorySupport 추상 클래스가 있습니다. QuerydslRepositorySupport는 개발자에게 querydsl 객체를 직접 제공합니다. 예를 들어 권한별 사용자 수에 대한 데이터가 필요하다면, 다음과 같이 할 수 있습니다. 사용자 클래스와 DTO 클래스를 생성합니다. @Data @Entity @Table public class User { @I..

[Spring] JPA with Querydsl [내부링크]

Query DSL JPA, JDO, SQL 같은 백엔드를 위해 type-safe SQL을 만드는 프레임워크 Domain Specific Language 특정한 도메인에 초점을 맞춘 제한적인 표현력을 가진 컴퓨터 프로그래밍 언어 특징 type-safe 조회에 특화된 프로그래밍 언어 단순, 간결 다양한 저장소 조회 기능 통합 (데이터 조회 기능 추상화) 동작 방식 Member java or Member table의 메타 데이터를 참조하여 코드 생성기를 통해 QMember.java를 생성합니다. APT: Annotation Processing Tool Table Meta: Querydsl-maven-plugin 기능 Query: from, where, join Path: QMember, Qmember.name..

[JPA] NamedQuery [내부링크]

Named Query 란 Entity에 @NamedQuery 어노테이션을 통해 쿼리를 지정해 줍니다. 쉽게 말하면 미리 이름을 부여해서 재활용할 수 있는 JPQL입니다. 사용 방법 도메인 클래스에 @NamedQuery 또는 @NamedNativeQuery를 정의합니다. 2개 이상의 Query를 정의하려면 @NamedQueries 또는 @NamedNativeQueries를 사용하면 됩니다. Primary Key 가 되는 칼럼은 @Id를 사용하여 지정합니다. 테이블의 칼럼명과 도메인 클래스의 필드명이 다를 경우 @Column을 이용하여 지정할 수 있습니다. 클래스 생성 위의 설명의 어노테이션을 사용하여 도메인 클래스를 생성합니다. @Entity @NamedQueries({ @NamedQuery(name = ..

[JPA] 쿼리 메서드 [내부링크]

Spring Data JPA 쿼리 메서드는 가장 강력한 메서드이며, SQL 쿼리를 작성하지 않고도 데이터베이스에서 레코드를 선택하는 쿼리 메서드를 만들 수 있습니다. 백그라운드에서 Spring Data JPA는 쿼리 메서드를 기반으로 SQL 쿼리를 생성하고 쿼리를 실행합니다. Entity 필드를 사용하여 Repository에 대한 쿼리 메서드를 생성할 수 있으며 쿼리 메서드 생성을 finder methods(findBy, findAll …)라고도 합니다. 예 findByEmailAddressAndName() 이 쿼리 메서드인 UserRepository 가 있다고 가정합니다. public interface UserRepository extends Repository { List findByEmailAddr..

[JPA] @ElementCollection 사용 예 [내부링크]

RDB(Relational DataBase) 에는 Collection 형태의 데이터를 칼럼에 저장할 수 있는 방법이 없습니다. 그래서 별도의 테이블을 생성하고 Collection을 관리해야 합니다. JPA의 @ElementCollection 사용하여 별도의 테이블을 생성하고 Collection을 관리할 수 있습니다. ElementCollection 특징은 부모 Entity 에 의해 관리되고, 항상 부모와 함께 저장되고 삭제됩니다. casecade 옵션이 default입니다. 예 Collection 대상이 되는 객체는 @Entity 가 아닌 Embeddable Class로 생성하여 One-To-Many 관계를 맺습니다. @Embeddable @Data public class Address { @Column..

[MySQL] 스토리지 엔진(Storage Engine) [내부링크]

MySQL 스토리지 엔진 종류 및 간단 비교 내용입니다. MyISAM 정적인 테이블, 로그 테이블 쓰기 작업이 별로 없는 select 위주의 테이블 다수의 세션이 동시 작업을 하는 경우 성능이 저하됨 InnoDB 민감한 정보를 갖는 테이블 (회원 등) 갱신 (읽기 / 쓰기) 위주의 트랜잭션이 요구되는 테이블 인덱스가 많이 걸린 대량의 테이블 Archive 로그 수집에 적합 데이터가 메모리상에서 압축된 후 압축된 상태로 디스크에 저장 Memory 일시적으로만 사용되는 임시 테이블

[MySQL] 유용 명령어 [내부링크]

Help HELP SHOW; HELP {SELECT | DELETE | UPDATE}; HELP ALTER; HELP ALTER {DATABASE | TABLE}; Show SHOW PRIVILEGES; SHOW OPEN TABLES; SHOW TABLE STATUS; 테이블 칼럼 조회 명령어입니다. (코멘트 포함) SHOW FULL COLUMNS FROM 테이블명; Select -- 왜래키 규약 SELECT * FROM information_schema.REFERENTIAL_CONSTRAINTS; -- PRIMARY KEY, UNIQUE 규악 등 SELECT * FROM information_schema.TABLE_CONSTRAINTS WHERE table_schema = 데이터베이스명; 백업 $ my..

[MySQL] ALTER TABLE 구문 정리 [내부링크]

MySQL에서 사용하는 ALTER TABLE 구문에 대해 알아보겠습니다. 테이블 관련 테이블 생성 테이블 2개를 생성합니다. CREATE TABLE test ( id INTEGER, age INTEGER, name VARCHAR(50), jumin VARCAHR(15), PRIMARY KEY(id), UNIQUE(age), INDEX(name), KEY(jumin), INDEX(name, jumin) ); CREATE TABLE test2 ( id INTEGER, parent_id INTEGER, FOREIGN KEY (parent_id) REFERENCES test(id) ON DELETE CASCADE ON UIPDATE CASCADE ); INDEX를 KEY로 바꿔도 됩니다. INDEX(name, ..

[MySQL] 인덱스(INDEX) 정리 [내부링크]

인덱스(index)란? 인덱스(index)는 테이블에서 원하는 데이터를 쉽고 빠르게 찾기 위해 사용합니다. 이러한 인덱스는 자주 사용되는 필드 값으로 만들어진 원본 테이블의 사본이라고 생각할 수 있습니다. MySQL은 데이터를 검색할 때 첫 번째 필드부터 차례대로 테이블 전체를 검색합니다. 따라서 테이블이 크면 클수록 데이터를 탐색하는 시간도 많이 늘어나게 됩니다. 장점 MIN(), MAX() 등의 함수를 사용하는 쿼리에 대해 해당 필드에 인덱스가 있는 경우 빠르게 찾을 수 있습니다. ORDER BY와 GROUP BY를 빠르게 수행할 수 있습니다. 단점 ISAM, MyISAM 테이블 인덱스를 무겁게 만들면 인덱스 파일이 데이터 파일보다 더 빠르게 최대 크기에 도달됩니다. BDB(Berkeley DB) 테..

Hyperspectral(초분광) 센서 [내부링크]

Hyperspectral 특징 초분광 영상의 픽셀 분광은 하나의 표면에 대한 다중분광픽셀 스펙트럼에서 이용할 수 있는 것보다 훨씬 많은 정보 제공 가능 Hyperspectral 원격탐사 특징 입사되는 빛을 분광시켜 영상의 각 화소에 해당하는 지표물의 수십에서 수백 개의 분광 정보를 취득하고 그 개체의 정보를 이미지 형태로 확보 가능 물질 고유의 광학적 성질과 물질의 흡수 및 반사 특징을 분석함으로써 토지피복, 식생, 그리고 수질 등의 식별에 주로 이용됨 스펙트럼 영상은 두 개의 공간적 차원과 하나의 스펙트럼 크기로 구성된 3차원 (x, y, λ)으로 나타남(x, y : 공간적 2차원 / λ : 스펙트럼 크기) 2차원 (2-D) 검출기에서 각 화소에 스펙트럼 정보를 수집하여 초분광 큐브로 알려진 공간 및 ..

Microwave(극초단파) 센서 [내부링크]

Microwave 특징 물체들이 방출하는 마이크로웨이브 파를 위성에서 감지하여 원격탐사에 활용하는 기술 마이크로파의 파장 영역은 보통 1mm~1m임 자연방사 에너지를 관측하는지, 위성에서 Microwave를 쏘아서 되돌아오는 신호를 관측하는지에 따라 Passive microwave와 Active microwave로 나눌 수 있음 대표적으로 SAR, 산란계, 고도계, 복사계로 나눠짐 Microwave 원격탐사 특징 1. Passive vs Active 2. 센서 특징 Microwave 활용 위성 GCOM-W1(AMSR-2) SMAP(SMAP) NOAA, AQUA, Metop(AMSU-A) GPM(GMI, GPM Microwave Imager)

IR(적외선) 센서 [내부링크]

IR(Infrared) 정의 가시광선대의 적색 끝부분에서부터 마이크로파전까지의 전자기파, 가시광선이나 자외선에 비해 강한 열작용을 가지고 있음 파장 대역 : 0.7-1000 활용 분야 : 소독/멸균, 외과수술 및 종양 제거, 군사적(야간 투시경), 야간 촬영용 카메라 IR 특징 태양빛을 프리즘을 이용하여 스펙트럼으로 분산시킬 때 붉은색보다 더 바깥쪽에 위치함 열을 가지는 모든 물체에서 방출 또는 반사되는 특징이 있기 때문에 강한 열작용을 가짐(열선이라고도 불림) 파장에 따라 지구 대기를 투과하지 못하는 특성이 있어 대기 환경에 민감 IR 원격탐사의 특징 장파장으로 갈수록 물체 고유의 특성이 잘 관측될 수 있음 야간이나 해무(바다 안개), 옅은 구름이 낀 상황에서도 촬영 가능 해양 및 구름의 온도를 측정..

[MySQL] 계정 관리 [내부링크]

[MySQL] 접속 에러 해결 방법 [내부링크]

MySQL 서버에 접속 시도 시 다음과 같은 에러가 발생할 경우 해결 방법입니다. $ sudo mysql -u root ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (111) MySQL 사용자로 접속 시도 시 /var/lib/mysql/ 경로에서 mysql.sock 파일을 찾을 수 없어서 나오는 오류입니다. 먼저 mysql.sock 파일을 찾습니다. $ find / -name "mysql.sock" /db/mysql_data/mysql.sock 해결 1 my.cnf 파일을 열고 아래 항목을 추가합니다. $ vi /etc/my.cnf [client] socket=/db/mys..

[Java] Iteration 예 [내부링크]

Iteration 람다(Lambda)의 forEach 함수를 사용하는 예제입니다. 사용 예 List friends = Arrays.asList("Brian", "Nate", "Neal", "Raju", "Sara", "Scott"); 기존 for 문 for (int i = 0; i < friends.size(); i++) { System.out.println(friends.get(i)); } for (String name : friends) { System.out.println(name); } # 결과 Brian Nate Neal Raju Sara Scott forEach 사용 forEach 함수를 사용한 예제입니다. 첫 번째부터 마지막까지 점점 코드가 간략해지는 것을 볼 수 있습니다. // 1) fri..

SAR 위성 활용 [내부링크]

SAR 위성 소개 SAR 위성이란? SAR(Synthetic Aperture Radar)란 각 Band의 다양한 파장대의 신호를 이용 지표면의 특성을 영상화함 BANS 별 소개 SAR(파장 and 편파) 1. KOMPSAT-5(한국의 위성) 위성의 본체 및 탑재체 제원 촬영모드 및 배포자료 활용 분야 2. TerraSAR-X(독일의 위성) 위성의 본체 및 탑재체 제원 촬영모드 및 배포자료 활용 분야 3. ALOS-2(일본의 위성) 위성의 본체 및 탑재체 제원 촬영모드 및 배포자료 활용 분야 4. RADARSAT-2(캐나다의 위성) 위성의 본체 및 탑재체 제원 촬영모드 활용 분야 별 촬영 모드(개념도) 활용 분야 별 촬영 모드(지상) 활용 분야 별 촬영 모드(해양)

광학 위성 활용 [내부링크]

위성영상 활용 목적 원격탐사 : 기록장치에 의해 물리적인 접속이 없이 관심 대상이 되는 목표물이나 현상에 대한 정보를 획득하는 방법 원격 : 관찰자와 관찰 대상이 분리되어 간격이 있는 것 탐사 : 감지하거나 특징을 지음 = 원거리에서 관찰 대상을 감지하거나 특징을 찾는 것 광학 위성 소개 고성능 광학 카메라를 탑재한 지구 관측 위성 해상도 : 위성의 해상도는 10m 급에서 0.4m에 이르기까지 다양함 저해상도 활용 : 주로 광범위한 지역의 탐사나 지속적 관찰이 필요한 부분에 사용 고해상도 활용 : 고해상도로 갈수록 군사용이나 특수목적으로 사용 촬영 방식 : 전자광학카메라를 이용한 촬영(광학 신호를 전자신호로 변환하여 영상을 제공하는 방식) 장점 : 눈에 익숙한 영상이 촬영 됨 단점 : 촬영 지역에 구름이..

[Java] 스트림(Stream) 사용 방법 [내부링크]

스트림(stream) Java 8 버전부터 추가되었고 특정 요소 형식으로 이루어진 연속된 값에 대한 집합 인터페이스를 제공합니다. filter, map, reduce, sort, find 등의 함수들을 제공합니다. 사용 예 @Data @NoArgsConstructor @AllArgsConstructor public class Person { private String name; private String age; } List people = Arrays.asList( new Person("Eden", 20), new Person("Ko", 21), new Person("Lee", 21), new Person("Kang", 25) ); Mutable 21살 이상의 사람을 찾는 코드입니다. filter를 사..

Java 8 람다(Lambda) 적용 예 [내부링크]

람다(Lamdba) 란 람다식, 또는 람다 함수라 부른다. 프로그래밍 언어에서 사용되는 개념으로, 익명 함수(Anonymous functions)를 지칭하는 용어이다. 나무위키 예제 Map에서 특정한 값을 가지는 entry에 대해서 삭제하는 코드입니다. Map map = new HashMap(); map.put("XXX", "111"); map.put("YYY", "222"); map.put("ZZZ", "333"); map.put("AAA", "444"); map.put("BBB", "555"); map.entrySet().stream() .filter(entry -> entry.getValue().equals("111")) .map(entry -> entry.getKey()) .collect(Coll..

Java 8 스트림 적용시 성능 변화 [내부링크]

for 문 int startIndex = 0; long endIndex = 2000000000L; long startTime = System.currentTimeMillis(); long sum = 0; for (long i = startIndex; i < endIndex; i++) { sum += i; } long processTime = System.currentTimeMillis() - startTime; System.out.println("sum : " + sum); System.out.println("process time : " + processTime + "ms"); 실행 결과입니다. sum : 1999999999000000000 process time : 11919ms Stream 사용 i..

[PostgreSQL] 사용자, 그룹 관리 [내부링크]

실행 파일을 통합 방법 사용자 생성 $ createuser hgko --createdb --no-superuser --no-createrole 사용자 삭제 $ dropuser hgko DB 접속을 통한 방법 GROUP 생성, 수정, 삭제 SYSID: 내부의 GROUP ID 구분용 숫자 코드이며, 설정하지 않으면 자동으로 100부터 1씩 증가합니다. (1~99는 핵심적인 그룹을 위함) 자동으로 설정되게 하면 됩니다. GROUP 생성 CREATE GROUP [그룹명]; CREATE GROUP [그룹명] WITH USER user1, user2, user3; CREATE GROUP [그룹명] WITH SYSID 100 USER user1; CREATE GROUP [그룹명] WITH SYSID 100; GROU..

[PostgreSQL] 사용자 인증 [내부링크]

사용자 인증 Postgresql을 처음 설치하게 되면 비밀번호를 묻지 않고 로그인을 할 수 있습니다. 인증과정을 포함하려면 pg_hba.conf 에서 설정해야 합니다. pg_hba.conf 파일은 initdb 에서 생성된 클러스터 폴더에 위치합니다. Authentication Method 필드의 값에 따라서 인증처리가 됩니다. trust: 패스워드 없이 접근 가능 (local 이외에는 비추천) reject: 거부 md5: 패스워드를 md5 로 암호화해서 전송 password: text 로 패스워드를 사용 (스니핑에 바로 보임) 사용 예제 TCP/IP 로 127.0.0.1에 접근 시 모든 DB, 사용자로의 접근에 패스워드가 필요 없는 예제입니다. host all all 127.0.0.1/32 trust T..

[Oracle] 사용자 및 테이블 조회 [내부링크]

테이블 스페이스 남은 공간 조회 현재 접속한 사용자의 DEFAULT_TABLESPACE 남은 공간을 조회합니다. SELECT ts.tablespace_name, TO_CHAR(SUM(NVL(fs.bytes, 0)) / 1024 / 1024, '99,999,990.99') AS MB_FREE FROM user_free_space fs, user_tablespace ts, user_users us WHERE fs.tablespace_name(+) = ts.tablespace_name AND ts.tablespace_name(+) = us.default_tablespace GROUP BY ts.tablespace_name; 'user_' prefix 가 붙게 되면 로그인한 계정에 관련된 내용이 출력됩니다. 사..

[Oracle] 계정 관리 [내부링크]

Oracle에서 계정 생성, 삭제 및 권한을 부여하는 방법입니다. 계정 생성 및 권한 부여 SQL> CREATE USER [계정] IDENTIFIED BY [비밀번호] DEFAULT TABLESPACE [테이블스페이스명] QUOTA unlimited ON [테이블스페이스명] -- 테이블 스페이스의 내용을 모두 쓸 수 있다. TEMPORARY TABLESPACE [임시테이블스페이스명]; -- 예 SQL> CREATE USER test IDENTIFIED BY 123!@#QWE DEFAULT TABLESPACE users QUOTA unlimited ON users TEMPORARY TABLESPACE temp; 계정 기본 테이블 스페이스 변경 SQL> ALTER USER [계정] DEFAULT TABLES..

[Oracle] 테이블 스페이스 사용 방법 [내부링크]

테이블 스페이스(Table Space)란 테이블스페이스(Tablespace)는 데이터베이스 오브젝트 내 실제 데이터를 저장하는 공간이다. 이것은 데이터베이스의 물리적인 부분이며, 세그먼트로 관리되는 모든 DBMS에 대해 저장소(세그먼트)를 할당한다. 테이블스페이스는 단지 데이터베이스 저장소 위치를 지정할 뿐이며, 논리적 데이터베이스 구조나 스키마를 지정하지 않는다. 예를 들면, 동일한 스키마 내의 다른 오브젝트는 서로 다른 테이블스페이스에 놓일 수 있다. 마찬가지로, 하나의 테이블스페이스는 여러 세그먼트들을 서비스할 수 있다. 위키백과 테이블 스페이스 조회 SQL> SELECT * FROM dba_tablespaces; SQL> SELECT * FROM dba_data_files; 테이블 스페이스 생성 ..

WGS84 - 도분초 변환 [내부링크]

세계 지구 좌표 시스템(World Geodetic System, WGS) 1984년에 제정된 범 지구적 측위 시스템으로 지도학, 측지학, 항법에 많이 사용된다. GPS측량 시 WGS84 타원체를 사용한다. 통칭 및 약칭은 WGS 84 (aka WGS 1984, EPSG:4326, WGS84)라고 부르며, 2004년에 마지막으로 개정되었다. 이전에 쓰던 초안으로 WGS 72, WGS 66, 그리고 WGS 60이 있다. 위키백과 3735.0079는 위도로서 37도 35.0079분을 뜻합니다. 도(degree) 단위로 환산 시, 대략 37.5도가 됩니다. 12701.6446은 경도로서 127도 1.6446분을 뜻합니다. 도(degree) 단위로 환산 시, 대략 127.0도가 됩니다. DDMM.MMMM , DD..

[CentOS] Service 등록 및 실행 방법 [내부링크]

리눅스 환경에서 Tomcat을 구동하는 서비스를 등록하고 실행하는 방법에 대해 알아보겠습니다. Service 파일 생성 /etc/systemd/system/ 위치에 service 파일을 생성합니다. $ sudo vi /etc/systemd/system/tomcat-server.service [Unit] Description=TOMCAT SERVER Service After=network.target syslog.target [Service] Type=forking User=root Group=root ExecStart=/usr/local/tomcat-server/bin/startup.sh ExecStop=/usr/local/tomcat-server/bin/shutdown.sh [Install] Wante..

Angular Development with TypeScript [내부링크]

책 정보 책 소개 Angular는 Google이 주관하는 웹 애플리케이션 프레임워크다. 개발자들에게 큰 인기를 끌었던 이전 버전의 AngularJS는 이제 새로운 구조와 철학을 도입해서 완전히 새로운 프레임워크가 되어 돌아왔다. 새로운 버전의 Angular에서 제공하는 훌륭한 기능과 웹 컴포넌트 기반 철학을 깊이 있게 알아보고, 데이터를 뷰에 표시하는 방법, 사용자가 입력한 폼 데이터 처리, 서버와 통신, 테스트와 배포까지 애플리케이션의 모든 개발 단계를 다룬다. 더불어 현업에 바로 적용할 수 있도록 다양한 예제와 함께 설명하며, 중대형 규모의 애플리케이션 개발에 적합한 TypeScript와 ES6에 대해서도 알아본다. 이 책을 마지막까지 읽고 나면, 실무에 바로 도입할 수준이 될 것이다. 리뷰 최근 A..

[MariaDB] 계정 생성 및 권한 부여 [내부링크]

NVM 설치 및 사용 방법 [내부링크]

Windows 환경에서 NVM 를 설치하고 Node 버전을 관리하는 방법에 대해 알아보겠습니다. NVM(Node Version Manager) NVM 은 Node.js의 버전을 관리하는 도구입니다. 여러 개의 Node.js 버전을 설치할 수 있고 설치된 모든 버전을 확인할 수 있습니다. 그리고 필요에 따라 버전 변경도 할 수 있습니다. 설치 NVM Github Repository 사이트에 접속합니다. nvm-setup.zip 또는 nvm-setup.exe 을 선택하여 다운로드하고 설치를 합니다. 사용 NPM 버전 조회 현재 최신의 사용가능한 Node.js 버전이 조회됩니다. $ nvm list available NPM 설치 원하는 버전을 입력하여 설치합니다. $ nvm install [node versi..

[CentOS] MariaDB 설치 방법 [내부링크]

리눅스 환경에서 MariaDB 설치 방법에 대해 알아보겠습니다. MariaDB 란 MariaDB는 오픈 소스의 관계형 데이터베이스 관리 시스템이다. MySQL과 동일한 소스 코드를 기반으로 하며, GPL v2 라이선스를 따른다. 오라클 소유의 현재 불확실한 MySQL의 라이선스 상태에 반발하여 만들어졌으며, 배포자는 몬티 프로그램 AB와 저작권을 공유해야 한다. 위키백과 MariaDB 저장소 추가 yum 저장소에는 MariaDB 라이브러리가 없기 때문에 저장소를 추가합니다. [root@localhost ~]$ vi /etc/yum.repos.d/MariaDB.repo /etc/yum.repos.d 경로에 MariaDB.repo 파일을 추가하고 아래와 같이 작성합니다. # MariaDB 10.4 CentO..

[JavaScript] 주민등록번호 유효성 검사 [내부링크]

JavaScript 에서 주민등록번호 유효성 검사 방법에 대해 알아보겠습니다. 주민등록번호란 주민등록번호는 “주민의 거주관계를 파악하고 상시로 인구의 동태를 명확히 하여 행정사무의 적정하고 간이 한 처리를 도모함”(1962년 주민등록법) 등을 목적으로 만든 일련번호로서, 개개인의 신원을 명확하게 구분하는 역할을 한다. 나무위키 내국인과 외국인 주민등록번호 유효성을 검사하는 소스코드입니다. 내국인 주민등록번호와 달리 외국인 등록번호는 뒤 7자리 숫자의 첫 숫자가 2000년 이전 출생 외국인에게는 남자는 5, 여자는 6, 2000년 이후 출생 외국인에게는 남자는 7, 여자는 8로 부여하고 있습니다. 내국인 주민등록번호 숫자는 1, 2, 3, 4 로 시작됩니다. 주민등록번호 입력 : - 검증 const Com..

[Python] OpenCV Sharpening [내부링크]

Python에서 OpenCV를 사용하여 Sharpening 하는 방법에 대해 알아보겠습니다. Sharpening Sharpening 기법은 Bluring과 반대되는 개념으로, 초점이 잘 맞은 사진처럼 사물의 윤곽이 뚜렷하고 선명한 느낌이 나도록 하는 것이다. 설치 Python 에서 OpenCV 를 사용하기 위해 패키지를 설치합니다. $ pip install opencv-python 예제 원본 이미지에 여러가지의 커널을 적용하여 선명하게 표현하였습니다. import cv2 import numpy as np import matplotlib.pyplot as plt image = cv2.imread('images/lenna.png', cv2.IMREAD_GRAYSCALE) # 커널 생성(대상이 있는 픽셀을 강..

[JavaScript] IE에서 작동하지 않는 BLOB 다운로드 [내부링크]

이미지를 Jcrop 라이브러리를 사용하여 자르고 Canvas 영역을 blob 형식으로 바꿔서 a Tag를 생성하여 다운로드를 시도하였습니다. 크롬에서는 잘 동작하였지만 IE에서는 동작하지 않고 에러를 발생하였습니다. 아래 코드처럼 작성하였더니 둘 다 동작하였습니다. 소스 코드 function downloadURI(blob, name) { if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE에서 동작 window.navigator.msSaveBlob(blob, name); } else { // 크롬에서 동작 var link = document.createElement('a'); link.download = name; link.href = U..

[Angular] Cytoscape 사용 방법 [내부링크]

Cytoscape 소개 Cytoscape은 점 (node)과 선 (edge)으로 이루어진 네트워크의 가시화, 통합, 분석을 가능하게 하는 프리 오픈소스 소프트웨어입니다. 자바로 구현되어 있어 윈도우, 맥, 리눅스등에서 자유롭게 구동합니다. Cytoscape 라이브러리를 사용하여 노드 간의 절차를 시각화하는 그래프를 구현하는 방법에 대해 알아보겠습니다. 설치 cytoscape 패키지를 설치합니다. npm install --save cytoscape cytoscape-klay # typescript 사용 시 추가 설치 npm install --save-dev @types/cytoscape 설정 angular.json 파일에서 아래 내용을 추가합니다. "scripts": ["./node_modules/cyto..

[Angular] Markdown 사용 방법 [내부링크]

Markdown 이란 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. 위키백과 Angular에서 ngx-markdown 패키지를 사용하여 Markdown 기능을 구현하는 방법에 대해 알아보겠습니다. 설치 ngx-markdown 패키지를 설치합니다. $ npm install ngx-markdown --save 설정 angular.json 파일에서 아래 내용을 추가합니다. { ... "architect": { "build": { "..

[Angular] Markdown Editor 사용 방법 [내부링크]

Markdown 이란 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다. 위키백과 Angular에서 ngx-markdown-editor 패키지를 사용하여 Markdown Editor 기능을 구현하는 방법에 대해 알아보겠습니다. 설치 ngx-markdown-editor와 ace-builds, bootstrap, font-awesome 패키지도 필수로 설치합니다. $ npm install ngx-markdown-editor --save..

[Angular] Can't resolve crypto 오류 해결 방법 [내부링크]

Angular 에서 Web3를 사용할 경우 아래와 같은 오류가 발생할 경우가 있습니다. Module not found: Error: Can't resolve 'crypto' in ... Module not found: Error: Can't resolve 'stream' in ... Module not found: Error: Can't resolve 'fs' in ... Module not found: Error: Can't resolve 'os' in ... [NG_SERVE] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. [NG_SERVE] This is no longer the c..

[Angular] process is not defined 해결 방법 [내부링크]

Angular 14 버전을 사용하면서 ERROR ReferenceError: process is not defined 오류가 발생할 경우 해결 방법입니다. 설치 $ npm install --save-dev process 내용 추가 src/polyfill.ts 파일에 다음 내용을 추가합니다. (window as any).global = window; global.Buffer = global.Buffer || require('buffer').Buffer; global.process = require('process');

node-gyp 설치 오류 해결 방법 [내부링크]

node-gyp 설치 과정 중 오류가 발생하였을 때 해결 방법입니다. npm 버전 확인 npm 버전을 확인하고 버전에 맞게 수행합니다. $ npm --version Windows PowerShell 또는 명령 프롬프트(cmd.exe)를 "관리자 권한으로 실행"으로 실행합니다. 먼저 node 가 설치된 디렉토리로 이동합니다. $ cd "C:\Program Files\nodejs" npm 버전이 7 미만인 경우 $ cd node_modules\npm\node_modules\npm-lifecycle $ npm install node-gyp@latest npm 버전이 7 또는 8 일 경우 다음을 수행합니다. $ cd node_modules\npm\node_modules\@npmcli\run-script $ np..

npm install 시 gyp ERR! 해결 방법 [내부링크]

npm install 시 gyp ERR!로 시작하는 설치 에러가 발생할 경우 아래 방법을 통해 해결합니다. 첫 번째 방법 Microsoft의 windows-build-tools 설치합니다. 관리자 권한으로 PowerShell 또는 터미널을 열고 다음 명령어를 실행하여 설치합니다. npm 버전이 8 이상 설치가 되어 있어야 합니다. $ npm install --global windows-build-tools 두 번째 방법 1) Visual Studio Download https://visualstudio.microsoft.com/ko/downloads/ 사이트를 접속해서 Visual Studio를 다운로드합니다. 2) C++ 설치 Visual Studio Installer에서 Desktop developm..

[React] Animations 사용 방법 [내부링크]

Framer Motion을 사용하여 애니메이션을 간편하고 쉽게 만드는 방법을 알아보겠습니다. Framer Motion Framer는 디자이너들을 위해 프로토타입 등을 만들어 주는 회사입니다. Framer Motion은 React 용 production-ready 모션 라이브러리입니다. 설치 $ npm install framer-motion 사용 Animation Framer Motion의 애니메이션은 모션 컴포넌트의 유연한 animate 속성을 통해 제어됩니다. 간단한 애니메이션의 경우 animate props에서 직접 값을 설정할 수 있습니다. motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} initial initial: boolea..

[CentOS] alias 등록 방법 [내부링크]

alias 란 alias는 별칭이라는 뜻으로 리눅스에서 alias는 사용자가 명령어를 다른 이름으로 바꿔서 사용할 수 있는 쉘 내부 명령어를 말합니다. 이 alias를 통해서 일일이 입력하기 번거로운. 길이가 긴 명령어를 간단한 이름으로 바꿔서 등록하여 업무 효율을 높일 수 있습니다. alias 확인 현재 등록된 alias 리스트를 확인할 수 있습니다. $ alias alias cp='cp -i' alias egrep='egrep --color=auto' alias fgrep='fgrep --color=auto' alias grep='grep --color=auto' alias l.='ls -d .* --color=auto' alias ll='ls -l --color=auto' alias ls='ls -..

[CentOS] Tomcat 다중 설치 및 운영 방법 [내부링크]

리눅스 환경에서 Tomcat을 다중 설치하고 운영하는 방법에 대해 알아보겠습니다. Tomcat 설치 이전에 작성된 글을 보면서 Tomcat을 설치합니다. [CentOS] 아파치 톰캣(Tomcat) 설치 및 사용 방법 리눅스 환경에서 아파치 톰캣 설치 및 사용 방법에 대해 알아보겠습니다. 아파치 톰캣(Tomcat) 이란 아파치 톰캣(Apache Tomcat)은 아파치 소프트웨어 재단에서 개발한 서블릿 컨테이너(또는 웹 컨테 hgko-dev.tistory.com 설치된 Tomcat 폴더를 서로 다른 이름의 폴더로 복사합니다. - tomcat1 : /usr/local/tomcat_1 - tomcat2 : /usr/local/tomcat_2 catalina.sh 파일 수정 /bin/catalina.sh 파일을 ..

[React] reference 사용 방법 [내부링크]

reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 아래 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. import { useRef } from 'react'; function RefEx() { const inputRef = useRef(null); const onClick = () => { inputRef.current?.focus(); // 5초 뒤에 focus 사라짐 setTimeout(() => { inputRef.current?.blur; }, 5000); }; return ( cli..

[Spring] Swagger Header 설정 방법 [내부링크]

Spring에서 Swagger Header 설정 방법에 대해 알아보겠습니다. API 마다 설정 각 API 마다 @ApiImplicitParam을 통해 인증 정보(토큰)를 입력하도록 설정합니다. @ApiImplicitParams({@ApiImplicitParam(name = "Authorization", value = "JWT Token", required = true, dataType = "string", paramType = "header") }) @PostMapping("/auth/test") public ResponseEntity authTest() { System.err.println("authTest"); return ResponseEntity.ok("test ok"); } 이 방법은 API 개..

[Angular] 기능 구현 방식 [내부링크]

Angular 프레임워크로 특정 기능을 구현할 때 어떤 방식으로 사용하는지에 대해 알아보겠습니다. UI Component 구현 클래스에 @Component Annotation을 붙여서 생성합니다. HTML 템플릿 정의 인라인 HTML 코드를 사용할 때는 @Component 어노테이션 template 항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl 항목을 사용합니다. 컴포넌트 Property 를 UI에 표시 템플릿의 이중 중괄호 안에 Property를 사용합니다. {{ customValue }}) 컴포넌트 Property 바인딩 대괄호를 사용해서 Property를 바인딩합니다. 이벤트 처리 이벤트 이름을 괄호로 감싸고 핸들러를 지정합니다. Click 양방향 바인딩 [()] 표기를 사용합니..

[React] memo 사용 방법 [내부링크]

React에서 memo 사용 방법에 대해 알아보겠습니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다. import React from 'react'; function MyComponent(props) { /* props를 사용하여 렌더링 */ } export default React.memo(MyComponent, areEqual); 사용 이전 포스트 [React] Drag and Drop에서 드래그, 드롭 시 바뀐 부분이 아닌 전체가 리랜더링이 되어 텍스트의 흔들림이 가끔..

[React] Drag and Drop 사용 방법 [내부링크]

react-beautiful-dnd을 사용하여 React에서 깔끔하고 사용하기 쉬운 드래그, 드롭, 애니메이션을 적용할 수 있는 방법에 대해 알아보겠습니다. 설치 $ npm i react-beautiful-dnd TypeScript 사용 시 추가로 설치합니다. $ npm i --save-dev @types/react-beautiful-dnd 사용 임시 데이터 ['a', 'b', 'c', 'd', 'e', 'f']를 사용하여 카드 형태의 드래그, 드롭을 구현해 봤습니다. // atoms.tsx import { atom } from 'recoil'; export const toDoState = atom({ key: 'toDo', default: ['a', 'b', 'c', 'd', 'e', 'f'], });..

[React] React Hook Form [내부링크]

React에서 React Hook Form 사용 방법에 대해 알아보겠습니다. 기본적으로 Form을 사용할 때 작성하는 코드입니다. 하나의 input이지만 여러 개의 input을 사용할 경우 useState와 onChange 이벤트가 많이 생성됩니다. 그리고 Validation Check 하는 코드도 복잡해집니다. // InputForm.tsx import React, { useState } from 'react'; function InputForm() { const [toDo, setTodo] = useState(''); const [toDoError, setTodoError] = useState(''); const onChange = (event: React.FormEvent) => { const { ..

[Angular] Angular 시작 [내부링크]

Angular는 구글이 만든 단일 페이지 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크입니다. 다양한 플랫폼에서 동작할 수 있게 하는 개발 툴과 기능들을 제공합니다. Module 컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능단위로 그룹핑하게 해 줍니다. 모든 앵귤러 애플리케이션은 하나의 Root Module을 가집니다. 여러 Feature Module을 가질 수 있습니다. 재사용할 수 있는 기능을 외부에 배포하기 위해 사용되기도 합니다. Component 빌딩 블록 형식 HTML 요소들의 그룹 뷰와 로직으로 구성 $ ng g component todo/todos --module todo/todo.module.ts --export 컴포넌트 내부에서 html, css 코드..

[Python] Python 기초(2) [내부링크]

나도코딩 님의 파이썬 코딩 무료 강의 (기본편)을 보면서 작성하였습니다. 기본 시작 함수 def open_account(): print("새로운 계좌가 생성되었습니다.") def deposit(balance, money): # 입금 print("입금이 완료되었습니다. 잔액은 {0} 원입니다.".format(balance + money)) return balance + money def withdraw(balance, money): # 출금 if balance >= money: # 잔액이 출금보다 많으면 print("출금이 완료되었습니다. 잔액은 {0} 원입니다.".format(balance - money)) return balance - money else: print("출금이 완료되지 않았습니다. 잔액..

[Python] Python 기초(1) [내부링크]

나도코딩 님의 파이썬 코딩 무료 강의 (기본편)을 보면서 작성하였습니다. 환경설정 Python 설치 https://www.python.org/downloads/ 홈페이지 접속 후 다운로드 탭을 선택하고, 현재 버전(3.10.2) 다운로드를 합니다. 다운로드 완료 후 설치를 시작한다. Customize installation 클릭하고, install location 란에 c:\Python310 입력 후 설치 버튼을 클릭합니다. Visual Studio Code 설치 https://code.visualstudio.com/ 홈페이지 접속 후 다운로드 후 설치합니다. python 익스텐션 설치 기본 시작 주석 print("주석") #print("주석") ''' 여러문장 주석입니다. ''' 숫자처리함수 print..

[Angular] Angular Cli 설치 및 사용 방법 [내부링크]

Angular는 Angular CLI를 이용해 프로젝트 관리의 복잡도를 낮추고 Angular 개발에만 집중할 수 있게 합니다. 설치 Angular CLI를 설치하려면 다음과 같은 npm 명령어를 실행합니다. $ npm install -g @angular/cli 설치가 완료되면 ng 명령어를 사용할 수 있습니다. ng 명령어는 Angular CLI에서 제공하는 기능들을 실행하는 역할을 담당합니다. Angular CLI 도움말 옵션을 사용해 확인해 봅니다. $ ng --help ng Commands: ng add Adds support for an external library to your project. ng analytics Configures the gathering of Angular CLI usa..

[React] Recoil 사용 방법 [내부링크]

Recoil 사용 방법에 대해 알아보겠습니다. Recoil Recoil는 페이스북에서 만든 React를 위한 상태 관리 라이브러리입니다. Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다. 설치 Recoil 패키지는 npm에 존재합니다. 안정한 최신 버전을 설치하기 위해서는 아래의 명령어를 실행하면 됩니다. $ npm install recoil 또는 yarn을 사용한다면 이 명령어를 사용하면 됩니다. $ yarn add recoil RecoilRoot 루트에 RecoilRoot를 감싸줍니다. // index.tsx import { RecoilRoot } from 'recoil'; imp..

[React] ApexCharts 사용 방법 [내부링크]

ApexCharts는 데이터를 시각화해주는 차트 라이브러리입니다. 무료로 사용할 수 있고, Js, Angular, React, Vue를 지원합니다. ApexCharts를 사용하여 React.js 에서 간단하게 차트 만드는 방법에 대해 알아보겠습니다. 설치 apexcharts 와 react-apexcharts 라이브러리를 같이 설치합니다. $ npm install --save react-apexcharts apexcharts 사용 코인 정보를 조회하여 차트를 구성하였습니다. Line Chart를 예제로 사용하였습니다. // api.ts const BASE_URL = `https://api.coinpaprika.com/v1`; // 코인 정보 조회 export function fetchCoinHistory(..

[React] React Query [내부링크]

React Query는 데이터 Fetching, 캐싱, 동기화, 업데이트, 에러핸들링 등 비동기 과정을 쉽게 만들어 주는 React 라이브러리입니다. React Query를 사용하면 기존의 서버 데이터를 가져오거나 업데이트하는 코드를 축약할 수 있고 캐싱 처리가 간단해졌습니다. 간단하게 useQuery를 사용하여 코인들의 정보를 조회하는 코드를 통해 React Query 사용 전 후를 비교하였었습니다. 설치 $ npm i react-query or $ yarn add react-query useQuery 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 포함)와 함께 사용할 수 있습니다. 첫 번째 파라미터는 unique Key이고, 두 번째는 비동기 함수(api호출 함수..

[React] Nested Routes [내부링크]

Nested Routes는 route 안에 있는 또 다른 route입니다. React Router 가 v6로 바뀌면서 Nested Routes 만 아니라 Route 사용하는 방법이 바뀌었습니다. 전 5 버전과 현재 6 버전 사용법을 비교하였습니다. React Router v5 nested routes를 구현하는 방법은 자식 route를 부모 route의 element 내부에 작성하는 것입니다. // Router.tsx import { BrowserRouter, Switch, Route } from 'react-router-dom'; import Coin from './routes/Coin'; import Coins from './routes/Coins'; function Router() { return ..

[JPA] 복합키 사용 [내부링크]

서론 복합키는 기본키가 되지 못하는 칼럼들을 서로 묶어서 기본키처럼 사용하는 것입니다. Entity 예를 들어 사용자명과 이메일을 복합키로 사용한다고 가정합니다. 복합키로 묶는 CompositePK 클래스를 생성하고, @IdClass 어노테이션을 사용하여 설정합니다. @Entity @Table(name = "tb_user") @IdClass(CompositePK.class) //이름과 이메일을 primary key로 사용 @Data public class User { @Data @AllArgsConstructor @NoArgsConstructor public static class CompositePK implements Domain { /** 사용자명 */ @Column(nullable = false,..

[React] TypeScript 사용 방법 [내부링크]

React에서 TypeScript를 적용하고 사용 방법에 대해 알아보겠습니다. 설치 create-react-app 명령어에 typescript 옵션을 추가합니다. $ npx create-react-app typescript --template typescript Typescript를 추가하지 않은 기존 프로젝트가 있다면 다음 명령어를 실행하여 설치합니다. $ npm install --save typescript @types/node @types/react @types/react-dom @types/jest Typescript 사용 시 styled-components 부분에서 에러가 날 경우 다음 명령어를 실행하여 설치합니다. $ npm i --save-dev @types/styled-components ..

[React] Styled Components 사용 방법 [내부링크]

React에서 Styled Components를 사용하는 방법에 대해 알아보겠습니다. 설치 Visual Studio Code를 사용 시 Styled-Component 자동 완성을 위해 vscode-styled-components 플러그인을 설치합니다. $ npm i styled-components https://styled-components.com/ 사용 예 import styled from 'styled-components'; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: teal; width: 100px; height: 100px; `; const BoxTwo = styled.div` ..

[WPF] ffmpeg을 활용한 동영상 만들기 [내부링크]

FFmpeg Build 다운로드하기 https://ffmpeg.org/download.html#build-windows 사이트에서 Windows EXE Files 항목의 원하는 형식으로 다운로드를 합니다. 다운로드한 후 압축해제 합니다. 프로젝트의 ffmpeg 폴더를 생성 후 실행에 사용되는 exe, dll 파일들을 복사합니다. Bitmap들을 동영상으로 만들기 FFmpegLoader ffmpeg를 사용하기 위해 FFMediaToolkit 패키지를 Nuget을 이용하여 설치합니다. FFmpegLoader를 사용하여 Path를 지정합니다. // 예 FFmpegLoader.FFmpegPath = @".\ffmpeg"; 동영상에 프레임 추가 아래는 예제코드입니다. StartRecordVideo 함수에 저장될 ..

스프링 부트와 AWS로 혼자 구현하는 웹 서비스 [내부링크]

책 정보 책 소개 이 책은 제목 그대로 스프링 부트와 AWS로 웹 서비스를 구현합니다. JPA와 JUnit 테스트, 그레이들, 머스테치, 스프링 시큐리티를 활용한 소셜 로그인 등으로 애플리케이션을 개발하고, 뒤이어 AWS 인프라의 기본 사용법과 AWS EC2와 RDS를 사용해 서비스가 가능하도록 합니다. 이렇게 점진적으로 스프링 부트 프로젝트를 개선해서 배포 자동화하고 무중단 배포까지 경험합니다. 실무 현장에서의 노하우와 테스트 방법, 객체지향 프로그래밍 등을 소개하고 다룹니다. 리뷰 스프링 부트와 AWS로 웹 서비스 구현에 대한 설명이 잘 정리 되어있고, 코드만 따라 해도 완성품을 만들 수 있어 도움이 되었습니다. 다만 스프링 부트와 자바에 대한 경험이 필요합니다. 책의 예제 중에서 시간이 지나면서 안..

[WPF] 이미지 자르기 [내부링크]

사각형, 타원, 삼각형으로 이미지를 자르기 위해 아래처럼 정의합니다. public enum ShapeType { Rectangle, Ellipse, Triangle, } 이미지 자르기 기존 비트맵 이미지에서 주어진 위치과 크기, 도형을 통해 이미지를 자릅니다. public Bitmap CreateCroppedImage(Bitmap image, double left, double top, double width, double height, ShapeType shapeType) { Bitmap result = new Bitmap(image.Width, image.Height); using (Graphics g = Graphics.FromImage(result)) { RectangleF srcRect = ne..

[WPF] 이미지 불러오기 [내부링크]

이미지 로드 이미지 파일 경로를 통해 이미지를 로드합니다. using System.Drawing.Imaging; public Bitmap LoadImage(string path) { using (Bitmap bitmap = new Bitmap(path)) { return bitmap.Clone(new Rectangle(0, 0, bitmap.Width, bitmap.Height), PixelFormat.Format32bppArgb); } } BitmapSource 변환 주어진 비트맵을 WPF 이미징 프레임워크에서 사용 가능한 BitmapSource 형식으로 변환합니다. using System.Drawing.Imaging; using System.Windows; using System.Windows.Med..

[Devexpress] GridControl 자동 번호 매기기 [내부링크]

Devexpress GridControl 의 TableView에서 행이 추가될 때마다 컬럼의 숫자가 자동 증가하도록 구현한 코드입니다. Converter 생성 IValueConverter 인터페이스를 상속받아 IndexFromOneConverter 클래스를 생성합니다. using System; using System.Globalization; using System.Windows.Data; /// /// GridControl의 자동 생성 인덱스를 1 부터로 변환하는 컨버터 /// namespace IVM.Studio.Utils { public class IndexFromOneConverter : IValueConverter { /// /// 자동 증가되도록 1을 더해준다. /// public object..

DEM [내부링크]

Digital Elevation Models 수치표고모형(DEM)은 수치지형 또는 수심측량 데이터에 관한 일반적인 용어로써, 일반적으로 식생과 인공지물을 포함하지 않는 지형만의 높이를 의미하며, 강, 호수의 DEM 높이 값은 수표면을 나타냅니다. DEM은 일반적으로 DTM(Digital Terrain Model)과 비슷한 의미로 사용됩니다. USGS(U.S. Geological Survey)의 정의 : DEM은 보통 높이의 기준면으로부터 측정한 z값을 사용하여 x, y 방향으로 일정한 간격의 지형에 대한 높이 값을 수치지도 형식으로 표현한 것입니다. 이 정의는 NIMA(National Imagery and Mapping Agency)에서 작성한 DTED(Digital Terrain Elevation Da..

CE, LE 계산 [내부링크]

관측값 즉, 지상기준점과 측정점의 차이에 대해 CE 및 LE 결과를 내기 위해 구현을 하게 되었고 참고자료를 바탕으로 정리하였습니다. 소스 코드는 CE, LE 계산 사이트에 있습니다. CE(Circular Error) X, Y 축의 값에 대한 2차원 오차를 측정합니다. 원형오차라고 부르며, CE 50, CE 90, CE 95 등의 형식으로 표현합니다. 예) CE90 5m는 오차들이 실제 값에서 5m 반경 안에 90% 있음을 나타냄. CE 90 계산 관측값 평균이 0일 경우 CE_XX = R * cccc 2x2 공분산 행렬을 계산하고, 공분산 행렬에 대해 고윳값(Eigenvalue) 계산 최소, 최대 고유값에 대해 제곱근으로 cccc, cccc 값을 구함 예) MATLAB은 eig(A) 함수를 사용 r =..

CSM [내부링크]

Community Sensor Model(CSM) NGA(국가지리정보국, National Geospatial Intelligence Agency)에서는 센서 모델을 동일한 방법으로 접근할 필요성에 따라 CSM(Community Sensor Model)을 개발하여 통일된 인터페이스를 제공하였습니다. CSM은 현재 운용되고 있거나 추후 운용이 예상되는 위성 센서의 모델, 알고리즘, 소프트웨어에 대한 개발, 시험, 평가를 지원하는 플러그인 소프트웨어 라이브러리입니다. CSM은 WGS84 타원체의 ECEF(Earth Centered Earth Fixed) 좌표계를 사용하고 있습니다. 따라서 모든 함수에서 지상 좌표의 입력과 출력 값은 ECEF 좌표로 구성해야 합니다. CSM 사용 소프트웨어 ENVI, ERDAS..

개발 시 도움이 될 도구들 [내부링크]

댓글 게시판, 커뮤니티, 블로그 등 콘텐츠 위주의 서비스면 댓글은 필수입니다. 댓글 기능이 메인은 아니지만 필요한 기능 중 하나이며, 구현하기에는 시간도 많이 듭니다. 그래서 다음 서비스들로 대체해서 사용합니다. Disqus Disqus(https://disqus.com/)는 소셜 댓글 서비스입니다. 자바스크립트 코드만 사이트에 등록하면 위젯 형태로 서비스에서 바로 사용이 가능한 댓글 전문 서비스입니다. LiveRe LiveRe(https://www.livere.com/)는 국내에서 만든 소셜 댓글 서비스입니다. 별도의 가입이 필요하지 않고, SNS(카카오톡, 네이버, 페이스북 등) 계정이 있으면 언제든 댓글을 남길 수 있는 편의성이 있습니다. Utterances Utterances(https://rtt..

지리공간자료 정확도 [내부링크]

지리공간자료 정확도의 형태 Spatial (position, geometry, topology) Attributional (correctness of attributes) Spectral (band depth) Temporal (appropriate date) Radiometric (capture piece of electromagnetic spectrum) 지리공간자료 기하보정된 위성영상 정사영상(Orthoimagery) DTM(Digital Terrain Model) DEM(Digital Elevation Model) DSM(Digital Surface Model) TIN(Triangulated Irregular Network) 정확도(Accuracy) 과학, 산업, 공업, 통계학 분야에서 재거나 계..

[CentOS] nohup 사용 방법 [내부링크]

리눅스 환경에서 nohup 사용 방법에 대해 알아보겠습니다. nohup nohup 은 No Hang Ups의 약자로 백그라운드로 지속적으로 실행하는 프로세스를 의미합니다. nohup 은 실행을 현재 사용자 세션이 아닌 운영체제가 제공하는 백그라운드 공간에서 실행을 한다. & 는 사용자 세션에서 실행되며, 화면 출력만 백그라운드로 전환한 상태입니다. 즉 & 로 실행된 프로세스는 사용자 세션이 로그아웃되는 시점에 같이 종료되는 것입니다. 애플리케이션 실행할 때 터미널을 종료해도 애플리케이션은 계속 구동될 수 있도록 nohup 명령어를 사용합니다. 실행 기본 실행 nohup 명령어를 사용하여 실행합니다. nohup 으로 실행시킬 파일은 반드시 755 퍼미션을 가지고 있어야 합니다. $ nohup [실행파일명]..

[CentOS] Hostname 변경 방법 [내부링크]

리눅스에서 Hostname 등록 및 변경하는 방법에 대해 알아보겠습니다. HOSTNAME 등록 각 서버가 어느 서비스 인지 표현하기 위해 HOSTNAME을 변경합니다. 다음 명령어로 편집 파일을 엽니다. $ sudo vim /etc/sysconfig/network 편집 화면에서 HOSTNAME 항목을 본인이 원하는 서비스명으로 추가합니다. NETWORKING=yes HOSTNAME=hgko-webservice NOZEROCONF=yes 변경한 후 서버를 재부팅합니다. $ sudo reboot 재부팅이 끝나고 나서 ssh 명령어를 사용하여 다시 접속해 보면 HOSTNAME이 잘 변경됐는지 확인할 수 있습니다. $ ssh hgko-webservice 다른 HOSTNAME 등록 리눅스 버전에 따라 명령어가 다..

[CentOS] 타임존 변경 [내부링크]

타임존 변경 리눅스 서버 타임존이 UTC인 경우가 있습니다. 이는 세계 표준 시간으로 한국의 시간대가 아닙니다. 한국의 시간과는 9시간 차이가 발생하므로 서버에서 수행되는 애플리케이션에서 생성되는 시간도 모두 9시간씩 차이가 나기 때문에 수정이 필요합니다. 서버의 타임존을 한국 시간(KST)ㅇ으로 변경하겠습니다. $ sudo rm /etc/localtime $ sudo ln -s /usr/share/zoneinfo/Asia/Seoul /etc/localtime 타임존 확인 date 명령어로 타임존이 KST로 변경된 것을 확인 할 수 있습니다. $ date 결과입니다. Fri May 27 08:18:19 KST 2022

[CentOS] Java 8 설치 및 환경변수 설정 방법 [내부링크]

리눅스 환경에서 Java 8 버전 설치 및 환경변수 설정 방법에 대해 알아보겠습니다. JAVA 설치 yum을 이용해서 설치를 합니다. [root@localhost ~]# sudo yum install java-1.8.0-openjdk-devel.x86_64 버전 변경 설치가 완료되었으면 Java 버전을 8로 변경합니다. 다음 명령어를 실행하면 선택 화면이 나옵니다. 선택 화면에서 Java8을 선택합니다(1 입력). [root@localhost ~]# sudo /usr/sbin/alternatives --config java 확인 현재 버전이 Java8로 되었는지 확인합니다. [root@localhost ~]# java -version openjdk version "1.8.0_312" [root@local..

[MyBatis] 동적 쿼리 [내부링크]

검색 조건에 따라 비교하면서 동적 쿼리를 사용하는 방법에 대해 알아보겠습니다. MyBatis와 데이터베이스는 Oracle을 사용하였습니다. 조건문 조건문에는 단일(if), 다중(choose, when, otherwise) 조건문이 있습니다. 단일 조건문 SELECT * FROM TB_SAMPLE WHERE column1 = #{parameter1} AND column2 LIKE %'||#{parameter2}||'%' 다중 조건문 SELECT * FROM TB_SAMPLE WHERE column1 = #{parameter1} AND column2 = #{parameter2} AND column3 = #{parameter3} 비교 형식 for 문 foreach를 사용하여 조건을 만들 수 있습니다. SELE..

[MyBatis] 페이징 처리 [내부링크]

웹 개발 시 페이징 처리는 필수입니다. MyBatis를 사용하여 페이징 처리하는 방법에 대해 알아보겠습니다. 데이터베이스는 Oracle을 사용하였습니다. 기본 페이징 공지사항 조회 시 페이징을 예제로 만들었습니다. Class 생성 공지사항 관련 Class와 페이징을 위한 Class를 생성하였습니다. // Notice.java @Data public class Notice { // 작성사용자ID private String userId; // 작성사용자명 private String userName; // 제목 private String title; // 내용 private String content; // 조회수 private int hit; } // Pagination.java @Data public cl..

[Vue] 설치와 세팅 [내부링크]

Vue 쓰는 이유 Web app(Single Page Application) 만들 때 사용합니다. 코드 작성할 때 방법이 정해져 있습니다. React는 방법이 다양한 방면 Vue는 v-for, v-if, v-else 등 방법이 하나로 정해져 있어 개발 초보에게도 쉽습니다. 물론 Vue 도 React처럼 자유도 높은 개발도 가능합니다. HTML 렌더링이 React 보다 빠르다고 합니다.(크게 영향을 주지 않음) 업데이트가 잘 됩니다. 결론은 React 보다 학습 곡선이 낮아 쉽고, 가볍고 빠르며, 누구나 빨리 배울 수 있어 접근성이 뛰어나 많이 쓰이고 있습니다. 설치하기 Nodejs 설치 Node.js 공식 다운로드 페이지에서 운영체제에 맞게 다운로드하고 설치합니다. 현재 최신 버전은 16.17.1 입니다..

[CentOS] 압축 및 해제 방법 [내부링크]

압축 tar 파일 압축 tar -cvf [파일명.tar] [압축할 파일 또는 폴더명] 예) tar -cvf test.tar test/ tar.gz 파일 압축 tar -zcvf [파일명.tar.gz] [압축할 파일 또는 폴더명] 예) tar -zcvf test.tar.gz test/ 압축 해제 zip 파일 압축 풀기 unzip [파일명] unzip [파일명] -d [폴더경로] 예) unzip test.zip tar 파일 압축 풀기 tar -xvf [파일명.tar] 예) tar -xvf test.tar tar.gz 파일 압축 풀기 tar -zxvf [파일명.tar.gz] 예) tar -zxvf test.tar.gz tar 압축 옵션 옵션 설명 -c tar로 묶기 -v 묶거나 파일을 풀 때 과정을 화면으로 출..

[Go] 설치 및 기본 사용 방법 [내부링크]

서론 노마드 코더 에서 무료인 쉽고 빠른 Go 시작하기 강의 내용을 코딩하며 정리하였습니다. 시작 https://go.dev/ 페이지에서 Go를 다운로드합니다. 다운로드 완료 시 설치파일을 실행하여 설치합니다. 그리고 폴더를 아래와 같이 생성합니다. mkdir github.com/hgko1207 cd github.com/hgko1207 mkdir learngo cd learngo go mod init github.com/hgko1207/learngo 코딩 main.go 는 컴파일을 위한 파일 export 함수를 만들 경우 함수명 맨 앞에 대문자로 작성 function -> func null -> nil 상수와 변수 // Constants const name string = "hgko" // Variabl..

[CentOS] yum을 이용한 rpm 패키지 다운로드 [내부링크]

리눅스 환경에서 yum을 이용한 rpm 패키지 다운로드 방법에 대해 알아보겠습니다. yum-downloadonly 패키지 이용 yum-downloadonly 패키지를 설치합니다. $ yum install yum-downloadonly $ yum install [패키지명] -y --downloadonly --downloaddir=[다운로드 경로] 사용 예제입니다. $ yum install dotnet-sdk-5.0 -y --downloadonly --downloaddir=/home/rpm/download yumdownloader 이용 yumdownloader 명령어가 있는 yum-utils 패키지를 설치합니다. $ yum install yum-utils $ yumdownloader --downloadonl..

알아두면 손해 안보는 사이트 [내부링크]

개발 자바스크립트 https://beautifier.io/ 온라인 JSON Parser http://json.parser.online.fr/ 변수명 짓기 https://www.curioustore.com/#!/ 웹 템플릿 https://semantic-ui.com/ https://themeforest.net/ 마크다운 툴 https://stackedit.io/app# CSS Gradient Generator https://www.colorzilla.com/gradient-editor/ 디자인 컬러 팔레트 https://flatuicolors.com/ 무료 아이콘 모음 https://icons8.com/ https://www.flaticon.com/ 아이콘 변환 https://flat-icon.surge...

Chocolatey 설치 및 사용 방법 [내부링크]

윈도우를 사용하면서 개발 환경을 쉽게 꾸릴 수 있는 Chocolatey(윈도우용 패키지 매니저) 설치와 사용 방법에 대해 알아보겠습니다. 설치 공식 Install 홈페이지를 따라 설치를 진행합니다. 윈도우 7 이상, 윈도우 서버 2003 이상에서 설치가 가능하고 PowerShell에서 명령어로 설치할 수 있습니다. PowerShell 사용 관리자 권한으로 실행해야 합니다. 그렇지 않으면 메세지를 보여줍니다. 다음 설치 명령어를 복사하여 실행하면 설치가 진행됩니다. Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]:..

[JPA] Select Query 사용 방법 [내부링크]

SpringData JPA를 사용하여 웹 프로젝트를 진행하면서 Select Query를 작성 시 잊어버리게 되어 검색을 하게 되는데 자주 사용하는 내용들을 정리하였습니다. JpaRepository를 상속받아 사용하는 기본 Query와 @Query 주석을 사용하여 JPQL 및 네이티브 SQL 쿼리를 실행하는 방법에 대해 알아보겠습니다. Entity 먼저 데이터베이스에 저장하기 위해 tb_user 테이블 이름의 Entity 클래스를 작성합니다. @Entity @Table(name = "tb_user") @Data public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) protected long id; /** 사용자ID */ @C..

[JavaScript] 모달에서 이미지 및 동영상 출력 [내부링크]

서론 [사진 보기], [동영상 보기] 버튼을 클릭 시 모달창이 띄워지면서 사진 또는 동영상이 출력되도록 하는 예제입니다. 사진과 동영상 파일을 images 경로에 저장하여 출력하였고, 실제 구동되는 프로젝트에서는 웹 서버가 실행되는 곳의 특정 경로에 저장하여 URL을 불러와서 출력합니다. html 사진 보기 동영상 보기 사진/동영상 보기 × javascript JQuery를 이용하여 모달창을 생성합니다. // 이미지 출력 모달창 오픈 function openImageModal() { $('#file-viewer').empty(); let img = document.createElement('img'); img.setAttribute('src', 'images/image.jpg'); img.setAttri..

[WPF] Slider Custom Style [내부링크]

WPF 기본 Slider Stlye에서 Thumb을 드래그할 때마다 박스 안에 숫자가 표시되도록 Style을 하였습니다. Slider 모양 Style 추가 App.xaml 에 추가하거나 Resource.xaml 파일을 생성하여 Style 을 추가합니다. Slider Style 적용 아래와 같이 Slider 에 Style을 지정합니다.

[WPF] Prism ViewModelBase 정의 [내부링크]

WPF에서 Prism을 사용하여 ViewModel을 구현할 때 필요에 따라 Container, EventAggregator, RegionManager, Logger 등의 서비스를 사용합니다. 서비스를 각각 ViewModel 에 정의해서 사용하는 것이 아닌 공통으로 작성하여 편리하게 사용할 수 있는 추상 클래스를 작성하였습니다. ViewModelBase Class using Prism.Events; using Prism.Logging; using Prism.Ioc; using Prism.Mvvm; using Unity; namespace Prism.Project.Common.Mvvm { public abstract class ViewModelBase : BindableBase { private string..

[JQuery] Select Box 제어 [내부링크]

JQuery를 이용해서 select를 제어하는 방법에 대해 알아보겠습니다. 선택된 옵션 값 읽기 $('#nameSelect option:selected').val(); $('select[name=name]').val(); 선택된 옵션 이름 읽기 $('#nameSelect option:selected').text(); 옵션 추가하기 $('#nameSelect').append( $('', { value: 1, text: '테스트', }) ); 값이 변경되었을 때 $('#nameSelect').change(function () { const name = $(this).val(); console.log(name); }); 특정한 값 선택하기 $('#nameSelect').val(1).trigger('change..

[Android] Yahoo Weather API를 이용하여 날씨정보 가져오기 [내부링크]

Yahoo Weather API 를 이용하여 현재 위치의 날씨 정보를 조회하는 방법에 대해 알아보겠습니다. 개발 환경 Android Studio Java 설정 build.gradle -> dependencies 추가 implementation 'zh.wang.android:yweathergetter4a:1.3.0' manifest -> permission 추가 코드 작성 Activity 또는 Fragment에 YahooWeatherInfoListener 인터페이스를 implements 하면 gotWeatherInfo 함수를 오버라이딩(Override)을 하게 됩니다. public class WeatherActivity extends Activity implements YahooWeatherInfoList..

[MATLAB] MinGW-W64 수동 설치 [내부링크]

MATLAB에서 개발하고 MATLAB Coder를 사용하여 C 또는 C++ 코드로 변환하려고 하였다. 그런데 MEX 컴파일러를 확인할 수 없다는 에러가 났습니다. MATLAB에서 mex -setup 명령어를 실했더니 아래와 같이 MinGW-w64 C/C++ 컴파일러를 설치해야 한다는 내용이 나왔습니다. >> mex -setup 다음 사용 중 오류가 발생함: mex 사용할 수 있는 컴파일러 또는 SDK를 찾을 수 없습니다. 무료로 제공되는 MinGW-w64 C/C++ 컴파일러를 설치할 수 있습니다. MinGW-w64 컴파일러 설치를 참조하십시오. 더 많은 옵션을 보려면 http://www.mathworks.com/support/compilers/R2016a/win64.html을 참조하십시오. 구글 검색했을..

[C++] 평균, 표준편차 구하기 [내부링크]

평균 및 표준편차 계산 함수 #include // 평균 계산 함수 template double Mean(std::vector array) { double sum = 0.0; for (int i = 0; i < array.size(); i++) sum += array[i]; return sum / array.size(); } // 표준 편차 계산 함수 template double StandardDeviation(std::vector array) { double meanValue = Mean(array); // 배열 요소가 1개밖에 없을 때는 // NaN(숫자가 아님)이라는 의미로 // sqrt(-1.0) 을 반환 int size = array.size(); if (size < 2) { return sqrt..

[JAVA] 날짜 비교 [내부링크]

SimpleDateFormat을 이용한 날짜 비교하는 방법에 대해 알아보겠습니다. 소스코드 import java.text.SimpleDateFormat; import java.util.Date; public class SimpleDateFormatExample { public static long getDayCount( String start, String end ) { SimpleDateFormat format = new SimpleDateFormat( "yyyy-M-d" ); long diff = -1; try { Date dateStart = format.parse( start ); Date dateEnd = format.parse( end ); // time is always 00:00:00 so..

[C++] Is the Point Inside the Polygon? [내부링크]

point-in-polygon (PIP) “In computational geometry, the point-in-polygon (PIP) problem asks whether a given point in the plane lies inside, outside, or on the boundary of a polygon.” Wikipedia. 점이 다각형(Polygon) 내부에 있는지 확인하는 코드입니다. struct Point { int x; int y; }; bool InsidePolygon(int nvert, Point polygon[], int pointx, int pointy) { int i, j = 0; bool inside = false; for (i = 0, j = nvert - 1; i ..

[Oracle] Spatial Data Query [내부링크]

Table CREATE TABLE sample_table ( id NUMBER PRIMARY KEY, name VARCHAR2(20), shape SDO_GEOMETRY ); INSERT SDO_GEOMETRY 컬럼에 넣을 데이터는 타입마다 형식이 다릅니다. Point(점) 타입 SDO_GEOMETRY( 2001, 4326, SDO_POINT_TYPE(126.64,36.86, NULL), NULL, NULL ) Rectangle(직사각형) 타입 SDO_GEOMETRY( 2003, -- 2차원의 폴리곤 4326, NULL, SDO_ELEM_INFO_ARRAY(1,1003,3), -- 1개의 사각형 SDO_ORDINATE_ARRAY(126.63,36.84, 126.65,36.88) -- 사각형을 정의하기 위..

[Oracle] SDO_GEOMETRY 사용 방법 [내부링크]

SDO_GEOMETRY Oracle Spatial 을 사용하여 공간 데이터를 생성하고 관리합니다. Oracle 에는 SDO_GEOMETRY 타입을 통하여 공간 데이터를 구성할 수 있습니다. SDO_GEOMETRY 은 다음과 같이 정의됩니다. CREATE TYPE sdo_geometry AS OBJECT ( SDO_GTYPE NUMBER, SDO_SRID NUMBER, SDO_POINT SDO_POINT_TYPE, SDO_ELEM_INFO SDO_ELEM_INFO_ARRAY, SDO_ORDINATES SDO_ORDINATE_ARRAY ); SDO_GTYPE 00 - UNKNOWN_GEOMETRY 01 - POINT 02 - LINE or CURVE 03 - POLYGON or SURFACE 04 - COL..

[Spring Boot] 환경에 따른 설정 방법 [내부링크]

Spring Boot를 사용하여 웹 프로젝트를 할 때에 환경(개발 또는 배포)에 따라 설정 값들을 달리 할 필요가 있습니다. Spring Boot 에서는 application.properties 파일을 profile로 구분하여 사용할 수 있습니다. profile을 작성하지 않을 경우 default로 application.properties를 사용합니다. application.properties 작성 규칙 profile을 포함한 파일명을 작성합니다. # default application.properties # 배포 환경(prod) application-prod.properties # 개발 환경(dev) application-dev.properties # 테스트 환경(test) application-tes..

[JavaScript] String형 Bytes length 구하기 [내부링크]

UTF-8 인코딩 방식 바이트 길이 구하기 한글 한글자당 3 바이트씩 계산됩니다. // Function const getByteLengthOfString = function(s,b,i,c){ for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1); return b; }; // Test const test = '테스트'; console.log('length : ', getByteLengthOfString(test), 'Bytes'); # 결과 length : 9 Bytes 한글의 경우 2바이트 계산되도록 아래 함수를 통해 한글 문자열의 바이트 수를 2 바이트로 나오게 할 수 있습니다. // Function String.prototype.getBytes = function..

[Spring Boot] Maven 빌드 방법 [내부링크]

STS(Spring Tool Suite)에서 빌드 방법 메뉴 -> Run -> Run Configurations -> Maven Build(우클릭) -> New Configuration 클릭 [Name] 입력 란에 작성 [Base directory] 에서 Workspace 버튼 클릭 빌드하려는 프로젝트 선택 [Goals] 입력 란에 clean install 작성 저장 후 빌드 실행 아래 이미지는 설정 한 내용입니다. Maven 빌드 중에 데이터베이스 연결을 제외하는 방법 Maven Build -> [Goals] 입력 란에 clean install -DskipTests 작성합니다. 또는 pom.xml에 아래 코드를 추가합니다. org.apache.maven.plugins maven-surefire-plug..

[JAVA] String형 Bytes length 구하기 [내부링크]

String 길이 구하기 String test = "테스트"; System.out.println("length : " + test.length()); # 결과 length : 3 바이트 길이 구하기 String test = "테스트"; int length = test.getBytes().length; System.out.println("length : " + length + " Bytes"); # 결과 length : 9 Bytes 기본 인코딩이 UTF-8 설정되어있을 경우 한글은 한글자당 3바이트씩 계산됩니다. 한글 한글자당 2바이트씩 나오게 하려면 아래와 같이 인코딩을 설정하면 됩니다. String charset = "euc-kr"; String test = "테스트"; int length = tes..

[Kubernetes] 명령어들 [내부링크]

명령어들 # 생성 kubectl create -f test.pod.yaml # 중지 및 삭제 kubectl delete pod test --grace-period=0 --force kubectl delete service test # node 정보 확인 kubectl get nodes # pod 확인 kubectl get pods --all-namespaces # 서비스 확인 kubectl get svc # 배포 확인 kubectl get deployments # 상세 정보 확인 kubectl describe pods # 개별 상세 정보 확인 kubectl describe pod

[Docker] 명령어들 [내부링크]

컨테이너 관련 명령어들 명령어 설명 docker ps 실행되고 있는 컨테이너 목록 docker ps -a 전체 컨테이너 목록 docker ps --no-trunc 컨테이너 정보 전체 표시 docker logs [컨테이너명 or ID] 로그 확인 docker exec -i -t [컨테이너명 or ID] /bin/bash 컨테이너 내부 셸 접속 docker rm [컨테이너명 or ID] 컨테이너 삭제 docker rm -f [컨테이너명 or ID] 컨테이너 강제 삭제 docker commit [옵션] [컨테이너명] [이미지명]:[태그] 컨테이너 커밋 # 컨테이너 압축 # export의 경우 컨테이너를 동작하는데 필요한 모든 파일이 압축됨 docker export [컨테이너명 or ID] > [파일명] doc..

[CentOS] Cmake 설치 및 사용 방법 [내부링크]

리눅스 환경에서 Cmake 설치 및 사용 방법에 대해 알아보겠습니다. 다운로드 https://cmake.org/download/ 페이지를 가서 최신 버전을 다운로드합니다. 현재 날짜 기준으로 3.19.3 버전입니다. [hgko@localhost ~]$ sudo su [root@localhost ~]$ cd /usr/local/src [root@localhost src]$ wget http://www.cmake.org/files/v3.19/cmake-3.19.3.tar.gz 다운로드가 완료되면 압축해제를 합니다. [root@localhost src]$ tar -zxvf cmake-3.19.3.tar.gz 설치 /usr/local 경로의 bin 폴더에 설치가 됩니다. [root@localhost src]$ ..

[CentOS] 유용하게 쓰는 명령어들 [내부링크]

유용하게 쓰는 명령어들 명령어 설명 source /etc/profile profile 적용 free -h 메모리 용량 확인 dh -h 디스크 용량 확인 nproc CPU 코어 수 확인 pwd 현재 경로 확인 chmod -R 755 [폴더 or 파일] 사용 권한 변경 chown -R root:root [폴더 or 파일] 소유자와 그룹 변경 ps -ef | grep [프로세스명] 프로세스 확인 rpm -qa | grep [패키지명] 설치된 패키지 확인 kill -9 [프로세스ID] 프로세스 삭제 mv [파일명] [변경할파일명] 파일명 바꾸기 mv [폴더명] [변경할폴더명] 폴더명 바꾸기 pgrep -f [파일명] 프로세스 id만 추출 # 특정 파일 제외하고 삭제 find ./ ! -name '*.h' -ex..

[CentOS] Nginx 설치 및 사용 방법 [내부링크]

리눅스 환경에서 Nginx 설치 및 사용 방법에 대해 알아보겠습니다. Nginx 저장소 추가 yum 저장소에는 nginx 라이브러리가 없기 때문에 저장소를 추가합니다. [hgko@localhost ~]$ sudo vi /etc/yum.repos.d/nginx.repo /etc/yum.repos.d 경로에 nginx.repo 파일을 추가하고 아래와 같이 작성합니다. [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/7/$basearch/ gpgcheck=0 enabled=1 설치 저장소를 추가하였다면 설치를 합니다. [hgko@localhost ~]$ sudo yum install -y nginx 방화벽 포트 개방 웹서버의 8080 포트를 ..

[CentOS] PM2 설치 및 사용 방법 [내부링크]

리눅스 환경에서 PM2 설치 및 사용 방법에 대해서 알아보겠습니다. Node.js는 단일 CPU 코어에서 실행되기 때문에 CPU 개수만큼 멀티코어 시스템을 사용하기 위해 PM2(Process Manager 2)를 설치하고 사용하였습니다. 설치 먼저 npm 이 설치되어 있어야 합니다. 아래 블로그를 참고하여 설치합니다. [CentOS] Node.js 및 NPM 설치 리눅스 환경에서 Node.js 와 NPM 설치하는 방법에 대해 알아보겠습니다. 운영환경 CentOS 7.6 저장소 추가 설치하려는 Node.js 버전을 확인하여 NodeSource yum 저장소를 추가합니다. NodeSource Node.js Binary Distr hgko-dev.tistory.com 설치가 완료되면 다음 명령어를 사용하여 p..

[CentOS] 아파치 톰캣(Tomcat) 설치 및 사용 방법 [내부링크]

리눅스 환경에서 아파치 톰캣 설치 및 사용 방법에 대해 알아보겠습니다. 아파치 톰캣(Tomcat) 이란 아파치 톰캣(Apache Tomcat)은 아파치 소프트웨어 재단에서 개발한 서블릿 컨테이너(또는 웹 컨테이너)만 있는 웹 애플리케이션 서버이다. 톰캣은 웹 서버와 연동하여 실행할 수 있는 자바 환경을 제공하여 자바서버 페이지(JSP)와 자바 서블릿이 실행할 수 있는 환경을 제공하고 있다. 톰캣은 관리툴을 통해 설정을 변경할 수 있지만, XML 파일을 편집하여 설정할 수도 있다. 그리고, 톰캣은 HTTP 서버도 자체 내장하기도 한다. 출처 : 위키백과 다운로드 http://archive.apache.org/dist/tomcat/tomcat-8/ 사이트에서 최신 버전을 확인하고 다운로드합니다. [hgko@..

[CentOS] NFS 설치 및 설정 방법 [내부링크]

리눅스 환경에서 NFS 설치 및 설정 방법에 대해 알아보겠습니다. NFS 란 네트워크 파일 시스템(Network File System, NFS)은 1984년에 썬 마이크로시스템즈가 개발한 프로토콜이다. 클라이언트 컴퓨터의 사용자가 네트워크 상의 파일을 직접 연결된 스토리지에 접근하는 방식과 비슷한 방식으로 접근하도록 도와준다. 다른 수많은 프로토콜과 마찬가지로 ONC RPC 시스템을 기반으로 한다. 네트워크 파일 시스템은 RFC에 정의된 오픈 표준이므로 누구나 구현할 수 있다. 출처 : 위키백과 운영환경 CentOS 7.6 NFS 서버 설정 1) 설치 nfs-utils 패키지가 설치되어있는지 확인하고 없을 시 yum을 사용하여 설치합니다. # 설치 패키지 확인 $ rpm -qa | grep nfs-uti..

[PostgreSQL] TimescaleDB 설치 방법 [내부링크]

TimescaleDB 란 TimescaleDB는 빠른 수집, 복잡한 쿼리를 편리하게 사용하기 위해 설계된 오픈 소스 시계열 데이터베이스입니다. PostgreSQL을 기반으로 하며 자동 파티셔닝과 SQL 지원을 제공합니다. PostgreSQL 보다 10 ~ 100배 빠른 쿼리를 수행하고 시계열에 대해 최적화가 되어 있습니다. 5 ~ 10분 단위로 수집되는 많은 양의 데이터를 데이터베이스에 추가하고 시계열로 관리하며 빠르게 조회하기 위해 TimescaleDB를 사용하였습니다. 운영환경 CentOS 7.6 PostgreSQL 11 설치 PostgreSQL 이 설치되어있어야 합니다. 미설치 시 [PostgreSQL] CentOS 7에서 PostgreSQL 설치 및 시작 을 참고해서 설치합니다. PostgreSQ..

[CentOS] Apache Kafka 설치 및 사용 방법 [내부링크]

아파치 카프카(Apache Kafka)는 아파치 소프트웨어 재단이 스칼라로 개발한 오픈 소스 메시지 브로커 프로젝트이다. 출처 : 위키백과 메시지 큐를 사용하여 동기화 서비스 및 대용량 분산 시스템을 구축하기 위해 Zookeeper 와 함께 Apache Kafka를 사용하는 경우가 있습니다. 리눅스 환경에서 설치 및 사용 방법에 대해 알아보겠습니다. 운영환경 CentOS 7.6 다운로드 및 설치 [root@localhost ~]$ cd /home/test [root@localhost test]$ wget http://apache.mirror.cdnetworks.com/kafka/2.1.0/kafka_2.11-2.3.0.tgz [root@localhost test]$ ln -s kafka_2.11-2.3...

[CentOS] Apache Zookeeper 설치 및 사용 방법 [내부링크]

아파치 주키퍼(Apache ZooKeeper)는 아파치 소프트웨어 재단 프로젝트 중의 한 소프트웨어 프로젝트로서 공개 분산형 구성 서비스, 동기 서비스 및 대용량 분산 시스템을 위한 네이밍 레지스트리를 제공한다. 주키퍼는 하둡의 한 하위 프로젝트이었으나 지금은 독립적인 상위 프로젝트이다. 출처 : 위키백과 위의 설명처럼 메시키 큐를 관리하고 동기 서비스 및 대용량 분산 시스템을 구축하기 위해 Apache Zookeeper 를 사용하는 경우가 있습니다. 이제 설치 및 사용 방법에 대해 알아보겠습니다. 운영환경 CentOS 7.6 Java jdk 설치 먼저 java jdk를 필수로 설치를 합니다. [root@localhost ~]$ yum install java-1.8.0-openjdk.x86_64 prof..

[CentOS] Proxy 서버를 사용한 내부망 yum 사용 방법 [내부링크]

서버가 운영되는 시스템은 인터넷이 안 되는 시스템이 많습니다. 이런 상황에서 yum을 통한 Package 를 설치할 수 없게 되어 관리가 쉽지 않습니다. Proxy 서버를 이용하여 인터넷이 가능한 하나의 서버 시스템을 통해 모든 서버가 인터넷이 가능하도록 구성할 수 있습니다. 운영환경 CentOS 7.6 설치 인터넷이 되는 서버에 squid Package를 설치합니다. $ yum -y install squid 설정 아래와 같이 Proxy 정책을 설정합니다. $ vi /etc/squid/squid.conf ... 생략 ... # Only allow cachemgr access from localhost #http_access allow localhost manager #http_access deny man..

[CentOS] VNC 설치 및 사용 방법(오프라인 환경) [내부링크]

리눅스의 오프라인 환경에서 VNC 설치 및 사용 방법에 대해 알아보겠습니다. 운영환경 CentOS 7.6 Server 설치 다운로드 http://mirror.centos.org/centos/7/os/x86_64/Packages/ 사이트에 접속 후 tigervnc-server-1.8.0-19.el7.x86_64.rpm 파일을 선택하여 다운로드합니다. 다운로드가 완료되면 파일을 리눅스 환경으로 이동시킵니다. 설치 및 설정 # 실행 $ sudo rpm -ivh tigervnc-server-1.8.0-19.el7.x86_64.rpm # 1 입력 시 5901 포트번호로 생성됩니다. $ cp /lib/systemd/system/[email protected] /etc/systemd/system/vncserver@..

[Node.js] 시작 및 구성 방법 [내부링크]

다운로드 및 설치 Node.js 다운로드 사이트에 접속한 후 플랫폼에 맞게 선택을 하여 다운로드합니다. Windows 환경에서 개발하기 위해 Windows Installer (.msi) 64-bit를 다운로드 합니다. 현재 최신 LTS 버전은 v16.17.0 버전입니다. 다운 받은 인스톨러 파일을 실행해서 설치를 진행합니다. 설치가 완료되면 아래 명령어를 입력해서 확인을 합니다. D\> node -v v16.17.0 D\> npm -v 8.15.0 Node.js를 설치하면 자동으로 NPM 이 설치가 됩니다. npm (노드 패키지 매니저/Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다. 출처 :..

[PostgreSQL] Command 명령어 [내부링크]

기본 명령어 PostgreSQL에 접속합니다. $ psql -U postgres 명령어 설명 \list or \l 데이터베이스 목록 조회 \list+ or \l+ 데이터베이스 목록 상세조회 \c [DB Name] 다른 DB에 접속 \d 테이블 목록 보기 \dt [Table Name] 지정된 테이블 컬럼 목록 보기 \dS 시스템 테이블 목록 보기 \dv 뷰 목록 보기 \ds 시퀀스 목록 보기 \du 롤 목록 보기 \dn 스키마 목록 보기 \q psql 종료(Ctrl + d) 백업 및 복원 명령어 설명 pg_dump > [백업파일명] 전체 백업 pg_dump [DB명] > [백업파일명]예) pg_dump mydb > db.sql 데이터베이스만 백업 psql -U postgres [DB명] > [백업파일명] ..

[CentOS] 기본 명령어 [내부링크]

기본 명령어 명령어 설명 ll 해당 디렉토리 파일 목록 보기 ls -al 숨김 파일까지 보기 ls -lt 시간순으로 보기 hostname 호스트명 보기 cat [파일명]예) cat /etc/hosts 파일 내용 출력 vi [파일명]예) vi /etc/hosts 파일 내용 편집 mkdir [폴더명] 폴더 생성 touch [파일명] 파일 생성 rm [파일명] 파일 삭제 rm -f [파일명] 묻지 않고 삭제 rm -rf [폴더명] 폴더 삭제 cp [복사대상] [붙여넣을파일명] 파일 복사 cp -r [복사대상] [붙여넣을폴더명] 폴더 복사 mv [파일] [변경할파일] 파일 또는 폴더 이동 pwd 현재 경로 보기 서비스 명령어 설명 systemctl enable [서비스명] 서비스 등록 systemctl star..

[PostgreSQL] 외부 접속 허용 설정 [내부링크]

외부 접속 허용 설정 사용자 비밀번호 설정 외부에서 접속하기 위해선 우선 postgres 비밀번호를 설정해야 합니다. postgres 계정으로 접속합니다. $ su - postgres psql # 비밀번호 설정 \password postgres # 종료 \q 방화벽 개방 방화벽에서 5432 포트를 개방합니다. $ firewall-cmd --permanent --zone=public --add-port=5432/tcp $ firewall-cmd --reload 설정 파일 변경 postgresql 접속 후 Data 디렉터리 확인을 할 수 있습니다. $ show data_directory; -> /var/lib/pgsql/11/data postgresql.conf 설정 파일을 엽니다. $ vi /var/lib..

[PostgreSQL] CentOS 7에서 PostgreSQL 설치 및 시작 방법 [내부링크]

리눅스 환경에서 PostgreSQL 설치 및 시작 방법에 대해 알아보겠습니다. 운영환경 CentOS 7.6 PostgreSQL 11.9 인터넷이 되는 환경 # Install the repository RPM: $ sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm # PostgreSQL을 설치합니다. $ sudo yum install -y postgresql11-server postgresql11-contrib 인터넷이 안되는 환경 1. RPM 다운로드 외부 환경에서 PostgreSQL Database Server 11 PGDG 페이지에 접..

[WPF] Event Notifier 사용 방법 [내부링크]

컴포넌트 간의 데이터를 주고받을 경우 Prism의 EventAggregator를 사용하면 편리하지만 WPF 만을 사용할 경우 아래 코드와 같이 구성하여 사용하였습니다. Event Manager // EventManager.cs namespace Tool.Event { public class EventManager { public delegate void EventHandler(); event EventHandler event; public void Subscribe(EventHandler handler) { event += handler; } public void UnSubscribe(EventHandler handler) { event -= handler; } public void Publish() {..

[Docker] 주요 명령어 및 기본 사용법 [내부링크]

리눅스 환경에서 Docker 명령어와 기본 사용 방법에 대해 알아보겠습니다. 운영환경 CentOS 7.6 설치 $ yum install docker 설치가 완료되면 버전을 조회하여 설치 확인을 합니다. $ docker -v 컨테이너 생성 및 실행 docker run 명령어는 컨테이너를 생성 및 실행과 동시에 컨테이너 내부로 들어갑니다. 기본 포맷입니다. $ docker run () () () 예시입니다. 가독성을 위해 (역슬래시)를 이용해 각 설정 옵션을 구분합니다. $ docker run -d \ --name hgko.default.local \ --privileged \ -h hgko --network insnet \ -v /data:/data \ -p 5914:5901 \ hgko 간략한 예시입니다..

[MSSQL] Geometry Query [내부링크]

Geometry 데이터 형식 쿼리 STContains STContains(geometry 데이터 형식) geometry 인스턴스에 다른 geometry 인스턴스가 완전히 포함되어 있으면 1을 반환합니다. 그렇지 않으면 0을 반환합니다. DECLARE @g geometry; DECLARE @h geometry; SET @g = geometry::STGeomFromText('POLYGON((-122.358 47.653, -122.348 47.649, -122.348 47.658, -122.358 47.658, -122.358 47.653))', 4326); SET @h = geometry::STGeomFromText('POINT(-122.358 47.656)', 4326); SELECT @g.STContai..

[C++] DLL 동적 로딩 [내부링크]

DLL 동적 로딩 특정 폴더 내에 다수의 DLL 라이브러리 파일들을 로딩하기 위한 코드입니다. Header 파일 // dllload.h #include class DLLLoad { public: DLLLoad() {} ~DLLLoad() {} bool LoadLibrary(); bool FreeLibrary(); private: // DLL 폴더 경로를 설정합니다. const std::string DLL_DIR; // 로딩된 DLL 파일 경로들을 저장하고 관리합니다. std::list fileList; } C++ 파일 // dllload.cpp #include "dllload.h" #include #include const std::string DLLLoad::DLL_DIR = "C:\\dll\\"; D..

[딥러닝] Preprocess 준비 [내부링크]

로컬 데이터를 불러와 전처리시 필요한 내용입니다. Load Packages import os from glob import glob import numpy as np import tensorflow as tf from PIL import Image import matplotlib.pyplot as plt %matplotlib inline # 현재 경로를 알려줍니다. os.getcwd() # 경로를 넣으면 경로의 파일명만 목록 형식으로 보여줍니다. os.listdir() os.listdir('dataset/mnist_png/training/') # 경로가 포함된 모든 파일들을 목록 형식으로 보여줍니다. # 원하는 포맷의 파일만을 가져올 수 있습니다.(png, txt 등) glob('dataset/mnist..

[Web Design] Canvas [내부링크]

HTML 템플릿 회사 홈페이지 및 블로그 형태의 사이트 제작 요청이 있어 디자인 템플릿을 찾아보던 중 심플하기도 하고 이쁜 HTML 템플릿을 찾게 되었습니다. Canvas The Multi-Purpose HTML5 Template Canvas는 Mulit-Page 및 One-Page 사이트를 제공하고 반응형을 지원하는 다목적 HTML5 템플릿입니다. 비즈니스, 의료, SEO, 여행, 건설, 부동산, 요가, 뷰티, 기사, 사진, 뉴스, 대여, 이력서, 블로그, 웨딩, 음악, 앱 쇼케이스, 애완 동물, 스토어 등 120개 이상의 즉시 사용 가능한 홈페이지 템플릿을 제공합니다. 유료 이지만 가격도 저렴해서 가성비가 좋습니다. 빠르게 개발을 해야 하거나 디자인 비용을 절감해야 할 때 사용하면 좋은 사이트를 제작..

[딥러닝] 교육자료 [내부링크]

딥러닝 교육자료 딥러닝을 배우기 위한 강의 사이트와 책을 정리하였습니다. 교육 사이트 프로그래머스 - https://programmers.co.kr/ 에드윗 - https://www.edwith.org/ 입문 강의 파이썬 입문 - https://programmers.co.kr/learn/courses/2 딥러닝 입문(Tensorflow) - https://www.edwith.org/others26 입문 블로그 딥러닝 입문(Keras) - https://tykimos.github.io/lecture/ 딥러닝 책 밑바닥부터 시작하는 딥러닝(기초) DeepLearningBook(심화) 머신러닝 책 핸즈온 머신러닝(심화) PRML(심화)

[PyTorch] Evaluating 및 Predicting [내부링크]

이전 블로그를 이어서 진행을 합니다. Evaluation model.train() 모드로 변한 것 처럼 평가할 때는 model.eval() 으로 설정합니다. # Test mode # batch norm이나 dropout 등을 train mode 변환 model.eval() # Out Net( (conv1): Conv2d(1, 20, kernel_size=(5, 5), stride=(1, 1)) (conv2): Conv2d(20, 50, kernel_size=(5, 5), stride=(1, 1)) (fc1): Linear(in_features=800, out_features=500, bias=True) (fc2): Linear(in_features=500, out_features=10, bias=True..

[PyTorch] Optimizer 및 Training [내부링크]

Optimization & Training https://github.com/pytorch/examples/tree/master/mnist Load Packages import torch import torch.nn as nn import torch.nn.functional as F import torch.optim as optim from torchvision import datasets, transforms import numpy as np no_cuda = False # cuda를 사용할지 안할지 use_cuda = not no_cuda and torch.cuda.is_available() device = torch.device("cuda" if use_cuda else "cpu") => devic..

[PyTorch] 각 Layer별 역할 및 파라미터 [내부링크]

PyTorch Layer 이해하기 Load Packages import torch from torchvision import datasets, transforms import numpy as np import matplotlib.pyplot as plt %matplotlib inline 예제 불러오기 train_loader = torch.utils.data.DataLoader( datasets.MNIST('dataset', train=True, download=True, transform=transforms.Compose([ transforms.ToTensor() ])), batch_size=1) image, label = next(iter(train_loader)) image.shape, label.s..

[PyTorch] 데이터 불러오기 [내부링크]

PyTorch Data Preprocess import torch from torchvision import datasets, transforms Import Error ImportError: cannot import name 'PILLOW_VERSION' from 'PIL' pillow 버전이 7.0.0 이상 일경우 Import 에러 나는 경우가 있습니다. 아래 처럼 pillow 버전을 내려주면 해결이 됩니다. $ pip install pillow==6.2.2 Data Loader 부르기 Pytorch는 DataLoader를 불러 model에 넣습니다. batch_size = 32 train_loader = torch.utils.data.DataLoader( datasets.MNIST('dataset/..

TensorFlow 2.0과 PyTorch 비교 [내부링크]

TensorFlow 2.0 import tensorflow as tf from tensorflow.keras import layers from tensorflow.keras import datasets Hyperparameter batch_size = 64 learning_rate = 0.001 dropout_rate = 0.7 input_shape = (28, 28, 1) num_classes = 10 Preprocess (train_x, train_y), (test_x, test_y) = datasets.mnist.load_data() train_x = train_x[..., tf.newaxis] test_x = test_x[..., tf.newaxis] train_x = train_x / 255. ..

[JQuery] DataTables 사용 방법 [내부링크]

JQuery 용 테이블 라이브러리인 DataTables 플러그인을 사용하여 개발했을 경우 편리하게 사용하기 위해 구조를 설계하였습니다. DataTables는 데이터를 테이블로 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 설치와 사용법은 DataTables 공식 사이트에 잘 설명되어 있기 때문에 생략하겠습니다. 초기 설정 여러 곳에서 DataTables로 작업할 때 유용하도록 초기 기본값으로 설정하였습니다. // table.js $.extend($.fn.dataTable.defaults, { autoWidth: false, dom: ``, language: { emptyTable: '데이터가 없습니다.', infoEmpty: '', info: ' _TOTAL_ 개의 데이터가 있습니다.', search..

[MySQL] Packet for query is too large 에러 발생시 [내부링크]

MySQL을 사용하여 개발 중 4MB가 넘는 파일을 업로드 시 다음과 같은 패킷 에러가 발생하였다. com.mysql.jdbc.PacketTooBigException: Packet for query is too large (9,523,277 > 4,194,304). You can change this value on the server by setting the 'max_allowed_packet' variable 기본적으로 할당된 패킷 사이즈 값이 너무 작기 때문에 에러가 발생했기 때문에 수정이 필요하다. MySQL 설정에서 max_allowed_packet 값을 변경하여 해결하였다. max_allowed_packet은 서버로 질의하거나 받게 되는 패킷의 최대 길이를 나타내는 시스템 변수 다음은 해결방..

[JAVA] 동네예보 조회서비스 API 사용 방법 [내부링크]

동네예보 조회서비스 동네예보 정보를 조회하기 위해 공공데이터 포털 사이트의 동네예보 조회서비스 API 사용 방법에 대해 알아보겠습니다. Open API 활용 방법 동네예보 조회서비스 사이트에서 활용신청을 하고 Service Key를 발급받습니다. 오픈 API 활용 가이드를 다운로드하여 조회 조건 및 결과 데이터를 이해합니다. 동네예보 데이터 조회 http://apis.data.go.kr/1360000/VilageFcstInfoService/getVilageFcst?ServiceKey={발급받은 Service Key}&pageNo=1&numOfRows=10&dataType=JSON&base_date={현재날짜}&base_time={현재시간}&nx={지점 X 좌표값}&ny={지점 Y 좌표값} 결과 데이터(J..

[Eclipse RCP] 폴더안의 파일 리스트 읽기 [내부링크]

SWT의 DirectoryDialog를 이용하여 폴더를 읽고 폴더의 파일들을 읽어서 원하는 List의 형식으로 만듭니다. Shell shell = GUIUtil.getShell(); shell.getDisplay().asyncExec(() -> { DirectoryDialog dialog = new DirectoryDialog(shell); dialog.setMessage("Please select a directory and click OK"); String dir = dialog.open(); if (dir != null) { List mapImages = null; try { mapImages = Files.list(new File(dir).toPath()) .filter(file -> file.t..

[Eclipse RCP] SWT에서의 GC, Drawable, Canvas 사용 [내부링크]

addPaintListener() Control 객체가 그 객체의 paintEvent를 통하여 그림을 그릴 수 있지만, 이보다는 Control 클래스를 상속받아 그래픽 작업을 위해 설계된 특별한 클래스인 Canvas 클래스를 사용하여 그림을 그리는 것이 더욱 좋습니다. Canvas 클래스를 생성한 후 addPaintListener()를 통하여 paintListener를 추가하거나, 사용자가 직접 정의한 Control을 상속받음으로써 그림을 그릴 수 있습니다. Canvas 클래스는 그림을 그릴 때 사용할 수 있는 다양한 종류의 스타일 비트를 가지고 있습니다. SWT.NO_BACKGROUND Canvas의 기본적인 동작은 다음과 같습니다. 객체의 할당영역을 그리기 앞서, 객체에 할당된 전체 영역을 현재 배경..

[JAVA] 농업기상정보 서비스 API 사용 방법 [내부링크]

농업기상정보 서비스 농업 관련 기상 데이터가 필요하게 되어 공공데이터 포털 사이트의 농업기상정보 API를 사용하여 조회하였습니다. Open API 활용 방법 농업기상정보서비스 사이트에 접속합니다. 이용방법에 따라 회원가입 후 Open API 신청을 하고 Service Key를 발급받습니다. 활용 가이드를 다운로드하여 조회 조건 및 결과 데이터를 이해합니다. 농업 기상 데이터 조회 http://weather.rda.go.kr/openapi/realtime_openapi_xml.jsp?mberid={id}&regist_ky={발급받은 Service Key} 결과 데이터(XML 형식) 380959A001 충주시 달천동 2020/07/31 14:50 28.3 29.7 22.5 - - - - - -..

[JAVA] OpenWeather API 사용 방법 [내부링크]

OpenWeather API 200,000 개가 넘는 도시를 포함하여 지구상의 모든 위치에 대한 현재 날씨 데이터에 액세스 할 수 있습니다. 현재 날씨는 글로벌 모델과 4만 개가 넘는 기상 관측소의 데이터를 기반으로 자주 업데이트됩니다. 데이터는 JSON, XML 또는 HTML 형식으로 제공됩니다. 출처 : OpenWeather OpenWeather API를 사용하여 현재 날씨 데이터를 조회하였다. 현재 날씨 데이터 조회 OpenWeather 사이트에 접속해서 API Key를 발급받는다. 메인에서 Current Weather Data를 선택받는다. 조회 조건 및 결과 정보와 다른 기능들에 대해 잘 설명되어 있다. 우리나라 전체에 대한 날씨 데이터를 조회할 것이기 때문에 조회 조건은 다음과 같다. http..

[JAVA] proj4 투형 변환 [내부링크]

투형 변환 TM(미국좌표) 좌표와 WGS84(한국좌표) 좌표를 서로 변환한다. 다운로드 Java Map Projection Library 사이트에 접속하여 다음의 Download에서 소스 및 jar 파일을 다운로드한다. 다운로드한 jar 파일은 프로젝트의 classpath 경로에 추가한다. 샘플 // 투형 정보 입력(중부원점 직각좌표 투형정보) String[] proj4 = new String[] { "+proj=tmerc", "+lat_0=38N", "+lon_0=127.00289027777777777776E", "+ellps=bessel", "+units=m", "+x_0=200000", "+y_0=500000", "+k=1.0" } Projection proj = ProjectionFactory.f..

[JAVA] Julian Date Conversion [내부링크]

율리우스력 변환하기 율리우스력은 고대 로마의 정치가 율리우스 카이사르가 기원전 46년에 제정해 기원전 45년부터 시행한 양력(陽曆) 역법이다. 율리우스력의 1년은 365일 또는 366일(4년에 한번)이다. 기원전 46년 이전까지 고대 로마에서는 태음력을 사용하였으며, 점차 계절의 변화(즉, 태양의 일주)를 고려해 태음력과 태양력을 섞어서 년(年)과 월(月)을 계산하였다. 이에 따라 특히 달을 계산하는 데 적지 않은 혼란과 계산의 착오가 생겼으며, 이러한 착오는 제사장이 임의로 수정하였다. 율리우스 카이사르가 채택한 달력은 태양력을 기준으로 2월을 제외한 달은 모두 30일 또는 31일로 정함으로써 이전에 있던 번거로움을 한꺼번에 해소하였다. 출처 : 위키백과 Joda-Time Library 사용 Strin..

[CSS] 그라데이션 효과 [내부링크]

linear-gradient : CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만들 수 있습니다. linear-gradient( direction, color1, color2, …, color3 ); direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다. ndeg : n 도의 방향으로 그라데이션을 만듭니다. 예시 .gradation_bar { width: 100%; background: linear-gradient(to right, #ff0000, orange..

[PyTorch] 기초 사용법 [내부링크]

Load Packages import numpy as np import torch Basic PyTorch 기초 사용법 nums = torch.arange(9) nums.shape nums.numpy() nums.reshape(3, 3) randoms = torch.rand((3, 3)) zeros = torch.zeros((3, 3)) ones = torch.ones((3, 3)) torch.zeros_like(ones) Operations PyTorch로 수학연산 하기 nums * 3 nums = nums.reshape((3, 3)) nums + nums result = torch.add(nums, 10) result.numpy() # Out array([[10, 11, 12], [13, 14, 15..

[TensorFlow 2.0] Evaluating & Prediction [내부링크]

Load Packages import tensorflow as tf from tensorflow.keras import layers from tensorflow.keras import datasets Build Model input_shape = (28, 28, 1) num_classes = 10 learning_rate = 0.001 inputs = layers.Input(input_shape, dtype=tf.float64) net = layers.Conv2D(32, (3, 3), padding='SAME')(inputs) net = layers.Activation('relu')(net) net = layers.Conv2D(32, (3, 3), padding='SAME')(net) net = laye..

[TensorFlow 2.0] Optimizer 및 Training (Expert) [내부링크]

TensorFlow 공식 홈페이지에서 설명하는 Expert 버전을 사용해봅니다. Load Packages import tensorflow as tf from tensorflow.keras import layers from tensorflow.keras import datasets 학습 과정 돌아보기 Build Model input_shape = (28, 28, 1) num_classes = 10 inputs = layers.Input(input_shape, dtype=tf.float64) net = layers.Conv2D(32, (3, 3), padding='SAME')(inputs) net = layers.Activation('relu')(net) net = layers.Conv2D(32, (3, 3..

[TensorFlow 2.0] Optimizer 및 Training (Keras) [내부링크]

Load Packages import tensorflow as tf from tensorflow.keras import layers from tensorflow.keras import datasets 학습 과정 돌아보기 Prepare MNIST Datset (train_x, train_y), (test_x, test_y) = datasets.mnist.load_data() Build Model inputs = layers.Input((28, 28, 1)) net = layers.Conv2D(32, (3, 3), padding='SAME')(inputs) net = layers.Activation('relu')(net) net = layers.Conv2D(32, (3, 3), padding='SAME')(..

[TensorFlow 2.0] 각 Layer별 역할 및 파라미터 [내부링크]

Load Packages import tensorflow as tf import os import matplotlib.pyplot as plt %matplotlib inline Input Image from tensorflow.keras import datasets (train_x, train_y), (test_x, test_y) = datasets.mnist.load_data() image = train_x[0] # 차원 수 높이기 image = image[tf.newaxis, ..., tf.newaxis] image.shape # Out (1, 28, 28, 1) Feature Extraction Convolution filters: layer에서 나갈 때 몇 개의 filter를 만들 것인지 kern..

[TensorFlow 2.0] 예제 데이터셋 (MNIST) 사용 [내부링크]

Load Packages import numpy as np import matplotlib.pyplot as plt import tensorflow as tf %matplotlib inline 데이터 불러오기 TensorFlow에서 제공해주는 데이터셋(MNIST) 예제 불러오기 입니다. from tensorflow.keras import datasets mnist = datasets.mnist (train_x, train_y), (test_x, test_y) = mnist.load_data() train_x.shape # Out (60000, 28, 28) Image Dataset 들여다보기 불러온 데이터셋에서 이미지 데이터 하나만 뽑아서 시각화합니다. 데이터 하나만 뽑기 image = train_x[0..

[Tensorflow 2.0] 기초 사용법 [내부링크]

Load Packages import numpy as np import tensorflow as tf Tensor 생성 list -> Tensor tf.constant([1, 2, 3]) # Out tuple -> Tensor tf.constant(((1, 2, 3), (1, 2, 3))) # Out Array -> Tensor arr = np.array([1, 2, 3]) tf.constant(arr) # Out Tensor에 담긴 정보 확인 shape 확인 tensor = tf.constant(arr) tensor.shape # Out TensorShape([3]) Data Type 확인 주의: Tensor를 생성 할 때 Data Type을 정해주지 않기 때문에 혼동이 올 수 있습니다. Data Ty..

Tensorflow 2.0과 PyTorch 소개 [내부링크]

TensorFlow 2.0 1.x에 비해 정말 쉬워졌습니다. Numpy Array와 호환이 쉽습니다. TensorBorad, TFLite, TPU 여전히 많은 사용자들이 사용합니다. 상용 목적으로 주로 사용합니다. PyTorch Dynamic Graph & Define by Run 쉽고 빠르며 코드가 간결합니다. 빠르게 성장하고 있습니다. 커뮤니티가 많이 활성화 되고 있습니다. 연구 목적으로 주로 사용합니다. 둘 다 때에 따라 환경에 맞게 사용하면 될 것 같습니다.

[Python] 시각화 기초(이미지) [내부링크]

Load Packages import numpy as np from PIL import Image import matplotlib.pyplot as plt %matplotlib inline 이미지 불러오기 path = 'images/dog.jpg' image_pil = Image.open(path) image = np.array(image_pil) image.shape # Out (300, 400, 3) 이미지 들여다 보기 np.min(image), np.max(image) # Out (0, 255) 그래프로 시각화하기 plt.hist(image.ravel(), 256, [0, 256]) plt.show() 그림 나타내기 plt.imshow(image) plt.show() 이미지 흑백으로 열기 image..

[Python] 시각화 기초(그래프) [내부링크]

Python에서 matplotlib를 사용하여 시각화하는 방법에 대해 알아보겠습니다. Load Packages import numpy as np import matplotlib.pyplot as plt %matplotlib inline Basic Attributes alpha : 투명도 king : 그래프 종류 'line', 'bar', 'barh', 'kde' logy : Y축에 대해 Log scaling use_index : 객체의 색인을 눈금 이름으로 사용할지 여부 rot : 눈금 이름 돌리기 (rotating) 0 ~ 360 xticks, yticks : X, Y축으로 사용할 값 xlim, ylim : X, Y축의 한계 grid : 축의 그리드를 표현할지 여부 subplots : 각 column에..

[Python] Numpy 기초(3) [내부링크]

zeros 0으로 채워진 numpy 배열을 만듭니다. np.zeros([3, 3]) # Out array([[0., 0., 0.], [0., 0., 0.], [0., 0., 0.]]) ones 1로 채워진 numpy 배열을 만듭니다. np.ones([3, 3]) # Out array([[1., 1., 1.], [1., 1., 1.], [1., 1., 1.]]) arange 하나의 값만 입력하면 1씩 증가하는 1차원 배열을 만듭니다. np.arange(10) # Out array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) 두 개의 인자를 넣으면 입력한 값의 범위만큼 배열을 만듭니다. np.arange(4, 9) # Out array([4, 5, 6, 7, 8]) reshape 1차원 배열의 ..

[Python] Numpy 기초(2) [내부링크]

Numpy 기초에 대해 다뤄보겠습니다. Load Package import numpy as np data type 배열의 dtype을 봅니다. arr = np.array([[1, 2, 3], [1, 2, 3]]) arr.dtype # Out dtype('int32') .astype() 으로 datatype을 변환 가능합니다. arr = arr.astype('float32') arr = arr.astype(np.float32) # Out array([[1., 2., 3.], [1., 2., 3.]], dtype=float32) len(arr.shape)를 통해서 차원이 개수를 확인할 수 있지만, 다음과 같이 ndim을 통해 차원 수를 확인합니다. len(arr.shape) arr.ndim # Out 2 R..

[Python] Numpy 기초(1) [내부링크]

Numpy 란 Numpy는 C언어로 구현된 파이썬 라이브러리로써, 고성능의 수치계산을 위해 제작되었습니다. Numerical Python의 줄임말이기도 한 Numpy는 벡터 및 행렬 연산에 있어서 매우 편리한 기능을 제공합니다. 출처: Tigercow.Door Numpy는 고차원적인 데이터를 다루기 쉽게 만들어져 있어 딥러닝을 하게 되면 많이 접하게 됩니다. 이제 Numpy 사용방법에 대해 알아보겠습니다. # Numpy 사용하기 import numpy as np 0차원 numpy array는 1 또는 5, 10와 같이 숫자 데이터를 array화 해줄 수 있습니다. arr = np.array(5); arr.shape # 배열의 형태(크기)를 나타냅니다. # Out () # shape가 아무것도 없는 것으로..

[C++] string을 이용한 File Path 분리 방법 [내부링크]

개요 string 형식의 파일 경로를 이용하여 File Path와 Name을 분리합니다. File Path와 File Name 분리 #include namespace using std; int main() { string pullPath = "c:\\test\\test.tif"; int find = pullPath.rfind("\\") + 1; string filePath = pullPath.substr(0, find); string fileName = pullPath.substr(find, pullPath.length() - find); cout

인공지능 개발준비 - 개발환경 구축(Windows) [내부링크]

인공지능(AI)을 통해 개발을 하기 위해 개발 도구들을 설치합니다. Anaconda 설치 Anaconda는 여러 가지 수학 및 과학 패키지들을 기본적으로 포함하고 있는 Python 배포판입니다. 그래서 머신러닝, 딥러닝, 데이터 분석에서 사용을 하려고 한다면 Anaconda를 통해 설치하는 것이 좋습니다. Anaconda Download 사이트에 접속하여 아래로 내려가 보면 다운로드 화면이 보입니다. 현재 Windows 운영체제에 맞게 선택하여 다운로드를 합니다. 다운로드가 완료되면 설치를 진행합니다. Next 버튼을 클릭하다가 아래 그림처럼 All Users를 선택합니다. 간혹 Windows에서 사용자의 계정을 한글로 만들었을 경우 설치할 때 또는 개발할 때 에러가 날 수 있기 때문에 선택합니다. 아래..

[Git] 이클립스에서 Git Repository 연동 [내부링크]

이클립스와 Git 원격저장소 연동하는 방법과 프로젝트를 내려받는 방법에 대해 알아보도록 하겠습니다. 원격저장소 주소 복사 먼저 github 사이트에서 생성한 저장소의 주소를 복사합니다. 이클립스 실행 이클립스를 실행하고 오른쪽 위에 퍼스펙티브 버튼을 클릭하면 창이 보입니다. Git을 선택하고 [OK] 버튼을 눌러 활성화시킵니다. Git 퍼스펙티브가 추가된 것을 볼 수 있으며 아이콘을 클릭하면 아래 그림처럼 기본화면이 변경됩니다. 원격저장소 연동 Git 퍼스펙티브 화면에서 [Clone a Git repository] 를 클릭합니다. Clone Git Repository 창의 첫 번째 빨간 박스에 앞에서 복사해 둔 Git 원격 저장소 주소를 URI 칸에 복사하면 Host, Repository path 칸에 ..

[MySQL] Query 정리 [내부링크]

SELECT SELECT * FROM 테이블명 SELECT * FROM 테이블명 WHERE 조건 SELECT 필드명1, 필드명2, ... FROM 테이블명 WHERE 조건 INSERT INSERT INTO 테이블명(필드명1, 필드명2, 필드명3, ...) VALUES (데이터값1, 데이터값2, 데이터값3, ...) 또는 INSERT INTO 테이블명 VALUES (데이터값1, 데이터값2, 데이터값3, ...) UPDATE UPDATE 테이블명 SET 필드명1=데이터값1, 필드명2=데이터값2, ... WHERE 필드명=데이터값 DELETE DELETE FROM 테이블명 WHERE 필드명=데이터값 중복 데이터 조회 중복된 것 모두 조회 SELECT 필드명, count(*) FROM 테이블명 GROUP BY ..

Clean Code [내부링크]

책 정보 책 소개 애자일 소프트웨어의 혁명적인 패러다임을 제시하는 책이다. 저자 로버트 마틴은 오브젝트 멘토(Object Mentor)의 동료들과 힘을 모아 ‘개발하며’ 클린 코드를 만드는 최상의 애자일 기법을 정제하여『Clean Code 클린 코드』에 담았다. 아주 많은 코드를 읽고 그 코드의 무엇이 옳은지, 그른지 생각하며 전문가로서 자신이 지니는 가치를 돌아보기 위해 꾸준히 노력한다면, 이 책을 통해 여러분의 프로그래밍 실력은 한층 더 높아질 것이다. 리뷰 전부 다 읽어보진 못하였지만 읽다 보면 얼마나 잘못하고 있었는지 반성하게 됩니다. 의미 있는 이름, 좋은 주석 다는 법, 객체와 자료 구조 등 어떻게 깨끗하고 아름다운 코드를 작성할 수 있는지 알려줍니다. 잘못된 점과 좋은 점을 짚어주기 때문에 ..

[Android Studio] 설치 및 주요 기능 정리 [내부링크]

1. Android Studio 다운로드 및 설치 아래 경로에서 최신 버전의 Android Studio를 다운로드하여 설치합니다. 현재 최신은 3.6.3 버전입니다. 설치를 완료하고 다음 화면이 오픈되면 이제 개발을 시작할 수 있습니다. 2. 프로젝트 생성 Start a new Android Studio Project 선택 Slelect a Project Templat Empty Activity 선택 Configure Your Project Name: HelloApp Package: com.hgko.helloapp Language: Java or Kotlin Minimum SDK: API 26: Android 8.0(Oreo) Finish 버튼 클릭하면 아래처럼 프로젝트가 생성됩니다. 3. 실행 1) 스..

[Android Studio] lombok 사용 방법 [내부링크]

자바에서 코드를 작성 시 모델을 만들다 보면 constructor와 기본 getter/setter 그리고 상황에 따라서 builder를 만들어 사용해야 합니다. 그런데 이런 일들을 모두 타이핑 하다 보니 보일러플레이트 같은 코드들이 많이도 써야 합니다. lombok를 사용하면 모델 객체들의 불필요한 보일러플레이트 코드들을 줄일 수 있습니다. annotation 방법으로 사용하기 때문에 사용 방법도 간단합니다. lombok annotation @Getter / @Setter 기본적으로 멤버 필드들에 대한 getter/setter 메서드들을 만들어 줍니다. @AllArgsConstructor / @NoArgsConstructor 멤버필드들이 모두 파라미터로 지정된 생성자와 빈 생성자를 만들어 줍니다. @Bu..

[Openlayers] getGetFeatureInfoUrl 함수 사용 [내부링크]

Geoserver에서 필요한 정보를 가져오기 위해 OpenLayers의 getGetFeatureInfoUrl 함수를 사용하였습니다. feature의 정보 중에 GRAY_INDEX 라는 컬럼의 정보를 가져와야 합니다. 아래 방식으로 image 형태인 layer 를 구성하였습니다. var wmsLayer = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/img/wms', params: { FORMAT: 'image/png', VERSION: '1.1.1', STYLES: '', }, }), }); getGetFeatureInfoUrl 함수를 사용하여 feature 정보를 불..

리팩토링 [내부링크]

책 정보 책 소개 코드 품질을 개선하는 객체지향 사고법을 정리한 참고서 프로그램이 돌아가기면 하면 객체지향인가? 객체지향이라는 도구를 제대로 활용하지 못하고 마구잡이로 작성한 코드에는 악취가 진동한다. 리팩토링은 코드의 동작이나 의도는 유지하면서 코드의 구조, 재사용성, 가독성을 개선해 코드의 악취를 제거하고 전체 디자인을 개선하는 방법이다. 독자는 72가지 리팩토링 기법을 통해 코드를 점진적으로 개선하는 방법을 학습할 수 있으며, 이 책을 마쳤을 때는 객체지향 프로그래밍 능력이 한 단계 향상될 것이다. 객체지향 언어의 문법을 익혔다고 저절로 객체지향 프로그래밍을 할 수 있는 게 아니다. 리팩토링 카탈로그를 통해 어떤 코드를 고쳐야 하는지, 왜 고쳐야 하는지, 고친 코드가 왜 좋은지 이해할 수 있다. 이..

[Cesium] 개발 팁 [내부링크]

영상 레이어 추가 Geoserver에 추가된 영상 레이어를 Cesium 지도에 표출하는 코드입니다. layers 에는 Geoserver에 있는 레이어의 이름을 넣으면 됩니다. let imageryLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapServiceImageryProvider({ url: 'http://localhost:8080/geoserver/img/wms', layers: 'img:GCOMW1_L2_SMC_20120703', parameters: { service: 'WMS', version: '1.1.0', request: 'GetMap', styles: '', srs: 'EPSG:4326', format: 'image/..

[Eclipse RCP] 개발 팁 [내부링크]

RCP 배포 시 필수사항 build.properties 에 javacDefaultEncoding..=UTF-8 추가하기 추가하지 않을 시 한글이 깨지거나 다른 클래스를 참조할 수 없는 문제로 인해 배포된 프로그램이 실행이 되지 않을 수 있습니다. Spring Bean 사용 방법 RCP에서 Spring 빈 생성 방법 서비스 인터페이스 설정 파일의 Runtime에 관련 라이브러리 Export 합니다. String : core, beans, cglib, scheduling Log : slf4f, logback 빈 설정 정보를 담고 있는 클래스 인 AppConfig를 생성하고, AppConfig 클래스에 서비스 빈등록을 하고, SpringBeanFinder 클래스를 생성하여, 애플리케이션 컨텍스트를 로딩하고, ..

개발자의 성장 [내부링크]

회사에서 성장하기 업무를 소비하지 말자 그냥 시키는 것을 그냥 하던 대로 그냥 빨리 해치워 버려야 한다는 생각으로 그냥 일단 돌아가면 되도록 그냥 개발을 하는 것 그냥 아무 생각 없이 누군지는 해주겠지(위험) 이렇게 업무를 개발을 하지 말자 책임감을 가지고 하자 질문을 잘하자 배울 점이 많은 동료가 있는 것은 정말 큰 메리트 하지만 이것을 활용하지 못한다면 아무 의미 없음 회사의 업무는 혼자 하는 것이 아님 이 점을 최대한 활용 질문하는 법 충분한 구글링(검색)을 먼저 하자 사전 준비(질문 정리) 현재 발생한 상황 정리 자신의 시도들을 정리 최종적으로 Yes / No로 대답할 수 있도록 정리 그럴 수 없다면 자신의 결론에 대한 의견을 답할 수 있도록 정리 자신의 수준을 아는 사람에게 질문하자(중요) 문서..

자바 ORM 표준 JPA 프로그래밍 [내부링크]

책 정보 책 소개 자바 ORM 표준 JPA는 SQL 작성 없이 객체를 데이터베이스에 직접 저장할 수 있게 도와주고, 객체와 관계형 데이터베이스의 차이도 중간에서 해결해 줍니다. 이 책은 JPA 기초 이론과 핵심 원리, 그리고 실무에 필요한 성능 최적화 방법까지 JPA에 대한 모든 것을 다룹니다. 또한, 스프링 프레임워크와 JPA를 함께 사용하는 방법을 설명하고, 스프링 데이터 JPA, QueryDSL 같은 혁신적인 오픈 소스를 활용해서 자바 웹 애플리케이션을 효과적으로 개발하는 방법을 다룹니다. 리뷰 스프링 프레임워크로 웹 개발할 때 JPA를 사용하기 전에는 MyBatis를 많이 사용하였습니다. JPA를 알고 난 후 책을 바로 구매하여 공부를 시작하게 되었습니다. 4년 전에 구매한 책이지만 지금까지도 가..

[React] UI 추천 [내부링크]

React로 개발 시 기본적인 디자인을 적용하기 위해 고민이 많이 됩니다. 유료 템플릿 프로젝트를 구매해서 사용할 수 있지만 매번 사는 게 부담이기 때문에 디자인을 하기 무척 힘듭니다. 그래서 검색하던 중에 편리하게 디자인 할 수 있도록 지원해 주는 것들을 몇 가지 찾을 수 있었습니다. Ant Design 리액트와 타입스크립트(Typescript) 기반으로 제작된 UI 라이브러리 중국 회사에서 오픈소스화한 라이브러리 코드가 리액트 기반이기 때문에 사용하기 편리함 앤트 디자인의 10가지 디자인 원칙 Proximity (근접성) Alignment (정렬) Contrast (대조) Repetition (반복) Make it Direct (직관적으로 만들어라) Stay on the Page (화면에 머물러라) ..

PROJ.4 란? [내부링크]

다양한 좌표계 변환을 제공하는 라이브러리 자유롭게 인자를 지정하여 표준이 아닌 좌표계 간도 변환 가능 USGS의 Gerald Evenden에 의해 만들어진 오픈소스 라이브러리 현재 OSGeo 프로젝트 중 하나이며 MIT 라이선스 GeoServer, OpenLayers, PostGIS, QGIS, GDAL, OGR, GeoTools 등 엄청나게 많은 프로그램에서 사용 중 C, C++, JAVA, Javascript 등 다양한 언어로 포팅 되어 있음 경위도 좌표계(WGS84) GPS가 사용하는 좌표계 EPSG:4326 +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs https://epsg.io/4326 구글 좌표계(Mercator) EPSG:3857, EPSG:9009..

Gdal 사용 방법 [내부링크]

GDAL 은 래스터 및 벡터 지리 공간 데이터를 조작할 수 있는 오픈 소스 라이브러리입니다. 라이브러리로서 지원되는 모든 형식의 호출 응용 프로그램에 단일 추상 데이터 모델을 제공합니다. 데이터 변환 및 처리를 위한 다양한 명령 행 인터페이스 유틸리티가 제공됩니다. Windows, Linux 및 MacOS 에서 사용가능합니다. gdalinfo (http://www.gdal.org/gdalinfo.html) GDAL 이 지원하는 영상 정보를 확인합니다. gdalinfo test.tif gdal_translate (http://www.gdal.org/gdal_translate.html) 다른 형식으로 래스터 데이터를 변환합니다. 영상 resize 및 포멧 변경 gdal_translate -of GTiff -..

Spring AOP [내부링크]

AOP(Aspect Oriented Programming)는 공통관심사항을 분리하여 반복되는 부분을 추출해 핵심 로직에 영향을 미치지 않고 소스의 중복을 줄이는 방법으로 기존 OOP(Object-Oriented Programming)에서 공통관심사항을 여러 모듈에서 적용하며 발생하는 중복된 코드 양산의 한계를 극복하기 위해 나오게 되었습니다. Spring AOP의 장점 예를 들어 어떠한 홈페이지에 로그인 처리를 해야 할 때 AOP를 사용하지 않는다면 모든 페이지마다 로그인 상태인지 확인하는 소스코드를 넣어야 할 테고 혹시나 그 로직이 변경되게 된다면 또 그 모든 페이지의 소스를 수정해야 하는 일이 생길 것입니다. 하지만 AOP를 적용한다면 단 하나의 로그인 로직만 바꿔도 모든 소스에 적용시킬 수 있는 장..

[java] Geocoder을 이용해 주소를 위도/경도로 변환하기 [내부링크]

Geocoding 이란 주소를 위도, 경도로 변환해 주는 Google에서 제공하는 API입니다. 링크 : 지오코딩이란? 처음엔 HttpURLConnection 으로 접속해서 InputStreamReader 로 읽은 후 JSON으로 파싱 하게 만들었는데 해외 사이트에 geocoder 라이브러리를 이용하여 받아오는 예제가 있었다. 어쨌든 더 편리하고 깔끔하게 해결되었습니다. Geocoder Maven dependency com.google.code.geocoder-java geocoder-java 0.16 Method public static Float[] findGeoPoint(String location) { if (location == null) return null; // setAddress : 변환..

com, net, co.kr의 차이는? [내부링크]

사용 com(company) : 회사의 도메인에 씁니다. net(network) : 네트워크를 관리하는 기관의 도메인에 씁니다. co.kr(company korea) : 회사의 도메인에 씁니다.(한국) 인터넷이 미국에서 시작했기 때문에 도메인도 미국이 먼저 선점했습니다. 그래서 다른 국가들은 .kr 처럼 국가고유 도메인을 추가하여 쓰게 되었습니다. 일본은 jp, 영국은 uk, 중국은 cn 등이 다 그런 것입니다. 원래의 의미는 co.kr, com : 영리목적으로 설립된 회사의 홈페이지를 나타내는 말 or.kr, org : 비영리기구 ne.kr, net : 네트워크 관련 회사, 혹은 통신 관련 회사를 나타내는 말 하지만 or,org 를 제외하고는 모두 동일한 의미를 나타낸다고 보면 됩니다.

React Study(2) [내부링크]

Project Setup Requirements 먼저 Node.js가 설치되어 있어야 합니다. Node.js 공식 다운로드 페이지(https://nodejs.org/ko/download/)에서 Window Installer를 다운로드하고 설치합니다. $ node -v $ npm -v 에디터로는 MS에서 제공하는 Visual Studio Code(VS Code)를 사용합니다. vscode는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension을 이용한 확장 기능을 제공하고 있습니다. 설치방법은 https://code.visualstudio.com/ 에 접속하여 다운로드 후 설치하면 됩니다. React 개발에 좋은 Extension는 ESLint..

React Study(1) [내부링크]

최근 React를 다시 공부하게 되면서 올해 초에 회사에서 세미나를 하게 되었습니다. 물론 기초이지만 React에 관심을 다시 가지게 되는 계기가 되었습니다. React란? React는 페이스북에서 제공해 주는 프런트엔드 라이브러리입니다. 사용자 인터페이스(User Interface)에 집중하며, Virtual DOM을 통해 속도와 편의를 높이고, 단방향 데이터 플로우를 지원하여 보일러플레이트 코드를 감소 시켜줍니다. React는 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발할 때 사용할 수 있습니다. 특징 컴포넌트 기반 아키텍처 템플릿 언어가 아닌 자바스크립트로 컴포넌트 작성 특정 관심사에 집중된 기능 블록 (관심사의 분리) One Way Data flow(단방향 데이터 흐름 지향) ..

[Git] 커맨드 명령어 [내부링크]

설정 확인 $ git config --list 계정 확인 $ git config user.name $ git config user.email 계정 변경 $ git config --global user.name "user name" $ git config --global user.email "user email" Git Create $ git init $ git add README.md $ git commit -m "first commit" $ git remote add origin https://github.com/username/repositoryName $ git push -u origin master 현재 master 브랜치를 push 할 때 origin의 master 브랜치로 푸시하는 명령어입니다..

[WPF] Prism Library 사용 방법 [내부링크]

최근 WPF 기반으로 응용 애플리케이션을 개발하고 있습니다. C#을 처음 하는 거라 처음에는 익숙하지 않았지만 자바와 비슷한 면이 많아 금방 적응하였습니다. WPF 개발을 하는데 Prism Library를 적용하였습니다. Prism은 WPF를 통해 풍부하고 유연하고 유지보수가 쉬운 설계를 할 수 있게 도와준다고 합니다. 그리고 MVVM 패턴, Dependency Inejction, CompositeView, Event Aggregator들을 이용하여 독립적인 컴포넌트들 간의 느슨한 결합들을 이용한 설계 중심의 애플리케이션 제작에도 도움을 준다고 합니다. 즉, WPF 어플리케이션을 만들 시 MVVM 디자인 패턴으로 개발하고 이에 추가적으로 Prism이 제공하는 CompositeView 제작방식과 Event..

Node.js 교과서 [내부링크]

책 정보 책 소개 노드의 기본부터 실무까지, 전 과정을 한 권에 담았다! 다양한 서비스를 직접 만드는, 실무에 가장 가까운 강의! Node.js 10 + 자바스크립트 ES2018, 최신 문법으로 배우자. 서버와 데이터베이스 개념을 시작으로 노드의 기본 개념을 차근차근 설명해 나간다. 군더더기 없는 직관적인 설명, 풍부한 그림으로 기본 개념을 확실히 이해하고, 노드의 기능과 생태계를 사용해 보며 실제로 동작하는 서버를 만들어보자. 웹 서버, 웹 API 서버, SNS 서비스, 실시간 GIF 채팅방, 경매 시스템, 위치 기반 장소 검색 서비스, 커맨드라인 인터페이스를 모두 만들어 볼 수 있다. 실무에 당장 적용할 수 있고, 참고할 수 있는 예제와 코드를 최신 문법으로 다뤄보자. 리뷰 최근 Node.js에 관심..

[JavaScript] 우편번호 주소 조회 [내부링크]

웹 프로젝트를 하면서 사용자 등록을 하게 될 때 주소를 입력을 하게 되는데, 우편번호 주소 조회가 되도록 처리해 달라는 요청이 있었습니다. 그래서 우편번호 서비스를 검색해 봤을 때 여러 가지가 있었지만 개인적으로 좋아 보이는 Daum 우편번호 서비스를 사용하게 되었습니다. Daum 우편번호 서비스 쉽고 간편하게 우편번호 검색, 도로명 주소 입력 기능을 만들 수 있습니다. Key를 발급받을 필요가 없습니다. 사용량에 대한 제한이 전혀 없습니다. 기업용이든 상업적 용도이든 상관없이 무조건 무료로 사용 가능합니다. 도로명 주소, 지번 주소, 영문 주소까지 모두 확인 가능합니다. 이 것 말고도 여러 가지 장점이 더 있지만 사용하기 쉽고 무료이며 사용량에 대한 제한이 없고, 특히나 기본 사용법이 정말 쉽게 잘 설..

[JavaScript] 전화번호 하이픈(-) 자동입력 [내부링크]

사용자 등록 시 전화번호를 입력하게 되는데 아래 그림처럼 세 개의 입력을 받아 합치는 형식으로 많이 되어 있습니다. 이렇게 개발해도 괜찮지만 좀 더 쉽게 하기 위해서 전화번호 입력 시 자동으로 하이픈(-)이 입력되도록 하는 형식으로 바꾸면 좋겠다 싶어 반영해 봤습니다. 개발된 화면은 다음과 같습니다. HTML 먼저 HTML 소스 코드입니다. input 태그를 사용하고 pattern과 maxlength, required, placeholder를 사용하였습니다. 속성에 대한 설명은 참고 사이트를 보시면 됩니다. JavaScript 먼저 전화번호 크기에 따라 나눴습니다. 서울 전화번호는 02로 두 자리로 시작하고 핸드폰은 010, 011..이고 다른 지역 전화번호는 031, 041, 051 등 세 자리로 시작..

[Git] 이클립스에서 Git 사용법 [내부링크]

기존에는 사내에서 개발할 때 SVN으로 형상관리를 하였는데, 이번에 개인 공부도 하고 프로젝트로 만들다 보니 GitHub를 사용하게 되었습니다. GitHub는 원격 저장소를 제공하며 여러 가지 프로젝트 진행을 원활하게 하는 도구를 함께 제공하는 이점이 있어서 사용하였습니다. 스프링 프레임워크 기반 웹 프로젝트를 이클립스로 개발하고 있어 이클립스와 GitHub를 연동하였습니다. 이제 연동 방법을 설명합니다. 1. 원격 저장소 생성 먼저 공식 사이트인 https://github.com/ 에서 회원가입을 합니다. 회원가입 후 로그인을 하고 "Start a project" 버튼을 클릭합니다. 아래 그림처럼 화면이 나옵니다. 원격 저장소 이름을 입력하고 다른 것은 수정하지 말고 "Create repository"..

[React Native] 시작하기 [내부링크]

React Native 란 리액트는 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술입니다. 리액트 네이티브는 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트입니다. 기존의 하이브리드 앱은 WebView에 화면을 만들어 놓고 모바일 앱에서 접근하는 것이었기 때문에 퍼포먼스가 떨어지고, 모바일 앱과의 괴리감이 있었습니다. 리액트 네이티브는 실제 네이티브 UI를 사용하여 모바일 앱을 구현합니다. 퍼포먼스는 올라가고 괴리감도 사라지게 됩니다. 리액트 네이티브를 사용하면 JavaScript를 사용하여 모바일 앱을 제작할 수 있습니다. 리액트와 동일한 디자인을 사용하여 선언적 구성 요소에서 풍부한 모바일 UI를 구성할 수 있습니다. 장점 높은 생산성 리액트를 사용하여 개발해 보신분이라면 처음부터..

[React Native] Expo 사용 방법 [내부링크]

Expo 리액트 네이티브는 리액트 아키텍처를 모바일에 적용한 것으로, ES6 문법과 리액트를 이용해 모바일 애플리케이션을 개발할 수 있도록 해주는 프레임워크입니다. 리액트 네이티브 프로젝트 생성 시 react-native init 을 입력하여 사용하였습니다. 이것만으로도 충분하다고 느껴졌는데 다른 강좌를 보던 중에 Expo 툴을 발견하게 되었습니다. Expo는 리액트 네이티브 애플리케이션의 빌드를 돕는 툴입니다. 네이티브 API에 접근하는 것도 쉽게 만들어주고, 안드로이드와 iOS 버전을 알아서 빌드해 줍니다. 무엇보다 코드를 수정하면 바로 hot reloading 시켜주는 것이 가장 편합니다. 작년 12월 쯤에 리액트 네이티브를 알게 되고 최근에 Expo도 접하게 되면서 찾던 중 처음에는 Expo Xd..

WPF MVVM 일주일 만에 배우기 [내부링크]

책 정보 책 소개 필자의 십 수년간의 강의 경험을 최적화하여 집필한 가장 얇은 WPF 개발 서적으로 군더더기 없이 WPF를 빨리 배울 수 있다. 간단한 연습 과제와 따라 하기 방식의 해당 풀이를 통해 컨트롤 및 레이아웃, 데이터 바인딩 등의 WPF 기본 사항들을 익히고 최종적으로는 MVVM 패턴을 사용한 WPF 응용 프로그램 예제를 만들어 본다. 한국어판에서는 좀 더 쉽게 이해할 수 있도록 스크린샷과 설명을 추가했다. 짧은 시간 내에 WPF 및 MVVM 패턴에 대한 내용을 익히고 실제 프로젝트에 적용하고자 한다면 WPF 개발 서적이 몇 없는 국내 현실에서 단비와 같은 이 책 한 권으로 의도한 바를 이룰 수 있을 것이다. 리뷰 WPF 기반 프로젝트를 하기 전에 WPF에 대한 기본 개념을 잡기 위해 구매한 ..

[React] 설치 및 설정 방법 [내부링크]

React 설치 및 설정 방법에 대해 알아보겠다. 리액트란 React는 사용자 인터페이스를 만들기 위해 페이스북과 인스타그램에서 개발한 오픈소스 자바스크립트 라이브러리로써, 사용자 인터페이스(User Interface)에 집중하며, Virtual DOM을 통해 속도와 편의를 높이고, 단방향 데이터플로우를 지원하여 보일러플레이트 코드를 감소시켜, 많은 사람들이 React를 MVC의 V를 고려하여 선택한다. 즉, React는 지속해서 데이터가 변하는 대규모 어플리케이션의 구축이라는 하나의 문제를 풀기 위해서 만들어졌다. 아래는 React에서 장점들이다. 단순함 : 당신의 어플리케이션이 어떤 주어진 시점에 어떻게 보여야 할지를 단순하게 표현함으로써, React는 그 데이터들이 변할 때, 자동적으로 모든 UI ..

[React Native] Live Reload [내부링크]

Live Reload 리액트 네이티브 기반으로 안드로이드 앱 개발을 할 때 자동으로 리로드 되게 하려면 어떻게 해야 할까. 리액트 기반으로 웹 개발을 할 때에는 코드를 수정 시 자동으로 리로드 되었는데 리액트 네이티브로 개발할 때에 자동으로 되지 않아 검색하던 중 아래 내용처럼 옵션 설정을 하니까 잘 동작하였다. 명령 프롬프트에서 다음을 입력하여 장치 또는 에뮬레이터에서 앱을 설치하고 실행한다. $ react-native run-android 에뮬레이터를 클릭하고 CTRL + M ( MacOS의 경우 CMD + M )을 누르거나 실행 중인 응용 프로그램이 있는 Android 장치를 흔들면 된다. 팝업 메뉴에서 Enable Live Reload 옵션을 선택한다.

[JPA] Annotation 정리 [내부링크]

JPA(Hibernate) Annotation 정리 JPA로 개발하면서 자주 사용하는 어노테이션을 정리하였다. @Entity 해당 클래스가 엔티티임을 알리기 위해 사용한다. 애플리케이션이 실행이 될 때 엔티티 자동검색을 통하여 이 어노테이션이 선언된 클래스들은 엔티티 빈으로 등록한다. @Table 데이터의 저장소, 테이블을 의미한다. name 값은 실제 데이터베이스의 테이블 명을 의미하며, 생략이 가능하다. 어노테이션을 생략하면 클래스의 이름을 테이블의 이름으로 자동 인식하게 된다. @Id 엔티티빈의 기본키를 의미한다. 이 어노테이션은 하나의 엔티티에는 반드시 하나가 존재해야 한다. 복수키도 설정할 수 있다. @GeneratedValue 데이터베이스에 의해 자동으로 생성된 값이라는 의미다. 즉, 프로그램..

이클립스 플러그인 추가 [내부링크]

Eclipse Piug-in 추가 Eclipse에 플러그인을 추가하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 플러그인을 직접 복사해서 설치하는 방법이고, 두 번째 방법은 Eclipse에서 제공하는 Software Update Manager를 활용하는 방법이다. 직접 복사하는 방법 설치하고자 하는 플러그인을 Eclipse_home/plugin 디렉터리에 복사한 다음 Eclipse를 재시작하면 새롭게 설치된 Eclipse 플러그인 기능을 활용할 수 있다. Software Update Manager를 활용하는 방법 Eclipse에서 제공하는 Software Update Manager 기능은 플러그인을 개발한 곳에서 이 기능을 사용할 수 있도록 지원하지 않으면 사용할 수 없다. Eclipse에서 Help..

[JavaScript] Chart 라이브러리 정리 [내부링크]

웹 개발을 하면서 사용해 본 Chart를 정리하였다. 무료인 것도 있고 조건부 무료인 차트도 있다. 대부분 사용하기에 편리하여 적용하기도 쉽고 심플하고 이쁜 디자인도 많고 예제와 설명이 잘 되어있어 좋았다. AmCharts 링크 : https://www.amcharts.com/ 예제 : http://www.amcharts.com/demos/ 유료 라이선스 이지만 조건부 무료이다. 사용해 본 라이브러리 중에 기능이 엄청 많고 디자인이 제일 깔끔하다. 라이선스 비용은 개인이 사용하기에는 부담이 될 수 있지만, 차트에 개발사 링크가 출력되는 조건만 지키면 무료로 사용 가능하다. HighCharts 링크 : https://www.highcharts.com/ amCharts와 같이 조건부 무료입니다. Angul..

도메인이란 [내부링크]

도메인 이름은 '인터넷에 연결된 컴퓨터들에 부여되는 교유의 문자 주소' 정도라고 보시면 됩니다. 영어로는 DNS(Domain Name System)라고 합니다. 인터넷에 연결되어 있는 컴퓨터에 접속하려면 IP 주소(Internet Protocol Address)를 알아야 합니다. 그런데 IP 주소는 기억하기가 힘듭니다. 매우 불편합니다. 그래서 쉽게 사이트의 주소를 기억하고 여기서 좀 더 나아가서 사이트의 특성을 파악할 수 있도록 고안된 것이 바로 '도메인 이름'입니다. 도메인은 각 컴퓨터 고유의 IP주소에 대응되는 문자로 된 인터넷 주소입니다. EX) 구글(google) 사이트 예 입니다. google . co . kr => 소속기관이름 . 소속기관 분류 . 소속국가 도메인은 크게 3단계로 구분됩니다...

[Cesium] 초기 설정 [내부링크]

GIS 관련 프로젝트를 하다 보니 오픈소스인 CesiumJS 나 Openlayers 라이브러리를 사용하게 되었다. 최근에는 2D, 3D 모드가 가능한 CesiumJS를 주로 사용하게 되었다. Cesium 이란? 순수 웹 기불을 이용한 3D Globe 엔진 WebGL 기반 다양한 배경 영상/지도 기본 제공 3D / 2.5D / 2D 모드 지원 -> Openlayers3에 통합 카메라 움직임 추적, 시간 시뮬레이션 등 다양한 기능 제공 Cesium 을 시작할 때 초기 설정이 복잡하다. 아래 두 개의 링크를 따라가서 따라 하면 쉽게 할 수 있다. 하지만 웹에서 커스터마이징을 하기 위해 아래 코드처럼 Cesium에서 지원하는 기본적인 기능들을 끄고 지도만 보이도록 설정해야 한다. API들은 문서나 인터넷 검색으..

[Angular] 강좌 추천 [내부링크]

Angular 강좌 추천 작년에 Angular1 즉 AngluarJS를 Spring Framework + Spring JPA + MySQL 합쳐서 연동하여 개발을 하였었다. 그 때에 AngularJS를 처음 접해보았고, 제가 아는 분에게 배우기도 해서 일부분을 개발하다가 하나의 프로젝트를 처음부터 만들어 봤었다. 그 이후로 Angular를 사용하지 않았었는데, 지금 벌써 Angular 6 버전까지 나와서 놀랐다. 아래 URL은 Angular 6 은 아니지만 Angular 5 버전 강좌다. NodeJS 와 Typescript 가 대세여서 공부해보려고 하다가 Angular를 다시 보게 되어 찾다가 이 강좌가 설명이 너무 잘 되어 있어서 공부를 하는 중이다. 여러모로 감사합니다. URL: https://moo..

[Android] Tab 구성 시 주의사항 [내부링크]

FragmentStatePagerAdapter의 getItem() 이 두 번 호출될 때 Viewpager를 사용하여 Tab을 구성하였을 때 FragmentStatePagerAdapter를 사용하였다. 탭에 추가한 Fragment 와는 상관없이 getItem()이 두 번 호출이 되어서 Fragment를 두 번 로드하게 되는 현상 때문에 문제가 생겨 꼬이게 되었다. 이럴 경우 Fragment 화면이 보일 때와 보이지 않을 때 setUSerVisiblaHint() 함수를 사용하여 처리하는데 탭에 추가한 Fragment 가 전부 로드되지 않았다. 어중간하게 두 개의 화면만 로드되었기 때문에 다른 탭을 누르거나 다시 돌아왔을 때 setUSerVisiblaHint()와 onCreateView() 함수가 비정상적으로..

[Web Design] Metronic Dashboard [내부링크]

대시보드 템플릿 웹 개발을 하다 보면 작은 프로젝트인데도 디자인 요청이 있다. 그럴 때마다 디자인된 부트스트랩 기반 템플릿을 찾곤 했었다. 매번 디자인이 아쉽고 템플릿을 사용하여도 직접 CSS를 작업하는 경우가 많았는데 지인의 추천으로 Metronic을 알게 되었다. Metronic - Responsive Admin Dashboard Template The World’s #1 Bootstrap 4 HTML, Angular 9, React, VueJS & Laravel Admin Dashboard Theme 이 템플릿은 사용하기도 편하고 디자인도 요즘 트렌드에 맞게 계속 업데이트를 하고 있다. 알아둘 점은 유료다. 구매비용이 저렴한 것에 비해 다양한 컴포넌트들이 있고 10가지 이상의 템플릿을 제공해 준다...

이것이 C#이다 [내부링크]

책 정보 책 소개 한 번 배울 때 제대로, 기본기부터 탄탄히 다지고 간다! 이 책은 C#. NET 프레임워크 세계에 첫 발을 들이는 입문자를 위한 책이다. 따라서 딱딱하지 않은 대화식 표현으로 1:1 강의처럼 배울 수 있는 것이 이 책의 가장 큰 장점이다. 또한 C#의 핵심 문법은 물론, 프로그래밍 동작 원리까지도 입문자 입장에서 하나하나 꼼꼼히 설명하였다. 책을 덮을 때쯤이면 기초 문법부터, 고급 문법, 그리고. NET 프레임워크의 활용까지 C#의 전반적인 큰 틀을 자연스레 익힐 수 있을 것이다.『이것이 C#이다』로 C# 프로그래밍을 시작한다면, 튼튼한 기본기가 갖춰져, 더 이상 실전과 응용도 두렵지 않습니다. 리뷰 개발 서적을 구매하고 공부하는 것을 좋아해서 찾아보다가 예전부터 알개발해 보고 싶었던 ..

리액트를 다루는 기술 [내부링크]

책 정보 책소개 리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하는지, 왜 이렇게 사용하는 것이 효과적인지를 배우자. 공식 문서에는 나오지 않는 실전 노하우와 팁을 풍부하게 담았다. 또한, 프로젝트 생성부터 코드를 작성 및 개선하고, 배포하기까지 실무에 바로 응용할 수 있도록 예제를 준비했다. 일정 관리 애플리케이션을 만들면서 리액트의 기본기를 다지고, 프로젝트를 진행하면서 컴포넌트 스타일링, 상태 관리, API 연동, 라우팅, 코드 스플리팅, 서버사이드 렌더링 등 리액트를 활용한 다양한 기술을 사용해 보자. 마지막으로 마크다운 기반의 블로그 시스템을 만들며 배운 지식을 종합적으로 활용해 보자. 리뷰 작년에 처음으로 AngularJS를 사용하여 프로젝트를 하면서 접한 이후로 ..

깡샘의 안드로이드 프로그래밍 [내부링크]

책 정보 책 소개 이 책은 각 챕터마다 안드로이드 프로그램과 각 기능이 어떠한 구조로 어떻게 작동하는지 그 원리를 파악하는 데 주력합니다. 그리고 이를 구현하는 핵심 코드를 알아본 다음, 이를 종합하여 실제 상용 앱에서 많이 사용하는 기능을 직접 개발해 보는 실습을 진행합니다. 그리고 각 파트별로 도전 과제를 통해 학습자 스스로 주어진 조건에 맞는 앱을 만들어봄으로써 앞에서 배운 이론과 실습을 복기하고 문제 해결 능력을 기를 수 있게 구성하였습니다. 한 마디로 체계적이고 따라 하기 쉽습니다. 리뷰 최근에 안드로이드를 다시 공부하면서 보는 책이다. 안드로이드 스튜디오 3.0 기반으로 개발할 수 있도록 해주며, 끝에는 Kotlin 까지 나온다. 그리고 예제도 다양하여 도움이 많이 되었다.

Google Gemini vs. OpenAI ChatGPT [내부링크]

인공 지능의 영역은 현재 텍스트 생성 분야에서 두 거대 기업의 흥미로운 대결에 몰두하고 있습니다: 구글의 Gemini와 OpenAI의 ChatGPT입니다. 두 모델 모두 놀라운 기능을 선보이지만 방법론에서 큰 차이가 있으며 다양한 애플리케이션에 고유한 가능성을 제공합니다. 2023년에 출시된 구글 Gemini는 텍스트와 시각적 콘텐츠를 모두 이해하고 생성할 수 있는 멀티모달 AI 언어 모델입니다. 반면, 2022년 11월에 공개된 OpenAI의 ChatGPT는 텍스트 생성 및 이해 영역에서 탁월한 능력을 발휘하는 텍스트 중심 AI 언어 모델입니다. SWOT 분석 강점 구글 제미니 멀티모달리티: 텍스트와 비주얼을 모두 처리하고 생성하는 Gemini의 탁월한 능력은 더욱 다양한 콘텐츠로 사용자 경험을 풍부하..

프로젝트 관리 기술 향상을 위한 ChatGPT 프롬프트 [내부링크]

오늘날 빠르게 변화하는 세상에서 효과적인 프로젝트 관리는 성공을 위해 매우 중요합니다. 이것이 바로 ChatGPT 프롬프트가 등장하는 곳입니다. 이 블로그 게시물에서는 ChatGPT 프롬프트가 어떻게 프로젝트 관리 프로세스를 간소화하고 자세한 가이드와 귀중한 통찰력을 제공하는지 살펴보겠습니다. ChatGPT 프롬프트가 프로젝트 관리에 어떤 이점이 있나요? 효율적인 작업 계획 프로젝트 계획과 관련된 프롬프트를 ChatGPT에 제공하여 작업 목록, 타임라인, 일정을 생성하세요. 프로젝트 작업을 효과적으로 정리하여 적시에 완료할 수 있도록 도와줍니다. 위험 평가 및 완화 프롬프트를 사용하여 잠재적 위험을 식별하고 완화 전략을 개발하세요. ChatGPT는 프로젝트 데이터를 분석하고 가능한 문제에 대한 인사이트를..

TypeScript vs JavaScript [내부링크]

이 글에서는 JavaScript와 TypeScript를 비교하여 TypeScript로 전환할 때 정보에 입각한 선택을 할 수 있도록 도와드립니다. ES6/7의 친숙한 구문과 TypeScript가 제공하는 추가 기능을 통해 TypeScript로 개발 환경을 개선하는 방법을 살펴봅니다. ES6, ES7(각각 ECMAScript 2015 및 ECMAScript 2016이라고도 함), JavaScript 및 TypeScript는 서로 연관되어 있지만 서로 다른 용도로 사용되며 뚜렷한 특징이 있습니다. 이러한 용어를 세분화하여 비교해 보겠습니다. JavaScript JavaScript는 주로 프런트엔드 웹 개발에 사용되는 동적이고 높은 수준의 해석된 프로그래밍 언어입니다. 모든 최신 웹 브라우저에서 지원됩니다. ..

직장에서 슈퍼스타로 만들어 줄 10가지 ChatGPT 프롬프트 [내부링크]

업무에 ChatGPT를 사용하지 않는다면 동료들에게 많은 면에서 뒤처지고 있다고 확신합니다. ChatGPT 및 기타 AI 도구를 사용하면 생산성을 높이고, 시간을 효율적으로 관리하며, 비용을 절감하고, 직장 내 커뮤니케이션(이메일)을 효과적으로 수행하여 스타가 될 수 있는 잠재력을 가지고 있습니다. 직장 내 커뮤니케이션 전문가가 되기 위한 10가지 미친 ChatGPT 프롬프트를 사용해보세요. 1. 보상 검토 요청 "보상 검토를 위해 [HR/관리자]에게 공식적이고 사실적인 스타일의 200자 내외의 이메일을 작성하여 역할[직위], 성과[주요 업적], 시장과의 연계성을 언급하세요." 2. 직장 내 갈등 해결 "[관련된 개인/팀]과 관련된 직장 내 갈등, 그 영향, 해결 단계 요청에 대해 [인사팀 또는 관련 기..

최첨단 디스플레이 기술: MWC 2024의 최고의 혁신 [내부링크]

2월 26일부터 3월 1일까지 스페인 바르셀로나에서 개최된 MWC(Mobile World Congress) 2024는 모바일 기술 및 그 이상의 최신 발전을 선보이는 글로벌 플랫폼으로서의 입지를 다시 한 번 공고히 했습니다. 업계 대기업부터 신생 스타트업까지 다양한 참가자들이 우리가 주변 세계와 연결하고, 일하고, 상호 작용하는 방식에 혁신을 가져올 획기적인 혁신 기술을 선보였습니다. MWC 2024에서 주목을 받은 가장 매력적인 제품 5개는 다음과 같습니다. 1. HoloLens 3: Microsoft의 차세대 증강 현실 헤드셋 Microsoft는 혼합 현실 헤드셋의 최신 버전인 홀로렌즈(HoloLens) 3를 공개하며 많은 기대를 모았습니다. 더 넓은 시야각, 향상된 해상도, 향상된 손 추적 기능을 ..

자바스크립트에서 객체를 만드는 5가지 방법 [내부링크]

자바스크립트에서 객체는 다양한 방식으로 생성할 수 있는 다용도 도구로, 각기 다른 시나리오에 적합합니다. 각 방법을 언제 사용해야 하는지 이해하는 것이 효율적이고 유지 관리가 쉬운 자바스크립트 코드를 작성하는 데 중요합니다. 자바스크립트에서 객체를 만드는 5가지 일반적인 방법을 살펴보고 각 방법에 가장 적합한 사용 사례를 자세히 설명해 보겠습니다. 1. 객체 리터럴(Object Literal) 객체 리터럴은 중괄호 {}를 사용하여 자바스크립트에서 객체를 생성하는 가장 간단하고 빠른 방법입니다. 이 방법은 청사진이나 반복적인 인스턴스화가 필요 없는 단일 독립형 객체를 생성하는 데 이상적입니다. const car = { make: 'Toyota', model: 'Corolla', year: 2021, }; ..

수백 시간을 절약할 수 있는 ChatGPT 프롬프트 상위 8가지 [내부링크]

ChatGPT는 일상적인 업무에서 벗어나 생산성을 높여주는 수호천사와 같은 존재입니다. ChatGPT를 사용하지 않는다면 여러 가지 면에서 뒤처지고 있다고 확신합니다. 이 8가지 놀라운 ChatGPT 프롬프트를 사용하여 수백 시간을 절약하고, 생산성을 높이고, 몇 시간씩 걸리는 작업을 몇 분 안에 끝내세요. 1. 프로젝트 관리 "여러 팀이 참여하는 [새 프로젝트]를 시작하려고 합니다. 효과적인 커뮤니케이션과 실행을 위해 명확한 목표, 마일스톤, 작업 할당, 추적 일정이 포함된 프로젝트 계획 템플릿을 만들 수 있나요?" 2. 맞춤형 재정 조언 "재무 건전성과 금융 이해력을 향상시키고 싶습니다. 현재 [재정 상황]과 [장기 목표]를 고려하여 [부채]를 관리하고, 저축을 늘리고, [현명한 투자]를 할 수 있는..

TypeScript 컴파일러(tsc) 및 tsconfig [내부링크]

TypeScript 컴파일러(tsc)와 구성 파일(tsconfig.json)에 대해 살펴봅니다. 컴파일러 옵션과 구성을 이해하는 것은 TypeScript 워크플로를 최적화하는 데 필수적입니다. 다양한 컴파일러 옵션과 tsconfig.json의 중요성, 그리고 이러한 도구를 활용하여 TypeScript 개발 프로세스를 간소화하는 방법을 살펴보세요. TypeScript 컴파일러(tsc) 1. tsc란 무엇인가요? tsc는 TypeScript 컴파일러입니다. TypeScript 코드(.ts 또는 .tsx 파일)를 가져와서 JavaScript 런타임에서 실행할 수 있는 JavaScript 코드(.js 파일)로 컴파일합니다. 2. tsc 설치 방법 npm(Node Package Manager)을 사용하여 tsc를..

목표 설정에 ChatGPT를 사용하는 방법 [내부링크]

목표 설정에 ChatGPT를 사용하려면 모델과 구조화된 대화를 통해 목표를 명확히 하고, 잠재적인 장애물을 파악하며, 목표 달성을 위한 실행 가능한 단계를 만들어야 합니다. 다음은 목표 설정에 ChatGPT를 활용하는 방법에 대한 단계별 가이드입니다. 1. 목표 정의하기 목표를 명확하게 정의하는 것부터 시작하세요. 무엇을 달성하고 싶으신가요? 목표가 구체적이고, 측정 가능하며, 달성 가능하고, 관련성이 있고, 시간 제한이 있는(SMART) 목표인지 확인하세요. 2. 개방형 대화 목표를 설명하여 ChatGPT와 대화를 시작하세요. 다음과 같은 개방형 질문이나 프롬프트를 사용하여 대화를 유도하세요. [특정 목표]를 달성하고 싶은데, 그 목표에 도달하는 방법에 대한 지침을 찾고 있습니다. 아이디어를 브레인스토..

TypeScript 사용법 및 JavaScript와의 비교 [내부링크]

Type Annotation 및 Type 추론 TypeScript 예제 let userName: string = 'Alice'; function getUserAge(user: { name: string; age: number }): number { return user.age; } JavaScript 예제 let userName = 'Bob'; function getUserAge(user) { return user.age; } TypeScript를 사용하면 개발자가 변수, 함수 매개변수 및 반환값의 타입을 명시적으로 정의할 수 있습니다. JavaScript 변수의 타입은 런타임에 추론되며 Type Annotation은 사용할 수 없습니다. 인터페이스와 클래스 TypeScript 예제 interface U..

JavaScript에서 배열을 만드는 4가지 방법 [내부링크]

소개 JavaScript에서 배열은 여러 값을 저장하는 데 사용되는 참조 데이터 유형입니다. 이러한 값은 문자열, 숫자, boolean(true/false), null, undefined, 객체 또는 기타 배열일 수 있습니다. JavaScript에서는 여러 가지 방법으로 배열을 만들 수 있으며, 각 방법에는 고유한 장점과 고유한 사용 사례가 있습니다. JavaScript 개발자는 이러한 다양한 방법을 이해함으로써 특정 시나리오에 맞게 성능을 최적화하고, 코드 명확성을 높여 유지보수를 용이하게 하며, 다양한 프로그래밍 상황에 가장 적합한 배열 구성 기법을 적용할 수 있습니다. 1. Array Literal 사용 Array Literal은 배열을 만드는 가장 일반적이고 간단한 방법입니다. 쉼표로 구분..

번역을 위한 ChatGPT 프롬프트 베스트 10 [내부링크]

효율적이고 신뢰할 수 있는 번역 도구를 찾고 계신가요? ChatGPT만 있으면 됩니다! OpenAI에서 개발한 최첨단 챗봇인 ChatGPT는 뛰어난 번역 기능으로 인기를 얻고 있습니다. 이 글에서는 번역에 가장 적합한 ChatGPT 프롬프트 10가지를 살펴보고 왜 우수한 번역을 제공할 수 있는지 설명합니다. 문서나 이메일을 번역해야 할 때나 단순히 다른 언어로 대화를 나누고 싶을 때 ChatGPT는 모든 것을 해결해 줍니다. 번역에서 ChatGPT의 힘 ChatGPT는 강력한 신경망을 활용하여 다양한 언어로 사람과 유사한 응답을 생성합니다. 이 기술을 활용하여 ChatGPT는 언어와 문맥의 뉘앙스에 맞는 정확한 번역을 제공할 수 있습니다. 고급 기계 학습 알고리즘을 통해 번역을 빠르게 이해하고 생성할 수..

JavaScript에서 변수가 배열인지 확인하는 방법 c [내부링크]

JavaScript에서 개발자의 기본적인 작업 중 하나는 주어진 변수의 유형을 결정하는 것입니다. 배열은 언어의 핵심 데이터 구조로, 단순한 데이터 저장부터 복잡한 알고리즘까지 다양한 연산에 자주 사용되기 때문에 배열을 다룰 때 특히 중요합니다. 그러나 배열을 객체의 한 유형으로 취급하는 JavaScript의 특성상 배열을 올바르게 식별하는 것이 항상 간단한 것은 아닙니다. 이 글에서는 JavaScript에서 주어진 변수가 배열인지 아닌지 확인하는 3가지 방법을 설명합니다. JavaScript의 변수 이해 배열에 대해 자세히 알아보기 전에 JavaScript의 변수에 대해 간단히 살펴보겠습니다. JavaScript는 동적 타입 언어이므로 변수는 명시적으로 선언하지 않고도 모든 유형의 데이터를 저장할 ..

운동 계획을 위한 ChatGPT 프롬프트 가이드 [내부링크]

빠르게 변화하는 오늘날의 세상에서 건강을 유지하는 것이 그 어느 때보다 중요해졌습니다. 손끝에 있는 기술을 통해 운동 루틴을 향상시킬 수 있는 새롭고 흥미로운 방법, 바로 ChatGPT가 있습니다! 이 강력한 도구는 피트니스 목표에 맞는 개인 맞춤형의 효과적인 운동 계획을 세우는 데 도움을 줍니다. 이 블로그에서는 ChatGPT가 어떻게 즐겁고 유익한 운동 계획을 세우는 데 도움이 되는지 살펴볼게요. ChatGPT를 사용하여 원하는 운동 계획을 세우는 방법 개인화가 핵심 ChatGPT의 뛰어난 기능 중 하나는 운동 계획을 개인화할 수 있는 기능입니다. 사용자의 체력 수준, 목표, 선호하는 운동을 입력하면 ChatGPT는 사용자의 필요에 맞는 계획을 맞춤 설정합니다. 이러한 개인 맞춤화는 운동의 효과뿐만 ..

AI로 수익을 창출하는 방법 [내부링크]

오늘날 디지털 시대의 역동적인 환경에서 인공지능(AI)은 단순한 유행이 아니라 그 잠재력을 탐구하려는 사람들에게 수익성 높은 기회를 제공하는 게임 체인저입니다. 개인과 기업이 AI의 힘을 활용하여 수익을 창출하는 방법에 대한 종합적인 가이드를 소개합니다. 1. AI 프리랜서 프리랜서 플랫폼에서 AI 기술을 제공하여 긱 경제(Gig Economy)를 활용하세요. 머신러닝, 자연어 처리, 컴퓨터 비전 등 AI 전문 지식에 대한 수요가 점점 더 커지고 있습니다. Upwork와 Freelancer 같은 플랫폼은 숙련된 개인과 AI 솔루션을 찾는 기업을 연결해 줍니다. 2. AI 컨설팅 AI 컨설턴트로 자리매김하세요. 많은 기업이 AI를 비즈니스에 통합하고 싶어 하지만 전문 지식이 부족합니다. 전략적 조언을 제공..

컨테이너화 VS 가상화 [내부링크]

컨테이너화와 가상화는 IT 및 소프트웨어 배포 세계에서 사용되는 두 가지 다른 기술입니다. 다음은 두 가지에 대한 내용입니다. 컨테이너화(Containerization) 경량: 컨테이너는 가상 머신(VM)에 비해 놀라울 정도로 가볍습니다. 호스트 OS 커널을 공유하므로 시스템 리소스를 덜 소비하고 빠르게 시작할 수 있습니다. 이식성: 컨테이너는 애플리케이션과 모든 종속성을 캡슐화하여 이식성이 뛰어납니다. 개발용 노트북, 테스트 서버 또는 클라우드에서 동일한 컨테이너를 수정 없이 실행할 수 있습니다. Docker: Docker는 사용자 친화적인 도구와 표준화를 통해 컨테이너화를 대중화했습니다. 애플리케이션을 패키징하고 배포하는 방식에 혁신을 가져왔습니다. 마이크로서비스: 컨테이너는 마이크로서비스 아키텍처에..

글쓰기 향상을 위한 ChatGPT 프롬프트 가이드 [내부링크]

역동적인 커뮤니케이션 세계에서 글쓰기를 통해 자신을 명확하게 표현하는 능력은 매우 중요한 기술입니다. 노련한 작가이든 이제 막 시작한 작가이든 항상 개선의 여지가 있습니다. 이 글에서는 ChatGPT 프롬프트가 글쓰기 실력을 향상시키고 창의력을 발휘할 수 있는 강력한 도구가 될 수 있는 방법에 대해 살펴봅니다. 글쓰기 요구에 맞게 ChatGPT 프롬프트를 효과적으로 사용하는 방법 다양한 프롬프트 생성하기 ChatGPT는 다양한 장르와 스타일의 프롬프트를 생성할 수 있습니다. 소설, 논픽션, 기술 글쓰기, 심지어 시와 관련된 프롬프트로 실험해 보세요. 이러한 다양성은 글쓰기의 지평을 넓히고 새로운 강점을 발견하는 데 도움이 될 수 있습니다. 아이디어 구체화하기 개념이나 주제에 대해 고민하고 있나요? Cha..

코딩을 위한 ChatGPT 프롬프트 가이드 [내부링크]

코딩 실력을 한 단계 업그레이드할 준비가 되셨나요? ChatGPT를 사용하면 프로그래밍을 새로운 차원으로 끌어올릴 수 있습니다. 초보자이든 숙련된 개발자이든 ChatGPT는 코딩 능력을 향상시키는 데 도움이 되는 다양한 프롬프트를 제공합니다. 이 글에서는 ChatGPT 프롬프트를 활용하여 코딩 실력을 향상시킬 수 있는 방법을 살펴봅니다. 코딩에 ChatGPT 프롬프트를 사용하는 이유는 무엇인가요? 학습 지원: ChatGPT 프롬프트는 새로운 프로그래밍 개념을 배울 때 유용한 지원을 제공합니다. 루프, 함수, 데이터 구조 등 어떤 개념을 다루든 ChatGPT는 설명과 예제를 제공하여 이해를 강화할 수 있습니다. 문제 해결: 코딩 문제가 막막하신가요? ChatGPT 프롬프트는 장애물을 극복하는 데 도움이 되..

Google의 Gemini AI: 혁신적인 차세대 AI [내부링크]

Google의 Gemini AI는 단순한 AI가 아닙니다. 게임 체인저입니다! 사용자가 요청하는 거의 모든 작업을 수행하고 친구처럼 사용자를 이해하며 복잡한 문제를 해결하는 데 도움을 주는 스마트 기술을 상상해 보세요. Google Brain과 DeepMind의 융합으로 탄생한 Gemini AI가 AI의 작동 방식을 바꿀 것입니다. 가능성의 한계를 재정의하는 초능력 Gemini AI는 놀라운 힘을 가진 슈퍼히어로와 같습니다: 모든 것을 이해: 텍스트, 코드, 이미지, 오디오를 처리할 수 있어 다양한 유형의 정보가 필요한 까다로운 작업을 해결할 수 있습니다. 인간처럼 대화하기: 친구와 대화하듯 자연스럽게 대화할 수 있습니다. 챗봇이나 가상 비서와 같은 기능에 적합합니다. 코드 작성: 소프트웨어 개발자가 코..

AI 지배를 위한 경쟁: 컴퓨팅 비용 급증을 선도하는 Google과 Microsoft [내부링크]

끊임없이 진화하는 인공 지능(AI) 환경에서 두 기술 거대 기업이 최전선에 서서 컴퓨팅 비용이 치솟으면서 이 분야를 장악할 태세를 갖추고 있습니다. Google과 Microsoft는 방대한 리소스, 최첨단 연구, 전략적 투자를 통해 AI의 미래를 형성하기 위한 경쟁에서 리더로 자리매김하고 있습니다. AI 혁명 기업과 산업이 점차 AI를 운영에 통합함에 따라 강력한 컴퓨팅 리소스에 대한 수요가 급증했습니다. 자연어 처리부터 이미지 인식까지 복잡한 작업을 처리할 수 있는 정교한 AI 모델을 개발하려는 경쟁으로 인해 엄청난 컴퓨팅 성능이 필요하게 되었습니다. 이러한 수요로 인해 컴퓨팅 비용이 급증하게 되었고, 이는 어느 회사가 AI 분야에서 효과적으로 경쟁할 수 있는지 결정하는 데 중요한 요소가 되었습니다. ..

인플루언서 마케팅을 위한 ChatGPT 프롬프트 [내부링크]

끊임없이 진화하는 디지털 마케팅 환경에서 인플루언서 마케팅은 브랜드가 타겟 고객과 소통할 수 있는 강력한 도구로 부상했습니다. 경쟁이 치열한 온라인 공간에서 앞서 나가기 위해 노력하는 기업들이 늘어나면서 인플루언서 마케팅 전략에 인공지능(AI)을 통합하는 것이 판도를 바꾸고 있습니다. 주목할 만한 활용 사례 중 하나는 AI의 기능을 활용하여 창의성, 참여도 및 전반적인 캠페인 효과를 향상시키는 ChatGPT 프롬프트의 사용입니다. ChatGPT: 개요 OpenAI에서 개발한 ChatGPT는 GPT-3.5 아키텍처로 구동되는 최첨단 언어 모델입니다. 이 모델은 수신된 프롬프트를 기반으로 사람과 유사한 텍스트를 이해하고 생성할 수 있는 기능을 갖추고 있습니다. 이 다재다능한 도구는 다양한 분야에서 활용되고 ..

Bard는 이제 Gemini입니다. [내부링크]

2024년 2월 8일부로 Google의 AI 챗봇 Bard가 Gemini로 새롭게 태어났습니다. 이번 브랜드 변경은 Google의 AI 여정에서 새로운 장을 열며, 흥미로운 발전과 확장된 기능을 제공합니다. 이름에 담긴 의미는 무엇인가요? Bard에서 Gemini로의 전환은 더욱 다재다능하고 다방면에 걸친 AI 도구를 개발하려는 Google의 야망을 반영합니다. Gemini는 소통과 이중성과 관련된 신화 속 쌍둥이자리로, 현재 제공되는 두 가지 핵심 경험을 상징합니다. Gemini Pro(이전 Bard): 이 무료 버전은 질문에 답하고, 텍스트 형식을 생성하고, 40개 이상의 언어로 언어를 번역할 수 있는 친숙한 대화형 AI 환경을 유지합니다. Gemini Advanced: 이 유료 구독 서비스는 Goo..

처음부터 끝까지 빠르고 최적화된 블로그 작성을 위한 50가지 똑똑한 ChatGPT 프롬프트 [내부링크]

ChatGPT는 블로그 글쓰기 프로세스의 일부를 간소화하고 자동화하는 데 매우 유용한 도구입니다. 적절한 프롬프트를 사용하면 키워드 조사부터 완성된 게시물을 게시하는 데까지 도움을 받을 수 있습니다. 다음은 아이디어 구상부터 홍보까지 블로그 게시물 작성의 모든 단계를 다루는 50가지 Clever ChatGPT 프롬프트입니다.. 조사 시간을 절약하고 싶거나 동적 콘텐츠에 대한 아이디어를 생성하고 싶을 때, 이 프롬프트는 ChatGPT가 블로그 작성 워크플로우를 어떻게 향상시킬 수 있는지 보여줍니다. 50개의 ChatGPT 프롬프트 콘텐츠 작성을 위한 50개의 ChatGPT 프롬프트는 다음과 같습니다. [틈새/산업]에 관한 10개의 잠재적인 블로그 게시물 주제 목록과 각 주제에 대한 키워드 아이디어 및 검색..

2024년 최고의 ChatGPT 프롬프트 가이드 [내부링크]

ChatGPT에 대한 모든 필수 정보를 알아보고 2024년에 최대한의 성공을 거두기 위해 효과적으로 활용하는 방법을 알아보세요. 이 가이드는 프롬프트 기술, ChatGPT 사용 모범 사례, 영업, 마케팅, 웹 개발, 데이터 과학 등과 같은 다양한 직업을 위한 사용자 지정 프롬프트 등 ChatGPT에 대해 배우고 알아야 할 모든 것을 안내합니다. 목차 좋은 프롬프트와 나쁜 프롬프트 ChatGPT 사용 모범 사례 콘텐츠 작성을 위한 프롬프트 마케팅을 위한 프롬프트 웹 개발을 위한 프롬프트 영업을 위한 프롬프트 데이터 과학을 위한 프롬프트 고객 성공을 위한 프롬프트 좋은 프롬프트와 나쁜 프롬프트 여기에서는 ChatGPT와 같은 LLM의 응답 품질에 영향을 미칠 수 있는 좋은 프롬프트와 나쁜 프롬프트의 몇 가지..

유럽에서 공개된 Google의 최신 검색 기능 살펴보기 [내부링크]

유비쿼터스 검색 엔진의 선두주자인 Google이 유럽에서 새로운 검색 기능을 도입하여 사용자 경험을 향상시키는 데 다시 한 번 한 걸음 더 나아갔습니다. 이러한 움직임은 혁신의 선두에 서서 사용자에게 더욱 개인화되고 효율적인 검색 결과를 제공하려는 Google의 노력을 강조합니다. 1. 향상된 검색 필터 Google의 최신 업데이트의 주요 특징 중 하나는 검색 필터의 정교화입니다. 이제 유럽 사용자는 향상된 필터를 활용하여 검색어를 더욱 세밀하게 제어할 수 있습니다. 이 기능을 통해 사용자는 다양한 매개변수를 기반으로 검색 결과의 범위를 좁힐 수 있어 특정 정보를 빠르고 효율적으로 찾을 수 있습니다. 2. 상황 인식 검색 제안 Google은 인공 지능을 활용하여 상황 인식 검색 제안을 제공합니다. 즉, ..

Sora - 텍스트로 동영상 만들기 [내부링크]

OpenAI는 시각적 미디어와 상호 작용하는 방식을 변화시킬 혁신적인 도구인 "Sora"를 공개했습니다. 이 획기적인 text-to-video 모델은 단순히 이미지를 생성하는 데 그치지 않고, 짧은 설명 프롬프트를 통해 복잡한 내러티브를 엮어 이미지에 생명을 불어넣습니다. '하늘'을 뜻하는 일본어 이름처럼, Sora의 잠재력은 상상의 나래를 펼칠 수 있는 한도까지 뻗어 있습니다. 단어로 그림 그리기 신중하게 선택한 몇 개의 단어만으로 생동감 넘치는 장면을 그려낸다고 상상해 보세요. Sora와 함께라면 그 꿈이 현실이 됩니다. 눈 덮인 산맥 속에 자리 잡은 웅장한 성, 네온 불빛 아래 번화한 도시 풍경, 햇살이 비치는 초원에서 나비를 쫓는 장난기 가득한 개를 묘사하면 Sora가 한 프레임 한 프레임 현실로..

골프 선수를 위한 ChatGPT 프롬프트 [내부링크]

골프는 정확성, 전략, 지속적인 개선이 필요한 스포츠입니다. 노련한 골퍼든 이제 막 골프를 시작한 골퍼든, 기술을 연마하고 게임에 대한 이해를 높일 수 있는 방법을 찾는 것은 매우 중요합니다. 오늘날의 디지털 시대에는 골퍼의 실력 향상에 도움이 되는 다양한 도구가 등장하고 있으며, 그중에서도 ChatGPT가 인기를 얻고 있습니다. OpenAI에서 개발한 최첨단 언어 모델인 ChatGPT는 단순히 질문에 답하거나 텍스트를 생성하기 위한 것이 아닙니다. 또한 자신의 게임을 향상시키고자 하는 골퍼들에게도 유용한 리소스가 될 수 있습니다. 맞춤형 프롬프트와 질문을 통해 ChatGPT는 골퍼가 코스에서 뛰어난 실력을 발휘할 수 있도록 인사이트와 팁, 정신적 지원까지 제공할 수 있습니다. 다음은 골프 선수가 Cha..

2024년 최고의 AI 웹사이트 스크래퍼 7가지 [내부링크]

온라인 마케팅 목표를 위해 데이터를 추출하고 싶지만 어떤 도구를 선택해야 할지 모르시나요? 2024년 최고의 웹사이트 스크래퍼 7가지를 소개합니다. 1. Browse AI Browse AI는 코딩 없이도 웹에서 데이터 추출, 모니터링, 자동화 작업을 수행할 수 있는 AI 기반 웹 자동화 소프트웨어입니다. 이 소프트웨어를 사용하면 몇 분 안에 모든 웹사이트를 스크래핑, 모니터링 및 자동화할 수 있으며, 데이터 추출 및 모니터링을 위한 다양한 기능과 크레딧을 갖춘 다양한 요금제를 제공합니다. Scrape and Monitor Data from Any Website with No Code Monitor any webpage for changes. Download any data on the web as a s..

간단한 프롬프트를 통해 ChatGPT로 몇 초 안에 할 수 있는 50가지 작업 [내부링크]

ChatGPT는 시간을 알려주는 기본적인 작업부터 주식 시장 예측과 같은 복잡한 작업까지 몇 시간이 걸리는 일을 단 몇 초 만에 처리할 수 있습니다. 간단한 프롬프트를 통해 ChatGPT가 몇 초 안에 처리할 수 있는 50가지 작업은 다음과 같습니다. 50가지 작업 현재 시간 표시 주어진 메시지 인쇄 문자열의 문자 수 계산 텍스트를 대문자/소문자로 변환하기 특정 횟수만큼 메시지 반복하기 문자열 반전하기 숫자가 홀수인지 짝수인지 확인 난수 생성하기 숫자가 소수인지 확인 두 숫자의 최대공약수 찾기 오름차순 또는 내림차순으로 숫자 목록 정렬하기 목록 a에서 숫자의 합 구하기 문자열이 회문 a인지 확인하기 목록의 길이 찾기 목록에서 주어진 항목 검색하기 목록에서 중복 항목 제거하기 두 목록 병합하기 항목 목록 ..

축구 선수를 위한 ChatGPT 프롬프트 [내부링크]

아름다운 스포츠인 축구는 신체적 능력뿐만 아니라 전략적 사고와 전술적 인식도 요구합니다. 노련한 프로 선수든 선수 지망생이든, 정신적 준비와 경기 역학 이해의 역할은 아무리 강조해도 지나치지 않습니다. 이 글에서는 ChatGPT 프롬프트가 축구 선수의 기술, 전략, 경기력 전반을 향상시키고자 하는 축구 선수에게 어떻게 유용한 도구가 될 수 있는지 살펴봅니다. 전술적 통찰력 축구 선수들이 ChatGPT를 사용할 때 얻을 수 있는 주요 이점 중 하나는 풍부한 전술적 인사이트를 얻을 수 있다는 것입니다. 특정 게임 시나리오, 포메이션 또는 상대 전략과 관련된 프롬프트를 작성하여 플레이어는 모델에 참여하여 맞춤형 조언과 분석을 받을 수 있습니다. 예를 들어, 플레이어가 "4-4-2 포메이션의 빈틈을 어떻게 활용..

ChatGPT 사용량 급증에 따라 인도에 막대한 투자 [내부링크]

중요한 발전으로, OpenAI는 인도의 놀라운 ChatGPT 채택에 힘입어 인도에 대규모 투자를 하겠다는 야심찬 계획을 발표했습니다. 이는 전 세계에서 두 번째로 많은 ChatGPT 사용자를 보유한 인도가 OpenAI 언어 모델 활용의 핵심 국가로 부상함에 따라 이루어진 발표입니다. 인도에서 ChatGPT의 부상 인도에서 ChatGPT의 여정은 경이롭기 그지없습니다. 콘텐츠 제작과 교육 지원부터 비즈니스 애플리케이션과 개인 비서에 이르기까지 다양한 영역의 사용자가 OpenAI의 언어 모델 기능을 수용했습니다. ChatGPT의 다양성과 적응성 덕분에 개인과 기업 모두에게 유용한 도구가 되었으며, 널리 사용되는 데 기여하고 있습니다. 인도의 언어 다양성과 ChatGPT의 적응성 인도 전역에서 다양한 언어가 ..

꼭 사용해봐야 할 4가지 AI 코딩 도우미 [내부링크]

빠르게 변화하는 소프트웨어 개발의 세계에서는 효율성이 핵심입니다. 개발자들이 깔끔하고 오류 없는 코드를 작성하기 위해 노력하면서 지능형 코딩 도우미에 대한 수요가 급증했습니다. 인공지능(AI) 코딩 도우미는 생산성을 높이고 오류를 잡아내며 개선점을 제안하는 유용한 도구로 부상했습니다. 워크플로우에 통합을 고려해야 할 상위 4가지 AI 코딩 도우미를 살펴보세요. 1. GitHub Copilot: AI를 통한 코딩 혁신 https://github.com/features/copilot GitHub가 OpenAI와 협력하여 개발한 GitHub Copilot은 코딩 커뮤니티에 큰 돌풍을 일으켰습니다. OpenAI의 GPT-3로 구동되는 Copilot은 통합 개발 환경(IDE) 내에서 실시간 코드 제안을 제공합니다..

AI 챗봇과 시각적 지원의 힘 활용하기 [내부링크]

소개 오늘날과 같이 빠르게 변화하는 디지털 시대에 기업들은 고객 경험을 향상시킬 수 있는 혁신적인 방법을 끊임없이 모색하고 있습니다. 최근 큰 인기를 얻고 있는 획기적인 기술 중 하나는 AI 챗봇과 시각적 지원의 통합입니다. 이러한 강력한 도구는 고객과의 상호작용을 간소화할 뿐만 아니라 개인화되고 효율적인 경험을 제공합니다. 이 글에서는 AI 챗봇과 시각적 지원의 세계를 자세히 살펴보고, 그 장점과 구현 단계를 살펴보고, 코드 예제를 통해 직접 이해할 수 있도록 도와드립니다. AI 챗봇 이해하기 AI 챗봇은 인간 사용자와의 대화를 시뮬레이션하여 쿼리에 즉각적인 응답을 제공하도록 설계된 컴퓨터 프로그램입니다. 자연어 처리(NLP)와 머신 러닝 알고리즘을 활용하여 사용자 입력을 이해하고 이에 응답합니다. P..

JavaScript로 클릭 이벤트를 작성하는 3가지 방법 c️ [내부링크]

소개 JavaScript는 대화형 웹 개발의 핵심이며, 클릭 이벤트 처리는 모든 프론트엔드 개발자가 익혀야 할 기본 기술입니다. 이 글에서는 JavaScript로 클릭 이벤트를 작성하는 세 가지 방법을 살펴봅니다. 이제 막 시작했거나 기술을 연마하고 있는 개발자라면 이 가이드가 웹 페이지를 인터랙티브하게 만드는 방법을 이해하는 데 도움이 될 것입니다. 예제를 자세히 살펴보겠습니다. 인라인 HTML 이벤트 핸들러 인라인 HTML 이벤트 핸들러는 HTML 요소 내에 JavaScript 코드를 직접 배치합니다. 이 방법은 거의 모든 HTML 요소에 할당할 수 있는 onclick 속성을 사용합니다. Click Me! 장점 인라인 HTML 이벤트 핸들러는 구현 속도가 매우 빠르기 때문에 간단한 작업이나 소규..

JavaScript의 함수와 메서드?c [내부링크]

프로그래밍의 세계로 뛰어들 때 접하게 되는 기본 개념 중 하나는 메서드(Method)와 함수(Function)의 구분입니다. 메서드와 함수는 모두 JavaScript에서 중요한 역할을 하지만, 서로 다른 용도로 사용되며 서로 다른 방식으로 사용됩니다. 이 글에서는 이 두 개념을 명확하게 설명하여 차이점을 명확하게 이해하도록 하겠습니다. function와 method에 대해 자세히 알아보겠습니다. JavaScript의 함수 이해하기 함수의 핵심은 특정 작업 또는 일련의 작업을 수행하는 재사용 가능한 코드 블록입니다. 필요할 때마다 호출하거나 호출할 수 있는 미리 정의된 명령어 집합이라고 생각하면 됩니다. 함수는 JavaScript 코드의 빌딩 블록과 같아서 복잡한 작업을 더 작고 관리하기 쉬운 조각으로..

ChatGPT, Perplexity, Microsoft Copilot 비교하기 [내부링크]

현재 전 세계적으로 여러 가지 AI 애플리케이션이 개발되고 있습니다. 그 중 가장 많이 사용되는 몇 가지 애플리케이션은 ChatGPT, Microsoft Copilot, Perplexity입니다. 사용자 관점과 소프트웨어 개발자의 관점에서 이 두 가지의 주요 차이점과 유사점에 대해 자세히 살펴보겠습니다. ChatGPT OpenAI에서 개발한 이 기술은 수신된 프롬프트를 기반으로 사람과 유사한 텍스트를 이해하고 생성하도록 설계된 AI 언어 모델입니다. 다양한 주제와 작업에 걸쳐 답변을 제공할 수 있는 딥러닝 알고리즘으로 잘 알려진 GPT(Generative Pre-trained Transformer) 시리즈의 일부입니다. 에세이 작성, 코딩, 일상적인 대화에 이르기까지 ChatGPT는 정보, 창의성 또는 ..

커리어 성장을 촉진하는 25가지 ChatGPT 프롬프트 [내부링크]

오늘날과 같이 경쟁이 치열한 취업 시장에서 커리어를 성장시키고 발전시키려면 전략적인 계획과 지속적인 개선이 필요합니다. 다행히도 이 여정을 혼자서 헤쳐나갈 필요는 없습니다. 강력한 인공지능 언어 모델인 ChatGPT는 커리어의 다양한 측면에 걸쳐 귀중한 인사이트와 가이드를 제공할 수 있습니다. 이 글에서는 면접 준비부터 기업 내 커뮤니케이션 스킬까지 커리어 성장에 도움이 될 수 있는 25가지 ChatGPT 프롬프트를 살펴봅니다. 각 프롬프트는 커리어 목표를 달성하는 데 유용한 도구입니다. 면접 준비 프롬프트 예시 (특정 분야 또는 역할 언급)에서 곧 있을 면접을 위한 전략을 세울 수 있도록 도와주세요. 예상되는 질문의 유형은 무엇이며, 저의 강점과 이전 경험을 효과적으로 설명하려면 어떻게 해야 하나요? ..

초보자를 위한 ChatGPT-4 프롬프트 사용 방법 [내부링크]

소개 끊임없이 진화하는 언어 모델 기술 환경에서는 프롬프트 제작의 뉘앙스를 이해하는 것이 중요합니다. 숙련된 전문가든 ChatGPT-4와 같은 대규모 언어 모델(LLM)의 세계를 처음 접하는 사람이든, 상호작용을 최적화하기 위해서는 흔히 저지르는 실수를 인식하는 것이 중요합니다. 이 글에서는 이러한 함정에 대해 알아보고 ChatGPT-4의 잠재력을 최대한 발휘할 수 있는 효과적인 프롬프트를 작성하는 방법을 안내합니다. 기본 사항 이해하기 일반적인 실수를 살펴보기 전에 대규모 언어 모델(LLM)의 맥락에서 프롬프트가 무엇인지 간단히 정의해 보겠습니다. 프롬프트는 언어 모델에 제공되는 입력으로, 모델이 응답을 생성하도록 안내합니다. 프롬프트의 품질과 명확성은 ChatGPT-4의 응답의 관련성과 정확성에 직접..

2024년에 꼭 알아야 할 최고의 AI 디자인 도구 [내부링크]

최신 AI 도구를 자신의 워크플로우에 통합함으로써 더 빠르고 스마트하게 작업하고 경쟁에서 앞서 나갈 수 있습니다. 이 글에서는 AI를 활용하여 다자인에 대해 새로운 차원으로 끌어올릴 수 있었던 기술과 리소스를 공유하고자 합니다. 아이디어 브레인스토밍부터 완성도 높은 결과물 제작까지, AI는 창작 과정에서 없어서는 안 될 자산이 되었습니다. Upscale을 사용하여 쉽게 이미지 크기 조정하기 AI 기반 사진 편집기 - Upscales.ai으로 온라인 사진 향상 Upscales.ai의 AI 사진 인핸서는 낮은 품질의 이미지를 화질 개선하여 세부 사항을 선명하게 향상시키며, 사용자는 모든 기기에서 노력 없이 아름다운 사진을 무료로 만들 수 있습니다. upscales.ai 디자이너는 전문가용으로 사용하기에 적합..

JavaScript 모범 사례 [내부링크]

웹 개발의 근간이 되는 JavaScript는 단순한 스크립트 언어에서 복잡한 웹 애플리케이션을 제작하는 강력한 도구로 발전해 왔습니다. 이처럼 끊임없이 변화하는 환경에서는 코드 품질을 유지하고, 유지보수성을 보장하며, 성능을 최적화하는 것이 매우 중요합니다. 이 글에서는 JavaScript 개발자가 효율적이고 유지 관리가 용이하며 고품질의 코드를 작성하는 데 도움이 되는 모범 사례를 살펴봅니다. 실제 사례를 살펴보고 그 결과를 설명하여 이러한 관행이 관련성을 유지하고 지속적으로 유지될 수 있도록 합니다. 1. 읽기 쉽고 일관된 코드 예시 // Bad function calc(d) { let r = 3.14; return d * r; } // Good function calculateArea(diamete..

2024년 AI 트렌드와 전망 [내부링크]

2024년에 흥미로운 AI의 세계로 나아가기 위해서는 이 혁신적인 분야를 형성하는 중요한 트렌드와 기대치를 이해하는 것이 중요합니다. 이 글에서는 올해를 인공지능 분야에서 중추적인 해로 만들 최신 개발, 기술 및 사용 사례에 대해 자세히 살펴봅니다. 포괄적인 모델 출시 및 개선 2024년 AI 분야에서 가장 눈에 띄는 트렌드 중 하나는 포괄적인 AI 모델의 지속적인 발전입니다. ChatGPT4 및 해당 도구와 같은 이러한 모델은 이러한 모델은 추론과 상식적인 응용 분야에서 상당한 개선을 거쳤습니다. 인간과 유사한 텍스트를 이해하고 생성하는 데 점점 더 능숙해지면서 콘텐츠 생성부터 고객 지원에 이르기까지 다양한 애플리케이션에서 매우 유용하게 활용되고 있습니다. 오픈 소스 AI 발전 오픈 소스(Open-So..

시간 낭비 그만! 더 빠르게 성과를 달성하는 데 도움이 되는 28가지 AI 도구 [내부링크]

빠르게 변화하는 오늘날의 디지털 환경에서 인공지능은 우리가 일하고, 배우고, 소통하는 방식을 혁신적으로 바꾸고 있습니다. 이 블로그 게시물은 다양한 산업과 개인의 생산성을 재편하고 있는 가장 혁신적이고 유용한 AI 도구에 대한 최고의 가이드입니다. 업무와 개인 생활의 다양한 측면을 향상시키기 위해 각각 고유하게 설계된 광범위한 AI 기반 플랫폼 목록을 살펴봅니다. 시작하겠습니다! ccc cccc ChatGPT: https://chat.openai.com/ Bing: https://www.microsoft.com/en-us/bing?ep=0&es=31&form=MA13FV Google Bard: https://bard.google.com/chat Claude: https://claude.ai/ cccccc..

인공 지능(AI)이 웹 개발에 미치는 영향에 대한 심층 분석 [내부링크]

소개 인공 지능(AI)은 기술 분야에서 화두가 되어 우리가 기술을 인식하고 상호 작용하는 방식을 변화시키고 있습니다. 웹 개발 영역에서 AI의 통합은 수많은 이점을 가져다주며 웹사이트 제작 및 유지 관리에 혁신을 가져왔습니다. 이 글에서는 AI가 무엇인지 이해하고 웹 개발이라는 역동적인 분야에서 AI가 제공하는 구체적인 이점을 알아보는 여정을 시작하겠습니다. AI란 무엇인가? AI 또는 인공 지능(Artificial Intelligence)은 인간처럼 생각하고 학습하도록 프로그래밍된 기계에서 인간의 지능을 시뮬레이션하는 것을 말합니다. 컴퓨터 과학의 이 분야는 일반적으로 인간의 지능이 필요한 작업을 수행할 수 있는 지능형 에이전트를 만드는 것을 목표로 합니다. 머신 러닝: AI의 핵심 AI의 핵심에는 시..

[머신러닝] 알아야 할 5가지 알고리즘 [내부링크]

머신러닝(Machine Learning)은 명시적으로 프로그래밍하지 않고도 컴퓨터에 학습할 수 있는 기능을 제공하는 데이터 과학 분야입니다. 머신러닝은 복잡한 문제를 해결하고 데이터에서 인사이트를 도출할 수 있는 가장 흥미롭고 강력한 기술 중 하나입니다. 머신러닝은 마케팅, 의료, 금융, 교육 등 다양한 산업 및 영역에서 다양하게 활용되고 있습니다. 성공적인 데이터 과학자가 되려면 데이터 분석 및 모델링에 사용되는 기본 머신러닝 알고리즘에 대한 탄탄한 기초가 있어야 합니다. 알고리즘은 컴퓨터가 계산이나 기타 문제 해결 작업을 수행하기 위해 따라야 하는 일련의 명령 또는 지침입니다. 알고리즘은 기능, 복잡성, 설계 등에 따라 다양한 범주로 분류할 수 있습니다. 이 블로그에서는 모든 데이터 과학 애호가가 알..

JavaScript 이벤트 처리: 기본부터 고급 기법까지 [내부링크]

역동적인 웹 개발 세계에서 JavaScript는 대화형 및 반응형 사용자 경험을 가능하게 하는 초석 기술입니다. 이러한 상호작용의 기본 요소는 클릭, 키보드 입력 등과 같은 사용자 동작에 JavaScript가 반응하는 메커니즘인 이벤트 처리입니다. 이 글에서는 프레임워크나 라이브러리에 의존하지 않고 순수 JavaScript에 집중하여 콘텐츠가 항상 최신 상태를 유지할 수 있도록 기본 개념부터 고급 기법까지 JavaScript 이벤트 처리에 대해 자세히 살펴봅니다. JavaScript의 이벤트 처리 이해 이벤트란 무엇입니까? JavaScript에서 이벤트는 브라우저에서 감지되는 동작 또는 발생으로, JavaScript를 사용하여 응답할 수 있습니다. 일반적인 이벤트에는 클릭( click), 키 누르기(ke..

2024년 사회를 변화시킬 AI 트렌드 [내부링크]

2024년: AI가 우리의 일상을 진정으로 변화시킬 때 2023년에 AI가 주류로 등장했지만, 이는 2024년에 일어날 일들을 위한 워밍업에 불과했습니다. 올해는 2023년에 형성된 많은 트렌드가 완전히 자리를 잡고 우리의 삶을 재편하는 것을 보게 될 것입니다. 이 글에서는 2024년에 주목해야 할 가장 중요한 AI 트렌드를 좀 더 분명한 것부터 시작해서 점점 더 추측 가능한 것까지 공유해 보겠습니다. 이러한 트렌드 중 일부는 전혀 예상치 못한 것일 수도 있습니다. 대규모 언어 모델은 계속 발전할 것입니다. ChatGPT, DALL-E 및 기타 대규모 언어 모델은 2023년에 폭발적으로 등장했습니다. 하지만 이들의 발전은 아직 끝나지 않았습니다. 대부분의 사람들은 아직 GPT-4를 사용해 보지 못했습니다..

생성형 AI(Generative AI)의 힘과 가능성 소개 [내부링크]

생성형 AI(Generative AI)는 인간 예술가처럼 독창적인 콘텐츠를 만들 수 있는 흥미로운 신기술입니다. 규칙을 따르는 일반 AI와 달리, 생성형 AI는 데이터에서 찾은 패턴을 기반으로 완전히 새로운 것을 찾아낼 수 있습니다. 즉, 글쓰기, 이미지, 음악 등을 스스로 생성할 수 있는 AI입니다. 생성형 AI는 어떻게 작동하나요? 생성형 AI는 인간의 뇌를 모델로 한 컴퓨팅 시스템인 신경망을 사용합니다. 두 가지 중요한 유형은 GAN(Generative Adversarial Networks)과 VAE(Varitional Auto-Encoder)입니다. GAN에는 콘텐츠를 생성하는 생성기와 콘텐츠가 얼마나 사실적인지 판단하는 판별기가 있습니다. 이들은 서로 경쟁함으로써 매우 설득력 있는 결과물을 만들..

Pandas 마스터하기: 데이터 조작을 위한 고급 기술 [내부링크]

Pandas 여정을 진행하면서 기본을 넘어 데이터 조작 기술에 정교함을 더하는 몇 가지 강력한 기술을 살펴보겠습니다. 1. DataFrame 병합 및 연결 여러 소스의 데이터를 결합하는 기술을 자세히 살펴보세요. DataFrame 병합과 연결의 차이점을 이해하고 다양한 유형의 조인을 처리하는 방법을 알아보세요. # Concatenate DataFrames vertically result = pd.concat([df1, df2]) # Merge DataFrames based on a common column merged_df = pd.merge(left_df, right_df, on='common_column', how='inner') 설명 연결: pd.concat()은 DataFrame을 수직으로 쌓는 ..

초보자를 위한 Pandas 소개 [내부링크]

Pandas는 가장 인기 있고 강력한 Python용 데이터 분석 라이브러리 중 하나입니다. 사용하기 쉬운 데이터 구조와 구조화된 데이터 작업을 위한 도구를 제공합니다. 이 글에서는 데이터 분석에 Pandas를 사용하는 방법에 대한 실용적인 소개를 살펴보겠습니다. Pandas 가져오기 Pandas를 사용하려면 먼저 Pandas를 가져와야 합니다. import pandas as pd 일반적으로 pd를 약어로 사용하여 Pandas를 가져오는 것이 일반적입니다. Pandas DataFrame 만들기 Pandas DataFrame은 다양한 데이터 유형(string, number, boolean 등)을 열에 저장할 수 있는 2차원 레이블이 지정된 데이터 구조입니다. 스프레드시트나 SQL 테이블과 비슷합니다. dic..

무료라고는 믿기지 않을 10가지 AI 도구 [내부링크]

일상 업무를 변화시키는 무료 AI 도구 AI는 빠르게 우리 일상의 일부가 되어가고 있습니다. 챗봇에서 가상 비서에 이르기까지, AI는 이제 우리의 일상이 되었습니다. AI가 계속 발전함에 따라 개발자들은 이 기술을 활용하여 창의력을 향상시키는 놀라운 무료 도구를 만들고 있습니다. 이 글에서는 창의성과 생산성을 높여줄 수 있는 무료 AI 도구 10가지를 소개합니다. 작가, 디자이너, 음악가 또는 영감을 얻고자 하는 모든 분들을 위한 AI 도구가 준비되어 있습니다. 오늘날의 소극적 소득 경제에서 AI를 활용하는 방법에 대한 가이드를 확인해 보시기 바랍니다. 1. Perplexity AI — 개성을 갖춘 스마트 검색 엔진 Perplexity Attach images, text, or PDFs. Sign in ..

원활한 원격 회의를 위한 최고의 AI 회의 도우미 살펴보기 [내부링크]

소개 빠르게 변화하는 현대 비즈니스 세계에서 원활하고 생산적인 회의에 대한 필요성이 그 어느 때보다 커졌습니다. 인공지능(AI) 회의 도우미의 출현으로 팀의 협업 방식에 혁신을 가져왔으며, 가상 회의를 더욱 효율적이고 즐겁게 만들어주었습니다. 1. Google Meet - 언어의 장벽을 허물다 AI 회의 도우미 분야의 선두주자 중 하나인 Google Meet은 언어 장벽을 허무는 데 탁월합니다. 실시간 언어 번역 기능을 통해 Google Meet는 언어 차이로 인해 효과적인 커뮤니케이션이 방해받지 않도록 합니다. 예시 시나리오 다국적 팀이 프로젝트를 위해 협력하는 시나리오를 생각해 보세요. Google Meet의 AI 기반 언어 번역은 음성 단어를 각 참가자가 선호하는 언어로 원활하게 변환하여 진정으로 ..

콘텐츠 작성을 위한 ChatGPT: 50가지 이상의 프롬프트 시도하기 [내부링크]

디지털 시대에는 AI 기술의 발전으로 콘텐츠 작성이 더욱 역동적이고 혁신적으로 변했습니다. 이러한 발전 가운데 ChatGPT는 콘텐츠 제작자를 위한 혁신적인 도구로 주목받고 있습니다. 다양한 글쓰기 요구 사항을 충족할 수 있는 다양한 프롬프트를 제공하는 획기적인 도구입니다. 이 글에서는 ChatGPT와 함께 콘텐츠 작성을 향상하는 데 사용할 수 있는 50개 이상의 프롬프트를 살펴보겠습니다. ChatGPT 이해하기 프롬프트를 살펴보기 전에 ChatGPT가 무엇인지 간략하게 살펴보겠습니다. OpenAI에서 개발한 ChatGPT는 수신된 입력을 바탕으로 사람과 유사한 텍스트를 이해하고 생성하도록 설계된 AI 언어 모델입니다. 기사 작성, 창의적인 아이디어 생성, 이메일 작성 등에 도움이 될 수 있습니다. 콘텐..

ChatGPT로 파이썬을 처음부터 빠르게 배우는 방법 [내부링크]

ChatGPT와 같은 챗봇이 등장하면서 많은 사람들이 인공지능 비서가 효과적인 교사가 될 수 있는지 궁금해하고 있습니다. 이 글에서는 완전 초보자로서 ChatGPT를 사용하여 Python을 배우는 방법에 알아보겠습니다. 1. 기초부터 시작하세요. 새로운 프로그래밍 언어를 배울 때는 기초부터 시작하는 것이 중요합니다. ChatGpt에 다음과 같은 질문을 할 것입니다. Python의 기본 데이터 유형은 무엇인가요? 변수를 할당하고 문자열을 print 하려면 어떻게 해야 하나요? Python에서 list, tuple, dictionary이란 무엇인가요? if/else와 같은 조건문을 어떻게 작성하나요? for 및 while 루프를 어떻게 구성하나요? 더 깊이 들어가기 전에 기본 구성 요소에 익숙해지는 것이 목..

소프트웨어 개발의 미래로서의 DevOps [내부링크]

최근 몇 년 동안 소프트웨어 개발 환경은 DevOps로 보다 협업적이고 효율적인 접근 방식으로 크게 변화하고 있습니다. "development"과 "operations"이 융합된 DevOps는 소프트웨어 개발자와 IT 운영팀 간의 통합과 협업을 강조합니다. 이 글에서는 DevOps의 인기가 높아지는 이유와 소프트웨어 개발의 미래를 바꿀 수 있는 잠재력에 대해 살펴봅니다. 속도에 대한 필요성 기존 소프트웨어 개발 방법론은 느리고 번거로운 프로세스로 인해 어려움을 겪는 경우가 많았습니다. 이러한 문제를 해결하기 위해 등장한 DevOps는 소프트웨어 개발 라이프사이클을 간소화하고 가속화하는 것을 목표로 합니다. DevOps는 개발, 테스트, 배포 및 운영을 원활한 워크플로우로 결합하여 소프트웨어 제품의 출시 ..

ChatGPT를 최대한 활용하는 방법: 10가지 팁과 요령 [내부링크]

ChatGPT는 사용자가 입력하는 프롬프트에 따라 텍스트를 생성할 수 있는 AI 언어 모델입니다. 아이디어를 생성하고, 텍스트를 요약하고, 심지어 언어를 번역하는 데 도움이 되는 강력한 도구입니다. 이 글에서는 ChatGPT를 최대한 활용하기 위한 10가지 팁과 요령을 살펴보겠습니다. 1) 직원처럼 대화하세요. ChatGPT의 가장 큰 장점 중 하나는 자연어를 이해할 수 있다는 것입니다. 즉, 사람과 대화할 때와 같은 방식으로 질문하고 요청할 수 있습니다. 예를 들어, "개에 관한 텍스트를 생성하세요"라고 말하는 대신 "개에 대한 기사를 작성해줄 수 있어?"라고 말할 수 있습니다. generate text about dogs -> can you write an article about dogs? 2) 다..

한 줄로 완성하는 최신 CSS 레이아웃 10가지 [내부링크]

소개 역동적인 웹 개발 세계에서 CSS는 웹사이트의 시각적 매력을 형성하는 데 중요한 역할을 합니다. 수년에 걸쳐 개발자들은 레이아웃을 효율적으로 효율적으로 만들 수 있는 혁신적인 방법을 고안해 왔습니다. 이 글에서는 각각 단 한 줄의 코드로 구현할 수 있는 10가지 최신 CSS 레이아웃을 살펴보겠습니다.이러한 간결한 솔루션은 시간을 절약할 뿐만 아니라 CSS(Cascading Style Sheets)의 강력한 성능과 유연성을 보여줍니다. 1) Flexbox Centering .container { display: flex; justify-content: center; align-items: center; } 2) Grid Centering .container { display: grid; place-i..

C#에서 String과 string의 차이점 이해하기 [내부링크]

C#은 강력한 형식의 프로그래밍 언어입니다. 효과적인 C# 코드를 작성하려면 데이터 형식을 아는 것이 필수적입니다. C#에서 가장 자주 사용되는 데이터 유형 중 하나는 문자열 유형으로 String, string로 선언할 수 있습니다. 이로 인해 약간의 혼동이 발생할 수 있습니다. String과 string의 차이점은 무엇이며, 언제 각각을 사용해야 할까요? 이 글에서는 이 두 가지 유형을 자세히 살펴보고 유사점과 차이점을 이해하고 어느 쪽을 더 선호할 수 있는 몇 가지 시나리오를 살펴보겠습니다. String과 string은 무엇입니까? String String 클래스는 시스템 네임스페이스(System.String)의 일부입니다. Substring, Concat, Replace 등과 같은 문자열 조작을 위..

Vue.js 애플리케이션 개발을 위한 모범 사례 [내부링크]

Vue.js는 웹 애플리케이션 개발에 사용되는 널리 사용되는 자바스크립트 프레임워크입니다. 간단하고 적응 가능하며 확장성이 뛰어난 것으로 유명합니다. 그러나 확장 가능하고 유지 관리가 가능한 Vue.js 애플리케이션을 개발하는 것은 어려울 수 있습니다. 이 글에서는 확장 가능하고 유지 관리가 가능한 Vue.js 애플리케이션 개발을 위한 모범 사례에 대해 설명합니다. 모듈식 접근 방식 따르기 확장 가능하고 유지 관리 가능한 Vue.js 애플리케이션을 개발하기 위한 가장 중요한 모범 사례 중 하나는 모듈식 접근 방식을 따르는 것입니다. 이를 위해서는 애플리케이션을 보다 관리하기 쉽고 재사용 가능한 컴포넌트로 나누십시오. 각 컴포넌트에는 단일 책임이 있어야 이해하고 유지 관리하기 쉽습니다. 모듈식 접근 방식을..

WinUI와 WPF, WinForms, UWP, MFC 비교 [내부링크]

Windows UI 라이브러리(WinUI)는 Windows의 기본 레이어입니다. 여기에는 디자이너와 개발자가 Windows 애플리케이션을 구축하는 데 필요한 컨트롤과 유연한 디자인 시스템이 포함되어 있습니다. WinUI는 MFC(Microsoft Foundation Class Library) 프레임워크, WinForms, WPF(Windows Presentation Foundation) 및 UWP(Universal Windows Platform)와 같은 다양한 그래픽 사용자 인터페이스(GUI) 프레임워크의 최신 버전입니다. Microsoft는 데스크톱 앱(MFC, WinForms, WPF) 및 UWP 앱을 위한 포괄적인 최신 UI 프레임워크를 만들었으며, 새로운 Windows 애플리케이션 및 이전 애플리..

자바스크립트 프레임워크 소개 [내부링크]

소개 자바스크립트(JavaScript)는 현대 웹 개발의 필수 구성 요소가 되었으며, 그 인기로 인해 복잡한 애플리케이션을 구축하는 과정을 간소화하는 많은 프레임워크가 만들어졌습니다. 이러한 프레임워크는 개발자가 웹 애플리케이션을 빠르고 효율적으로 제작하는 데 도움이 되는 다양한 기능과 이점을 제공합니다. 이 글에서는 가장 인기 있는 자바스크립트 프레임워크 중 일부를 살펴보고 고유한 기능을 살펴보겠습니다. Vue Vue는 개발자들 사이에서 인기를 얻고 있는 경량 자바스크립트 프레임워크입니다. 쉽게 배우고 사용할 수 있도록 설계되었으며 다양한 기능을 제공하여 중소규모 애플리케이션을 구축하는 데 탁월한 선택입니다. Vue는 사용자 인터페이스 구축에 반응형 접근 방식을 사용합니다. 즉, 사용자 인터페이스의 변..

블록체인, 영향력 있는 새로운 트렌드 [내부링크]

블록체인 기술은 전 세계적으로 다양한 산업에 혁명을 일으키고 있는 획기적인 혁신으로 등장했습니다. 처음에는 비트코인과 같은 암호화폐와의 연관성으로 알려졌던 블록체인은 이제 소프트웨어 개발에 광범위한 영향을 미치는 파괴적인 힘으로 인식되고 있습니다. 이 글에서는 블록체인이 어떻게 소프트웨어 개발에 영향력 있는 트렌드가 되어 다양한 애플리케이션 전반에 걸쳐 보안, 투명성 및 효율성을 향상시키는지 살펴봅니다. 보안 강화 블록체인 기술의 가장 중요한 장점 중 하나는 강력한 보안 기능입니다. 기존 소프트웨어 시스템은 중앙화된 기관이나 서버에 의존하는 경우가 많아 해킹과 데이터 침해에 취약합니다. 반면 블록체인은 데이터가 여러 노드에 분산되고 저장되는 탈중앙화 네트워크를 사용합니다. 이러한 고유한 탈중앙화와 암호화..

예측 분석을 통한 인공지능(AI) 기반 상호 작용 [내부링크]

인공 지능(AI)은 다양한 산업 분야에서 강력한 도구로 부상하여 기술과 상호 작용하는 방식에 혁명을 일으켰습니다. AI가 크게 발전한 분야 중 하나는 예측 분석 분야로, 기업이 데이터 기반 인사이트를 바탕으로 정보에 입각한 의사결정을 내릴 수 있도록 지원합니다. 이 글에서는 AI 기반 상호작용과 예측 분석이 어떻게 산업을 변화시키고 비즈니스의 미래를 만들어가는지 살펴봅니다. 인사이트는 통찰력이나 깊은 이해를 의미하는 단어로, 특히 비즈니스나 마케팅 분야에서는 데이터를 분석하여 얻은 유용한 정보나 통찰력을 의미하기도 합니다. 예측 분석의 힘 예측 분석은 기존 데이터 세트에서 정보를 추출하여 패턴을 파악하고 미래의 결과나 추세를 예측하는 작업입니다. 기업은 과거 데이터를 분석하여 고객 행동, 시장 동향, 운..

HTML과 CSS 기술을 향상시킬 수 있는 10가지 소규모 프로젝트 아이디어 [내부링크]

소개 HTML과 CSS를 배우는 것은 웹 개발에 관심이 있는 모든 사람에게 필수적인 단계입니다. 이러한 기본 기술은 인터넷에 있는 모든 웹사이트의 구성 요소입니다. 이를 익히려면 연습이 필요한데, 소규모 프로젝트에 참여하는 것보다 더 좋은 방법이 있을까요? 이 글에서는 HTML 및 CSS 기술을 연마하는 데 도움이 되는 10가지 소규모 프로젝트 아이디어를 살펴보겠습니다. 개인 포트폴리오 웹사이트 개인 포트폴리오 웹사이트를 만들어 자신의 기술, 프로젝트, 경험을 보여주세요. 이 프로젝트를 통해 콘텐츠 구조화를 위한 HTML과 레이아웃 및 디자인을 위한 CSS를 연습하면서 웹사이트를 디자인하고 스타일을 지정할 수 있습니다. 레시피 북 HTML과 CSS를 사용하여 디지털 요리책을 디자인하세요. 좋아하는 요리법..

사용자 인터페이스 디자인의 기초: 종합 가이드 [내부링크]

소개 사용자 인터페이스(UI) 디자인은 사용자 친화적이고 시각적으로 매력적인 소프트웨어, 웹 사이트, 모바일 애플리케이션을 만드는 데 중요한 측면입니다. 잘 디자인된 UI는 성공적이고 직관적인 제품과 실망스러운 제품 사이의 차이를 만들 수 있습니다. 이 글에서는 사용자 인터페이스 디자인의 기본 사항을 살펴보고, 주요 원칙을 세분화하고, 이러한 개념을 설명하기 위한 실제 사례를 제공합니다. 사용자 이해 UI 디자인의 첫 번째 단계는 타겟 고객을 이해하는 것입니다. 효과적인 디자인은 사용자의 요구, 선호도, 기대치를 충족시켜야 합니다. 이 점을 설명하기 위해 Facebook의 예를 살펴보겠습니다. Facebook의 UI 디자인은 기술에 능숙한 밀레니얼 세대부터 노년층에 이르기까지 다양한 사용자층에 맞춰져 있..

HTML, CSS, JavaScript 숙달하기 [내부링크]

능숙한 웹 개발자가 되기 위해서는 HTML, CSS, JavaScript와 같은 핵심 웹 기술을 마스터하는 것이 필수적입니다. 다음은 이러한 각 기술을 숙달하는 방법에 대한 분석입니다. 1. HTML (Hypertext Markup Language) 기본 사항 알아보기: 제목(h1, h2, ...), 단락(p), 목록(ul, li), 링크(a) 및 이미지(image)와 같은 기본적인 HTML 요소와 태그를 이해하는 것부터 시작하세요. 시맨틱 HTML: 콘텐츠에 의미와 구조를 부여하기 위해 , , , , , 와 같은 시맨틱 HTML 태그를 사용하는 데 집중하세요. 양식(Forms): 입력 필드, 텍스트 영역, 라디오 버튼, 체크박스, submit 버튼 등 HTML을 사용하여 양식을 만드는 방법을 알아보세요..

웹 기술 디코딩: HTML, XML, JSON, AJAX에 대한 종합 가이드 [내부링크]

소개 빠르게 발전하는 웹 개발 분야에서는 인터넷을 주도하는 핵심 기술에 대한 기초적인 이해가 가장 중요합니다. 이 블로그 게시물은 최신 웹 애플리케이션의 동적 기능에 기여하는 필수 구성 요소인 HTML, XML, JSON 및 AJAX의 복잡한 내용을 풀어내는 것을 목표로 합니다. HTML: 웹 페이지의 구성 요소 HTML(Hypertext Markup Language)은 웹 페이지 구성의 초석입니다. 표준화된 프레임워크 역할을 하는 HTML은 태그를 사용하여 제목, 단락(p), 이미지 및 링크와 같은 다양한 요소를 정의합니다. 웹 브라우저는 HTML을 해석하여 다양한 기기에서 일관된 디스플레이를 보장합니다. 기본적인 HTML 구조를 살펴보겠습니다. Hello, World! This is a simple ..

인공 지능(AI)과 머신 러닝(ML) 활용하기 [내부링크]

소개 빠르게 발전하는 기술 환경에서 인공 지능(AI)과 머신 러닝(ML)은 게임 체인저로 등장하여 우리가 세상과 상호 작용하고 인식하는 방식에 혁명을 일으켰습니다. 효율성 향상부터 복잡한 문제 해결까지 AI와 ML의 융합은 산업을 재편하고 전례 없는 속도로 혁신을 주도하고 있습니다. 인공지능과 머신러닝의 이해 인공 지능은 우리가 "스마트"하다고 생각하는 방식으로 작업을 수행할 수 있는 기계의 광범위한 개념입니다. 반면 머신러닝은 명시적으로 프로그래밍하지 않고도 기계가 데이터를 통해 학습할 수 있도록 하는 AI의 하위 집합입니다. 이 두 가지를 함께 사용하면 시간이 지남에 따라 성능을 향상할 수 있는 지능형 시스템을 만들 수 있습니다. 정의 인공 지능(AI): AI는 일반적으로 인간의 지능이 필요한 작업을..

최고의 무료 AI 이미지 생성기 살펴보기 [내부링크]

소개 디지털 콘텐츠 제작의 역동적인 영역에서 인공지능(AI) 이미지 생성기는 새로운 차원의 창의성을 발휘할 수 있는 강력한 도구로 부상했습니다. 그래픽 디자이너, 소셜 미디어 애호가 또는 시각적 콘텐츠를 향상시키고자 하는 사람 모두에게 AI 이미지 생성기의 세계는 흥미로운 가능성으로 가득합니다. 이 글에서는 아이디어를 멋진 비주얼로 손쉽게 변환할 수 있도록 도와주는 최고의 무료 AI 이미지 생성기 몇 가지를 소개합니다. Deep Dream Generator Deep Dream Generator로 초현실적인 여행을 떠나보세요. Google의 신경망으로 구동되는 이 도구는 평범한 이미지를 꿈같은 사이키델릭한 작품으로 바꿔줍니다. 다양한 필터와 스타일로 실험하면서 상상력을 발휘하여 독특하고 이색적인 비주얼을 ..

[React vs Vue.js] Vue.js가 React보다 좋을까? [내부링크]

소개 끊임없이 진화하는 웹 개발 환경에서 올바른 프런트엔드 프레임워크를 선택하는 것은 때로는 혼란스러울 수 있습니다. 특히 선택할 수 있는 js 프레임워크가 많은 경우에는 더욱 그렇습니다. 가장 유명한 js 프런트엔드 프레임워크는 다음과 같습니다. 1. React Facebook에서 개발하고 유지 관리합니다. Virtual DOM, 컴포넌트 기반 아키텍처 및 성능으로 유명합니다. 광범위하게 채택되어 방대한 커뮤니티와 생태계를 보유하고 있습니다. 많은 기업이 대규모 애플리케이션을 위해 선택했습니다. 2. Angular Google에서 개발하고 유지관리합니다. 양방향 데이터 바인딩, 종속성 주입 및 대규모 애플리케이션 기능으로 잘 알려진 포괄적인 프런트엔드 프레임워크입니다. 동적 웹 애플리케이션 구축을 위한..

열정 없이 돈만을 위해 프로그래밍에 입문하면 안되는 5가지 이유 [내부링크]

바보라도 컴퓨터가 이해할 수 있는 코드를 작성할 수 있습니다. 훌륭한 프로그래머는 인간이 이해할 수 있는 코드를 작성합니다. — 마틴 파울러 프로그래밍은 열정과 헌신이 필요한 분야입니다. 높은 연봉이 매력적일 수는 있지만, 열정 없이 프로그래밍을 할 충분한 이유가 될 수는 없습니다. 열정 없이 돈만 보고 프로그래밍에 뛰어들면 안 되는 5가지 이유는 다음과 같습니다. 프로그래밍은 끊임없는 학습과 개선이 필요한 도전적인 분야입니다. 열정이 없으면 동기를 유지하고 최신 기술과 트렌드를 따라가는 것이 어려울 수 있습니다. 프로그래밍은 문제 해결 능력과 고정관념에서 벗어나는 능력을 요구하는 창의적인 분야입니다. 열정이 없으면 복잡한 문제에 대한 혁신적인 솔루션을 찾기가 어려울 수 있습니다. 프로그래밍은 팀워크와 ..

MVC, MVVM, MVP 이해 및 비교 [내부링크]

소개 소프트웨어 개발 세계에는 개발자가 모듈성, 유지 관리성 및 확장성을 촉진하는 방식으로 코드를 설계하고 구성하는 데 도움이 되는 다양한 아키텍처 패턴이 있습니다. 이러한 인기 있는 세 가지 패턴은 MVC(Model-View-Controller), MVVM(Model-View-ViewModel) 및 MVP(Model-View-Presenter)입니다. 이 글에서는 이러한 아키텍처 패턴의 세부 사항을 자세히 살펴보고 주요 원칙, 장점 및 사용 사례를 알아보겠습니다. Model-View-Controller(MVC) MVC는 소프트웨어 개발에서 가장 오래되고 가장 널리 사용되는 아키텍처 패턴 중 하나입니다. 다음 구성 요소로 구성됩니다. Model: 애플리케이션의 데이터와 비즈니스 로직을 나타냅니다. 데이터..

[ChatGPT] 코딩에서 활용하기 위한 5가지 팁 [내부링크]

ChatGPT는 매우 빠르게 개발자들의 필수 도구가 되었습니다. 우리 모두는 이 도구가 루프 생성이나 if 조건 등을 사용하는 작은 알고리즘 등 코딩의 사소한 작업을 잘 처리한다는 것을 알고 있습니다. 또한 최근 또는 새로운 주요 변경 사항이 있는 라이브러리에 대한 코드를 생성하거나 적절하게 설명되지 않은 복잡한 대규모 작업의 경우 약점이 있다는 것을 알 수 있습니다. 팁 코딩에서 ChatGPT를 더 잘 사용하기 위한 5가지 팁에 대해 알아보겠습니다. 질문을 작은 작업으로 나누고 한 번에 한 단계씩 점진적으로 추가하여 코드를 생성하도록 요청하세요. 이 접근 방식은 복잡한 코드 블록과 관련하여 더 나은 코딩 결과를 제공하고 오류를 줄이는 것으로 나타났습니다. 외부 라이브러리 등이 포함된 복잡한 작업에 특히..

[ChatGPT] 대화형 AI 활용 [내부링크]

기술이 디지털 세계와 상호 작용하는 방식을 지속적으로 변화시키는 시대에 챗봇과 가상 비서는 인간과 컴퓨터의 상호 작용을 위한 강력한 도구로 등장했습니다. 이 분야의 최신 혁신 중에는 OpenAI가 개발한 최첨단 AI 모델인 ChatGPT가 있습니다. 이 글에서는 ChatGPT의 매혹적인 세계와 그 기능, 대화형 AI의 미래에 미치는 영향을 살펴봅니다. 챗봇과 가상 비서의 등장 챗봇(Chatbot)과 가상 비서(Virtual Assistant)는 처음부터 많은 발전을 이루었습니다. 처음에는 간단한 작업과 반복적인 쿼리를 위해 설계되었으나 인간과 유사한 텍스트를 이해하고 생성할 수 있는 매우 정교한 대화 에이전트로 발전했습니다. 오늘날 챗봇은 고객 서비스, 의료, 전자상거래, 엔터테인먼트 등 다양한 산업 분..

생성형 AI(Generative AI)의 미래 [내부링크]

소개 인공지능의 세계는 변혁의 시대를 맞이하고 있으며, 이 혁명의 중심에는 생성형 AI(Generative AI)가 있습니다. 이 고급 모델은 콘텐츠를 제작하고 복잡한 문제를 해결할 수 있는 힘을 가지고 있으며, 우리가 기술과 상호작용하는 방식과 그 가능성을 재정의하고 있습니다. 이 글에서는 생성형 AI의 현실감과 창의성 향상부터 윤리적, 환경적 영향에 이르기까지 생성형 AI의 미래에 대해 살펴볼 것입니다. 앞으로 펼쳐질 흥미진진한 여정에 대해 자세히 알아봅시다. 생성형 인공지능(generative artificial intelligence) 또는 생성형 AI(generative AI)는 프롬프트에 대응하여 텍스트, 이미지, 기타 미디어를 생성할 수 있는 일종의 인공지능(AI) 시스템이다. 생성형 AI는..

다중 장치(Multi-Device)를 위한 반응형 디자인 [내부링크]

오늘날의 디지털 환경에서 웹 페이지는 대형 데스크톱 모니터부터 소형 스마트폰에 이르기까지 다양한 장치에서 액세스됩니다. 웹 사이트가 이러한 모든 장치에서 멋지게 보이고 원활하게 작동하는지 확인하는 것은 현대 웹 디자인의 기본 측면입니다. 반응형 디자인이 중요한 역할을 하는 곳이 바로 여기입니다. 반응형 디자인이란 무엇입니까? 반응형 디자인은 웹 페이지를 다양한 화면 크기와 장치에 맞게 적절하게 적용하는 것을 목표로 하는 웹 디자인 접근 방식입니다. 이는 웹 사이트가 데스크톱 컴퓨터, 태블릿, 휴대폰 중 어느 기기에서 보이든 상관없이 원활한 사용자에 보이는 것입니다. 반응형 디자인을 사용하면 모든 기기에서 콘텐츠에 액세스할 수 있을 뿐만 아니라 사용자 친화적이기도 합니다. 미디어 쿼리(Media Query..

웹 개발자를 위한 CSS Flexbox 기술 [내부링크]

CSS Flexbox에 대해 자세히 알아보고 개념을 설명하는 몇 가지 코드 예제를 살펴보겠습니다. CSS Flexbox란 무엇입니까? CSS Flexbox(Flexible Box Layout)는 크기를 알 수 없거나 동적인 경우에도 컨테이너 내의 공간을 분배하고 항목을 정렬하여 복잡한 레이아웃의 디자인을 단순화하는 1차원 레이아웃 모델입니다. Flexbox는 내비게이션 메뉴(Navigation Menu), 카드 레이아웃(Card Layout), 콘텐츠 배포(Content Distribution) 등 반응성이 뛰어나고 유연한 디자인을 만드는 데 특히 유용합니다. CSS Flexbox의 기본 개념 Flex Container: Flex 항목을 포함하는 요소를 “Flex Container”라고 합니다. Flex..

자바스크립트 성능 최적화 기술 익히기 [내부링크]

빠르고 반응이 빠른 웹 애플리케이션을 만들려면 자바스크립트 실행 시간을 줄이는 것이 중요합니다. 자바스크립트는 강력하고 다재다능한 프로그래밍 언어이지만 제대로 최적화되지 않으면 웹 페이지 속도가 느려질 수 있습니다. 자바스크립트 코드를 실행하는 데 시간이 너무 오래 걸리면 사용자 경험이 느려지고 페이지 렌더링이 지연되며 이탈률이 증가할 수 있습니다. 따라서 원활한 사용자 경험을 보장하기 위해서는 자바스크립트 실행 시간을 최적화하는 것이 중요합니다. 전략 다음은 이를 달성하기 위한 몇 가지 전략입니다 자바스크립트 최소화 및 압축: 불필요한 코드를 제거하고 축소 및 압축 도구를 사용하여 웹페이지가 로드되는 자바스크립트 양을 줄입니다. 축소 및 압축된 자바스크립트 파일은 크기가 더 작으므로 다운로드가 더 빠르..

반응형 웹 디자인을 사용해야 하는 10가지 이유 [내부링크]

전 세계가 점점 더 모바일화됨에 따라 반응형 웹 디자인의 중요성은 아무리 강조해도 지나치지 않습니다. 반응형 디자인은 웹 사이트를 보는 데 사용되는 기기의 화면 크기에 맞게 웹 사이트가 조정되도록 하는 웹 디자인 접근 방식입니다. 즉, 데스크톱 컴퓨터, 태블릿, 스마트폰 등 어떤 기기에서 사이트를 탐색하든 최적의 보기 환경을 제공합니다. 이 글에서는 반응형 웹 디자인 사용을 고려해야 하는 10가지 이유를 살펴봅니다. 1. 사용자 경험 개선 반응형 웹 디자인은 사용자가 웹사이트에 액세스하는 기기에 관계없이 일관된 경험을 할 수 있도록 합니다. 따라서 사용자가 사이트를 더 쉽게 탐색하고 원하는 정보를 쉽게 찾을 수 있습니다. 사용자가 사이트에서 긍정적인 경험을 하면 사이트에 더 오래 머무르고 콘텐츠에 더 많..

ChatGPT란 무엇인가요? ChatGPT로 어떻게 돈을 벌까? [내부링크]

ChatGPT는 다양한 질문에 답하고 사람들과 대화할 수 있도록 설계된 AI 기반 언어 모델입니다. AI 언어 모델로서 ChatGPT는 돈을 벌거나 금융 거래에 참여할 수 있는 능력이 없습니다. 하지만 ChatGPT를 사용하여 잠재적으로 수익을 창출할 수 있는 방법이 있습니다. 다음은 몇 가지 아이디어입니다. 사업 아이디어 조사 창업을 고려하고 있다면 ChatGPT를 사용하여 잠재적인 사업 아이디어를 조사할 수 있습니다. ChatGPT는 시장 동향, 소비자 행동 및 업계 모범 사례에 대한 통찰력을 제공할 수 있습니다. 잠재적인 사업 아이디어에 대해 ChatGPT에 질문을 하면 실행 가능하고 수익성 있는 옵션인지 더 잘 파악할 수 있습니다. 비즈니스를 위한 챗봇 구축하기 챗봇은 기업이 고객과 소통하고 고객..

차세대 웹을 위한 인기있는 상위 10개 Angular 라이브러리 [내부링크]

차세대 웹 앱에 적합한 Angular 라이브러리를 선택하는 것은 어려운 작업일 수 있습니다. 사용 가능한 옵션이 너무 많기 때문에 프로젝트에 가장 적합한 라이브러리를 결정하기가 어려울 수 있습니다. 하지만 프로젝트의 규모, 앱의 복잡성, 필요한 기능 등의 요소를 고려하면 선택의 폭을 좁히고 정보에 입각한 결정을 내릴 수 있습니다. 또한 라이브러리를 학습하고 구현하는 데 투자해야 하는 시간을 고려하는 것도 중요합니다. 이 글에서는 사용 가능한 라이브러리에 대한 개요와 프로젝트에 적합한 라이브러리를 선택할 때 고려해야 할 요소에 대해 설명합니다. Angular 무엇입니까? Angular는 Google에서 개발하고 유지 관리하는 오픈 소스 웹 애플리케이션 프레임워크입니다. 웹 애플리케이션에서 자주 사용되는 구..

Vue 2와 Vue 3의 차이점 [내부링크]

프런트엔드 개발 세계에서는 Vue.js가 인기 있는 선택이 되었습니다. Vue.js는 최신 웹 애플리케이션 개발에 널리 사용되는 사용자 친화적인 JavaScript 프레임워크입니다. 그러나 Vue.js의 최신 버전인 Vue 3은 중요한 업데이트와 개선 사항을 도입한다는 점에서 Vue 2와 다릅니다. 이 글에서는 Vue 2와 Vue 3의 주요 차이점을 자세히 살펴보겠습니다. Virtual DOM Vue.js의 기초는 Virtual DOM(Document Object Model) 기술에 있습니다. Vue 2에서는 Virtual DOM이 Vue.js의 이벤트 루프에 완벽하게 통합됩니다. 그러나 Vue 3에서는 Virtual DOM이 재설계되어 더욱 효율적으로 만들어졌습니다. Vue 3에서는 Virtual DO..

버전 관리 이해하기 [내부링크]

소개 끊임없이 진화하는 소프트웨어 개발 환경에서 버전 제어 개념은 초석이 됩니다. 단독 프로젝트를 진행하든 팀과 협업하든 관계없이 버전 제어 시스템(Version Control System, VCS)은 코드 변경을 관리하고 프로젝트 무결성을 유지하며 원활한 협업을 촉진하는 데 중요한 역할을 합니다. 이 글에서는 버전 제어의 세계에 대해 자세히 알아보고 버전 제어의 이점, 유형, 널리 사용되는 도구 및 모범 사례를 살펴보겠습니다. 버전 관리 이해 버전 제어는 시간이 지남에 따라 프로젝트(일반적으로 소스 코드)의 변경 사항을 관리하기 위한 체계적인 접근 방식입니다. 이는 개발자에게 수정 사항을 추적하고 효과적으로 협업하며 필요한 경우 이전 상태로 되돌릴 수 있는 기능을 제공합니다. 이 프로세스를 통해 프로젝..

Vue JS 기본 설명 [내부링크]

Vue 애플리케이션을 시작하려면 명령어을 사용 하세요. npm create vue@latest 공식 Vue 프로젝트 스캐폴딩 도구인 create-vue를 설치하고 실행합니다. 설치 시 프로젝트 이름, TypeScript 설정, JSX 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬프트가 표시됩니다: Project name: … Add TypeScript? … No / Yes Add JSX Support? … No / Yes Add Vue Router for Single Page Application development? … No / Yes Add Pinia for state management? … No / Yes Add Vitest for Unit testing? … N..

[Angular] 컴포넌트 데코레이터(Component Decorator) 사용 방법 [내부링크]

Angular에서 @Component 데코레이터는 재사용 가능한 UI 컴포넌트(Component)를 구축하는 초석입니다. Angular 애플리케이션 내에서 컴포넌트를 처리하고, 인스턴스화하고, 사용하는 방법을 정의하는 메타데이터를 제공합니다. 이 글에서는 @Component 데코레이터를 심층적으로 살펴보고, 다양한 속성에 대해 논의하고, 이러한 속성을 사용하여 코드 복잡성을 관리하는 방법을 설명합니다. 기본 사항 @Component 데코레이터는 구성 개체를 인수로 사용하는 함수입니다. 메타데이터를 컴포넌트 클래스와 연결하는 데 사용되므로 Angular가 컴포넌트를 생성하고 렌더링 하는 방법을 이해할 수 있습니다. @Component 데코레이터를 사용하는 간단한 예는 다음과 같습니다. import { Co..

[Angular CLI] 명령어 사용 및 활용 방법 [내부링크]

Angular CLI는 개발자가 Angular 애플리케이션을 쉽게 생성, 유지 및 관리하는 데 도움이 되는 강력한 명령줄 인터페이스입니다. 개발 워크플로우를 간소화하고 생산성을 향상시키는 다양한 기능을 제공합니다. 이 글에서는 필수 Angular CLI 명령어와 이 명령어가 복잡하고 정교한 Angular 애플리케이션을 개발하는 데 어떻게 도움이 되는지 살펴보겠습니다. Angular CLI 설치 Angular CLI를 사용하려면 시스템에 전역적으로 설치해야 합니다. Node.js와 npm이 설치되어 있는지 확인한 후 다음 명령어를 실행하세요. npm install -g @angular/cli 새로운 Angular 애플리케이션 생성 새로운 Angular 애플리케이션을 만들려면 ng new 명령어 뒤에 프로젝..

JavaScript 프레임워크 비교: Angular, React, Vue.js [내부링크]

웹 개발 세계에서 Angular, React 및 Vue.js와 같은 JavaScript 프레임워크는 개발자가 웹 애플리케이션을 구축할 수 있는 다양한 도구를 제공합니다. 그러나 각각은 서로 다른 디자인 철학, 학습 곡선(learning curve) 및 사용 사례를 가지고 있습니다. 다음은 이 세 가지 프레임워크를 비교한 것입니다. Angular 장점 모든 기능을 갖춘 프레임워크 Angular는 광범위한 기능들을 자랑하며 필요한 모든 도구를 포함합니다. 따라서 크고 복잡한 애플리케이션에 적합합니다. Type Safety TypeScript 사용 덕분에 컴파일 타임(compile-time) 오류 감지 기능을 제공하여 보다 안전한 코드를 보장합니다. 강력한 데이터 바인딩 Angular의 강력한 기능인 양방향 ..

[Visual Studio Code] 생산성 향상을 위한 팁 [내부링크]

Visual Studio Code(VS Code)는 개발 세계를 강타한 인기 있고 강력한 소스 코드 편집기입니다. 유연성, 확장성 및 풍부한 생태계 덕분에 많은 개발자가 선택합니다. 이 글에서는 코딩 경험을 향상하고 생산성을 높이는 데 도움이 되는 몇 가지 유용한 팁과 테마를 공유하겠습니다. 키보드 단축키 익히기 키보드 단축키를 사용하면 시간과 노력을 절약하여 효율성을 높일 수 있습니다. 시작하는 데 도움이 되는 몇 가지 필수 단축키는 다음과 같습니다. Ctrl+P 또는Cmd+P: 작업 공간에서 파일을 빠르게 엽니다. Ctrl+Shift+F 또는 Cmd+Shift+F: 전체 프로젝트에서 검색합니다. Alt+Up 또는 Alt+Down: 현재 줄을 위나 아래로 이동합니다. Ctrl+D 또는 Cmd+D: 현재..

[Angular] ChangeDetectorRef: 수동 변경 감지에 대해 자세히 알아보기 [내부링크]

변경 감지(Change Detection)는 Angular 애플리케이션의 중요한 측면으로, UI가 애플리케이션 상태와 동기화된 상태를 유지하도록 보장합니다. Angular는 효율적인 기본(default) 변경 감지 전략을 제공하지만 성능 최적화나 복잡한 사용 사례에는 보다 세부적인 접근 방식이 필요한 경우가 있습니다. 이 글에서는 ChangeDetectorRef의 강력한 기능을 심층적으로 살펴보고 해당 방법을 검토하고 잠재력을 최대한 보여주는 예를 보여 드리겠습니다. ChangeDetectorRef 이해 ChangeDetectorRef는 변경 감지 메커니즘에 대한 직접적인 인터페이스를 제공하는 Angular 클래스입니다. 이를 통해 개발자는 변경 감지를 수동으로 트리거(trigger)하고, 변경 감지 트..

[Angular] Pipe 소개 및 사용방법 [내부링크]

Angular 파이프(Pipe)는 Angular 애플리케이션의 필수 부분으로, 데이터를 변환하고 형식을 지정하는 간단한 방법을 제공합니다. 파이프를 사용하면 필요에 맞게 데이터를 쉽게 조작하고 이해하기 쉬운 형식으로 표시할 수 있습니다. 이 글에서는 AsyncPipe, CurrentPipe, DatePipe, DecimalPipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, KeyValuePipe, LowerCasePipe, PercentPipe, SlicePipe, TitleCasePipe 및 UpperCasePipe를 포함한 다양한 유형의 Angular 파이프를 살펴보겠습니다. 또한 Angular 파이프를 효과적으로 사용하기 위한 모범 사례에 대해서도 알아보겠습니다. ..

[Angular] 데코레이터(Decorator) 소개 및 사용방법(2) [내부링크]

Angular Decorator는 Angular 애플리케이션 구축의 기본 측면입니다. 이는 Angular에 처리 및 사용 방법을 알려주는 메타데이터를 제공하여 클래스, 속성, 메서드 및 매개 변수의 동작을 향상시키는 데 사용됩니다. 이 글에서는 Angular의 다양한 데코레이터 유형을 살펴보고 이를 효과적으로 사용하는 시기와 방법을 알아봅니다. @NgModule @NgModule은 Angular 모듈을 생성하고 구성하는 데 사용되는 데코레이터입니다. Angular 모듈은 components, services, directives, pipes 등과 같은 애플리케이션의 다양한 부분을 위한 컨테이너입니다. 이는 애플리케이션의 여러 부분 간의 종속성을 구성하고 관리하는 데 사용됩니다. @NgModule 데코레이..

[Angular] 데코레이터(Decorator) 소개 및 사용방법(1) [내부링크]

Angular Decorator는 Angular 애플리케이션 구축의 기본 측면입니다. 이는 Angular에 처리 및 사용 방법을 알려주는 메타데이터를 제공하여 클래스, 속성, 메서드 및 매개 변수의 동작을 향상시키는 데 사용됩니다. 이 글에서는 Angular의 다양한 데코레이터 유형을 살펴보고 이를 효과적으로 사용하는 시기와 방법을 알아봅니다. @Component @Component 데코레이터는 Angular에서 새 컴포넌트(Component)를 정의하는 데 사용됩니다. selector, template, styles 등과 같은 컴포넌트에 대한 메타데이터를 제공하는 데 사용됩니다. 구성 개체를 매개 변수로 사용하는 클래스 데코레이터입니다. @Component({ selector: 'app-my-compo..

[Angular] ViewRef: 뷰(View) 변경 감지 및 업데이트 알아보기 [내부링크]

Angular는 개발자가 동적이고 반응성이 뛰어난 애플리케이션을 구축할 수 있는 강력한 프런트 엔드 프레임워크입니다. Angular의 주요 기능 중 하나는 데이터가 변경될 때마다 뷰를 자동으로 업데이트하는 변경 감지 시스템입니다. 이 글에서는 Angular의 ViewRef 클래스에 대해 자세히 알아보고 이 클래스를 사용하여 변경 감지 프로세스 및 뷰 업데이트를 제어하는 방법을 살펴보겠습니다. Angular의 변경 감지 이해 변경 감지는 뷰가 항상 데이터와 함께 최신 상태를 유지하도록 보장하므로 Angular 프레임워크의 중요한 부분입니다. Angular는 데이터 변경 사항을 자동으로 추적하고 그에 따라 뷰를 업데이트하는 영역 기반 변경 감지 시스템을 사용합니다. 이 변경 감지 프로세스는 사용자 입력이나 ..

[Angular] ViewEncapsulation: 다양한 모드 및 사용 방법 알아보기 [내부링크]

Angular는 개발자에게 ViewEncapsulation을 포함하여 컴포넌트를 빌드하고 스타일을 지정할 수 있는 여러 도구를 제공합니다. 이 글에서는 ViewEncapsulation이 무엇인지, ViewEncapsulation이 제공하는 다양한 모드와 각 모드를 언제 사용하는지 살펴보겠습니다. ViewEncapsulation 이란 ViewEncapsulation은 컴포넌트의 스타일을 캡슐화하는 Angular 기능입니다. 즉, 원치 않는 스타일 충돌을 방지하기 위해 컴포넌트의 스타일을 애플리케이션의 다른 부분과 분리합니다. 또한 ViewEncapsulation을 사용하면 컴포넌트가 다른 컴포넌트에 영향을 주지 않는 자체 비공개 스타일을 가질 수 있습니다. Angular는 Emulated, None 및 S..

[Angular] 생명주기(Lifecycle) 와 훅(Hook) 메소드 이해 [내부링크]

Angular는 개발자가 동적이고 반응성이 뛰어난 웹 애플리케이션을 구축할 수 있는 강력한 프레임워크입니다. Angular의 주요 기능 중 하나는 각 컴포넌트가 고유한 생명주기(Lifecycle)를 갖는 컴포넌트 기반 아키텍처입니다. 이러한 생명주기를 이해하는 것은 효율적이고 성능이 뛰어난 애플리케이션을 구축하는 데 중요합니다. 이 글에서는 Angular에서 사용할 수 있는 다양한 생명주기 훅(Hook) 메서드와 차이점, 그리고 이를 사용하는 모범 사례를 살펴보겠습니다. 생명주기 훅 메소드이란 무엇입니까? Angular 생명주기 훅 메서드는 컴포넌트 생명 주기 중 특정 지점에서 호출되는 메서드입니다. 이러한 훅 메서드를 사용하면 컴포넌트(component)의 초기화, 생성 및 삭제와 같은 특정 시점에 작..

아이와 처음 '문센'에 간다면 [내부링크]

문화센터에는 엄마들만 가득하다는 편견을 버리세요. 친구 같은 아빠가 늘어나면서 문화센터에도 아빠들의 모습이 눈에 띄게 늘었습니다. 특히 주말 오전에는 아빠들이 함께 할 만한 프로그램이 많아요. 아빠의 육아 참여가 아이의 언어 및 사회성 발달을 돕는다는 건 익히 알려진 사실입니다. 문화센터는 짧은 시간이지만 집 밖에서 아이와 밀도 있는 시간을 보낼 수 있어 인기가 높습니다. 초보 아빠를 위한 문화센터 프로그램 선택 노하우 아이는 물론 아빠도 즐겁게 참여할 수 있는 프로그램을 택하세요. 아이와 스킨십을 나누고 몸놀이를 즐기는 프로그램이 인기입니다. 베이비 마사지, 놀잇감놀이, 음악놀이, 신체놀이, 오감놀이 등이 아이와 즐거운 시간을 보낼 수 있는데다 집중도가 높아 인기가 많습니다. 1️ 첫 수업은 생후 ..

아빠가 알아둬야 할 대표적 질병 [내부링크]

아이를 키우다 보면 가슴 쓸어내릴 일이 많죠. 특히 아이가 아플 때 가장 마음이 아립니다. 생후 13~24개월 아이에게 흔한 대표 질병의 증상을 미리 알아두면 도움이 될 거에요. 알레르기비염c 초기 증상은 기침과 코막힘 등 감기와 유사하며, 2차 증상 역시 몸살감기처럼 근육통, 두통 등을 보입니다. 특히 알레르기 비염은 한 번에 완치되기 어렵고 성장기 아이의 경우 성장 발달을 저해하고 학습 능력 저하로 이어지기도 하므로 세심히 신경 써야 해요. 아이가 집먼지진드기, 동물의 털, 바퀴벌레 등에 노출되지 않도록 청결한 환경을 조성하는 게 무엇보다 중요합니다. 꼼꼼한 집 안 청소는 기본이고 자주 환기해서 실내 공기를 맑게 유지하세요. 구내염 1~3세 아이들이 앓는 가장 흔한 질병 중 하나가 바로 헤르페스성 ..

아빠가 실천해야 할 바람직한 습관 [내부링크]

아빠가 아이에게 실천해야 할 바람직한 습관 16가지에 대해 알아볼게요. 1. 하루에 1번 이상 아이를 안아준다. 2. 하루에 1번 이상 환한 웃음을 보인다. 3. 하루에 1번 이상 아이를 칭찬한다. 4. 하루에 10분 이상 아이를 놀아준다. 5. 아이와 한 약속은 사소한 것이라도 지킨다. 6. 아이 앞에서 책 읽는 모습을 자주 보인다. 7. 아이 앞에서 엄마를 사랑하고 아낀다. 8. 집안일을 많이 도와준다. 9. 아빠 일은 스스로 한다. 10. 물건 정리를 잘한다. 11. 음식을 골고루 먹는다. 12. 일찍 자고 일찍 일어나는 부지런한 모습을 보인다. 13. 정해진 시간만큼 TV를 보고 컴퓨터를 한다. 14. 아이 앞에서는 술, 담배를 하지 않는다. 15. 바르고 고운 말을 쓴다. 16. 생활 규범을 잘..

백일 전 아기와 잘 놀아주는 10가지 방법 [내부링크]

온종일 누워 지내는 신생아와 어떻게 놀아줘야 할까요? 아기의 오감을 자극하고 애착을 높이는 아빠의 놀이법을 알아볼게요. 1. 눈 맞추기 20cm 거리에서 말을 걸며 아기와 눈을 맞추세요. 형태보다는 움직임에 더 민감한 시기이므로 아기의 눈앞에서 장난감을 움직이면 좋아합니다. 2. 모빌 놀이 검은색(또는 붉은색) 도형이나 사선이 그려진 모빌을 침대 위 25cm 정도 높이에서 보여주다가 서서히 아기 눈앞으로 가까이 가져가세요. 이어서 아기의 양쪽 귀 사이로 움직여보세요. 3. 딸랑이 흔들c 생후 3개월쯤 되면 소리로 방향을 인식시키는 자극이 필요해요. 아기의 귀에 딸랑이를 대고 흔들어주세요. 아기가 고개를 돌려 바라보면 반대편 귀에 대고 흔들고 익숙해지면 여러 방향에서 들려주세요. 4. 입술 늘여 웃는 ..

아이의 '기질'에 따른 육아법 [내부링크]

기질 기질은 어떤 사람의 타고난 성질이다. 심리학에서 기질은 '자극에 대한 민감성이나 특정한 유형의 정서적 반응을 보여 주는 개인의 성격적 소질'이라고 표현해 볼 수 있다. 위키백과 기질은 타고나는 것이라 변하기 어렵지만 그 기질에 양육 환경과 교육이 더해져 형성되는 성격은 달라질 수 있습니다. 내성적인 아이가 자라면서 외향적인 성격으로 바뀔지라도 수줍음이 완전히 없어지는 건 아니라고 합니다. 이 또한 기질적인 특성이고, 부모는 아이의 기질을 인정하고 이해해주어야 합니다. 아이의 기질 분류는 다양하지만 가장 많이 알려진 것은 순한 아이, 까다로운 아이(예민한 아이), 느린 아이 세 가지 유형입니다. 만 3세 이전 아이들은 주변의 자극에 일관되게 반응할만한 사고, 감정, 행동이 아직 충분히 발달하지 않..

즐겁게 '말 공부'하기 [내부링크]

1. 끊임없이 대화하기 아이의 언어 발달을 돕는 방법은 아주 간단합니다. 아이가 하는 말에 귀 기울이고 끊임없이 응대해주면 됩니다. 아이가 입 밖으로 내는 소리에 아빠가 적절히 반응하면 일부러 가르치려 애쓰지 않아도 자연스럽게 아이 스스로 언어를 배워나갈 수 있습니다. 아이에게는 아빠의 목소리를 듣는 것만으로 충분한 언어 자극이 됩니다. 그러니 아이랑 대화할 때는 다양한 어휘를 사용하는 게 좋습니다. 아이의 말이 부쩍 늘어나는 시기에는 아빠의 욕심과 조급함도 함께 늘어나는 부작용이 생기기도 합니다. 말을 잘하는 아이가 똑똑해 보이기 마련이라 자녀에게 더 어려운 단어나 문장을 가르치고 싶어합니다. 하지만 이 시기에 가장 효과적인 교육은 따로 말을 가르치기보다 말을 자주 걸어서 대화를 나누고 아이가 ..

아빠가 아이와 신체놀이 해야되는 이유 [내부링크]

오은영 박사님이 "아빠들에게 아이와 신체놀이 많이 해주세요" 라는 당부를 드리는 말을 하셨습니다. 인간의 본능적인 유전자 측면에서 말씀해 주셨습니다. 1. 신체놀이를 통해 발달함 아빠와 아이가 신체놀이를 통해 아빠가 아이를 번쩍 들고 목말도 태우고 하는 이런 놀이를 통해 아이들은 근육의 힘을 배웁니다. 아이는 물질의 성질을 이해하는 것을 통해 발달합니다. 물건을 던지는 놀이를 통해 몸으로 습득되는 중력의 힘을 알게 되고 쉽게 받아들이는 뇌의 신경회로가 활성화되며 배움의 기초가 되는 다양한 경험을 하게되므로 신체놀이를 권장하는 이유입니다. 물론 엄마도 해 줄 수 있지만 이론적인 기준으로 봤을 때 아빠들이 신체놀이를 많이 할 때 힘의 원리를 배웁니다. 그리고 위험으로부터 나를 지켜 준다는 것을 본능적으로 느..

좋은 아빠가 되기 위한 12가지 지혜 [내부링크]

1. 자녀와 여행하는 아버지가 되자. 자녀와 좋은 관계를 만들려면 좋은 추억이 있어야 한다. 여행, 바둑, 등산, 요리, 운동 등 특별한 시간을 만들자. 2. 자녀에게 칭찬해 주는 아버지가 되자. 자녀의 단점보다 장점을 보도록 하자. 장점을 인정해 주고 격려해 준다면 단점은 언젠가 없어질 것이다. 3. 자녀가 가정의 따뜻함을 느끼게 하자. 가정은 자녀의 보금자리이다. 가족구성원 모두 서로 반갑게 맞아주자. 인사만 받는 아버지가 되지 말자. 4. 자녀와 함께 서점에 가보자. 자녀와 손잡고 서점에 가보자. 자녀가 어떤 책을 좋아하는지 어떤 성향을 가지고 있는지 알 수 있다. 책 선물은 가정 좋은 선물이다. 5. 자녀의 학교에 가보자. 한 학기에 한 번이라도 자녀가 공부하는 교실을 찾아가보자. 그리고 선생님과..

Profile [내부링크]

보유기술 Programming Laguage Java, C#, C++ HTML5, CSS, JavaScript Python Framework / Library Spring Framework, Spring Boot, JPA, Querydsl NodeJS, NestJS React, React Natice, NextJS, Angular Bootstrap, JQuery Android, WPF Server MySQL, MSSQL, PostgreSQL, Oracle Elasticsearch Docker, Nginx, Tomcat Kafka, Zookeeper Tooling / DevOps GitHub, GitLab, SVN Gradle, maven Jenkins, Travis CI Environment Linux,..