## 구성 요소 기반 개발

프로젝트 개발에서는 보통 구성 요소 기반 개발을 촉진합니다. 이는 일반적인 로직을 추출하여 구성 요소로 조합하는 것을 말합니다. 페이지에서 필요한 기능을 수행하기 위해 구성 요소를 직접 호출할 수 있습니다. 이 구성 요소는 자체 내부 로직을 유지하는 것 외에도 외부 데이터를 전달받아 구성 요소의 동적이고 유연한 기능을 구현해야 합니다.

## 속성(Props)

간단한 할 일 목록(`todolist`)의 예시를 살펴보겠습니다. 할 일 목록을 구성 요소로 캡슐화해 표시할 수 있으며, 구성 요소의 내부 로직은 데이터 목록을 표시하는 것이며 외부에서 데이터 목록을 수신합니다. 페이지에서 구성 요소를 참조한 후 할 일 목록이나 완료된 목록을 전달함으로써 다른 데이터를 표시할 수 있습니다. 여기서 값을 전달하는 것이 중요한 연결 고리입니다.

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

부모 페이지에서 자식 페이지나 컴포넌트로 값을 전달할 때 일반적으로 부모 페이지의 상태나 메소드를 전달합니다. Svelte에서 이 두 가지를 어떻게 전달할까요?

### prop이 데이터인 경우

이전 장의 끝에서 다음 코드를 만났습니다:

```js
<script>
  export let value;
</script>
```

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

일반적으로 페이지에서 변수를 선언할 때는 let value;와 같이 선언합니다. 그 변수 앞에 export 키워드를 추가하면 외부 익스포트 속성으로 표시된 변수 선언과 동일합니다. 이렇게 하면 파일의 외부 참조에서 prop이라는 이름으로 변수에 저장된 값을 전달할 수 있습니다.

```js

<script>
  import Child from './Child.svelte';
  let value = ''
</script>

<Child value={value} />
```

#### 기본 프롭

컴포넌트 내에서 export let value; 형식으로 외부로 내보낼 때:

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

```js
<script>
  export let value;
</script>

<div>child: {value || ''}</div>
```

위 컴포넌트를 값 전달 없이 참조할 때 발생하는 문제를 설명한 이미지입니다.

![image](/assets/img/2024-07-24-SvelteSeries-5Props_0.png)

![image](/assets/img/2024-07-24-SvelteSeries-5Props_1.png)


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

VsCode에서 값 전달이 필요하다는 메시지를 받을 뿐만 아니라 Chrome 콘솔에서도 적절한 경고 메시지를 받게 됩니다.

개발 중에는 몇몇 전달 매개변수에 대한 기본값을 제공하는 경우가 많습니다. 대부분의 경우 일정한 상태를 사용하며 특별한 상황에서만 상태를 변경하는 구성 요소가 있기 때문입니다. 예를 들어 UI 컴포넌트 라이브러리에서 Alert 컴포넌트와 유사한 구성 요소가 있다고 가정해보겠습니다. 이 구성 요소에는 네 가지 상태(success, info, warning, error)가 있으며, 우리가 사용하는 대부분의 알림은 일반 메시지 알림, 즉 info 상태이므로 구성 요소 내에서 기본 info 상태를 설정할 수 있습니다.

prop에 기본값을 설정한 후에는 위 예제의 경고 메시지를 제거할 수 있습니다. Svelte에서 prop에 기본값을 설정하는 것은 초기 선언 시 값 할당하는 간단한 작업입니다.

```js
<script>
  export let value = '안녕하세요, Svelte';
</script>
```

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

#### 키워드

자바스크립트에서는 특정 의미를 갖는 프로그래밍 언어의 구문 구조에서 사용되는 특별한 단어인 키워드가 있습니다. 이러한 단어들은 변수로 사용될 수 없습니다.

Svelte에서는 prop를 설정할 때 일부 키워드를 prop으로 설정할 수 있습니다.

매우 일반적인 예로, 컴포넌트 내에 자체적인 클래스 스타일을 가진 컴포넌트를 정의할 수 있습니다. 그러나 사용자가 외부에서 클래스 스타일 속성을 사용자가 조작할 수 있는 형식으로 컴포넌트를 사용자가 조작할 수 있는 형식으로 지정할 수 있도록 하려면 (예: `Component class='' /`), 그리고 class는 클래스를 정의하는 데 사용되는 js의 키워드입니다. 따라서 아래와 같이 작성할 수 있습니다:

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

```js
<script> 
  let className;
  export { className as class };
</script>
```

#### const

여기 질문 하나 있어요: export로 선언된 변수는 메소드가 될 수 있을까요?

```js

<script>
  export let onChange = () => {return;}
</script>

<button on:click={onChange}>change</button>
```

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

```js
<script>
  import Child from './Child.svelte';
  let count = 0;
  const onChange = () => {
    count = Math.random();
  }
</script>

<Child onChange={onChange} />
<span>{count}</span>
```

답은 YES입니다!

<img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvx1l4rmyynslof8sz38n.gif" />

주의할 점: 함수 방법, 클래스 클래스 및 상수 상수를 내보낼 때 내보낸 속성은 변경할 수 없습니다.

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

위에 나온 내보내기 방법을 예시로 사용하여, Child.svelte의 내용을 다음과 같이 변경해보세요:

```js
<script>
  export function onChange() {
    console.log('no change');
  }
</script>

<button on:click={onChange}>change</button>
```

<img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr94vn571zlvgdn43qoid.gif" />

변수나 메서드를 속성(prop)으로 설정하려면 let 또는 var 선언을 사용해보세요.

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

## 함수 호출됨

### createEventDispatcher

이전 장에서 HTML 태그의 이벤트 바인딩은 on:[이벤트 이름]을 사용한다는 것을 배웠습니다. 마찬가지로, 컴포넌트에 이벤트 바인딩을 하려면 이 형식을 사용합니다.

```js
<Component on:[이벤트 이름]={이벤트 처리기} />
```

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

컴포넌트에서 이벤트를 바인딩할 때는 eventName를 컴포넌트 내부에 구현해야 합니다.

내부 구현은 다음과 같습니다:

```js
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

dispatch(eventName, data)
```

dispatch의 첫 번째 매개변수는 이벤트 이름이며, 두 번째 매개변수는 외부로 데이터를 전달하는 데 사용됩니다. 둘 이상의 매개변수를 전달해야 하는 경우, 두 번째 매개변수를 객체로 설정하여 해당 객체에 외부로 전달할 여러 데이터를 저장합니다.

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

여기 예시가 있어요:

```js
<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  const onClick = (e) => {
    dispatch("click", e);
  }
</script>

<button on:click={onClick}>버튼</button>
```

```js
<script>
  import Component from './Component.svelte';

  const onClick = (e) => {
    console.log('component click', e);
  }
</script>

<Component on:click={onClick} />
```

클릭하면 콘솔에서 CustomEvent 형식의 데이터가 출력됩니다:

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


![image](/assets/img/2024-07-24-SvelteSeries-5Props_2.png)

보통 우리는 페이지에 출력된 이벤트 매개변수가 자식 컴포넌트에서 전달한 것이라고 생각할 것입니다. 그러나 Svelte에서 createEventDispatcher를 사용하여 데이터를 전달할 때 데이터는 event.detail에 넣어진다는 점에 주목해 주고 싶습니다. 위 이미지를 자세히 살펴보면, 서브컴포넌트에서 전달된 데이터를 보관하는 detail 키가 출력된 데이터에 있다는 것을 알 수 있습니다.

위 예시가 직관적으로 충분하지 않을 수도 있으니, 우리의 서브컴포넌트 전달을 수정해 봅시다:

```js
<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  const onClick = (e) => {
    dispatch("click", 123);
  }

</script>

<button on:click={onClick}>버튼</button>
```


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


![image](/assets/img/2024-07-24-SvelteSeries-5Props_3.png)

컴포넌트가 초기화될 때 createEventDispatcher를 만들어야 함을 참고해주세요. 즉, 최상위 스크립트 스코프에서 만들어야하며, 그렇지 않으면 오류가 발생합니다.

```js
<script>
  import { createEventDispatcher } from 'svelte';

  const onClick = (e) => {
    const dispatch = createEventDispatcher();
    dispatch("click", 123);
  }

</script>

<button on:click={onClick}>버튼</button>
```

![image](/assets/img/2024-07-24-SvelteSeries-5Props_4.png)


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

createEventDispatcher의 구현을 간단히 살펴봅시다:

```js
export function createEventDispatcher() {
  const component = get_current_component();
  return (type, detail, { cancelable = false } = {}) => {
    const callbacks = component.$$.callbacks[type];
    if (callbacks) {
      const event = custom_event(/** @type {string} */ (type), detail, {
        cancelable,
      });
      callbacks.slice().forEach((fn) => {
        fn.call(component, event);
      });
      return !event.defaultPrevented;
    }
    return true;
  };
}

export function custom_event(
  type,
  detail,
  { bubbles = false, cancelable = false } = {}
) {
  return new CustomEvent(type, { detail, bubbles, cancelable });
}
```

사실 createEventDispatcher는 CustomEvent의 새 인스턴스를 만들고, 그런 다음 두 번째 전달로 전달할 detail에 모든 데이터를 넣는 것입니다.

### 이벤트 발송

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

DOM 이벤트와 달리, Svelte에서는 컴포넌트 이벤트가 버블링되지 않습니다.

```js
<script>
  // GrandSon.svelte
  import { createEventDispatcher, onMount } from 'svelte';

  const dispatch = createEventDispatcher();

  const func = () => {
    dispatch('func', '안녕');
  }

  onMount(() => {
    func();
  })
</script>

<div>孙组件</div>
```

```js
<script>
  // Child.svelte
  import { createEventDispatcher } from 'svelte';
  import GrandSon from './GrandSon.svelte';

  const dispatch = createEventDispatcher();

  const func = (e) => {
    dispatch('func', e.detail);
  }

</script>

<GrandSon on:func={func}/>
```

```js
<script>
  // Father.svelte
  import Child from './Child.svelte';

  const func = (e) => {
    console.log('孙子传值：', e.detail);
  }
</script>

<Child on:func={func} />
```

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


![이미지](/assets/img/2024-07-24-SvelteSeries-5Props_5.png)

저는 이 예시를 주로 여기서 사용하여 내부 컴포넌트가 가장 바깥쪽 레이어에 이벤트를 전파하려고 할 때, 통과하는 각 컴포넌트 레이어가 createEventDispatch()를 사용하고 이벤트.detail을 전달해야 한다는 것을 설명하고 싶었습니다. 이것은 클릭과 같은 상호 작용을 포함하는 컴포넌트에 일반적인 일입니다. 우리는 컴포넌트에 클릭 이벤트 지원을 추가할 수 있지만 클릭 이벤트의 로직은 외부 사용자가 정의하는 것으로 남겨집니다. 이를 위해 이벤트 전파를 사용해야 합니다.

이벤트 전파는 다음과 같이 작성됩니다:

```js
on:이벤트명
```   


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

이벤트 이름만 적혀 있으며 구성 요소 자체는 이벤트 구현을 제공하지 않습니다. 이벤트의 구현은 외부 레이어가 구현하고자 하는 페이지에 맡겨집니다.

```js

<button on:click>孙组件</button>
```

```js
<script>
  // Child.svelte
  import GrandSon from './GrandSon.svelte';
</script>

<GrandSon on:click />
```

```js
<script>
  // Father.svelte
  import Child from './Child.svelte';

  const onClick = () => {
    console.log('点击');
  }
</script>

<Child on:click={onClick} />
```

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


![Image](/assets/img/2024-07-24-SvelteSeries-5Props_6.png)

We can dispatch custom events for components as well as native events.

When it occurs that the attribute name is the same as the value, it can be abbreviated. For example, value='value' can be abbreviated to 'value'.

Here's an example:


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

위의 내용을 번역해 드리겠습니다.

```js
<script>
  let checked = false;

  const onChange = () => {
    checked = true;
  }
</script>

<input type="checkbox" {checked} />
<button on:click={onChange}>checked로 변경</button>
```

원래는 `input type="checkbox" checked='checked' /` 형식으로 작성해야 했습니다.

<img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fatavfbwjecf24qt4rn2t.gif" />

## $$props

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

$$props는 부모로부터 전달된 모든 속성을 가져옵니다. 프롭스 속성과 비-프롭스 속성 모두 포함됩니다.

```js
<script>
  // Child.svelte
  export let value;

  console.log('$$props', $$props)
</script>

<div>자식 컴포넌트</div>
```

```js
<script>
  // Father.svelte
  import Child from './Child.svelte';
</script>

<Child value={'hello'} a={'a'} b={'b'} />
```

![이미지](/assets/img/2024-07-24-SvelteSeries-5Props_7.png)

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

## $$restProps

$$props는 props와 비-props 속성을 모두 포함하는 반면, $$restProps에는 비-props 속성만 포함됩니다.
이전 예제의 콘솔을 다음과 같이 다시 작성해보세요:

```js
<script>
  export let value;

  console.log('$$props', $$props);
  console.log('$$restProps', $$restProps);
</script>

<div>자식 컴포넌트</div>
```

![이미지](/assets/img/2024-07-24-SvelteSeries-5Props_8.png)

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

우리는 $$props 및 $$restProps를 직접 전달하기 위해 해체할 수 있지만, 이것은 값들을 전달하는 것처럼 권장되지 않는 방법입니다. 혼동을 줄 수 있기 때문에 권장되지 않습니다.

```js
<script>
  import GrandSon from './GrandSon.svelte';
  export let value;
</script>

<GrandSon {...$$props} />
```

## 간단한 요약

이 장에서 우리는 다음을 배웠습니다:

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

- 변수를 컴포넌트의 외부 속성으로 선언하려면 export를 사용하고, 외부 속성의 기본값을 설정하는 방법
- 키워드를 속성으로 선언하는 방법
- createEventDispatcher 메서드를 사용하여 컴포넌트 내에서 외부로 이벤트를 보내어 외부 당사자가 컴포넌트를 참조할 때 이벤트를 수신할 수 있게 하는 방법
- 컴포넌트 이벤트 디스패치
- 컴포넌트 속성 할당 약식 표기
- Svelte는 $$props 및 $$restProps 속성을 제공하여 해당 속성 값들을 빠르게 얻을 수 있습니다

Svelte에서 Props를 사용 하는 방법 정리




안녕하세요! Express와 Socket.io를 사용하는 서버를 생성하는 데 문제가 생겼어요. 어떻게 해야 하는지에 대해 조언 좀 구해줄 수 있을까요?

Express 서버로 애플리케이션 생성할 때 많이 겪는 에러 및 해결 방안 3가지 




TypeScript에서 객체 유형을 정의하려면 `Object`, `''`, `object`과 같이 간결한 옵션이 여러 가지 있습니다. 이들 간의 차이는 무엇인가요?

## Object (대문자)

대문자로 된 Object는 모든 JavaScript 객체에 공통된 속성을 설명합니다. TypeScript 라이브러리와 함께 제공되는 lib.es5.d.ts 파일에서 정의됩니다.

![차이](/assets/img/2024-07-24-TheDifferencesBetweenObjectandobjectinTypeScript_0.png)

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

알 수 있듯이, 그것은 toString(), valueOf(), 등과 같은 일반적인 속성들을 포함하고 있습니다.

이것은 JavaScript 객체에 일반적인 속성만 강조하기 때문에, 문자열, 부울, 숫자, bigint, 심볼과 같은 객체들을 할당할 수 있지만, 반대로는 할 수 없습니다.

<img src="/assets/img/2024-07-24-TheDifferencesBetweenObjectandobjectinTypeScript_1.png" />

## ''

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

''라는 것은 자신의 멤버가 없는 객체를 설명하며, 이는 TypeScript가 속성 멤버에 액세스하려고 시도하면 오류가 발생한다는 것을 의미합니다:

![image](/assets/img/2024-07-24-TheDifferencesBetweenObjectandobjectinTypeScript_2.png)

위의 코드 예제에서 확인할 수 있듯이, ''와 Object(대문자로 표시된)는 동일한 기능을 가지고 있습니다. 다시 말해, JavaScript 코드 논리가 맞더라도 공통 속성에만 액세스할 수 있고, 모든 박싱 가능한 객체를 할당할 수 있습니다.

왜냐하면 '' 타입은 프로토 타입 체인을 통해 해당 공통 속성에 액세스할 수 있을 뿐만 아니라 자체 속성이 없기 때문입니다. 따라서 Object(대문자로 표시된) 타입과 동일하게 작동합니다. 그러나 다른 개념을 나타냅니다.

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

## object (소문자로 작성)

object (소문자로 작성)은 코드에서 다음과 같이 표현된 모든 원시 자료형이 아닌 타입을 의미합니다:

```js
type PrimitiveType =
  | undefined
  | null
  | string
  | number
  | boolean
  | bigint
  | symbol;

type NonPrimitiveType = object;
```

이는 모든 비 원시 자료형이 다를 수 없으며 그 반대도 마찬가지입니다.

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


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

## 간식: 레코드

많은 일반 라이브러리의 소스 코드에서 우리는 비 기본 타입을 나타내기 위해 `Record<string, any>`을 볼 수 있습니다. 이는 object (소문자로 표기된)와 동일한 효과를 내지만, 보다 의미론적인 면이 더해졌습니다.

내 컨텐츠가 도움이 되었다면 구독을 고려해 주세요. 매주 일요일에 최신 웹 개발 업데이트가 포함된 뉴스레터를 발송합니다. 지금까지 지지해 주셔서 감사합니다!


TypeScript에서 Object 와 object의 차이점 이해하기




# 나의 여정: 최고의-bible npm 라이브러리 만들기

안녕하세요! 저는 BestCodes라고 합니다. 오늘은 제가 처음으로 npm 라이브러리를 만들면서 겪은 모험을 공유하고 싶어요. 풀스택 개발자로써 저는 항상 npm 라이브러리를 사용해 왔지만, 직접 만들어보지는 않았거든요. 새로운 것을 배우고, 재미있는 경험을 즐기기 위해 이제는 시작할 때가 됐다고 생각했어요. 그래서 best-bible이 어떻게 탄생했는지 이야기해볼게요.

## 아이디어의 탄생

저는 성경, 특히 영어 킹 제임스 버전(KJV)을 정말 좋아해요. 제가 기독교인이기 때문이죠. 그래서 "왜 성경과 쉽게 상호작용할 수 있는 라이브러리를 만들지 않을까?"라는 생각을 했어요. 그래서 그렇게 했죠. best-bible은 여러분이 KJV 성경에서 다양한 절, 장을 쉽게 가져올 수 있도록 도와주는 것이 목적입니다.

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

## 손 더럽히기

### 도구 및 기술

이것을 만들기 위해 성경의 JSON 파일과 오랜된 JavaScript를 사용했습니다. 라이브러리를 유연하게 만들고 싶어서 ECMAScript 모듈 (ESM), CommonJS (CJS) 및 TypeScript를 지원하도록 했어요. 이렇게 하면 거의 모든 프로젝트 설정에 맞출 수 있어요.

### 어려웠던 부분

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

TypeScript 지원 추가하는 것은 정말 머리 아픈 일이었어요. tsconfig.json 파일을 설정하고 각종 타입을 확인하는 것이 필요했죠. import와 require 문과 함께 작동하는지 확인하는 데 심각한 시행착오가 있었어요. (심각한 시행착오. 거의 60가지 버전을 거쳤네요!).

막혔을 때는 구글이나 AI에 도움을 요청했어요. DEV에서도 좋은 기사를 찾을 수 있었어요! 훌륭한 정보들이 많이 있고, 개발자 커뮤니티가 훌륭해서 어려운 부분을 극복할 수 있었어요.

### 테스트와 문서

모든 것이 원활히 작동하는지 확인하는 것은 테스트가 정말 중요했어요. 라이브러리를 다른 기기에 설치하고 버그를 잡기 위한 테스트를 작성했어요. 문서 작성에는 자세한 README를 준비하고 웹사이트에 더 많은 문서를 작성했어요.

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

## 혼자 날다

이 프로젝트는 전적으로 내가 한 것입니다. 도전적이었지만 보람찬 경험이기도 했어요. 혼자서 진행하다 보니 npm 라이브러리를 처음부터 만드는 전체 과정을 알아가면서 많이 배웠고成장했어요.

## 발매와 피드백

방금 best-bible을 발표했기 때문에 아직 많은 피드백을 받지 못했어요. 사람들이 어떻게 생각하고 사용하는지 들어보는 것을 기대하고 있습니다. 피드백은 개선에 매우 도움이 됩니다.

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

## 조언

만약 여러분이 자신의 npm 라이브러리를 만들려고 생각 중이라면, 제 조언을 드리겠습니다: 계속해서 노력하고 도움을 요청하는 데 겁내지 마세요. 수많은 자료와 개발자 커뮤니티가 여러분을 기다리고 있습니다. 가장 중요한 것은 즐기며 할 일을 하라는 것입니다!

best-bible을 만드는 것은 정말 멋진 경험이었고, 여러분이 유용하게 사용할 수 있길 바라겠습니다. 시도해보거나 피드백이 있으면 언제든지 알려주세요. 즐거운 코딩하세요!

나만의 npm 라이브러리를 만드는 가장 쉬운 방법




음, 나는 Crowdstrike에서 Windows를 사용하지 않아서 안전 모드에서 머신을 부팅하는 서버 룸에 가둬져 있지 않아. 따라서 이제 소프트웨어 엔지니어링에서 가장 중요한 것을 논의할 시간이다: 버전 관리.

git을 즐기는 사람으로서, 다른 사람들이 리베이스에 좀 더 존중을 베풀어주기 시작하는 건 참 좋은 일이야. "나는 여러 작은 커밋을 사용하고 병합 충돌을 싫어해"에 관한 기술적인 심층 탐구는 다 필요 없어. 여기서 진짜 개발자들에 의한 실질적인 소프트웨어 개발이야.

함께 몇 단락을 나란히 나아가 보자.

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

알겠어요. 이 문제에 대해 솔직하게 이야기해볼게요. Rebase를 로컬에서만 사용하고, 변경 사항을 푸시합니다. 병합 충돌이 발생하면 최신 변경 사항을 병합하기 위해 메인에서 내려받고(이명이 master였던 시절을 겪었습니다), 그리고 장황할지언정 충돌을 처리합니다.

맞아요, 병합 충돌은 삶의 일부죠. 모든 것을 강력하고 강력하다고 해서 어떤 명령을 피하려고 하지 마세요. Crowdstrike은 방금 세계에 수십 억 달러를 소비시켰어요.

강력한 명령어를 다룰 수 있을 거예요, 작은 형제.

저는 왜 사람들이 이 명령을 싫어하거나 두려워할지 이해가 안 돼요. 실행한 다음 단순히 git push --force-with-lease를 실행하면 되는데 이게 왜 어렵다고 생각하는지 몰라요. --force-with-lease 명령은 원격 변경 사항을 식별하고 푸시를 차단합니다. 그렇지 않으면 푸시할 수 있어요.

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

그렇게 쉬워요.

Git의 각종 복잡성을 두려워하지 마세요. Git 게임을 플레이하고 Git에서 편안해지세요. 리베이스가 세상의 끝은 아니니까, 언제든지 Git 작업에서 도움을 요청하세요. 다른 명령어처럼, 리베이스도 조심하지 않으면 위험할 수 있어요. 배우고 있을 때는 항상 백업 브랜치를 만들어두세요.

독서해 주셔서 감사합니다.

Git Rebase를 제대로 사용하는 방법




![2024-07-23-ThePleasuresofReadingComputerCode_0.png](/assets/img/2024-07-23-ThePleasuresofReadingComputerCode_0.png)

레시피를 읽는 것에는 이상한 즐거움이 있어요.

요리를 할 생각이 없더라도요. 아마 특히 요리할 계획이 없더라도 더욱 그렇지 않을까요!

2013년에 Bee Wilson 작가는 William Sitwell의 'A History of Food in 100 Recipes' 책을 리뷰하면서 이 현상을 곰곰이 생각해 보았어요. Wilson은 많은 레시피가 놀랄 만큼 장식적이었음을 언급했는데, Madhur Jaffrey의 양고기 코르마 같은 레시피들은 "장료 목록이 1 페이지 이상에 걸쳐 있어요"라며 설명했어요. 그래서, 이 레시피들은 당장 달려가서 만들 요리는 아니었어요. 사실, 아무 때도 만들 수도 없는 레시피일지도 몰라요.

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

그렇지만 윌슨이 주장한대로, 단지 이러한 호화로운, 바이잔틴식 레시피를 읽는 것만으로도 다른 취지가 있다: 우리의 상상력을 자극하는 것이다.

이 요리를 만들었을 때 어떨지 상상하는 것이 재미있어요. 어떨까요? 이 요리를 만드는 것이 얼마나 재미있을까요? 어떤 어려운 부분이 있을까요? 어떤 새로운 기술이 필요할까요?

