


Huggingface model, OpenAI model, Ollama model

![Image](/assets/img/2024-07-29-DiveintoLLM-basedapplicationdevelopmentLearntouseLLMmodels-Part1_0.png)

# 1. 소개

대형 언어 모델 (LLMs)은 자연어 처리 (NLP) 작업을 혁신적으로 변화시켰습니다. 이러한 모델들은 언어 번역, 질문 및 답변, 감정 분석, 텍스트 생성 및 기타 여러 영역에서 발전을 이루도록 만들어졌습니다. 이 모델들은 대량의 데이터 코퍼스에서 학습되어 다양한 용도로 적용할 수 있는 기초 모델이 되었습니다. 이러한 모델의 주요 제공 업체는 Hugging Face, OpenAI 및 Ollama이며, 각각이 언어 모델의 민주화에 기여하고 있습니다.

<div class="content-ad"></div>

이 블로그에서는 LLM 공간에서 시작하는 방법과 API 호출을 사용하여 Hugging Face, OpenAI 및 Ollama 모델과 상호 작용하는 방법을 배우게 됩니다.

LLM에 대한 블로그 포스트 시리즈입니다. 아래에서 다른 기사를 찾을 수 있습니다:

- LLM 모델 사용 방법 학습하기: LLM 모델 사용 방법-파트 1
- LLM 기반 응용 프로그램 개발에 뛰어들기: 코드 개발 자동화 -파트 2

# 2. Hugging Face — Mixtral-Instruct LLM 사용 방법 배우기

<div class="content-ad"></div>

허깅페이스는 트랜스포머를 통해 다양한 사전 훈련 모델을 제공하는 주목할만한 플랫폼으로 등장했습니다.

LLM 기반 애플리케이션 개발 LLM 모델 사용하는 방법




파이토치 초보자를 위한 안내서

![PyTorch](/assets/img/2024-07-29-PyTorchLearntoWalkBeforeYouRunPart1_0.png)

# 소개

파이토치(PyTorch)는 Facebook AI Research에서 개발한 오픈 소스 딥러닝 프레임워크입니다. 동적 계산 그래프, 자동 그래디언트 계산 및 사용자 친화적 인터페이스로 인공 지능 분야를 혁신하였습니다.

<div class="content-ad"></div>

생물학 및 화학 AI 분야에서 PyTorch의 유연성은 연구자들에게 필수적인 도구로 자리 잡았어요. 이는 단백질 구조 예측, 유전체 서열 분석, 의학 이미지 처리, 교란 모델링, 단백질 표현 학습과 같은 복잡한 모델 개발을 가능하게 합니다.

이것은 4부작 시리즈로, 우리는 다음을 배울 거예요:

- PyTorch: 달리기 전에 걷는 법 배우기 — 파트 1 — PyTorch의 텐서 및 다양한 연산
- PyTorch: 달리기 전에 걷는 법 배우기 — 파트 2 — 첫 번째 모델 클래스 작성 및 복잡도 조금씩 증가시키기
- PyTorch: 달리기 전에 걷는 법 배우기 — 파트 3 — 자동 미분
- PyTorch: 달리기 전에 걷는 법 배우기 — 파트 4 — 모델 훈련

코드 중심의 실용적인 시리즈이므로, 필요한 경우가 아니면 일일이 설명하지는 않을 거예요.

<div class="content-ad"></div>

# 텐서 작업

PyTorch 초보자를 위한 정리





![image](/assets/img/2024-07-29-ALegendaryInterviewQuestionWhatistheMaximumLengthofAnArrayinNodejs_0.png)

면접관이 제목의 질문을 한다면, 당신의 답변은 무엇인가요?

이 질문은 간단해 보입니다. 답을 알고 싶다면 문서를 확인하거나 직접 시도하면 됩니다. 그러나 전문가와 평범한 사람 사이의 차이는 종종 이러한 디테일에 달려 있습니다. 전문가는 간단한 질문에 심층적으로 파고들어 특별한 답변을 제공할 수 있어요!

# 레벨 1: 문서 확인


<div class="content-ad"></div>

일단 이 질문을 구글에서 검색하고 MDN 문서를 찾아볼 수 있어요. 이 문서를 보면 JavaScript에서 배열의 최대 길이는 2³²-1이라고 합니다.

