창슈 Area

JavaScript 비동기 흐름 제어: Promise.all, Promise.race 활용법

창슈 — Wed, 29 May 2024 13:23:15 +0900

비동기 프로그래밍은 현대 JavaScript 개발에서 필수적인 요소입니다. 특히, 여러 비동기 작업을 동시에 처리해야 할 때 Promise.all과 Promise.race는 매우 유용합니다. 이번 글에서는 이 두 메서드의 활용법을 자세히 살펴보겠습니다.

Promise.all

Promise.all은 여러 개의 프로미스를 병렬로 처리하고, 모든 프로미스가 완료되면 하나의 프로미스를 반환합니다. 다음은 Promise.all의 기본적인 사용 예제입니다:

const promise1 = fetch('/api/data1');
const promise2 = fetch('/api/data2');
const promise3 = fetch('/api/data3');

Promise.all([promise1, promise2, promise3])
  .then((responses) => {
    return Promise.all(responses.map(response => response.json()));
  })
  .then((data) => {
    console.log('All data fetched:', data);
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

위 예제에서 fetch로 데이터를 가져오는 세 개의 비동기 작업을 Promise.all로 묶어서 처리합니다. 모든 요청이 완료되면 응답을 JSON으로 파싱 하여 결과를 출력합니다. 하나의 프로미스라도 실패하면 catch 블록으로 이동합니다.

Promise.race

Promise.race는 가장 먼저 완료된 프로미스를 반환합니다. 주로 타임아웃 설정이나 여러 소스 중 빠른 응답을 선택할 때 사용됩니다.

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'Fast'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, 'Slow'));

Promise.race([promise1, promise2])
  .then((result) => {
    console.log('First completed:', result);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

이 예제에서는 두 개의 타이머 프로미스를 사용하여 먼저 완료된 프로미스의 결과를 반환합니다. promise1이 더 빠르게 완료되므로 "First completed: Fast"가 출력됩니다.

실전 활용 예제

다음은 Promise.all과 Promise.race를 결합하여 API 요청을 더 효율적으로 처리하는 예제입니다:

const fetchWithTimeout = (url, timeout = 3000) => {
  const fetchPromise = fetch(url).then(response => response.json());
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), timeout)
  );

  return Promise.race([fetchPromise, timeoutPromise]);
};

const urls = ['/api/data1', '/api/data2', '/api/data3'];