이 즐거움을 경험하려면 음식을 실제로 만들 필요는 없어요. 요리책을 읽는 것은, 윌슨이 지적한 대로, 가능성의 정신적인 성을 헤매는 것과 같아요…

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

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

오늘 윌슨의 글을 생각하게 돼서, 몇 시간 동안 코드를 자세히 살펴보았더니, 윌슨이 설명한 것과 매우 유사한 기쁨을 느낄 수 있다는 것을 깨달았어요.

프로그래밍을 하지 않는 사람들은 종종 코딩을 "앉아서 소프트웨어를 날려내는 것"으로 생각하지만, 프로그래밍의 큰 즐거움 중 하나는 무엇인가를 만드는 것뿐만 아니라, 다른 사람들이 만든 것들을 감상할 수 있는데, 그것은 그들의 소스 코드를 검토함으로써 이루어져요.

오늘 오후 일어난 일은, 제가 사용하여 내 이상한 코딩 프로젝트의 많은 부분을 쓰고 호스팅하는 Glitch를 살펴볼 때 일어났어요 (안녕, "이상한 오래된 책 찾기"!). 그리고 Glitch 사람들이 자신의 Fediverse 프로젝트를 만들기 위한 샘플 코드를 게시했다는 것을 알게 되었어요. 자신만의 작은 개인 Mastodon 인스턴스를 만들고 싶나요? 그럴 때 사용할 코드도 있어요. Mastodon에서 봇을 실행하고 싶으세요? 네: 그 코드도 여기 있어요.

일부 코드는 한눈에 이해할 수 있었어요. 다른 부분들은 살펴보기 전까지 제게는 낯설었어요. ('모건' 노드 패키지가 뭔지 모르겠네요.) 일부 논리는 즉시 이해되었고, 다른 세그먼트는 밀도 높은 암시적인 시를 읽는 것처럼, 함수 안의 함수의 흐름을 차분히 추적해야 했어요.

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

일이죠, 위슨이 이 화려한 레시피를 바라보는 것처럼, 나는 이 페디버스 앱 중 어떤 것도 즉시 사용하고 싶은 욕망이 없었습니다. 나는 이런 걸 아무것도 만들 계획이 없었어요.

하지만 그 코드를 읽는 것만으로도 가능성이 주는 즐거움을 느겼어요. 응, 내가 직접 내 Mastodon 서버를 운영할 수 있겠지? 꽤 멋진 일이 될 거 같아요. 만들지는 않겠지만 할 수 있지.

상상 속에서 앱을 실행하는 것은 사실에서 실행하는 것만큼 만족스럽다는 것을 알게 되었죠. 아마도 심지어 더 그렇다고 해도 될 정도예요, 왜냐하면 마음속에서 실행되는 코드에는 버그가 없기 때문이거든.

코딩은 유명히 위압감을 주죠. 순수한 논리로 작은 기계를 만드는 법을 알게 되면, 그것은 작은 초능력을 가진 것처럼 느껴집니다. 그렇기에 다른 사람의 코드를 읽는 것은 더욱 더 강력한 효과를 불러일으키는데요, 왜냐면 주문서를 읽는 것과 같기 때문이죠 - 시험해볼 수 있는 새로운 엘드리치 소환마술이라고 생각하면 되요.

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

실제로 코드를 읽는 것은 주문서를 숙고하는 것보다 실제로 더 이상해 보일 수 있어요. 그 이유는 코드가 유언비어적이기 때문이에요: 코드는 기계가 만들어지는 과정을 설명하는 사람의 지시사항이자 기계 그 자체라고 표현할 수 있어요. 소스 코드는 두 가지 수준에서 작동하는데요 — 코드를 읽는 사람의 머릿속과 코드를 실행하는 프로세서 내부에서 모두 작동해요. 그래서 코드를 읽는 것이 코드를 실행하는 경험에 이상하게 가까운 느낌을 주는 것이죠.

다른 말로 설명하자면: "프로그램은 사람이 읽기 위해 만들어졌으며 우연히 컴퓨터가 실행하기 위한 것"이에요. (이 문구를 도널드 크누트에게 소속시킨 경우를 가장 많이 들어봤어요.)

물론, 코드를 읽는 것이 가치가 있는 더 많은 현실적인 이유들이 있어요.

프로그래머로서, 물론 배우는 방법 중 하나에요. 훌륭한 코더들이 데이터를 효율적으로 정렬하는 방법을 지켜보면 (내가 고안한 거친, 무자비한 방식과 비교했을 때), 눈을 떴어요. 코딩 스타일을 엿볼 수 있어요, 마치 문학 스타일을 발견하는 것처럼: 이 개발자는 간단한 for-loop 반복자를 사용하는 함수를 선호해요 — 무슨 일이 일어나고 있는지 명확하게 알 수 있게 하기 위해 — 그 반면에 다른 개발자는 초소형 Perl-golf 스타일의 원라이너를 만들어냅니다. 이 사람은 간결함을 위해 변수에 한 글자로 명명을 하지만, 다른 사람은 저장하는 내용을 정확하게 나타내는 믿을 만한 긴 이름을 사용해요.

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

하지만 학습을 떠나서 한 번 생각에만 몰입해 보세요. 자아성장도 중요하지만, 상상력을 충만하게 하는 즐거움이기도 합니다. 마음의 문을 열어 주는 방법이죠.

(이 내용이 마음에 드셨다면, “박수” 버튼을 내일이 아니라 오늘 눌러주세요. 최대 50번 클릭할 수 있어요!)

제가 Medium에는 주당 두 번 포스팅을 올리고 있습니다. 제 이메일로 각 포스트를 받아보시려면 여기를 팔로우해주세요. Medium 회원이 아니라면 여기를 가입하여 매달의 회비의 절반을 바로 제 Medium 글 지원에 도입해주시고 사이트의 다른 모든 콘텐츠에 액세스할 수 있습니다.

저는 뉴욕 타임스 매거진 기고자이자 Wired 및 Smithsonian 매거진에 칼럼니스트로 활동하고 있으며, Mother Jones에 정기 기고자로 활동하고 있습니다. "Coders: The Making of a New Tribe and the Remaking of the World"와 "Smarter Than You Think: How Technology is Changing our Minds for the Better"의 저자이기도 합니다. 트위터와 인스타그램에서는 @pomeranian99로, Mastodon에서는 @clive@saturation.social로 활동하고 있습니다.

컴퓨터 코드 읽기의 즐거움




만약 힙이 어떻게 동작하는지 이해하고 싶다면만 바꿔보세요.

만약에 힙이 어떻게 동작하는지 정확히 알 필요가 없다면 기본적으로 제공되는 heapq를 사용하여 업무를 처리할 수 있습니다.

하지만 힙이 어떻게 내부적으로 동작하는지 이해하길 원한다면, 힙을 처음부터 코딩하여 배우는 것을 추천할 수도 있어요.

# 힙(Heap)이란?

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

힙에는 2 종류가 있어요 — 최소 힙과 최대 힙

최소 힙은 이진 트리입니다. 부모 노드가 항상 자식 노드보다 작거나 같은 경우.

최대 힙도 이진 트리입니다. 부모 노드가 항상 자식 노드보다 크거나 같은 경우.

# 시각화

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

아래 이미지는 현재 작성 중인 HTML 테이블입니다.

참고 - 왼쪽 자식 또는 오른쪽 자식 중 어느 쪽이 더 큰지는 중요하지 않습니다.

중요한 것은 부모가 다음과 같아야 합니다:

- 자식보다 작거나 같아야 함 (최소 힙)
- 자식보다 크거나 같아야 함 (최대 힙)

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

# 힙이란 무엇인가요?

그것은 우선 순위 큐입니다.

최소 힙에서 가장 작은 값이 항상 다음에 나옵니다.

최대 힙에서 가장 큰 값이 항상 다음에 나옵니다.

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

어떤 순서로 넣거나 빼도 상관 없어요.

# 리스트를 사용할 수 없는 이유는?

사용할 수는 있지만 시간적으로 효율적이지 않아요.

우선 순위 큐로서 리스트 사용하기:

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

- 새로운 요소 삽입 → O(1) 상수 시간
- 가장 높은 우선 순위 요소 제거 → O(n) 선형 시간

힙을 사용하면:

- 새로운 요소 삽입 → O(log n) 로그 시간
- 가장 높은 우선 순위 요소 제거 → O(log n) 시간

많은 요소가 있다면, 리스트 대신 힙을 사용하는 것이 더 시간효율적입니다.

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