![이미지](/assets/img/2024-07-29-ALegendaryInterviewQuestionWhatistheMaximumLengthofAnArrayinNodejs_1.png)

그런 다음 테스트를 해보죠: (Node.js와 Chrome 모두 V8 엔진을 사용하기 때문에 편리하게 Chrome의 DevTool에서 직접 테스트해볼게요)

![이미지](/assets/img/2024-07-29-ALegendaryInterviewQuestionWhatistheMaximumLengthofAnArrayinNodejs_2.png)

<div class="content-ad"></div>

테스트 결과가 MDN 문서와 완전히 동일하므로, 문제가 여기서 끝날 것 같나요?

아니에요, 아니에요, 아니에요.

Nodejs 면접 단골 질문 - 배열 최대 길이는 얼마일까




## 시

![이미지](/assets/img/2024-07-29-WisdomWhenWeDidNotYetHaveWisdom_0.png)

인생이 단지 지켜져야 할 대상인가?
항상 고통과 두려움을 피해야 하는가?
이유를 항상 찾아야 하는 것이 어리석을까?
눈물이 필요한데 웃음을 지으라고 요청해야 하는가?

왜 반대 없이 상처 받을 수 없을까?
슬프고 우울할 수 없을까 자유롭게 느낄 수 없을까?
다른 사람들은 왜 내가 행복해야 한다고 바라는가?
그게 유일한 가치있는 감정인가?
이 세상이 내가 예외가 되어야하는 정도로 고통이 없는가?

<div class="content-ad"></div>

세상에 사는 동안 우리 중 일부가 고통 받지 않아도 되는 건 아닐까요?
저는 울지 않으려고 노력해야 할까요?
이런 종류의 거짓말은 우리를 상처 입히지만,
하지만 이제는 저에게는 상처가 너무 깊게 파였네요.

지혜, 우리가 지혜를 가지지 못했을 때




<img src="/assets/img/2024-07-29-AModernWaytoEfficientlyExecuteConcurrentNetworkRequestsinJava_0.png" />

자바 19에서 소개된 가상 스레드는 동시 네트워크 요청을 가속화하기 위한 것입니다. 이 게시물에서는 일반 스레드와 가상 스레드가 HTTP 요청을 하는 처리량을 비교하고 싶습니다. 이를 위해 Google Cloud의 두 가상 머신을 사용했습니다. 각 머신은 8 CPUs와 16GB 메모리를 가지고 있습니다. 한 대는 서버로, 다른 한 대는 클라이언트로 사용합니다.

서버 머신은 작은 스프링 부트 애플리케이션을 실행합니다. URL에서 받은 i 매개변수의 값을 반환하는 예제입니다:

```java
@SpringBootApplication
@RestController
public class Main {

    public static void main(String[] args) {
        SpringApplication.run(Main.class, args);
    }

    @GetMapping("/")
    public String hello(@RequestParam(value = "i") String i) {
        return i;
    }
}
```

<div class="content-ad"></div>

클라이언트 애플리케이션에서는 반환된 값들의 합을 사용하여 모든 동시 요청이 유효한 응답을 반환했는지 간단히 확인합니다.

클라이언트 애플리케이션은 전통적인 캐시된 스레드 풀 및 개별 가상 스레드를 사용하여 동일한 세트의 동시 HTTP 요청을 보냅니다. 각 HTTP 요청의 일련 번호는...

Java에서 동시 네트워크 요청을 효율적으로 처리하는 방법




publicPath 구성 옵션은 정적 자산의 경로를 동적으로 조정할 수 있도록 하는 자리 표시자 역할을 합니다.

예를 들어, 당신이 commons.js와 같은 정적 자산을 CDN에 업로드한 상황을 생각해 봅시다. 이 파일의 실제 URL은 다음과 같을 수 있습니다:

https://s1.cdn.com/my-project/commons.js

하지만, HTML 페이지는 일반적으로 자체 도메인에서 제공됩니다. 예를 들어:
https://my-own-domain.com/my-project/index.html

<div class="content-ad"></div>

index.html이 CDN에 호스팅된 정적 파일을 올바르게 참조하도록 하려면 publicPath 설정을 활용할 수 있습니다. 이 구성은 index.html 내의 commons.js의 로컬 경로를 다음과 같이 변경합니다:

https://my-own-domain.com/my-project/commons.js
다음과 같은 CDN 경로로:

https://s1.cdn.com/my-project/commons.js
publicPath를 설정함으로써 HTML 파일 내의 모든 정적 자산에 대한 참조가 올바른 CDN URL을 가리키도록 하여 효율적인 콘텐츠 전달을 용이하게 할 수 있습니다.

Webpack 설정에서 publicPath를 설정하는 방법




자바스크립트는 다재다능하고 강력한 언어이지만, 습득하기 어려울 수도 있습니다. 여기 개발자가 꼭 알아야 할 20가지 자바스크립트 트릭과 팁이 있어요. 이를 통해 더 깔끔하고 효율적인 코드를 작성하고 개발 워크플로우를 개선할 수 있답니다. 🌟

내 YouTube 채널 구독해주시면 감사하겠습니다. 웹 개발 튜토리얼을 더 많이 받아보실 수 있어요.

## 1. let 및 const를 사용하여 var 대신 사용하기 🚫

변수를 선언할 때 var 대신 let 및 const를 사용하세요. 이렇게 하면 블록 스코핑을 보장하고 호이스팅 문제를 피할 수 있습니다.

<div class="content-ad"></div>

### 예시:

```js
let name = 'John';
const age = 30;
```

## 2. 구조 분해 할당 🌟

구조 분해는 배열에서 값을 추출하거나 객체에서 속성을 분리하여 개별 변수에 할당하는 것을 가능하게 합니다.

<div class="content-ad"></div>

### 예시:

```js
const person = { name: 'Jane', age: 25 };
const { name, age } = person;

const numbers = [1, 2, 3];
const [first, second] = numbers;
```

## 3. 템플릿 리터럴 📜

템플릿 리터럴은 변수와 식을 문자열에 보간하는 쉬운 방법을 제공합니다.

<div class="content-ad"></div>

### 예시:

```javascript
const name = 'John';
const greeting = `Hello, ${name}!`;
```

## 4. 기본 매개변수 설정하기 🛠️

함수 매개변수에 기본값을 설정하여 undefined 오류를 방지하세요.

<div class="content-ad"></div>

### 예시:

```js
function greet(name = 'Guest') {
  return `안녕하세요, ${name}님!`;
}
```

## 5. 화살표 함수 🎯

화살표 함수는 간결한 구문을 제공하고 this 값을 렉시컬하게 바인딩합니다.

<div class="content-ad"></div>

### 예시:

```js
const add = (a, b) => a + b;
```

## 6. Spread Operator ... 🌐

스프레드 연산자는 이터러블(예: 배열)의 요소나 객체의 속성을 확장할 수 있게 해줍니다.

<div class="content-ad"></div>

### 예시:

```js
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

const obj1 = { name: 'John' };
const obj2 = { ...obj1, age: 30 };
```

## 7. Rest Parameters ... 🌟

Rest 파라미터를 사용하면 인수의 수가 정해지지 않은 인수들을 배열로 나타낼 수 있습니다.

<div class="content-ad"></div>

### 예시:

```js
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
```

## 8. Short-Circuit Evaluation && and || 🛠️

조건식 및 기본값에 단락 평가를 사용하십시오.

<div class="content-ad"></div>

### 예시:

```js
const user = { name: 'John' };
const name = user.name || 'Guest';

const isAdmin = user.isAdmin && 'Admin';
```

## 9. 객체 속성 축약법 🚀

속성 이름과 변수 이름이 동일할 때 객체를 생성하는 데 축약 구문을 사용하세요.

<div class="content-ad"></div>

### 예시:

```js
const name = 'John';
const age = 30;
const person = { name, age };
```

## 10. 옵셔널 체이닝 ?. 🌐

옵셔널 체이닝을 사용하면 각 참조가 유효한지 확인하지 않고도 깊게 중첩된 속성에 안전하게 액세스할 수 있습니다.

<div class="content-ad"></div>

### 예시:

```js
const user = { name: 'John', address: { city: 'New York' } };
const city = user.address?.city;
```

## 11. 널리쉬 콜레싱 ?? 🌟

널리쉬 콜레싱(??)은 왼쪽 피연산자가 null 또는 정의되지 않았을 때 오른쪽 피연산자를 반환하는 방법을 제공합니다.

<div class="content-ad"></div>

### 예시:

```js
const user = { name: 'John' };
const name = user.name ?? 'Guest';
```

## 12. 배열 메소드: map(), filter(), reduce() 🛠️