Promise.all(urls.map(url => fetchWithTimeout(url)))
  .then((data) => {
    console.log('All data fetched within timeout:', data);
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

여기서는 fetchWithTimeout 함수를 통해 각 요청에 타임아웃을 설정하고, Promise.all을 사용하여 모든 요청이 완료될 때까지 기다립니다. 타임아웃 내에 모든 요청이 완료되면 데이터를 출력하고, 하나라도 실패하면 에러를 처리합니다.

결론

Promise.all과 Promise.race는 비동기 작업을 효과적으로 관리할 수 있는 강력한 도구입니다. 각 메서드의 특성을 잘 이해하고 적절히 활용하면 더 견고하고 효율적인 코드를 작성할 수 있습니다. 다양한 상황에서 이 두 메서드를 사용해 보고, 자신의 프로젝트에 맞는 최적의 비동기 흐름 제어 방법을 찾아보세요^^.

JavaScript 클로저(Closure)의 원리와 활용 방법

창슈 — Tue, 28 May 2024 12:29:04 +0900

JavaScript를 사용하다 보면 "클로저(Closure)"라는 개념을 접하게 됩니다. 클로저는 자바스크립트의 강력한 기능 중 하나로, 함수와 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 이번 글에서는 클로저의 원리와 활용 방법에 대해 자세히 알아보겠습니다.

클로저란 무엇인가?

클로저는 함수가 생성될 때 함께 생성된 환경을 기억하는 기능입니다. 이 환경에는 함수가 생성될 당시의 변수들이 포함됩니다. 쉽게 말해, 클로저는 함수가 선언된 스코프 외부에서도 해당 스코프의 변수를 기억하고 접근할 수 있게 합니다.

클로저의 기본 예제

아래는 클로저의 기본적인 예제입니다:

function outerFunction() {
    let outerVariable = 'I am outside!';
    
    function innerFunction() {
        console.log(outerVariable);
    }
    
    return innerFunction;
}

const myFunction = outerFunction();
myFunction(); // I am outside!

위 코드에서 innerFunction은 outerFunction의 내부 변수인 outerVariable에 접근할 수 있습니다. 이는 innerFunction이 outerFunction의 렉시컬 환경을 기억하기 때문입니다.

클로저의 활용 방법

클로저는 다양한 상황에서 유용하게 사용할 수 있습니다. 몇 가지 활용 예제를 살펴보겠습니다.

1. 데이터 은닉화

클로저를 사용하면 함수 내부의 데이터를 외부에서 직접 접근할 수 없도록 은닉화할 수 있습니다.

function createCounter() {
    let count = 0;
    
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
console.log(counter.decrement()); // 1

위 예제에서 count 변수는 createCounter 함수의 외부에서는 직접 접근할 수 없고, 오직 반환된 객체의 메서드를 통해서만 접근할 수 있습니다.

2. 함수의 부분 적용

클로저를 이용하여 함수의 일부 인수를 고정하고 나머지 인수만 나중에 전달할 수 있습니다.

function multiply(a) {
    return function(b) {
        return a * b;
    };
}

const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5)); // 10
console.log(multiplyByTwo(10)); // 20

multiply 함수는 a 값을 고정한 새로운 함수를 반환하며, 반환된 함수는 나머지 인수 b를 받아 결과를 계산합니다.

3. 이벤트 핸들러에서 클로저 사용

이벤트 핸들러에서 클로저를 사용하면 특정 상태를 유지하면서 콜백 함수에 접근할 수 있습니다.

function setupHandlers() {
    let message = 'Button clicked!';
    
    document.getElementById('myButton').addEventListener('click', function() {
        alert(message);
    });
}

setupHandlers();

setupHandlers 함수 내부의 message 변수는 클릭 이벤트 핸들러 내부에서 참조할 수 있으며, 이는 클로저 덕분입니다.

결론

클로저는 자바스크립트에서 매우 유용한 개념으로, 이를 활용하면 데이터 은닉화, 함수의 부분 적용, 이벤트 핸들러 등 다양한 상황에서 코드의 가독성과 유지보수성을 높일 수 있습니다. 클로저의 작동 원리와 다양한 활용 방법을 이해하고 나면, 더욱 효율적인 자바스크립트 코드를 작성할 수 있을 것입니다.

2024 웹 개발 트렌드

창슈 — Mon, 27 May 2024 12:33:33 +0900

2024 웹 개발 트렌드

웹 개발은 빠르게 변화하는 분야로, 매년 새로운 기술과 트렌드가 등장합니다. 2024년에도 다양한 변화가 예상됩니다. 이번 글에서는 2024년에 주목해야 할 웹 개발 트렌드를 소개하겠습니다.

1. AI와 머신 러닝의 통합

AI와 머신 러닝은 웹 애플리케이션의 핵심 기술로 자리잡고 있습니다. 특히, 챗봇과 개인화된 사용자 경험을 제공하는 데 중요한 역할을 하고 있습니다. 2024년에는 더 많은 웹사이트가 AI를 활용하여 사용자 인터페이스와 콘텐츠를 개선할 것입니다.

2. 서버리스 아키텍처

서버리스 아키텍처는 서버 관리의 부담을 줄여주고, 개발자가 코드 작성에만 집중할 수 있도록 합니다. AWS Lambda, Azure Functions 등의 플랫폼을 통해 더 많은 웹 애플리케이션이 서버리스로 전환될 것입니다.

3. 프로그레시브 웹 애플리케이션 (PWA)

PWA는 네이티브 앱과 웹의 장점을 결합한 형태로, 빠른 로딩 속도와 오프라인 기능을 제공합니다. 2024년에는 더 많은 웹사이트가 PWA로 전환되어 사용자 경험을 개선할 것입니다.

4. 웹 보안 강화

웹 보안은 언제나 중요한 이슈입니다. 2024년에는 HTTPS 사용이 기본이 되고, 다양한 보안 강화 기술이 도입될 것입니다. 특히, 사용자 데이터 보호와 관련된 법규가 강화되면서 보안이 더욱 중요해질 것입니다.

5. 저코드/무코드 개발 플랫폼

저코드 및 무코드 플랫폼은 비개발자도 쉽게 웹 애플리케이션을 만들 수 있게 해줍니다. 2024년에는 이러한 플랫폼의 인기가 더욱 높아질 것으로 예상됩니다. 이로 인해 더 많은 사람들이 아이디어를 실현할 수 있게 될 것입니다.

6. 다크 모드 지원 확대

사용자 경험을 개선하기 위해 다크 모드를 지원하는 웹사이트가 증가하고 있습니다. 다크 모드는 눈의 피로를 줄여주고 배터리 수명을 연장하는 데 도움이 됩니다. 2024년에는 더 많은 웹사이트가 다크 모드를 기본 옵션으로 제공할 것입니다.

7. 웹 컴포넌트

웹 컴포넌트는 재사용 가능한 UI 요소를 만들 수 있게 해줍니다. 이를 통해 개발자는 일관된 디자인을 유지하면서도 생산성을 높일 수 있습니다. 2024년에는 웹 컴포넌트의 사용이 더욱 확산될 것입니다.

8. 증강 현실 (AR)과 가상 현실 (VR)

AR과 VR 기술이 발전하면서 웹에서도 이러한 기술을 활용한 콘텐츠가 늘어나고 있습니다. 2024년에는 쇼핑, 교육, 게임 등 다양한 분야에서 AR과 VR을 활용한 웹 애플리케이션이 증가할 것입니다.

9. CSS Grid와 Flexbox

CSS Grid와 Flexbox는 레이아웃 설계를 단순화하고 강력한 기능을 제공합니다. 2024년에는 이 두 가지 기술이 더 널리 사용되어 복잡한 레이아웃을 쉽게 구현할 수 있을 것입니다.

10. 모듈식 디자인 시스템

모듈식 디자인 시스템은 일관된 사용자 경험을 제공하고, 개발과 디자인 간의 협업을 촉진합니다. 2024년에는 더 많은 기업이 모듈식 디자인 시스템을 도입하여 효율성을 높일 것입니다.

이상으로 2024년에 주목해야 할 웹 개발 트렌드를 살펴보았습니다. 빠르게 변화하는 웹 개발 환경에서 최신 트렌드를 파악하고 적응하는 것이 중요합니다. 이 글이 여러분의 웹 개발 여정에 도움이 되길 바랍니다.

JavaScript 비동기 처리 심화: async/await와 Promise 활용하기

창슈 — Fri, 24 May 2024 09:42:07 +0900

JavaScript에서 비동기 처리는 웹 애플리케이션의 성능을 최적화하는 데 매우 중요합니다. 이번 글에서는 비동기 처리를 더욱 효율적으로 다루기 위해 async/await와 Promise를 활용하는 방법을 알아보겠습니다.

1. Promise 기본 이해

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Promise는 pending, fulfilled, rejected 세 가지 상태를 가집니다.

let promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 성공 */) {
        resolve('성공');
    } else {
        reject('실패');
    }
});