또한 코딩 면접을 볼 때, 우선 순위 큐로서 목록을 사용하는 것보다 힙을 사용하는 것이 더 많은 점수를 획들할 수 있어요.

# 데모 시간

간단하게, 예시로서 최소 힙을 사용해봐요.

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

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

# 1) 이 민 힙에 6을 삽입하기

단계 1 — 새로운 노드 6을 다음 사용 가능한 공간에 삽입하기

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

단계 2 — 부모보다 큰지 확인하기.

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

그리고 지금 힙은 괜찮기 때문에, 아무것도하지 않아도 됩니다.

## 2) 이 최소 힙에 0을 삽입

단계 1 - 새로운 노드 0을 다음 사용 가능한 공간에 삽입하기만 하면 됩니다.

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

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

Step 2 - 부모보다 큰지 확인해 봅니다.

하지만 0은 아닙니다. 0은 부모인 3보다 작습니다. 이는 최소 힙의 규칙을 위배합니다 - 모든 부모는 자식들보다 작거나 같아야 합니다.

Step 3 - 0과 3을 교체합니다

![image](/assets/img/2024-07-23-CodingAHeapPriorityQueueInPythonForFunFromScratch_4.png)

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

Step 4—단계 2와 3을 재귀적으로 반복합니다. 부모보다 0이 큰지 루트까지 도달한 것에 상관없이

이 경우, 추가로 한 번 더 전환해야 합니다

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

이 시점에서, 힙은 모든 부모 ≤ 자식을 만족시키기 때문에 더 이상 조치를 취하지 않습니다.

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

# 3) 가장 작은 원소를 제거하기 (또는 팝하기)

단계 1 — 우리는 먼저 루트 노드 0을 최신 노드 3과 교환합니다

![image](/assets/img/2024-07-23-CodingAHeapPriorityQueueInPythonForFunFromScratch_6.png)

단계 2 — 노드 0을 제거합니다

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


![Screenshot](/assets/img/2024-07-23-CodingAHeapPriorityQueueInPythonForFunFromScratch_7.png)

Now, 3 is the root, which isn’t correct. We need to fix our heap.

Step 3 — switch 3 with its smaller child until the min heap condition is fulfilled

![Screenshot](/assets/img/2024-07-23-CodingAHeapPriorityQueueInPythonForFunFromScratch_8.png)


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

그리고 이 시점에 우리의 최소 힙은 다시 복구되었습니다.

# 코드 (최소 힙)

```python
class Node:
    def __init__(self, val):
        """ l -> left
            r -> right
            p -> parent
        """
        self.val = val
        self.l = self.r = self.p = None

    def adopt(self, side: str, val: int):
        """ 자식 노드를 생성합니다.
            side: 'l' 또는 '  r'
            val: 자식 노드의 값
        """
        setattr(self, side, Node(val))
        getattr(self, side).p = self

    def push(self, val):
        """ 힙에 새로운 값을 추가합니다. """
        def repair(node):
            # 부모가 자식보다 작거나 같은 조건을 충족하는지 확인
            if node.p is None or node.val > node.p.val: return
            node.val, node.p.val = node.p.val, node.val
            repair(node.p)

        q = [self]
        while q:
            cur = q.pop(0)
            if cur.l is None: return cur.adopt('l', val), repair(cur.l)
            if cur.r is None: return cur.adopt('r', val), repair(cur.r)
            if cur.l: q.append(cur.l)
            if cur.r: q.append(cur.r)

    def pop(self):
        """ 힙에서 가장 작은 요소를 제거하고 반환합니다. """
        def get_leaf(node):
            # 가장 오른쪽에 있는 잎 노드를 가져옵니다 (왼쪽도 동작합니다)
            q = [node]
            while q:
                cur = q.pop(0)
                if (cur.l, cur.r) == (None, None): return cur 
                if cur.r: q.append(cur.r)
                if cur.l: q.append(cur.l)

        def repair(n):
            # 부모가 자식보다 작거나 같은 조건을 충족하는지 확인
            if (n.l and n.l.val < n.val) or (n.r and n.r.val < n.val):
                if n.r is None or n.l.val < n.r.val:
                    n.val, n.l.val = n.l.val, n.val
                    repair(n.l)
                elif n.l is None or n.r.val < n.l.val:
                    n.val, n.r.val = n.r.val, n.val
                    repair(n.r)
                
        leaf = get_leaf(self)
        leaf.val, self.val = self.val, leaf.val

        if leaf.p.l == leaf: leaf.p.l = None
        else: leaf.p.r = None

        repair(self)
        return leaf.val
```

# 결론 🎉

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

테이블 태그를 Markdown 형식으로 변경해주세요.

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

감사합니다! 이런 작은 조치들이 큰 도움이 되고, 정말 감사합니다!