map(), filter(), reduce()과 같은 배열 메소드를 사용하여 배열에서 일반적인 작업을 함수적으로 수행하세요.

<div class="content-ad"></div>

### 예시:

```js
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((total, num) => total + num, 0);
```

## 13. Promise Chaining and Async/Await 🎯

비동기 작업을 처리할 때 Promises와 async/await 구문을 사용하여 더 깔끔하고 가독성 있는 코드를 작성하세요.

<div class="content-ad"></div>

### 프라미스 예시:

```js
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));
```

### Async/Await 예시:

```js
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}
```

<div class="content-ad"></div>

## 14. 디바운싱과 스로틀링 🌟

스크롤 또는 리사이즈 이벤트 중에 자주 호출되는 함수를 디바운싱과 스로틀링하여 성능을 최적화하세요.

### 디바운싱 예시:

```js
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resized');
}, 300));
```

<div class="content-ad"></div>

### 스로틀링 예제:

```js
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('스크롤됨');
}, 300));
```

## 15. for...of를 사용한 반복 🚀

배열, 문자열 및 기타 Iterable 객체에 대해 보다 가독성 있는 반복을 위해 for...of 루프를 사용하세요.

<div class="content-ad"></div>

### 예시:

```js
const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
}
```

## 16. 객체 및 배열 복제하기 🛠️

spread 연산자 또는 Object.assign()을 사용하여 객체와 배열을 복제하세요.

<div class="content-ad"></div>

### 예시:

```js
const original = { name: 'John', age: 30 };
const clone = { ...original };

const arr = [1, 2, 3];
const arrClone = [...arr];
```

## 17. 동적 속성 이름 🌟

계산된 속성 이름을 사용하여 객체 속성을 동적으로 설정하세요.

<div class="content-ad"></div>

### 예시:

```js
const propName = 'age';
const person = {
  name: 'John',
  [propName]: 30
};
```

## 18. setTimeout 및 setInterval 사용하기 🎯

setTimeout 및 setInterval을 사용하여 코드 실행 일정 시간 후 또는 주기적으로 예약하세요.

<div class="content-ad"></div>

### 예시:

```js
setTimeout(() => {
  console.log('2초 후에 실행됩니다');
}, 2000);

const intervalId = setInterval(() => {
  console.log('3초마다 실행됩니다');
}, 3000);

// 간격을 정리하려면
clearInterval(intervalId);
```

## 19. 문자열 메소드: includes(), startsWith(), endsWith() 📜

일반적인 문자열 작업을 수행하기 위해 최신 문자열 메소드를 사용하세요.

<div class="content-ad"></div>

### 예시:

```js
const str = 'Hello, World!';

console.log(str.includes('World')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true
```

## 20. 콘솔을 효율적으로 사용해서 디버깅하기 🛠️

더 효과적인 디버깅을 위해 다양한 콘솔 메소드를 활용하세요.

<div class="content-ad"></div>

### 예시:

```js
console.log('Simple log');
console.warn('This is a warning');
console.error('This is an error');
console.table([{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }]);
console.group('Group');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();
```

## 시리즈 색인

이 JavaScript 트릭과 팁을 숙달하면 더 깔끔하고 효율적인 코드를 작성하고 개발 흐름을 개선할 수 있습니다. 즐겁게 코딩하세요! ✨

<div class="content-ad"></div>

### 팔로우 및 구독하기:

- 인스타그램: devdivewithdipak
- 웹사이트: Dipak Ahirav
- 이메일: dipaksahirav@gmail.com
- 유튜브: devDive with Dipak
- 링크드인: Dipak Ahirav

개발자를 위한 최고의 20가지 자바스크립트 팁




처음으로 '기계 학습'이라는 말을 듣게 되면, "시간이 지남에 따라 더 정확해지는 AI"라고 생각해요.

내 첫 인상이 꽤 정확하다는 느낌을 받지만, IBM은 더 직접적인 정의를 제공합니다: "AI 및 컴퓨터 과학의 한 분야로, 데이터 및 알고리즘을 사용하여 AI가 사람이 학습하는 방식을 모방하고, 점차 정확도를 향상시키도록 하는 데 중점을 둡니다." 
이 정보를 고려할 때, 어떻게 작동하나요?

### 알고리즘