promise.then(result => {
    console.log(result); // 성공 시 실행
}).catch(error => {
    console.error(error); // 실패 시 실행
});

2. async/await 소개

async/await는 Promise를 더 간단하게 사용할 수 있도록 도와줍니다. async 키워드를 함수 앞에 붙여 비동기 함수를 만들고, await 키워드를 사용해 Promise가 해결될 때까지 기다릴 수 있습니다.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();

3. 실제 예제: API 호출

API 호출 시 비동기 처리가 자주 필요합니다. async/await를 사용하면 코드를 더 직관적으로 작성할 수 있습니다.

async function getUserData(userId) {
    try {
        let response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        let userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

getUserData(1);

4. 여러 비동기 작업 처리

여러 개의 비동기 작업을 순차적으로 처리해야 할 때도 async/await가 유용합니다.

async function processUsers(userIds) {
    for (let id of userIds) {
        await getUserData(id);
    }
}

processUsers([1, 2, 3]);

5. 결론

async/await와 Promise를 활용하면 복잡한 비동기 작업을 더 쉽게 관리할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

더 많은 예제와 정보를 원하시면 MDN 문서를 참고하세요.

이렇게 하면 여러분의 JavaScript 비동기 처리가 더욱 강력해질 것입니다. Happy coding!

JavaScript 문자열 자르기 (substring, substr, slice)

창슈 — Sun, 10 Sep 2023 21:51:32 +0900

JavaScript에서 문자열을 자르는 방법에 대해 살펴보겠습니다.

대표적으로 기본내장함수 substring, substr, slice 3가지가 있습니다.

3가지 중에서 상황에 맞게 적절하게 쓰면 좋겠습니다.

#substr

문법은 다음과 같습니다.

문자열(str)의 시작위치(startIndex)부터 길이(length)만큼의 글자수를 자릅니다.

(이때, 종료위치를 생략할 경우 시작위치부터 끝까지 자릅니다.)

// 문법
str.substr(startIndex, [length])

// 예시
"서브스트링".substr(2, 1)
    //결과 --> "스"
    
"서브스트링".substr(2, 2)
    //결과 --> "스트"
    
"서브스트링".substr(2, 3)
    //결과 --> "스트링"
    
"서브스트링".substr(1)
    //결과 --> "브스트링"
    
"서브스트링".substr(3)
    //결과 --> "트링"

#substring

문법은 다음과 같습니다.

문자열(str)의 시작위치(startIndex)부터 종료위치(endIndex - 1)까지를 자릅니다.

(이때, 종료위치를 생략할 경우 시작위치부터 끝까지 자릅니다.)

// 문법
str.substring(startIndex, [endIndex])

// 예시
"서브스트링".substr(2, 3)
    //결과 --> "스"
    
"서브스트링".substr(2, 4)
    //결과 --> "스트"
    
"서브스트링".substr(2, 5)
    //결과 --> "스트링"
    
"서브스트링".substr(1)
    //결과 --> "브스트링"
    
"서브스트링".substr(3)
    //결과 --> "트링"

주의사항

1. startIndex 또는 endIndex에 음수를 입력할 경우 해당 값은 0으로 인식됩니다.

"서브스트링".substring(-2, 3); // -2 --> 0으로 바뀐다
    //결과 -> "서브스"

2. endIndex가 startIndex보다 작은 경우 startIndex와 endIndex가 서로 바뀝니다.

"서브스트링".substring(3, 0); // 0이 3보다 작음으로 두파라미터의 자리가 바뀜.
    //결과 --> "서브스"

#slice

문법은 다음과 같습니다. (substring과 동일합니다)

문자열(str)의 시작위치(startIndex)부터 종료위치(endIndex - 1)까지를 자릅니다.

(이때, 종료위치를 생략할 경우 시작위치부터 끝까지 자릅니다.)

다만 slice함수에서 음수는 문자열의 마지막글자부터의 인덱스를 의미합니다.

('서브스트링'에서 -1: '링', -2: '트', -3: '스', -4: '브'...)

그래서 뒤에서 몇 글자 이런 식으로 가져올 때 사용하면 좋은 함수입니다.

// 문법
str.slice(startIndex, [endIndex])

// 예시
"서브스트링".slice(2, 3)
    //결과 --> "스"
    
"서브스트링".slice(-3, -1)
    //결과 --> "스트"
    
"서브스트링".slice(-3)
    //결과 --> "스트링"
    
"서브스트링".slice(1)
    //결과 --> "브스트링"
    
"서브스트링".slice(-2)
    //결과 --> "트링"

네이버 스마트스토어 만들기, 나만의 온라인 상점

창슈 — Mon, 4 Sep 2023 23:42:00 +0900

안녕하세요

취미로 손뜨개를 하고 있는데요, 만든 제품들을 네이버 스마트 스토어에 올려서 팔아보기로 했습니다.

첫 번째 관문인 스마트스토어 만들기를 해보겠습니다.

#1. 네이버 스마트스토어 홈페이지 진입하기.

네이버에 '스마트스토어' 검색하거나 아래 URL을 통해 진입가능 합니다.

https://sell.smartstore.naver.com/#/home/about

스마트스토어센터

누구나 쉽고 편리하게 만드는 스마트스토어에서 내 가게를 만들어보세요.

sell.smartstore.naver.com

#2. 네이버 커머스 ID 회원가입하기

이미 네이버 커머스 ID가 있으시다면 패스해도 되지만, 처음 스마트스토어를 개설하는 저는 회원가입 진행해 주었습니다.

네이버커머스 가입

가입하기 눌러주시고, 저는 편하게 네이버 아이디로 가입하기 진행했습니다.

절차에 따라 진행해 주세요, 어렵지 않습니다^^

#3. 판매자유형 선택

네이버커머스 가입완료되면 자동으로 스마트스토어 가입화면으로 넘어갑니다.

첫 번째로 판매자유형을 선택해주셔야 합니다.

스마스스토어 판매자유형 선택

사업자등록이 돼있으시다면 사업자, 안되어있다면 개인으로 해주세요

저는 취미로 시작하는 단계이기 때문에 개인으로 진행했습니다.

추후에 얼마든지 사업자로 전향할 수 있기 때문에 시작하는 단계라면

사업자등록 안 돼있어도 부담 없이 개인으로 하시면 되겠습니다.

#4. 비즈니스 서비스 연결

필요한 비즈니스 서비스들 연결하시면 됩니다.

지금 안 하셔도 나중에 얼마든지 설정할 수 있습니다 :D

스마스스토어 비지니스 서비스 연결

#5. 스마트스토어 정보입력

다음은, 스마트스토어 정보입력을 할 차례입니다.

이름, URL, 소개글, 고객센터 전화번호를 입력해주셔야 합니다.

이 중에서 이름은 가입 후 1회만 수정가능하고, URL은 가입 후 수정불가하니 신중하게 작성해 주세요~

스마트스토어 정보 입력

#6. 판매 상품정보 입력

판매 상품에 대한 카테고리 설정 및

상품 판매권한 신청을 해주세요 (필요하신 경우만)

판매 상품정보 입력

#7. 배송 정산정보 입력

상품 출고지와 반품/교환지 그리고 수익금에 대한 정산계좌 설정을 진행해 주세요

배송 정산정보 입력

#8. 판매자 추가정보 입력

판매자에 대한 추가정보를 입력합니다. 정보입력 버튼을 누르셔서 입력하시면 됩니다.

별로 어려운 내용은 없습니다^^

판매자 추가정보 입력

#9. 신청완료 > 가입완료

가입완료 되었습니다.

심사결과는 하루정도 기다려야 된다는 분들도 있던데, 저는 가입하자마자 완료되었네요 :D

가입완료

별로 어렵지 않게 금방 가입할 수 있었습니다.

5분 정도밖에 안 걸린 것 같네요

만약 첫 제품이 팔린다면 사업자등록을 진행해야 하니, 사업자등록 관련글로 찾아올 수 있기를 고대합니다 :D

JQuery Ajax 사용법 정리

창슈 — Sun, 26 Jun 2022 23:20:23 +0900

JQuery Ajax 사용법에 대해 포스팅하겠습니다.

먼저 Ajax란 Asynchronous Javascript And Xml (비동기식 Javascript And Xml)의 약자로

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 기능입니다.

기본 사용법: JQuery.ajax({Settings})

Settings에 들어가는 옵션들을 살펴보겠습니다.

대표적인 옵션만 기술합니다.

옵션	타입	기본값	설명
url	String		HTTP Request 보낼 주소
method	String	GET	HTTP Request 메소드 (GET, POST 등)
data	Object or String or Array		요청과 함께 보낼 데이터
dataType	String	Intelligent Guess (추측) (xml, json, script, or html)	서버에서 응답받을 데이터타입
async	Boolean	true	비동기 진행여부
beforeSend	Function(jqXHR jqXHR, Object settings)		요청보내기 전 진행할 함수
success (jQuery 3.0↓) done (jQuery 3.0↑)	Function(anyThing data, String status, jqXHR jqXhr)		요청이 성공했을때 진행할 함수
error (jQuery 3.0↓) fail (jQuery 3.0↑)	Function(jqXHR jqXHR, String textStatus, STring errorThrown )		요청에서 에러가 발생했을때 진행할 함수
complete (jQuery 3.0↓) always (jQuery 3.0↑)	Function(jqXHR jqXHR, String textStatus)		요청이 모두 완료되고난후 진행할 함수 (성공/실패 관계없이)

외에도 세부 옵션들은 공식 홈페이지 Documents에서 확인 가능합니다.

jQuery.ajax() | jQuery API Documentation

Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available

api.jquery.com

예제 코드를 한번 보겠습니다.

$.ajax({
    url: "/ajaxRequest.do" // Http 요청보낼 서버Url
    , method: "GET" // http 요청 메소드(GET, POST 등)
    , async: true // 비동기여부
    , data: {
        ID: "A32"
        , NAME: "Aiden"
    }
    , dataType: "json" // 서버에서 응답하여 보내줄 데이터타입
    , beforeSend: function() { // 요청보내기전 실행할 함수
        $("#loading").show();
    }
    , done: function(data, status) { // 요청성공하면 실행될 함수
        console.log(data);
        console.log(status);
    }
    , fail: function(jqXhr, status, errorThrown) { // 요청실패하면 실행될 함수
        alert("실패했습니다. (error : " + errorThrown + " )");
    }
    , always: function(jqXhr, status) { // 성공,실패와 상관없이 항상 실행되는 함수, done/fail 함수 먼저 실행됩니다.
        $("#loading").hide();
    }
});

Python MSSQL 연결하기 pymssql

창슈 — Sat, 16 Apr 2022 22:21:41 +0900

Python에서 pymssql 라이브러리를 통해 MSSQL 연결하는 방법을 소개합니다.

먼저 pymssql 라이브러리를 설치해주어야 합니다.

pip install pymssql

다음은 아래 코드를 통해 MSSQL 서버와 연결 및 쿼리 실행합니다.

import pymssql

# MSSQL 연결
connect = pymssql.connect(server=r"(local)", database="Aiden", user="user", password="password")
cursor = connect.cursor()

# 쿼리실행
cursor.execute("SELECT * FROM T_FILE_LIST")

row = cursor.fetchone()
while row:
    print(row)
    row = cursor.fetchone()
    
# 연결종료
connect.close()

* 위 코드는 주로 쓰이는 SQL Server 인증방식으로 진행한 것입니다. 윈도 인증 방식은 다른 글을 참고해주세요.

코드 해석

--> 로컬에 있는 Aiden DB에 user/password 계정으로 연결한 뒤 쿼리를 실행 후, 실행결과를 한 줄씩 가져와서 출력

큰 틀은 위와 같습니다.

서버, DB, 계정, 비밀번호만 본인 상황대로 바꾸시면 MSSQL 디비 연결 쉽게 하실 수 있습니다.

MSSQL 로컬 환경 구축하기

창슈 — Fri, 15 Apr 2022 00:11:42 +0900

이번 포스팅에는 MSSQL 로컬 환경 구축하는 방법에 대해서 포스팅하겠습니다.

MSSQL 설치 및, SSMS (SQL Server Management Studio) 설치 후 연결까지 본 포스팅에서 설명합니다.

MSSQL 설치하기

MSSQL 설치하기 위해 공식 홈페이지로 이동해줍니다.

SQL Server 다운로드 | Microsoft

지금 Microsoft SQL Server 다운로드를 시작하세요. 내 데이터와 워크로드에 가장 적합한 SQL Server 체험판 또는 버전, 에디션, 도구 또는 커넥터를 선택하세요.

www.microsoft.com

이동하신 후 운영체제에 맞게 설치파일을 다운로드합니다.

다운로드하기 위해서는 기본적인 정보를 입력해주어야 하네요

다운로드한 설치 파일을 실행해서 설치를 진행해줍니다.

SSMS (SQL Server Management Studio) 설치하기

공식 홈페이지로 이동해 SSMS 설치 파일을 다운로드합니다.

SSMS(SQL Server Management Studio) 다운로드 - SQL Server Management Studio (SSMS) | Microsoft Docs

SSMS(SQL Server Management Studio) 다운로드 - SQL Server Management Studio (SSMS)

최신 버전의 SSMS(SQL Server Management Studio)를 다운로드합니다.

docs.microsoft.com

다운로드한 설치 파일을 실행해서 설치를 진행해줍니다.

SSMS > LOCAL 연결하기

설치된 SSMS를 실행해줍니다.

Server type > Database Engine

Server name > DESKTOP-...로 시작하는 내 컴퓨터 선택

Connect!

이제 로컬에서 MSSQL을 사용할 수 있습니다.

ElasticSearch 로컬 설치하기

창슈 — Wed, 6 Apr 2022 22:40:24 +0900

ElasticSearch는 오픈소스 검색엔진으로 이 분야에 굉장히 유용합니다.

이번 포스팅은 엘라스틱서치를 시작하기 위해 설치하는 방법에 대한 내용입니다.

+ 엘라스틱서치 커리를 쉽게 날리기위해 키바나또한 함께 설치해주겠습니다.

1. 공식홈페이지에서 엘라스틱서치와 키바나를 다운로드합니다.

- 제 피씨는 윈도우 운영체제이기 때문에 윈도우용 다운로드합니다.
- 저는 7.15.2 Version을 다운받았습니다. ( 엘라스틱서치, 키바나 같은버전으로 합니다. )

Download Elasticsearch | Elastic

Download Kibana Free | Get Started Now | Elastic

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

Download Kibana Free | Get Started Now

Download Kibana or the complete Elastic Stack (formerly ELK stack) for free and start visualizing, analyzing, and exploring your data with Elastic in minutes.

www.elastic.co

2. 다운받은 파일 압축해제합니다.

3. 배치파일을 실행합니다.

4. 웹에서 아래 주소로 이동해 ElasticSearch 설치된 것을 확인합니다.
/localhost:9200

위 같은 화면이 나오면 정상적으로 설치된 것입니다.

5. 아래주소로 이동해 키바나를 실행합니다.

/localhost:5601

Dev Tools 메뉴로 이동해 쿼리를 실행할 수 있습니다.