YouTube: [https://www.youtube.com/@zlliu246](https://www.youtube.com/@zlliu246)

LinkedIn: [https://www.linkedin.com/in/zlliu/](https://www.linkedin.com/in/zlliu/)

파이썬으로 힙우선순위 큐 만드는 방법




요즘 Go 쓰기에 관심이 생겨 Neovim 설정에서 Golang을 설정해야 했어요. 여기에 어떻게 설정했는지 알려드릴게요.

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

저는 유지 및 계속 업데이트하는 개인 Neovim 설정이 있어요. 이 기사에서는 해당 설정에서 사용하는 플러그인을 이용할 거에요. 제 설정은 [여기](링크)에서 확인할 수 있어요.

Neovim이나 LSP 설정에 익숙하지 않은 경우, 몇 가지 개념에 익숙해지기 위해 이전 기사 몇 편을 읽어보시는 걸 추천합니다.

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

일반적으로, 플러그인 설정에는 lazy.nvim을 사용하는 것이 좋습니다.

새 언어를 위해 Neovim을 구성하는 여러 측면이 있습니다.

- LSP 구성하기 (언어 서버 추가 및 연결)
- Treesitter 지원 추가 (문법 강조 및 다른 기능)
- 서식 지정 구성 (자동 저장 포함)
- 디버거 추가 및 구성

# LSP에 추가

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

자, 언어 서버를 설치하고 설정해 봅시다.

## gopls 언어 서버 설치

저는 새로운 언어로 작업할 때 필요한 다양한 종속성을 설치하고 관리하는 mason.nvim을 사용합니다.

```js
{
    "williamboman/mason.nvim",
    dependencies = {
      "WhoIsSethDaniel/mason-tool-installer.nvim",
    },
    config = function()
      local mason = require("mason")
      local mason_tool_installer = require("mason-tool-installer")

      mason_tool_installer.setup({
        ensure_installed = {
          "gopls",
        },
      })
    end,
}
```

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

## lsp-zero 설치 및 구성

나는 lsp zero를 사용하여 언어 서버를 내 Neovim 인스턴스에 연결합니다.

이 배포는 mason-lspconfig 및 nvim-lspconfig을 서로 통신하도록 설정하고 완성을 위해 nvim-cmp 및 스니펫 지원을 추가하는 등 다른 유용한 기능을 제공합니다.

내 키맵은 그대로 남겨 두었지만, 자유롭게 여러분에게 맞는 것으로 업데이트해 주세요.

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

```json
{
  "VonHeikemen/lsp-zero.nvim",
  branch = "v2.x",
  dependencies = {
    -- LSP Support
    { "neovim/nvim-lspconfig" }, -- 필수
    { -- 선택적
      "williamboman/mason.nvim",
      build = function()
        pcall(vim.cmd, "MasonUpdate")
      end,
    },
    { "williamboman/mason-lspconfig.nvim" }, -- 선택적

    -- 자동 완성
    { "hrsh7th/nvim-cmp" }, -- 필수
    { "hrsh7th/cmp-nvim-lsp" }, -- 필수
    { "L3MON4D3/LuaSnip" }, -- 필수
    { "rafamadriz/friendly-snippets" },
    { "hrsh7th/cmp-buffer" },
    { "hrsh7th/cmp-path" },
    { "hrsh7th/cmp-cmdline" },
    { "saadparwaiz1/cmp_luasnip" },
  },
  config = function()
    local lsp = require("lsp-zero")

    lsp.on_attach(function(client, bufnr)
      local opts = { buffer = bufnr, remap = false }

      vim.keymap.set("n", "gr", function() vim.lsp.buf.references() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 참조 이동" }))
      vim.keymap.set("n", "gd", function() vim.lsp.buf.definition() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 정의 이동" }))
      vim.keymap.set("n", "K", function() vim.lsp.buf.hover() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 툴팁" }))
      vim.keymap.set("n", "<leader>vws", function() vim.lsp.buf.workspace_symbol() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 워크스페이스 심볼" }))
      vim.keymap.set("n", "<leader>vd", function() vim.diagnostic.setloclist() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 오류 표시" }))
      vim.keymap.set("n", "[d", function() vim.diagnostic.goto_next() end, vim.tbl_deep_extend("force", opts, { desc = "다음 오류" }))
      vim.keymap.set("n", "]d", function() vim.diagnostic.goto_prev() end, vim.tbl_deep_extend("force", opts, { desc = "이전 오류" }))
      vim.keymap.set("n", "<leader>vca", function() vim.lsp.buf.code_action() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 코드 수정" }))
      vim.keymap.set("n", "<leader>vrr", function() vim.lsp.buf.references() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 참조" }))
      vim.keymap.set("n", "<leader>vrn", function() vim.lsp.buf.rename() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 이름 변경" }))
      vim.keymap.set("i", "<C-h>", function() vim.lsp.buf.signature_help() end, vim.tbl_deep_extend("force", opts, { desc = "LSP 서명 도움말" }))
    end)

    require("mason").setup({})
    require("mason-lspconfig").setup({
      ensure_installed = {
        "gopls",
      },
      handlers = {
        lsp.default_setup,
        lua_ls = function()
          local lua_opts = lsp.nvim_lua_ls()
          require("lspconfig").lua_ls.setup(lua_opts)
        end,
      },
    })
  end,
}
```

# Treesitter 문법 추가

문법 표시를 활성화하고 다른 플러그인에서 사용하는 트리시터 구문 트리를 지원하기 위해 go에 대한 문법을 설치하세요.

```json
{
    "nvim-treesitter/nvim-treesitter",
    build = ":TSUpdate",
    config = function()
      local configs = require("nvim-treesitter.configs")

      configs.setup({
        ensure_installed = {
          "go",
        },
      })
    end,
}
```

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

# Conform.nvim으로 서식 추가하기

이전에는 null-ls를 사용했지만 해당 플러그인이 보관되었고, 이제는 conform.nvim을 사용하여 서식을 설정하는 것을 선호합니다.

제가 개인적으로 서식을 트리거할 때 키를 누를 때 좋아하는데요, 만약 자동 저장을 선호한다면 conform.setup 내에 이 부분을 추가하세요.

```js
format_on_save = {
  - 이 옵션들은 conform.format()로 전달됩니다.
  timeout_ms = 500,
  lsp_format = "fallback",
},
```

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

이제 conform.nvim을 설치하고 구성하고 Go 파일에 "gofmt"를 설정하는 플러그인 블록을 제공해 드렸습니다.

```js
{
  "stevearc/conform.nvim",
  event = { "BufReadPre", "BufNewFile" },
  config = function()
    local conform = require("conform")

    conform.setup({
      formatters_by_ft = {
        go = { { "gofmt" } },
      },
    })

    vim.keymap.set({ "n", "v" }, "<leader>l", function()
      conform.format({
        lsp_fallback = true,
        async = false,
        timeout_ms = 1000,
      })
    end, { desc = "파일 또는 범위(시각적 모드에서)를 형식화합니다." })
  end,
}
```

이제 Neovim을 다시 시작하고 Go 파일을 열어서 자동 완성, 서식 지정 및 구문 강조가 예상대로 작동하는 것을 확인할 수 있어야 합니다.

<img src="https://miro.medium.com/v2/resize:fit:400/1*-k4bwIw8oPq_545ksQ0kHw.gif" />

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

# 디버거 설치 및 구성하기

이제 DAP(Debug Adapter Protocol)를 기반으로 하는 필수 디버거를 설정해보겠습니다.

## Delve 및 nvim-dap-go 설치하기

저는 Mason을 사용하여 delve를 설치했습니다. 아직 많이 사용해보지는 않았지만 좋은 평가를 들었습니다. 더 나은 디버거가 있다고 판단할 경우 이 글을 업데이트하겠습니다.

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

다른 디버거를 사용하고 Delve보다 선호하는 경우 댓글로 알려주세요.

다시 mason.nvim을 사용하여 delve를 설치하세요.

```js
{
    "williamboman/mason.nvim",
    dependencies = {
      "WhoIsSethDaniel/mason-tool-installer.nvim",
    },
    config = function()
      local mason = require("mason")
      local mason_tool_installer = require("mason-tool-installer")

      mason_tool_installer.setup({
        ensure_installed = {
          "gopls",
          "delve",
        },
      })
    end,
  }
```

이제 nvim-dap을 설치하고 구성하여 특정 언어에 맞는 dap을 연결하세요. 저는 nvim-dap-go를 사용합니다.

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

```js
{
    "mfussenegger/nvim-dap",
    dependencies = {
      {
        "rcarriga/nvim-dap-ui",
        "nvim-neotest/nvim-nio",
        config = function(_, opts)
          local dap = require("dap")
          local dapui = require("dapui")
          dapui.setup(opts)
          dap.listeners.after.event_initialized["dapui_config"] = function()
            dapui.open({})
          end
          dap.listeners.before.event_terminated["dapui_config"] = function()
            dapui.close({})
          end
          dap.listeners.before.event_exited["dapui_config"] = function()
            dapui.close({})
          end
        end,
      },
      {
        "leoluz/nvim-dap-go",
        config = function()
          require("dap-go").setup()
        end,
      },
      {
        "jay-babu/mason-nvim-dap.nvim",
        dependencies = "mason.nvim",
        cmd = { "DapInstall", "DapUninstall" },
        opts = {
          automatic_installation = true,
          handlers = {},
          ensure_installed = {
            "delve"
          },
        },
      },
    },
  }
```

이제 Go 파일로 들어가서 중단점을 설정하고 디버그하실 수 있어요!

```js
:lua require('dap-go').debug_test()
```

# 대안들

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

만약 여러 조각이 아닌 하나의 구성을 선호한다면 vim-go를 확인해보세요.

개인적으로 저는 각 부분을 구성하는 것만큼 확장 가능하지 않다고 생각하지만, 어떤 사람들은 이 방법을 선호합니다.

# 기타 자료

만약 비디오 형식의 안내를 선호한다면 아래 비디오를 확인해보세요.

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

위주제를 즐기시는 경우 저의 유튜브 채널도 마음에 드실 것 같아요. 좋은 하루 되세요!

Golang으로 Neovim 설정하는 방법




오늘의 취미 코딩 연습에서 우리는 압축되지 않은 점성 유체에 대한 네비에-스톡스 방정식을 해결합니다. 이를 위해 스펙트럼 방법을 구현할 것입니다. 네비에-스톡스 방정식은 물과 같은 유체의 움직임을 대략적으로 설명합니다. 이 방정식은 난류 현상을 포착할 수 있습니다. 이 시스템은 수학에서 3D 해의 존재와 부드러움을 일반적으로 증명하는 것이 밀레니엄 상 문제 중 하나입니다.

GitHub에서 함께하는 Python 코드를 찾을 수 있습니다.

입도에 들어가기 전에 이 데모를 실행하는 것이 어떻게 되는지 보여주는 gif가 아래에 있습니다:

<img src="https://miro.medium.com/v2/resize:fit:600/1*aSTHQxFaXKuKtYyB7ybEIQ.gif" />

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

## 네비에-스톡스 방정식

비점성을 가진 점성도 ν로 주어진 불압축성 유체의 속도장 v(x)의 진화를 고려합니다. 이는 네비에-스톡스 방정식에 의해 지배됩니다:

![Navier-Stokes Equations](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_0.png)

여기서 P는 유체압력을 나타냅니다. 불압축성 유체의 경우 압력장은 특별합니다: 시간에 따라 진화되는 별도의 변수가 아니며(압축성 유체의 경우와 달리), 압력은 속도장의 발산을 유지하는 해결책입니다(두 번째 방정식). 속도장은 압축을 일으킬 수 있는 비선형 항인 이송을 경험하며, 유체는 점도 계수 ν로 인한 확산도 경험합니다. 점도 계수가 클수록 유체는 꿀처럼 '끈적거리는' 특성을 갖습니다.

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

## 스펙트럼 방법

스펙트럼 방법은 편미분 방정식의 수치해를 전역 기저 함수의 합으로 표현하고, 이때 계수는 풀어야 하는 알려지지 않은 값으로 나타냅니다. 여기서 우리는 주기적 영역에 연속적인 해를 표현하는 데 이상적인 푸리에 기저를 고려할 것입니다. 이러한 방법은 그런 다음 빠른 푸리에 변환(FFT) 알고리즘을 사용하여 물리적 영역 x에서 해를 푸리에 공간으로 변환하며, 여기서 해는 각각 파동수 k에 의해 설명되는 파동의 합이 됩니다. 이러한 방법을 이전 자습서에서 시간 의존 슈뢰딩거 방정식을 해결하는 데 사용했습니다. 우리는 속도장의 푸리에 계수를 묘사하기 위해 '모자' 표기법을 사용합니다:

![이미지](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_1.png)

스펙트럼 방법을 특별하게 만드는 것은 무엇일까요? 한 가지 특별한 속성은 그래디언트 평가 및 관련 연산이 푸리에 공간에서 k에 의한 곱셈으로 전환된다는 것입니다. 예를 들어, 네비에-스토크스 방정식에 푸리에 변환을 적용할 때, 속도가 변환되는데:

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


![image](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_2.png)

the gradient ∇ transforms as:

![image](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_3.png)

and the Laplacian transforms as:


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


![image](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_4.png)

Thus, we can write functions to calculate operators like gradients, divergences, and curls of fields as follows:

Calculating the gradient ∇v using FFTs:

Calculating the divergence ∇.v using FFTs:


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

FFT를 사용하여 회전 ∇ x v를 계산하는 방법:

위의 함수들은 주기적인 함수의 미분을 계산하는 데 유용합니다. 이는 우리가 정의한 푸리에 공간 변수를 사용하는데, 그 중에는 모든 파동 수 k의 2D 배열이 포함됩니다:

이제 우리의 주된 스펙트럴 메소드를 개요로 설명해 보겠습니다. 다음으로 구성됩니다:

- 디바이션 필터 적용을 포함한 전진 오일러 단계를 사용하여 물리적 공간에서의 운반 단계
- 압력을 얻기 위해 푸리에 공간에서 포아송 문제 해결
- 유체 속도의 발산을 유지하기 위해 압력 기욥기를 적용하는 수정 단계
- 푸리에 공간에서의 확산 해결 (암시적 역 오일러)

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

알고리즘의 주요 루프는 다음과 같이 보입니다:

알고리즘 단계별로 진행해보겠습니다. 먼저, 비선형 이송 항의 효과를 계산합니다.

푸리에 공간에서 기울기를 계산할 때 저희 도우미 함수를 사용할 수 있지만, 곱셈은 물리적 공간에서 계산해야 합니다. 비선형 항은 경우에 따라 수치 문제를 일으킬 수도 있는데, 두 필드의 곱은 푸리에 기저에서 표현할 수 있는 최대 파동수보다 높은 파동수를 가질 수 있습니다. 이슈를 피하기 위해, 고주파 모드를 제거하기 위해 비앨리어싱 필터를 적용할 수 있습니다. 잘 알려진 2/3-룰을 사용하여 이를 수행합니다. 이 규칙에 따르면, 푸리에 기저에서 표현된 필드의 곱셈에 대해 기저에서 최대 파동수의 2/3 이하의 파동수만 신뢰할 수 있습니다. (참고: 2개 이상의 필드를 곱셈한다면 필터를 더 엄격하게 만들어야 합니다.) 따라서 필터를 구현합니다:

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

우리가 의해 정의 된 오른쪽 항을 가지고 있으면, 순방향 Euler 방법을 사용하여 시간 단계 n에서 시간 단계 n+1로 흐름 속도 필드를 진화시킬 수 있습니다:

![image](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_6.png)

이 이동 단계는 속도 필드에 발산을 도입할 수 있으며, Navier-Stokes 방정식에서 압력의 역할은 이를 제거하는 것입니다. Helmholtz 분해 정리에 따르면, 어떤 벡터 필드도 벡터 A의 회전과 스칼라 P의 기울기의 합으로 분해될 수 있습니다. 다시 말해, 분해는 다음과 같이 보입니다:

![image](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_7.png)

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

양쪽을 발산한 결과, A의 회전은 사라지고 다음과 같은 식이 남습니다:


![image](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_8.png)


이는 포아송 방정식이며 P에 대해 풀 수 있습니다. 여기서 P는 실제로 유체 압력입니다! (표기법을 신중하게 선택했습니다.) P를 구하기 위해 푸리에 공간으로 변환하면 라플라스 연산자가 -k²가 됩니다. 빠른 포아송 솔버를 작성합니다:

P를 알면 그레디언트를 찾아 (푸리에 공간에서 ik로 곱셈) 속력 필드를 업데이트합니다:

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


![스크린샷](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_9.png)

마지막 단계로, 확산 단계를 적용할 것입니다:

![스크린샷](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_10.png)

일반적으로 안정적인 타임 스텝 크기에 엄격한 제한이 있는 명시적 방법과 달리, 장시간 안정성을 갖는 암시적 방법을 사용하는 것이 좋습니다. 따라서 푸리에 공간에서 역 오일러 단계를 적용할 것입니다:


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


![navier-stokes](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_11.png)

implemented as follows:

And there we have it! That’s it for the numerical method. Just a handful of lines at its core. Time to try it out!

## Initial Conditions


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

우리는 2D 주기적 영역 [0,1]²에 간단한 테스트 문제를 구현합니다. 유체 필드는 낮은 파동수 회오리로 초기화됩니다. 진화는 전단력을 유발하고, 회오리의 형성으로 이어지며, 결국 점성으로 인해 소멸됩니다.

## 연습: 코드 효율성 향상

여기서 제시된 알고리즘은 내비에-스톡스 방정식의 서로 다른 부분을 해결하는 교육적 시연을 위해 설계되었습니다 (이동, 보정, 확산). 그러나 코드는 푸리에 변환을 중복하여 사용합니다 (예: 속도를 물리적 및 푸리에 공간 간에 변환하고 그래디언트를 계산할 때마다 다시 변환할 수 있습니다). FFT 호출 수를 최소화하여 코드 효율성을 향상시키는 것은 독자에게 맡겨둡니다.

코드를 실행하면 시뮬레이션을 실시간으로 시각화할 수 있고 유체의 회오리 (속도의 선의 회전)에 대한 그림을 얻을 수 있습니다:

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

![image](/assets/img/2024-07-23-CreateYourOwnNavier-StokesSpectralMethodFluidSimulationWithPython_12.png)

비압축성 네비에-스톡스 방정식은 다양한 수치 기법을 사용하여 해결할 수 있습니다. 유한 요소법, 유한 차이법, 스펙트럴 방법 및 격자 볼츠만 방법을 사용할 수 있습니다. 이러한 방정식을 시뮬레이션하는 것은 공학 분야에서 중요한 응용이 있습니다. 예를 들어, 비행기 설계는 비행기 전체에 이륜세기 유동을 시뮬레이션하는 기술의 혜택을 받을 수 있으며, 이러한 계산은 물리적 윈드 터널 실험이 필요 없게 할 수 있습니다.

네비에-스톡스 방정식은 이상화된 연속 유체를 설명하지만 현실을 완벽하게 표현하지는 못합니다. 예를 들어, 방정식은 경계 조건이 주어진 후 예외적인 경우에 뾰족한 모서리에서 무한한 속도를 예측할 수 있습니다(이른 ‘모서리 특이성’라고 함)! 방정식이 주기적 도메인에서 병렬사례에서 터질 수 있는지 여부는 수학에서 여전히 열려 있는 문제입니다. 그러나 네비에-스톡스 방정식은 높은 레이놀즈 수에 의해 특징 지어지는 유체 흐름에서 나타나는 복잡하고 혼돈스러운 행동인 난류의 복잡한 현상을 놀랍게도 포괄합니다.

네비에-스톡스 해법자의 Python 코드를 GitHub에서 다운로드하여 시뮬레이션을 실시간으로 시각화하고 초기 조건에 대해 실험해보세요. 즐기세요!

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

## 저자 소개

필립 모크는 로렌스 리버모어 국립 연구소의 계산 물리학자입니다. 그는 하버드 대학에서 학사 (’12) 및 박사 ('17) 학위를 받았으며, 박사 논문을 위해 천문학적 시스템의 고성능 컴퓨팅 알고리즘 및 시뮬레이션을 설계했습니다. 이 게시물이 마음에 드셨다면, 이야기에 👏박수를 보내 주시고, 다양한 과학 컴퓨팅 주제에 대한 파이썬 튜토리얼을 더 보시려면 저를 👉팔로우해주세요!

파이썬으로 유체 시뮬레이션 만들기 정리




<img src="/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_0.png" />

저는 전에 만난 진짜 코딩 면접 문제에 대해 이야기하려고 해요.

주어진 문자열 `abaabcabaaax` 와 같이 문자열이 있다면, 오직 고유한 문자만 포함하는 가장 긴 부분 문자열의 길이를 찾아야 합니다.

- 가장 긴 부분 문자열은 abc 또는 bca 또는 cab 중 하나입니다.
- 우리는 길이에만 관심이 있으며, 그 길이는 3입니다.

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

# 당신을 위한 몇 가지 테스트 케이스

```js
def longest_substring_length(string: str) -> int:
    """
    구현해야 함
    """

testcases = [
    ('', 0),
    ('a', 1),
    ('aa', 1),
    ('aaa', 1),
    ('aaabbb', 2),
    ('ababababbababa', 2),
    ('aabbccddeeffgg', 2),
    ('aaaaaaabbbbbbbbcccc', 2),
    ('abaaaabcabaaax', 3),
    ('abcbabcababcacbacab', 3),
    ('abababcdbbcc', 4),
    ('abcdcbabcdcba', 4),
    ('bbbabcdeabcdeddd', 5),
    ('abcdef', 6)
]

for string, answer in testcases:
    guess = longest_substring_length(string)
    print(string, answer, guess)
```

이것을 시도하는 데 시간을 내어주세요!!

# 잠시 멈춤

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

최근 Python, 프로그래밍, 그리고 많은 사람들이 알지 못하는 Python 관련 랜덤 팩트에 대한 Substack 뉴스레터를 시작했어요. 함께해요!

제 Substack: [https://zlliu.substack.com](https://zlliu.substack.com)

또한 최근에 책 101 Things I Never Knew About Python을 썼어요. 제가 더 이른 시기부터 배울 수 있었을 Python 관련 이야기들을 자세히 다루었어요.

여기서 확인해보세요: [https://payhip.com/b/vywcf](https://payhip.com/b/vywcf)

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

# 이 문제를 해결하는 일반적인 아이디어

이 문제를 O(n)의 선형 시간으로 해결해 봅시다.

그리고 O(n)의 시간으로 이 문제를 해결하기 위해서는 문자열을 왼쪽에서 오른쪽으로 순회해야 합니다.

- left 포인트 left와 right 포인터 right를 유지합니다
- right - left + 1은 가장 긴 부분 문자열의 길이입니다
- 각 반복마다, left와 right를 업데이트하고, 가장 긴 길이를 추적합니다.

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

표의 태그를 Markdown 형식으로 변경해 주세요.

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

아래의 표 태그를 Markdown 형식으로 변경하세요.

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


![image](/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_3.png)

이제 문자가 반복됩니다. 우리의 부분 문자열은 aba로, 이는 잘못된 부분 문자열입니다.

- 사전에서 a의 값을 업데이트합니다.
- 가능하다면 마지막 a의 앞에있는 문자를 가리키는 left를 증가시킵니다.

![image](/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_4.png)


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

다음으로, 우리는 오른쪽을 다시 1만큼 증가시킵니다:

![image](/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_5.png)

그리고 다시 다른 'a'를 발견합니다. 이제 우리의 사전과 왼쪽을 업데이트할 때입니다.

![image](/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_6.png)

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

다음으로, 다시 오른쪽으로 1씩 증가합니다:


<img src="/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_7.png" />


이제 우리가 또 다른 b를 만나게 됩니다. 우리의 dict와 left를 업데이트하는 시간입니다.


<img src="/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_8.png" />


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

우리는 b의 값을 4로 업데이트했습니다.

원래는 left를 2로 업데이트하려고 했지만, 이미 left가 그보다 크기 때문에 left를 그대로 두기로 결정했습니다.

다음으로 right를 다시 1 증가시켰습니다:

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

다음 표식이나 목록을 마크다운 형식으로 전환해주세요.

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

우리는 또 다른 a를 만났어요. 

이제 left와 우리의 딕셔너리를 업데이트해야 해요.

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

left는 이제 마지막 a 다음의 b를 가리키고 있어요.

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

그리고 우리는 사전에서 a의 값을 업데이트합니다.

다음으로, right를 다시 1씩 증가시키겠습니다:

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

또 다른 b를 만나게 되었군요. 그리고 나서 left와 우리의 사전을 업데이트합니다.

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

아래와 같이 Markdown 형식으로 수정해주세요.


<img src="/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_13.png" />

다음으로, right를 다시 1씩 증가시켜요:

<img src="/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_14.png" />

또 다시 a가 반복돼요. left와 딕셔너리를 다시 업데이트해요


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

다음으로, 우리는 오른쪽을 다시 1 증가시킬 거에요:

<img src="/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_16.png" />

a를 반복해봐요. 우리는 이해하죠. 왼쪽을 업데이트하고 우리의 딕셔너리를 갱신해요

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

다음으로 오른쪽을 다시 1씩 증가시킵니다:

![image1](/assets/img/2024-07-23-InterviewQnLongestLengthOfSubstringWithUniqueLetters_18.png)

a. 동일한 작업을 반복합니다. 왼쪽을 업데이트하고 사전을 갱신합니다.

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

아래 표를 Markdown 형식으로 변경해주세요.

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

이 과정 동안에 우리는 가능한 가장 긴 부분 문자열의 길이도 추적합니다. 그리고 마지막에 이 값을 반환합시다.

# 코드 솔루션

```js
def longest_substring_length(string: str) -> int:

    # 만약 문자열의 길이가 0이거나 1이라면, 답을 반환하세요
    if len(string) <= 1:
        return len(string)

    # 우리의 딕셔너리를 초기화합니다
    d = {string[0]:0}

    # 왼쪽과 오른쪽 포인터를 설정합니다
    l = r = 0

    # 이 변수는 유효한 부분 문자열의 가장 긴 길이를 추적합니다
    largest = 0

    while True:
        # 오른쪽을 1씩 증가시킵니다
        r += 1
    
        # 만약 범위를 벗어나면, 종료합니다
        if r >= len(string): break

        # 현재 문자를 추출합니다
        ch = string[r]

        
        if ch not in d:
            # 만약 우리의 딕셔너리에 없는 새로운 문자를 만나면
            d[ch] = r
        else:
            # 반복된 문자를 만나면
            l = max(d[ch] + 1, l)
            d[ch] = r

        # 가장 긴 부분 문자열을 추적합니다
        if largest < r-l+1:
            largest = r-l+1

    return largest

testcases = [
    ('', 0),
    ('a', 1),
    ('aa', 1),
    ('aaa', 1),
    ('aaabbb', 2),
    ('ababababbababa', 2),
    ('aabbccddeeffgg', 2),
    ('aaaaaaabbbbbbbbcccc', 2),
    ('abaaaabcabaaax', 3),
    ('abcbabcababcacbacab', 3),
    ('abababcdbbcc', 4),
    ('abcdcbabcdcba', 4),
    ('bbbabcdeabcdeddd', 5),
    ('abcdef', 6)
]

for string, answer in testcases:
    guess = longest_substring_length(string)
    print(string, answer, guess)
```

결과:

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


```js
 0 0
a 1 1
aa 1 1
aaa 1 1
aaabbb 2 2
ababababbababa 2 2
aabbccddeeffgg 2 2
aaaaaaabbbbbbbbcccc 2 2
abaaaabcabaaax 3 3
abcbabcababcacbacab 3 3
abababcdbbcc 4 4
abcdcbabcdcba 4 4
bbbabcdeabcdeddd 5 5
abcdef 6 6
``` 
# 결론

이해하기 쉽고 명확했으면 좋겠습니다.

# 만약 크리에이터로서 저를 지원하고 싶다면

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

- 제 Substack 뉴스레터에 가입해 주세요. https://zlliu.substack.com/ 에서 확인 가능합니다. 제가 파이썬과 관련된 주간 이메일을 보내드립니다.
- 제 책인 101 Things I Never Knew About Python을 구매해 보세요. https://payhip.com/b/vywcf 에서 구매 가능합니다.
- 이 이야기에 대해 50번 박수를 치세요.
- 여러분의 생각을 나에게 말씀해 주세요. 댓글을 달아주세요.
- 이 이야기 중 마음에 드는 부분을 강조해 주세요.

감사합니다! 이런 작은 행동들이 큰 힘이 됩니다. 정말 감사드립니다!

YouTube: https://www.youtube.com/@zlliu246

LinkedIn: https://www.linkedin.com/in/zlliu/

Posts