모델 및 알고리즘을 살펴볼 때 기계 학습은 꽤 광범위한 주제입니다. 그들이 학습하는 방식을 보고 세분화해서 살펴볼 수 있습니다:

<div class="content-ad"></div>

- 지도 학습

![image0](/assets/img/2024-07-29-WhatisMachineLearning_0.png)

- 비지도 학습

![image1](/assets/img/2024-07-29-WhatisMachineLearning_1.png)

<div class="content-ad"></div>

- 강화 학습 알고리즘은 여기서 보상을 기반으로 합니다. 이것은 프로그램이 보상을 획들거나 잃는지에 따라 결정을 내립니다. 긍정적인 강화는 특정 행동으로 인해 이벤트가 발생할 때 발생하며, 그 행동은 강도나 빈도를 증가시킵니다. 부정적 강화는 부정적 조건을 피할 때 행동을 강화시킵니다. 이 기술의 학습은 반복적이므로 실수로부터 학습하고 그 지식을 다음 세대에 전달합니다. 비디오 게임을 고속으로 클리어하는 AI를 상상해보세요!

### 신경망

신경망을 살펴보겠습니다. 신경망은 우리 뇌의 사고 패턴을 모방하기 위해 설계되었습니다. 음성 패턴 인식, 번역 등과 같은 작업에 사용될 수 있습니다! 입력된 데이터에서 학습하고 해당 데이터를 기반으로 예측을 수행하여 더 많은 데이터가 있는 경우 더 정확해집니다. LearnCode.academy YouTube 채널의 간단한 프로그램을 사용하여 신경망이 어떻게 작동하는지 보여드릴 것입니다.

예제 프로그램으로는 배경색을 설정하는 색 선택기 입력을 포함하고 기본적으로 흰색인 몇 가지 예제 텍스트가 포함된 html을 사용할 것입니다.

<div class="content-ad"></div>

#### Brain.js

Brain.js는 뉴럴 네트워크를 만드는 데 사용되는 JavaScript 라이브러리입니다. 이 라이브러리를 우리 프로그램에서 사용할 예정입니다.

뉴럴 네트워크를 사용하면 배경이 너무 어두운지 또는 너무 밝은지 판단하고 텍스트 색상을 변경하여 더 가독성 있게 만들 수 있습니다.

자, 이제 우리 뇌를 만들어 봅시다:

<div class="content-ad"></div>

```js
// 이 코드는 새 신경망을 초기화합니다.
const network = new brain.NeuralNetwork();
```

쉽죠?

인간 뇌는 받은 정보를 통해 학습하죠, 신경망도 마찬가지입니다. 우리는 네트워크에서 .train 메소드를 사용할 수 있어요. 이것이 바로 네트워크가 결과를 예측하는 데 사용할 것입니다. 우리의 경우, 이것은 텍스트 색상을 변경할지 여부를 결정할 것입니다. 이제 네트워크에 처음 데이터를 제공해 봅시다.

```js
// .train은 테스트 데이터가 담긴 배열을 매개변수로 사용합니다
network.train([
  
// 색상의 값을 255로 나누어서 RGB 값을 가져올 수 있습니다
// 이 경우에는 출력은 배경이 밝은지 어두운지에 대한 것이어야 합니다
{input: {r: 0, g: 1, b: 0}, output: {light: 1},
{input: {r: 0.33, g: 0.24, b: 0.29}, output: {dark: 1},
]);
```

<div class="content-ad"></div>

자, 이제 색상 입력에 대한 이벤트 리스너를 만들어 보겠습니다! 여기서는 배경이 밝은지 어두운지를 결정할 것입니다.

```js
input.addEventListener('input', (color) => {
  // 이것은 hex 색상 데이터를 rgb 값으로 변환해주는 보조 함수입니다.
  const rgb = getRgb(color.target.value);

  // 여기서 배경색을 설정합니다.
  text.style.background = color.target.value;

  const result = brain.likely(rgb, network);

  text.style.color = result === 'dark' ? 'white' : 'black';
})
```

그러면 우리의 결과를 밝은 값이나 어두운 값으로 만들고 싶다고 하죠. Brain.js에 우리가 여기에서 사용할 수 있는 메소드가 있습니다. .likely 메소드는 우리의 rgb 값과 신경망을 인수로 취합니다. .likely는 그럼 우리가 훈련시킨 데이터를 사용하여 색깔이 밝은지 어두운지에 대한 가능성을 비교해줄 겁니다!

이것을 페이지에 표시하려고 하면 약간 이상한 일이 발생할 수 있습니다. 우리는 훈련 데이터에 두 가지 입력만 제공했기 때문에 네트워크가 일부 rgb 조합이 밝은지 어두운지 판단하는 데 문제가 있을 수 있습니다.

<div class="content-ad"></div>

수정하는 건 쉬워요! 그냥 뇌를 훈련시키기 위해 더 많은 데이터를 추가하면 돼요!

```js
{input: {r: 0, g: 1, b: 0}, output: {light: 1},
{input: {r: 0.33, g: 0.24, b: 0.29}, output: {dark: 1},
{input: {r: 0.62, g: 0.72, b: 0.88}, output: {light: 1},
{input: {r: 0.1, g: 0.84, b: 0.72}, output: {light: 1},
{input: {r: 0.74, g: 0.78, b: 0.86}, output: {light: 1},
{input: {r: 0.31, g: 0.35, b: 0.41}, output: {dark: 1},
{input: {r: 0, g: 1, b: 0.65}, output: {light: 1},
```

이 훈련 데이터로 우리 뇌는 배경이 밝은지 어둡지를 보다 정확하게 예측할 수 있게 될 거예요.

생각해 보면 기계 학습은 우리 삶의 여러 영역에 사용돼: 추천 시스템, 소셜 미디어 연결, 이미지 인식 등 다양한 분야에서. 기계 학습이 우리 삶의 여러 측면을 크게 향상시켰다고 말해도 될 것 같아요. 그리고 가장 좋은 점? 앞으로만 더 나아질 수 있다는 거에요!

<div class="content-ad"></div>

더 알고 싶다면 사용된 소스를 확인해보세요:
- 머신 러닝(ML)이란 무엇인가
- 초보자를 위한 최고의 머신 러닝 알고리즘 10가지: 지도 및 그 이상
- 지도 학습이란 무엇인가
- 비지도 학습이란 무엇인가
- 강화 학습이란 무엇인가
- Brain.js 문서
- 초보자를 위한 머신 러닝 튜토리얼 - 자바스크립트 활용!

사용된 이미지:
- 비지도 학습
- 지도 학습

머신 러닝에 대해서 정리하기




이 프로그램은 JavaScript에서 while 루프를 사용하여 배열 내에서 특정 값(val)을 검색하는 방법을 보여줍니다. 사용자에게 값을 입력하라는 메시지가 나타나며, 프로그램은 이 값이 미리 정의된 다양한 값들 중에 있는지 확인합니다. 값이 발견되면 해당 값의 가용성을 나타내는 메시지가 표시되고, 그렇지 않으면 값이 존재하지 않음을 나타내는 메시지가 표시됩니다.

간단한 예제:

```js
let Val = prompt("값을 입력하세요!");
let numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300];

let i = 0;
let Find = false;
while (i < numbers.length) {
  if (numbers[i] == Val) {
    Find = true;
    break;
  }
  i++;
}
if (Find) {
  console.log("해당 값이 존재합니다!");
} else {
  console.log("해당 값이 존재하지 않습니다!");
}
```

결과:

<div class="content-ad"></div>

표 태그를 Markdown 형식으로 변경하겠습니다.

이 프로그램은 JavaScript에서 while 루프를 사용하여 배열 내에서 특정 값을 검색하는 방법을 보여줍니다. 사용자가 입력 필드에 값을 입력하면 프로그램이 미리 정의된 배열 내에 해당 값이 있는지 확인합니다. 값이 발견되면 해당 값의 가용성을 나타내는 메시지가 표시되고, 그렇지 않으면 해당 값이 없음을 나타내는 메시지가 표시됩니다.

예시:

```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Element in Array Using DOM in JavaScript </title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h4, h2 {
            color: #333;
        }
        input {
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #28a745;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <h4>Find Element in Array</h4>
    <h4 id="NumData"></h4>
    <input type="text" placeholder="Enter Value" id="Num" />
    <button onclick="SearchEle()">Find</button>
    <h2 id="Ans"></h2>

    <script>
        let Data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300];
        document.getElementById("NumData").innerHTML += "Our Array is: " + Data.join(', ');

        function SearchEle() {
            let NewValue = document.getElementById("Num").value;
            let i = 0;
            let Find = false;
            while (i < Data.length) {
                if (Data[i] == NewValue) {
                    Find = true;
                    break;
                }
                i++;
            }

            if (Find) {
                document.getElementById("Ans").innerHTML = `${NewValue} 
                is Available..!`;
            } else {
                document.getElementById("Ans").innerHTML = `${NewValue} 
               is not Available..!`;
            }
        }
    </script>
</body>
</html>
```

<div class="content-ad"></div>

출력:

![이미지1](/assets/img/2024-07-29-SearchingforaValueinanArrayUsingJavaScript_0.png)

![이미지2](/assets/img/2024-07-29-SearchingforaValueinanArrayUsingJavaScript_1.png)

JavaScript를 사용하여 배열에서 값을 찾는 방법




자바스크립트 프로미스는 비동기 작업을 처리하는 강력한 방법입니다. 프로미스가 도입되기 전에는 콜백이 비동기 작업을 처리하는 주요 방법이었습니다. 그러나 콜백은 중첩된 콜백으로 인해 관리하고 읽기 어려운 "콜백 지옥"으로 이어질 수 있습니다. 프로미스는 비동기 작업을 더 깔끔하고 읽기 쉽게 처리하는 방법을 제공합니다.

## 프로미스란 무엇인가요?

자바스크립트의 프로미스는 비동기 작업의 최종 완료(또는 실패)와 그 결과값을 나타냅니다. 이는 다음 세 가지 상태 중 하나에 있을 수 있는 객체입니다:

- 대기 중 (Pending): 초기 상태로, 완료되거나 거부되지 않은 상태입니다.
- 이행됨 (Fulfilled): 작업이 성공적으로 완료됨.
- 거부됨 (Rejected): 작업이 실패함.

<div class="content-ad"></div>

## Promise 생성하기

Promise를 생성하려면 Promise 생성자를 사용하십시오. 이 생성자는 두 개의 매개변수(resolve 및 reject)를 가지는 함수를 받습니다. 이 함수들은 Promise의 상태를 제어합니다.

```js
const myPromise = new Promise((resolve, reject) => {
  let success = true; // 작업 시뮬레이션
  if (success) {
    resolve("작업 성공!");
  } else {
    reject("작업 실패.");
  }
});
```

## Promise 사용하기

<div class="content-ad"></div>

약속(Promise)은 결과를 처리하기 위해 then, catch, finally 메서드가 있습니다.

- then: 약속이 이행될 때 호출됩니다.
- catch: 약속이 거부될 때 호출됩니다.
- finally: 약속의 결과와 관계없이 호출됩니다.

```js
myPromise
  .then((message) => {
    console.log(message); // "작업 성공!"
  })
  .catch((error) => {
    console.error(error); // "작업 실패."
  })
  .finally(() => {
    console.log("작업 완료.");
  });
```

## 프라미스(Chaining Promises) 연결하기

<div class="content-ad"></div>

Promise의 주요 장점 중 하나는 연쇄적으로 사용할 수 있다는 것입니다. 여러 개의 `then` 호출을 연달아 사용하여 비동기 작업을 순차적으로 수행할 수 있습니다.

```js
const firstPromise = new Promise((resolve) => {
  setTimeout(() => resolve("첫 번째 Promise 해결됨"), 1000);
});

firstPromise
  .then((result) => {
    console.log(result); // "첫 번째 Promise 해결됨"
    return new Promise((resolve) => {
      setTimeout(() => resolve("두 번째 Promise 해결됨"), 1000);
    });
  })
  .then((result) => {
    console.log(result); // "두 번째 Promise 해결됨"
  })
  .catch((error) => {
    console.error(error);
  });
```

## 여러 개의 Promise 처리하기

JavaScript는 여러 개의 Promise를 동시에 처리하는 유틸리티 메서드를 제공합니다: `Promise.all`, `Promise.race`, `Promise.allSettled`, 그리고 `Promise.any`.

<div class="content-ad"></div>

- Promise.all: 모든 프로미스가 해결될 때까지 기다리거나 거부될 때까지 기다립니다.

```js
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, 'foo']
});
```

- Promise.race: 프로미스 중 하나가 해결되거나 거부될 때 즉시 해결하거나 거부합니다.

```js
const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // "two"
});
```

<div class="content-ad"></div>

- Promise.allSettled: 모든 프로미스가 처리될 때까지 기다립니다 (성공하거나 실패).

```js
const promise1 = Promise.resolve(42);
const promise2 = Promise.reject('error');
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
  results.forEach((result) => console.log(result.status));
  // "fulfilled"
  // "rejected"
  // "fulfilled"
});
```

- Promise.any: 어떤 프로미스가 해결될 때까지 기다립니다.

```js
const promise1 = Promise.reject('error1');
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

Promise.any([promise1, promise2]).then((value) => {
  console.log(value); // "foo"
}).catch((error) => {
  console.error(error); // AggregateError: All promises were rejected
});
```

<div class="content-ad"></div>

## Promise 사용 시 흔히 범하는 실수들

Promise는 강력한 도구이지만, 혼란과 오류의 원인이 될 수도 있습니다. Promise를 사용할 때 개발자들이 종종 저지르는 일반적인 실수들은 다음과 같습니다:

### 1. then 핸들러에서 Promise를 반환하지 않는 경우

체이닝이 올바르게 작동하려면 then 핸들러 내에서 Promise를 반환해야 합니다. 이를 하지 않으면 체인이 깨질 수 있습니다.

<div class="content-ad"></div>

```js
firstPromise
  .then((result) => {
    console.log(result);
    new Promise((resolve) => setTimeout(resolve, 1000, '두 번째 프로미스가 해결됨')); // 반환(return) 부분이 빠져 있습니다
  })
  .then((result) => {
    console.log(result); // 이 부분은 undefined를 로깅할 것입니다
  });
```

### 2. 에러를 너무 일찍 잡기

체인 중간에 에러를 일찍 잡으면 하류의 then 핸들러들이 해당 에러를 인식하지 못할 수 있습니다.

```js
firstPromise
  .then((result) => {
    throw new Error('문제 발생');
  })
  .catch((error) => {
    console.error(error); // 너무 일찍 잡힘
  })
  .then(() => {
    console.log('여전히 실행됩니다');
  });
```

<div class="content-ad"></div>

위의 상황을 피하려면, 오류 처리를 체인의 끝이나 특정 작업 근처에 놓는 것이 좋습니다.

### 3. 불필요한 프라미스 생성

동기 작업을 불필요하게 프로미스로 감싸는 것은 복잡성을 추가하는 일반적인 실수입니다.

```js
const promise = new Promise((resolve) => {
  resolve('Hello, World!');
});
promise.then((message) => console.log(message));
```

<div class="content-ad"></div>

대신에 값 직접 사용하기:
```js
Promise.resolve('안녕하세요, 세계!').then((message) => console.log(message));
```

### 4. 거절 처리를 잊는 경우

애플리케이션에서 문제를 일으킬 수 있는 처리되지 않은 프로미스 거절을 방지하려면 항상 거절을 처리해야 합니다.

<div class="content-ad"></div>

```js
const promise = new Promise((_, reject) => {
  reject('에러가 발생했습니다');
});
promise.then((message) => console.log(message)); // catch 핸들러가 없습니다
```

항상 catch 블록을 추가하세요:

```js
promise
  .then((message) => console.log(message))
  .catch((error) => console.error(error));
```

### 5. 프로미스와 Async/Await 혼합하기

<div class="content-ad"></div>

약속과 async/await은 모두 비동기 코드를 처리하는 방법입니다. 그러나 두 가지를 혼합해서 사용하면 혼란스러울 수 있습니다.

```js
async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  data.then((result) => console.log(result)); // 불필요한 약속
}
```

한 가지 방식을 골라 사용하세요:

```js
async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  console.log(await data.json());
}
```

<div class="content-ad"></div>

## 결론

프로미스는 현대 JavaScript의 중요한 부분으로, 비동기 작업을 처리하는 강력한 방법을 제공합니다. 프로미스를 만들고 사용하며 관리하는 방법을 이해함으로써 더 깨끗하고 유지보수가 쉬운 코드를 작성할 수 있습니다. 일반적인 실수를 피하면 프로미스를 효과적으로 활용하고 잠재적인 문제를 방지할 수 있습니다. 하나의 비동기 작업을 처리하거나 여러 동시 작업을 조정할 때, 프로미스는 JavaScript 도구상의 강력한 도구입니다.

이 글은 초기에 내 블로그에 게시되었습니다. 아래 링크를 통해 원본 소스를 확인해보세요:

Posts