


내 React 프로젝트에 localStorage 사용을 추가했어요. 앱이 클라이언트 전용이라 데이터를 지속적으로 유지할 수 있게 했더라고 좋겣어요.

localStorage에서 데이터를 불러오는 함수와 데이터를 추가하는 함수 두개를 만들었어요. localStorage의 key-value 쌍은 문자열만 가능해서 데이터를 다루기 위해 JSON.stringify()와 JSON.parse()를 사용해야 했어요:

```js
const context = {...};
localStorage.setItem('appData', JSON.stringify(context));

const localData = localStorage.getItem('appData');
if(localData){
  const parsedData = JSON.parse(localData);
  ...
}
```

처음에는 폼 제출 시 데이터 추가 함수를 호출했지만, React를 사용하고 있어서 useEffect에 넣는 게 더 쉬울 것 같아요. 기존 데이터를 종속성으로 사용하여, 데이터가 변경될 때마다 localStorage를 업데이트할 수 있었어요.

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

저는 데이터를 불러오는 함수를 useEffect 내에서 호출했어요. useRef를 사용해서 첫 번째 렌더링을 판별하고, 이미 저장된 데이터를 로드하거나 데이터가 변경되면 localStorage를 업데이트하도록 설정했어요. 데이터 지속성을 위한 좋은 방법이죠! 🎉

공개 개발하기 - 5가지 핵심 팁




내 GitHub 독서 목록의 첫 번째 글에 오신 것을 환영합니다! 만약 버전 관리와 GitHub에 대해 처음이라면, 여기가 바로 적합한 장소입니다. 이 글에서는 Git과 GitHub의 기본을 다루고, 개발자에게 필수 도구인 이유를 설명하며, 첫 번째 저장소를 설정하는 방법을 안내해 드릴 것입니다.

## Git이란?

Git은 작은 것부터 매우 큰 프로젝트까지 모두 처리할 수 있도록 설계된 분산 버전 관리 시스템입니다. 2005년 Linus Torvalds가 만든 Git은 여러 개발자가 서로의 변경 사항에 간섭하지 않고 동시에 프로젝트를 작업할 수 있도록 합니다.

## Git의 주요 기능

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

분산 시스템: 모든 개발자가 프로젝트의 전체 이력 사본을 소유하여 오프라인에서 쉽게 작업하고 어디서든 기여할 수 있습니다.
브랜치 및 병합: Git을 사용하면 새로운 기능이나 수정사항에 독립적으로 작업할 수 있는 브랜치를 생성할 수 있습니다. 작업이 완료되면 브랜치를 메인 코드베이스에 다시 병합할 수 있습니다.
변경 내용 추적: Git은 코드베이스에 가한 모든 변경 사항을 추적하여 문제가 발생할 경우 이전 버전으로 되돌아갈 수 있습니다.

## GitHub이란?

GitHub은 Git을 사용하는 버전 관리 및 협업을 위한 웹 기반 플랫폼입니다. 저장소 관리, 이슈 추적, 프로젝트 관리, 지속적 통합 등을 포함한 풍부한 기능과 그래픽 인터페이스를 제공합니다.

GitHub을 사용하는 이유?
협업: GitHub을 통해 여러 개발자가 동일한 프로젝트에서 쉽게 협업하고 변경 사항을 관리하며 이슈를 추적할 수 있습니다.
커뮤니티: 수백만 명의 개발자와 저장소가 있는 GitHub은 오픈 소스 프로젝트와 학습을 위한 허브입니다.
통합: GitHub은 많은 도구와 서비스와 통합되어 자동화된 테스트, 배포 등의 기능으로 개발 워크플로우를 향상시킵니다.

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

## Git 및 GitHub 설정하기

단계 1: Git 설치하기
먼저, 로컬 머신에 Git을 설치해야 합니다. 공식 웹사이트에서 Git을 다운로드한 후 운영 체제에 맞는 설치 지침을 따릅니다.

단계 2: Git 구성하기
Git을 설치한 후에는 이름과 이메일로 구성해야 합니다. 터미널을 열고 다음 명령을 실행하세요:

```js
   git config --global user.name "Your Name"
   git config --global user.email "your.email@example.com"
```

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

### 단계 3: GitHub 계정 만들기
이미 GitHub 계정이 없는 경우 github.com에서 가입하세요. 공개 및 오픈 소스 저장소에는 무료로 사용할 수 있습니다.

### 단계 4: 새 저장소 만들기

- GitHub에 로그인하고 오른쪽 상단의 New 버튼을 클릭합니다.
- 저장소의 이름을 입력하고 설명을 추가합니다 (선택 사항).
- 공개 또는 비공개 가시성 중에서 선택합니다.
- 저장소를 만들려면 Create repository를 클릭합니다.

### 단계 5: 저장소 복제하기
로컬에서 프로젝트 작업을 시작하려면 저장소를 기계로 복제해야 합니다. GitHub에서 저장소 URL을 복사하고 터미널에서 다음 명령을 실행하세요:

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

```js
git clone https://github.com/your-username/your-repository.git
```

단계 6: 변경 사항을 만들고 푸시하세요

- 로컬 머신의 저장소 디렉토리로 이동하세요.
- 새 파일을 만들거나 기존 파일을 수정하세요.
- 변경 사항을 스테이징 영역에 추가하세요:

```js
git add .
```

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

- 변경 사항을 아래와 같이 커밋하세요:

```js
git commit -m "커밋 메시지를 입력하세요"
```

- 변경 사항을 GitHub에 푸시하세요:

```js
git push origin main
```

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

## 결론

축하합니다! 여러분이 첫 번째 GitHub 저장소를 설정하고 첫 번째 커밋을 만들었습니다. Git과 GitHub는 개인 프로젝트를 진행하거나 팀원들과 협업할 때 개발 흐름을 향상시켜줄 강력한 도구입니다. 이 시리즈의 더 많은 기사를 기대해 주세요. 우리는 Git 작업 흐름, 브랜치 전략, 그리고 고급 GitHub 기능에 대해 더 깊이 알아볼 것입니다.

댓글을 남기거나 질문을 하시는 것에 망설이지 마세요. 즐거운 코딩 되세요!

GitHub에서 저를 팔로우하여 더 많은 업데이트를 받으시고, Dev.to에서 다른 기사들도 함께 확인해보세요.

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

깃허브: @imevanc
트위터: @imevancc

Git과 GitHub 초보자를 위한 가이드




# 목차

- 소개
- 바인딩과 템플릿
- 텍스트 바인딩
    - 기본 바인딩
    - 조건부 불리언 텍스트 바인딩
    - 일회성 텍스트 바인딩
- 기본 바인딩
- 조건부 불리언 텍스트 바인딩
- 일회성 텍스트 바인딩
- 속성 바인딩
    - 요소 속성을 위한 바인딩
    - 이벤트를 위한 바인딩
    - 데이터 모델에 전체 요소 바인딩
    - 랜더링을 위한 바인딩
    - 배열을 위한 바인딩
    - 컴포넌트를 위한 바인딩
- 요소 속성을 위한 바인딩
- 이벤트를 위한 바인딩
- 데이터 모델에 전체 요소 바인딩
- 랜더링을 위한 바인딩
- 배열을 위한 바인딩
- 컴포넌트를 위한 바인딩
- 게터
- 더 많은 정보
- 결론

## 소개

오늘은 Peasy-UI 라이브러리를 좀 더 자세히 살펴볼 것입니다. 이 라이브러리에서 사용할 수 있는 다양한 종류의 바인딩을 설명하고, 해당 바인딩을 DOM으로 렌더링되도록 라이브러리에 제공하는 문자열 리터럴 템플릿에 어떻게 통합할 수 있는지 설명하겠습니다. 이 글에서는 TypeScript를 사용하여 모든 예시를 제공하지만, 라이브러리는 순수 JavaScript와도 완벽하게 작동합니다.

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

만약 Peasy-UI에 대한 소개 기사를 놓치셨다면, 여기에서 읽을 수 있습니다. 이 기사는 라이브러리에 대한 개요를 제공하며, 시리즈에서 다룰 주제도 소개합니다.

## 바인딩과 템플릿

바인딩이 무엇인지, 템플릿이 무엇인지, 그리고 이들이 DOM에 렌더링되는 내용을 제어하기 위해 라이브러리와 어떻게 작동하는지를 간단히 정리해보겠습니다.

Peasy-UI는 지정한 DOM 요소에 콘텐츠를 삽입하는 라이브러리입니다. 삽입되는 콘텐츠는 HTML 표시 방식을 제공하는 문자열 리터럴 템플릿에 의해 결정됩니다.

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

```js
const template = `
  <div> Render Me </div>
  <button> Click </button>
`;
```

Peasy-UI에 전달하는 문자열 리터럴 템플릿의 예입니다. 이 템플릿은 대상 DOM 요소로 렌더링됩니다.

바인딩은 해당 템플릿을 동적으로 제어할 수 있는 수단을 제공합니다. 예를 들어, Hello World 예제를 해보겠습니다.

```js
const model = {
  name: "Bob",
};

const template = `
<div>
    Hello: \${name}!!!!
</div>
`;

await UI.create(document.body, model, template).attached;
```

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

이 코드는 문자열 리터럴 템플릿에 바인딩된 데이터 저장소(모델)를 생성합니다. UI.create()는 모델, 템플릿 및 주입할 대상 DOM 요소를 매개변수로 사용합니다. JavaScript 코드에서 model.name을 마음껏 변경할 수 있으며, 이렇게 하면 새로운 텍스트가 동적으로 DOM에 다시 렌더링됩니다. 참고로 UI.create() 메서드의 await는 Peasy-UI가 콘텐츠를 DOM에 연결할 때까지 후속 로직의 실행을 일시 중지시킵니다. 이렇게 함으로써 아직 렌더링되지 않은 DOM 콘텐츠를 변경하거나 액세스하려고 하는 것을 방지할 수 있습니다.

## 텍스트 바인딩

Peasy-UI에는 텍스트 바인딩과 속성 바인딩 두 가지 유형의 바인딩이 있습니다. 문자열 리터럴을 Peasy-UI에 제공하기 때문에 이를 바인딩으로 지정하기 위해 백슬래시 이스케이프 문자를 사용한다는 것을 기억해야 합니다.

### 기본 바인딩

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

가장 기본적인 바인딩은 데이터를 DOM으로 삽입하는겁니다. 위의 Hello World는 이것의 좋은 예시에요. 이 바인딩의 사용 사례는 DOM 요소 내부 텍스트 또는 HTML 콘텐츠를 조작할 수 있고, 예를 들어 이름을 변경할 수 있다는 점이에요. 또한 CSS 문자열 내부의 CSS 속성을 변경하는 데에도 사용해본 적이 있어요.

바인딩: $'propertyName'

위의 예시와 같이 이렇게 사용할 수 있어요:

```js
const model = {
  name: "Bob",
};

const template = `
<div>
    Hello: \${name}!!!!
</div>
`;

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

테이블 태그를 마크다운 형식으로 변경해주세요.

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

바인딩: $'`value` ! propertyName'

다음은 이에 대한 예시입니다:

const model = {
  darkMode: true,
};

const template = `
<div>
    I am using \${'Dark mode' = darkMode} \${'Light mode' ! darkMode} now!
</div>
`;

모델의 darkMode 속성의 값에 따라 다른 텍스트가 렌더링됩니다. 만약 true라면 div는 "나는 지금 다크 모드를 사용 중입니다!"라고 표시되고, false로 설정되어 있다면 "나는 지금 라이트 모드를 사용 중입니다!"라고 렌더링됩니다.

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

### 일회성 텍스트 바인딩

이전 바인딩은 RequestAnimationFrame()에 대해 지속적으로 평가됩니다. 그러나 때로는 초기화 시와 같이 한 번만 평가하고 싶을 수도 있습니다. Peasy-UI는 일회성 바인딩을 제공합니다.

바인딩: $'|`값` = 속성'

바인딩: $'|`값` ! 속성'

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

위의 예시를 재사용할 수 있습니다. 단, darkMode 속성의 평가는 첫 번째 렌더링 주기에서만 수행됩니다. 바인딩에 파이프(|) 문자가 있는 점을 유의해주시기 바랍니다. 이것이 한 번만 바인딩된 것을 나타냅니다.

## 속성 바인딩

속성 바인딩은 요소의 동작에 영향을 미치기 위해 \$' ' 또는 요소 태그 내에서 pui 속성을 사용합니다. 이 글에서는 계속해서 \$' ' 표기법을 사용하겠습니다. 다음 글에서는 바인딩 할당의 다양한 방법을 살펴보겠습니다.

### 요소 속성을 위한 바인딩

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

Peasy-UI를 통해 요소 속성에 액세스할 수 있고 해당 값을 쉽게 모니터링하고 제어할 수 있습니다.

네 가지 기본 요소 속성 바인딩이 있습니다:

바인딩: `$'attribute `== propertyName'`은 모델에서 바인딩으로 일방향으로 바인딩합니다.

바인딩: `$'attribute `=| propertyName'`은 모델에서 바인딩으로 일회성으로 일방향으로 바인딩합니다.

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

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

BINDING: $'속성 ==` 속성명' 요소에서 모델로 단방향으로 바인딩됩니다

BINDING: $'속성 `=` 속성명' 요소와 모델 간에 양방향 또는 양쪽으로 연결됩니다

이것의 예시를 살펴보겠습니다:

const model = {
  color: "red",
};

const template = `
<div>
    <input type="radio" \${'red' ==> color}>Red</input>
    <input type="radio" \${'green' ==> color}>Green</input>
</div>

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

이 예제에서는 모델의 color 속성에 각 요소 'red'와 'green'에 사용자 정의 속성을 바인딩하고 있습니다. 이 그룹의 라디오 버튼이 선택되면 모델 속성 'color'의 데이터가 변경됩니다.

또 다른 간단한 예제:

const model = {
  userName: "",
};

const template = `
<div>
    <label>사용자 이름 입력: </label>
    <input type="text" \${value ==> userName}></input>
</div>

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

양방향 예제를 살펴봅시다:

const model = {
  userName: "Bob",
};

const template = `
<div>
    <input type="text" \${value <=> userName}>\${userName}</input>
</div>

여기에 존재하는 마법은 데이터 모델에서 username을 프로그래밍 방식으로 설정할 수 있으며, 자동으로 입력란에 렌더링된 텍스트를 변경할 수 있다는 것입니다. 또는 입력란에 타이핑하여 데이터 모델의 값이 동적으로 변경됩니다.

### 이벤트에 대한 바인딩

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

만약 드롭다운 선택 입력란 또는 버튼을 렌더링하고 싶다면 어떻게 하면 될까요? Peasy-UI는 이벤트 리스너를 자동으로 매핑하고 데이터 모델에 연결할 수 있게 해줍니다.

바인딩: $'이벤트 @=`콜백이름'

버튼은 쉬운 예제를 제공하지만, 모든 DOM 이벤트를 사용할 수 있습니다.

const model = {
  clickHandler: (event: HTMLEvent, model: any, element: HTMLElement, eventType: string, object: any) => {
    window.alert("클릭됐어요!");
  },
};

const template = `
<div>
    <button \${click @=> clickHandler}> 클릭해주세요! </button>
</div>

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

알겠어요. 여기서는 조금 깊게 파고들어보도록 하죠. 먼저 바인딩에 집중해 보겠습니다. HTML DOM 이벤트(예: change, input, click, mouseenter 등)를 이벤트 바인딩으로 바인딩할 수 있으며, 그런 다음 'handler' 콜백을 제공합니다. 이 'handler' 콜백은 데이터 모델 안에 존재합니다.

Peasy는 편의를 위해 핸들러에 5가지 표준 매개변수를 전달합니다. 첫 번째 매개변수는 실제로 발생한 HTMLEvent입니다. 두 번째 매개변수는 엘리먼트에 바인딩된 'localized' 데이터 모델입니다. 이 부분은 약간 tricky 할 수 있습니다. 엘리먼트의 중첩에 따라 다르지만, 그 엘리먼트에 대한 localized 데이터 모델이 될 수도 있고, 최상위 바인딩인 경우 표준 데이터 모델이 될 수 있습니다. 나중에 중첩에 대해 자세히 다룰 것이지만, 이를 돕기 위한 다른 옵션이 제공된다는 것만 알아두세요.

세 번째 매개변수는 이벤트를 발생시킨 대상 엘리먼트이므로 엘리먼트 중첩된 어떤 속성에든 접근할 수 있습니다. 네 번째 요소는 'click'이나 'change'와 같은 이벤트의 문자열 표현이며, 이는 동일한 콜백에 여러 이벤트를 바인딩했을 경우 어떤 이벤트가 이 콜백을 트리거했는지 구별하는 데 도움이 됩니다. 마지막 매개변수는 대규모 데이터 모델입니다. 이 객체 내에서, 바인딩이 얼마나 중첩되었든 상관없이 모델 속성을 포함하는 객체가 있으며, 해당 객체를 탐색하여 데이터 모델의 모든 속성에 액세스할 수 있습니다.

### 데이터 모델에 전체 엘리먼트 바인딩하기

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

자바스크립트에서 document.getElementById(`myElement`)를 수행해야 하는 것이 얼마나 거슬리는지 알고 계시나요? 네, Peasy-UI가 그것을 좀 더 쉽게 만들어 줍니다.

바인딩: $' ==` propertyName'

이 시간을 절약하는 예제를 살펴봅시다:

const model = {
  myInputElement: undefined as HTMLElement | undefined,
};

const template = `
<div>
    <input type="text" \${==> myInputElement} />
</div>

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

이 바인딩은 렌더링된 DOM 요소를 매핑하고 해당 참조를 모델 내에 바인딩합니다. 이 예제에서는 getElementById() 메서드를 사용하는 대신 모델 내에 참조가 들어 있습니다. 첫 번째 렌더링 사이클 후에 model.myInputElement로 참조할 수 있습니다. 요소는 `먼저` 렌더링되어야하며, 그 참조가 데이터 모델에 캡처됩니다. 따라서 기본적으로 undefined로 설정되어 있으며, HTML이 DOM에 삽입된 후 요소 참조로 설정됩니다. 따라서 요소 값에 액세스하려면 model.myInputElement.value 또는 해당 요소의 속성에 액세스할 수 있습니다.

### 렌더링을 위한 바인딩

만약 특정 조건하에 렌더링되는 부분을 선택적으로 변경하고 싶다면 어떨까요? Peasy-UI를 사용하면 전반적인 렌더링을 제어할 수 있습니다.

바인딩: $'=== 속성이름'

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

BINDING: $'!== propertyName'

이 바인딩의 예제를 살펴 봅시다:

const model = {
  isDog: true,
};

const template = `
<div>
    <div \${=== isDog}> 나는 개입니다</div>
    <div \${!== isDog}> 나는 고양이입니다</div>
</div>

이 예제에서 하나의 바인딩된 div만 렌더링됩니다. 데이터 모델인 isDog에서 true와 false를 토글하여 렌더링되는 div를 제어할 수 있습니다.

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

### 배열을 위한 바인딩

가끔 DOM에 항목을 나열해야 할 때가 있습니다. 포럼 글, 셀렉트 입력의 옵션 또는 내비게이션 바의 목록 항목 등이 그 예시일 수 있습니다. Peasy-UI는 순회 가능한 렌더러를 제공하여 데이터 모델의 목록이나 배열을 여러 요소 렌더링으로 변환할 수 있도록 도와줍니다.

바인딩: $' item `=* propertyArray'

간단한 예제로 설명해보겠습니다:

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

const model = {
  myItems: [{text: 'one', value: '1'},{text: 'one', value: '1'},{text: 'one', value: '1'}],
};

const template = `
<div>
    <select>
      <option \${opt <=* myItems} value="\${opt.value}">\${opt.text}</option>
    </select>
</div>

이 사용 사례는 데이터 모델의 `myItems` 속성 배열을 반복하고 선택한 태그에 각기 다른 옵션 요소를 렌더링합니다.

각 렌더링된 옵션 태그에는 자체 모델 범위가 있습니다. opt.text 및 opt.value와 같이 볼 수 있습니다.

### 구성 요소를 위한 바인딩
```

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

큰 프로젝트를 다룰 때는 코드 베이스를 조직화하고 프로젝트를 관리할 수 있는 코드 분할을 활용하는 것이 바람직합니다. Peasy-UI는 컴포넌트 기반 디자인을 가능하게 합니다. 이 기사에서는 이 주제를 조금 다루겠습니다. 전체적인 컴포넌트 기능에 대해 적절히 탐구하기 위해 별도의 기사가 작성될 것입니다.

Peasy-UI에서의 컴포넌트는 정적인 `템플릿` 속성과 `create` 메서드를 포함하는 JavaScript 객체입니다.

바인딩: $'ComponentName === state'

다음에는 더 많은 예제를 살펴보겠습니다.

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

```js
class MyComponent{
  public static template = `
  <div>
      <div> Hello \${name}</div>
      <div> My count is: \${count}</div>
  </div>
  `;

  constructor(public name: string,public count:number){}

  static create( state: {name:string, count:number}){
    return new MyComponent(state.name, state.count)
  }
}

const model = {
  MyComponent,
  componentData:{
    name: 'bob',
    count: 10,
  }
};

const template = `
<div>
    <\${MyComponent === componentData}>
</div>
```

따라서 MyComponent 클래스는 들어오는 상태를 수락하는 정적 create 메서드와 public 정적 템플릿이 있어야합니다. Peasy-UI가 할 일은 각 구성 요소에 내부 상태로 로컬 클래스 속성을 설정하고 클래스 템플릿을 전체 프로젝트 템플릿에 주입하는 것입니다.

이를 통해 대규모 프로젝트를 작은 조각으로 나눌 수 있습니다. 컴포넌트로 수행할 수있는 작업은 훨씬 더 많으며 자세히 탐색할 별도의 기사가 필요합니다.

## 게터(Getters)


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

최종 바인딩 아이디어 중 하나는 데이터 모델에서 getter를 사용하는 방법 및 그들이 제공하는 내용을 다루는 것입니다. 때로는 간단한 원시 값으로는 데이터 모델을 충분히 표현할 수 없을 때가 있습니다. 그럴 때 getter는 더 복잡한 로직을 제공하고 반환 값은 바인딩 값으로 제공하는 수단을 제공합니다. 여기서 다룰 특별한 고유한 바인딩 태그는 없지만, 예시를 살펴보겠습니다:

```js
const model = {
  val1: 1,
  val2: 3,
  get myGetter(){
      return this.val1 + this.val2;
  },
};

const template = `
<div>
    <span>My getter value is: \${myGetter}</span>
</div>
```

getter를 사용하는 좋은 점은 매 렌더링 루프마다 다시 계산된다는 것입니다. 따라서 해당 로직 내에서 어떤 값이 변경되더라도 업데이트될 것입니다.

## 더 많은 정보

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

Peasy-Lib의 GitHub 저장소에서 더 많은 정보를 찾을 수 있어요. 거기서 다른 동반 패키지도 찾을 수 있어요. 또한, Peasy에는 우리가 만나서 Peasy에 대해 토론하고 서로 도와주는 디스코드 서버가 있어요.

저자의 트위터: Here

저자의 itch: Here

GitHub Repo: Here

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

디스코드 서버: [여기](링크)

## 결론

이 글에서는 Peasy-UI 라이브러리의 데이터 바인딩 기본 사항을 모두 다루었습니다. 이 데이터 바인딩은 라이브러리가 DOM에 필요한 것을 렌더링하는 데 사용되는 마법입니다. 텍스트 바인딩과 속성 바인딩에 대해 논의했습니다. 각각에 대해 바인딩 구문과 예제에서 사용할 수 있는 방법을 다루었습니다.

다음 글에서는 이벤트에 대해 더 깊이 파고들 것입니다.

Peasy-UI 시리즈 바인딩과 템플릿 사용법, 두 번째 이야기




## 소개

처음부터 실제 코딩으로 배우는 것은 코딩에 뛰어들기 위한 가장 멋진 방법 중 하나에요. 버그를 고치거나 새로운 기능을 추가하는 등 작은 단곈마다 더불어 도파민 부스팅을 느낄 수 있어요!

어떤 것을 구축하거나 전진하는 방법을 몰라서 금새 막힐 수도 있지만, 바로 그게 코딩의 전부죠. 막힐 때마다 문제에 대한 해결 방안을 찾아내고, 문서를 읽고, 학습 방법과 구글링하는 법을 배워가야 해요. 하지만 매번 조금 더 나아져요...

...그리고 전체 프로젝트를 완료했을 때의 감동은 대단해요! 포트폴리오에 +1, 새로운 기술을 배우고 성취감을 느끼게 됩니다.

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

코딩 스킬 향상을 위해 만들 수 있는 추가 프로젝트 10가지를 소개해 드릴게요!

조금 직접적이긴 하지만 SUMMER40 프로모션 코드로 구독을 할 수 있어요. 코딩 능력을 발휘하고, 코드 학습 열차에 올라타면 2-3개월 후에 구직을 시작할 수 있어요. 진지하게 학습한다면요.

이제 프로젝트로 뛰어들어볼까요! 🤿

## 1. 포켓몬도감

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

모두 잡아보세요! 아, 이것은 많은 추억을 떠올리게 합니다. 모든 포켓몬 종류를 수록한 당신만의 포켓몬 사전을 만들어봐요!

![이미지](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_0.png)

당신은 포켓몬에 대해 더 많이 배우게 되고요... 무한 로딩, 동적 렌더링 및 응답형 디자인(RWD)을 이용한 API 통합, 상호작용하는 검색 패널, 정렬, 필터링 및 데이터 처리가 포함된 상세보기까지 알게 될 거에요!

### 카드

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

- API 구성
- UI 렌더링
- 검색 패널
- 정렬 기능
- 필터
- 포켓몬 세부 정보

### 튜토리얼 만드는 방법

- YouTube 비디오
- HackerNoon 글

### 추가 자료

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

- 프로젝트 문서와 함께 사용할 수 있는 Glitch 템플릿
- 프로젝트 문서와 함께 사용할 수 있는 GitHub 템플릿

## 2. 음악 플레이어

HTML에서 오디오 컨트롤에 대해 배우고 CSS를 사용하여 스타일을 입히는 방법을 익힐 수 있는 방법이며, 즐겨 듣는 음악 플레이어를 다시 만들어 보세요.

![이미지](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_1.png)

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

아래는 다양한 UI 요소에 대한 내용을 학습하게 됩니다. 데이터 처리, 이벤트 처리, 오디오 재생 및 멋진 UX/UI 디자인에 대해도 배울 예정이에요.

### 카드

- UI 로직
- 재생 버튼
- 일시정지 버튼
- 다시 재생 버튼
- 반복 재생 버튼
- 시간 슬라이더
- 다음 버튼
- 이전 버튼
- 음소거 버튼
- 음소거 해제 버튼
- 음량 조절 슬라이더

### 튜토리얼 생성 방법

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

- YouTube 비디오
- 미디엄 기사

### 추가 자료

- 프로젝트 설명서가 포함된 Glitch 템플릿
- 프로젝트 설명서가 포함된 GitHub 템플릿

## 3. 코드 편집기

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

JSFiddle이나 CodePen과 같은 웹 사이트의 주요 기능을 재현하실 수 있습니다. 🤩

![image](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_2.png)

JavaScript 상호 작용, CSS Flexibility (flexbox/grid layout), CodeMirror와 같은 3rd party 라이브러리 통합, 사용자 세션 간에 코드를 지속시키기 위한 로컬 저장소에 대해 배우게 될 것입니다.

### 카드

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

- 네비게이션 바
- 코드 영역
- 코드 미리보기
- 수직 크기 조정 막대
- 뷰 변경 버튼
- 코드 편집기 라이브러리
- 반응형 웹 디자인
- 추가적인 사례

### 튜토리얼 만드는 방법

- YouTube 비디오
- SmashingMagazine 기사

### 추가 정보

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

- Glitch 템플릿과 프로젝트 문서
- GitHub 템플릿과 프로젝트 문서

## 4. 퀴즈 앱

다양한 카테고리에서 무작위로 생성된 10개의 질문을 가진 재미있는 퀴즈 앱을 만들어지식을 쉽게 테스트하고 즐길 수 있습니다.

![프로젝트 이미지](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_3.png)

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

API 통합 (Open Trivia DB API), 대화형 UI 개발, 질문 및 결과 페이지 간 전환을 위한 상태 관리, 그리고 반응형 디자인 (RWD)에 대해 배울 예정이에요.

### 카드

- API 구성
- 홈페이지
- 퀴즈 생성
- 질문 로직
- 마지막 질문
- 결과 바
- 결과 답변
- 고정 내비게이션
- 태블릿 디자인
- 모바일 디자인

### 튜토리얼 만드는 방법

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

- YT 비디오
- GeeksForGeeks 아티클

### 추가 리소스

- 프로젝트 문서가 포함된 Glitch 템플릿
- 프로젝트 문서가 포함된 GitHub 템플릿

## 5. 영화 찾기

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

영화 및 TV 프로그램을 빠르게 미리보고 검색하여 세부 정보 페이지를 확인하는 앱을 만들어보세요!

![App Preview](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_4.png)

외부 API에서 데이터를 가져오는 방법, 디바운싱을 사용한 동적 검색 기술, 현대적인 UX/UI 디자인, 그리고 데이터 페이지네이션을 통한 무한 스크롤링을 익힐 수 있을 겁니다.

### Cards

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

- API 구성
- 검색 바
- 오늘의 추천 섹션
- 프리미어 및 공지 사항 섹션
- 상세 페이지
- 스켈레톤 애니메이션
- 오류 처리
- 최근 검색
- 스켈레톤 애니메이션
- 오류 처리

### 자습서 만드는 방법

- YouTube 비디오
- 미디엄 기사

### 추가 자료

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

- 프로젝트 문서가 있는 Glitch 템플릿
- 프로젝트 문서가 있는 GitHub 템플릿

## 6. 틱택토

가장 클래식한 게임 중 하나로, 게임 로직에 조금이나마 작업하는 것은 항상 즐겁습니다.

![틱택토 이미지](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_5.png)

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

아래는 실제로 사용되는 markdown 형식의 표로 변환했습니다.

**Cards**

- Home Page
- Pick Player
- Game Board
- Gameplay
- Game End
- Modals
- Tablet Design
- Mobile Design

**Tutorials 생성 방법**

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

- YT 비디오
- GeeksForGeeks 기사

### 추가 리소스

- 프로젝트 문서가 포함된 Glitch 템플릿
- 프로젝트 문서가 포함된 GitHub 템플릿

## 7. 할 일 앱

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

다른 클래식한 예로 Todo 앱 스타일로, 아직 만들지 않았다면 지금이 좋은 시기일지도 몰라요!


| Task          | Description                                |
| ------------- | ------------------------------------------ |
| Create a Todo | Implement functionality to add new tasks   |
| Complete Todo | Enable users to mark tasks as completed     |
| Delete Todo   | Allow users to delete tasks from the list   |


인터랙티브 UI 디자인 및 동적 자바스크립트 콘텐츠 관리, CSS 및 테마 지정, 그리고 Todo 생성, 완료 표시, 또는 삭제와 같은 작업에 대한 상태 관리를 위한 이벤트 처리 방법을 배울 거에요.

### 카드

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

- UI 컨테이너
- 할 일 추가
- 할 일 삭제
- 완료 표시
- 라이트 모드 토글

### 튜토리얼 만드는 방법

- YouTube 비디오
- W3Schools 기사

### 추가 자료

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

- 프로젝트 문서와 함께 Glitch 템플릿
- 프로젝트 문서가 있는 GitHub 템플릿

## 8. 블로그

가장 좋은 프로젝트 중 하나로, 종종 고객이 요청하는 CMS로 구축해야 할 동적 콘텐츠를 포함합니다. (예: 동적 콘텐츠 웹 스토어 웹사이트 등)

![image](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_7.png)

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

여러 가지 라우터를 사용하여 페이지 탐색에 대해 많은 것을 배울 것입니다. 또한 NextJS에서 구축하는 경우 SEO 최적화 및 다양한 CMS에 대해 자세히 살펴보고 Frontend와 API 간에 모두 연결하는 방법을 배울 것입니다. 또한 RWD도 포함되어 있습니다.

### 카드

- 콘텐츠 전략
- 기본 네비게이션
- 히어로 섹션
- 블로그 글 섹션
- 소개 섹션
- 글로벌 푸터
- 글 페이지
- 동적 검색
- 블로그 글 페이지
- 모바일 디자인

### 튜토리얼 생성 방법

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

- YouTube 동영상
- Dev.to 기사

### 추가 자료

- 프로젝트 설명이 포함된 Glitch 템플릿
- 프로젝트 설명이 포함된 GitHub 템플릿

## 9. 대시보드

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

요즘 개발자들이 가져야 할 중요한 기술 중 하나는 차트, 표 등을 사용하여 다양한 데이터를 시각화하는 것입니다. 특히 다양한 컴포넌트 및 차트 라이브러리를 사용하는 것이 중요합니다.

![이미지](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_8.png)

사이드바와 메뉴 항목을 만들고 상단 내비게이션 및 그리드 시스템을 이용한 전체 내비게이션 레이아웃을 만드는 방법을 배울 것입니다. 또한 현실 API 데이터를 연동하여 로딩 및 에러 상태 처리를 포함할 수 있습니다.

### 카드

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

- 데이터 관리
- 사이드바
- 상단 네비게이션
- 숫자 카드
- 판매 개요 차트
- 판매 지역 차트
- 등록된 사용자 차트
- 통합 목록
- 라이트 다크 모드

### 자습서 만드는 방법

- YouTube 비디오
- 데이터 기사로 만들기

### 추가 자원

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

- Glitch 템플릿과 프로젝트 문서
- GitHub 템플릿과 프로젝트 문서

## 10. 캐릭터 생성기

상태 관리가 있는 아바타 생성기는 매우 흔한 문제입니다. 데이터 구조, 로컬 저장소에서 로드, 실시간으로 변경 등을 다룹니다. 이 프로젝트는 주니어 레벨이지만 완성하는 데 재미있을 것입니다!

![이미지](/assets/img/2024-07-28-10ProjectstomasterFrontendWebDevelopment_9.png)

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

상태를 관리하는 방법, 이미지 최적화 및 SVG 작업 방법을 배우고 무작위 캐릭터 생성 및 캔버스에서 이미지 다운로드와 같은 기능을 구현하는 방법을 배워보세요.

### 카드

- UI 컨테이너
- 캐릭터 맞춤 설정
- 무작위 선택
- 캐릭터 저장
- 캐릭터 유지

### 튜토리얼 만들기 방법

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

- YT 비디오
- Dev.to 글

### 추가 자료

- 프로젝트 문서가 포함된 Glitch 템플릿
- 프로젝트 문서가 포함된 GitHub 템플릿

## 요약

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

그게 다야! 각각 독특하며 포트폴리오에 멋진 추가가 되는 이러한 프로젝트들에서 배울 점이 많습니다.

오랜 시간동안 커뮤니티로 프로젝트 기반 학습 접근 방식을 확산시키는 것이 제 목표였고, BigDevSoon을 시작하고 2년 동안 함께 작업한 앱을 운영 중입니다. 우리에게는 큰 성취입니다.

계속해서 코딩해 주세요! 🙇‍♂️

프론트엔드 웹 개발 실력을 키우기 위한 10가지 프로젝트




소프트웨어 아키텍처의 세계에서, 특히 다수의 당사자 및 안전한 인증/승인을 다룰 때, 신원 증명을 공유하기 위한 강력한 메커니즘이 중요합니다. 가장 안전하고 널리 사용되는 방법 중 하나는 JSON 웹 토큰(JWT) 🔏 입니다.

이 블로그에서는 JWT가 무엇인지, 어떻게 작동하는지, 그리고 안전한 데이터 전송에 탁월한 선택인 이유에 대해 깊이 파헤쳐 보겠습니다.

### JSON 웹 토큰 (JWT)이란?

JSON 웹 토큰 (JWT)은 JSON 객체로 정보를 안전하게 전송하는 간결하고 자체 포함된 방식을 정의한 오픈 표준(RFC 7519)입니다. 이 정보는 디지털로 서명되기 때문에 확인하고 신뢰할 수 있습니다. JWT는 비밀을 사용하여 서명할 수 있으며(HMAC 알고리즘 사용), RSA 또는 ECDSA를 사용하여 공개/개인 키 쌍으로 서명할 수도 있습니다.

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

### JWT를 사용하는 이유

JWT는 stateless하다는 것을 의미합니다. 이는 서버가 세션에 토큰 정보를 저장할 필요가 없다는 것을 의미합니다. 이 stateless한 특성은 JWT를 확장 가능하게 만들어주며, 클라이언트-서버 응용 프로그램 및 분산 시스템에 적합합니다. 여기에는 JWT가 선호되는 이유 중 일부가 있습니다:

- 보안: JWT는 디지털으로 서명되어 데이터가 조작되지 않도록 보장합니다.
- 확장성: stateless하므로 JWT는 서버 측 저장소가 필요하지 않아 분산 시스템에 이상적입니다.
- 콤팩트함: JWT는 콤팩트하며 URL, POST 매개변수 또는 HTTP 헤더를 통해 쉽게 전송할 수 있습니다.
- 자체 포함: JWT의 페이로드에는 사용자가 원하는 모든 정보가 포함되어 있어 데이터베이스를 여러 번 쿼리할 필요가 없습니다.

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

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

### JWT의 구조

JWT는 세 부분으로 구성되어 있습니다: Header, Payload 및 Signature입니다. 이러한 부분은 점 (.)으로 구분됩니다.

```js
Header.Payload.Signature
```

각 구성 요소를 자세히 살펴보겠습니다:

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

#### 1️⃣ 헤더

헤더는 일반적으로 두 부분으로 구성됩니다: JWT라는 토큰 유형과 HMAC, SHA256 또는 RSA와 같은 사용 중인 서명 알고리즘.

예시:

```js
{
  "alg": "HS256",
  "typ": "JWT"
}
```

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

이 JSON 객체는 그런 다음 Base64Url로 인코딩되어 JWT의 첫 번째 부분을 형성합니다.

#### 2️⃣ 페이로드

페이로드에는 클레임이 포함되어 있습니다. 클레임은 개체(일반적으로 사용자)에 대한 문장과 추가 데이터입니다. 등록된, 공개 및 비공개 클레임의 세 가지 유형이 있습니다.

- 등록된 클레임: 이들은 필수는 아니지만 권장되는 미리 정의된 클레임 집합으로 발급자(iss), 만료 시간(exp), 주제(sub), 청중(aud) 등이 있습니다.
- 공개 클레임: 이들은 원하는 대로 정의할 수 있지만 충돌 방지가 되거나 이름 공간이 있어야 합니다.
- 비공개 클레임: 이들은 이를 사용하기로 합의한 당사자 간의 정보를 공유하기 위해 만든 사용자 정의 클레임입니다.

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

예시:

```js
{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}
```

이 JSON 객체는 JWT의 두 번째 부분을 형성하기 위해 Base64Url로 인코딩됩니다.

#### 3️⃣ 서명

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

시그니처를 만들려면 인코딩된 헤더, 인코딩된 페이로드, 비밀키, 그리고 헤더에서 지정된 알고리즘이 필요합니다. 이 시그니처는 JWT의 발신자가 자기 자신이라고 말한 대로임을 확인하고 메시지가 중간에 변경되지 않았는지 확인하는 데 사용됩니다.

예를 들어, HMAC SHA256 알고리즘을 사용하려면 다음과 같이 시그니처를 생성합니다:

```js
HMACSHA256(
  base64UrlEncode(헤더) + "." +
  base64UrlEncode(페이로드),
  비밀키)
```

이후 시그니처는 Base64Url로 인코딩되어 JWT의 세 번째 부분을 형성합니다.

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

<img src="/assets/img/2024-07-28-UnderstandingJSONWebTokensJWTforSecureInformationSharing_1.png" />

### JWT 동작 방법

클라이언트가 보호된 리소스에 액세스하려면 HTTP 요청의 Authorization 헤더에 JWT를 포함시킵니다. 이는 Bearer Token과 유사합니다. 서버는 JWT를 유효한지 확인하기 위해 일련의 단계를 수행합니다. 모든 유효성 검사 단계를 통과하면 서버는 JWT를 유효하다고 간주하고 요청된 리소스에 액세스 권한을 부여합니다.

다음은 단계입니다:

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

1️⃣ JWT 디코딩: 서버는 JWT를 디코딩하여 헤더와 페이로드를 추출합니다.

![image](/assets/img/2024-07-28-UnderstandingJSONWebTokensJWTforSecureInformationSharing_2.png)

3️⃣ 만료 여부 확인: 서버는 토큰이 만료되지 않았는지 확인하기 위해 페이로드의 만료 시간을 확인합니다.

4️⃣ 추가적인 확인: 어플리케이션의 요구 사항에 따라, 서버는 토큰 발급자를 확인하거나 폐기된 토큰 목록에 대한 확인과 같은 추가적인 확인을 수행할 수 있습니다.

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

![JWT](/assets/img/2024-07-28-UnderstandingJSONWebTokensJWTforSecureInformationSharing_3.png)

### 현실 세계에서의 JWT 활용 사례

2024년에 JWT의 실용적인 응용 사례를 살펴보겠습니다:

- Single Sign-On (SSO) 원더랜드:
한 번 회사 생태계에 로그인하고 여러 서비스에 쉽게 접근할 수 있다고 상상해보세요. JWT를 통해 교차 도메인에서 인증 상태를 안전하게 전달하여 이 꿈을 실현할 수 있습니다.
- 마이크로서비스 조정:
마이크로서비스 세계에서 JWT는 완벽한 메신저 역할을 합니다. 서비스 간에 인증 및 권한 정보를 안전하고 효율적으로 전달합니다.
- IoT 기기 인증:
스마트 냉장고가 스마트 토스터와 대화할 때 (2024년에는 그 정도까지 도달했습니다), JWT는 인가된 기기만 데이터를 교환할 수 있도록 보장합니다.
- 서버리스 함수 권한부여:
서버리스 아키텍처가 부상함에 따라 JWT는 지속적인 세션 없이 함수 호출을 승인하는 무상태 방법을 제공합니다.

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

### 2024년을 위한 JWT 최적의 사용 방법

- 비밀은 지키고 안전하게 보호하세요:
Signing 키를 하나의 반지처럼 다루세요. 키 관리 서비스를 사용하고 정기적으로 키를 교체하세요.
- 토큰을 너무 붐비게 하지 마세요:
페이로드를 작게 유지하세요. JWT는 데이터베이스를 대체할 목적이 아닙니다!
- 합리적인 만료 시간 설정:
짧은 수명을 갖는 토큰(분 단위로 생각하세요)은 토큰이 노출되었을 때의 위험을 최소화합니다.
- 토큰 폐기 구현:
필요할 때 토큰을 무효화하기 위해 토큰 블랙리스트나 Redis 캐시를 사용하세요.
- 모두 HTTPS를 통해:
언제나 암호화된 연결로 JWT를 전송하세요. 어떤 예외도 허용되지 않습니다!

### 실제 JWT 활용

JWT는 매우 다목적이며 다양한 시나리오에서 사용할 수 있습니다. 예를 들어, 백엔드 API를 인가하면서 동일한 권한 세트를 유지하는 데 일반적으로 사용됩니다. Appwrite를 포함한 많은 현대 애플리케이션은 안전하고 효율적인 인증 프로세스를 보장하기 위해 JWT 기반 인증을 지원합니다.

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

### 결론

JSON Web Tokens (JWT)은 현대 웹 애플리케이션에서 안전한 정보 공유에 강력한 도구입니다. 데이터를 전송하는 간결하고 자체 포함되어 안전한 방법을 제공하여 상태를 보존하는 인증부터 API 보안까지 다양한 사용 사례에 매우 적합합니다. JWT를 이해하고 구현함으로써 개발자는 애플리케이션의 보안성과 확장성을 향상시킬 수 있습니다.

JSON 웹 토큰 JWT 이해하기




GenAI 혁명 코퍼스는 기업 지식에 기반하며, 이를 인간과 기계가 쉽게 이해하고 활용할 수 있는 구조로 구성될 것입니다.

이것이 지식 그래프의 약속입니다. 구글 검색 결과부터 복잡한 과학 연구까지 모든 것을 지원하는 상호 연결된 사실과 개념의 방대한 네트워크입니다.

하지만 문제가 하나 있습니다. 이러한 지식 그래프를 구축하는 것은 옛날에는 수십 명의 전문가들과 끝없는 수작업 시간이 필요한 힘든 비용 소모적인 프로세스였습니다.

하지만 이제는 그렇지 않습니다.

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

Triplex (그리고 SLM도), SciPhi.AI에서 개발한 혁신적인 인공지능 모델은 지식 그래프를 구축하고 유지하는 방식을 혁신할 준비가 되어 있습니다.

핵심적으로 Triplex는 지식 그래프의 기본적인 구성 요소인 의미론적 트리플을 추출하는 데 뛰어납니다. 이러한 트리플은 주어, 술어, 목적어로 이루어져 있어서 (알버트 아인슈타인, 발전, 상대성 이론)과 같이 간단한 문장을 형성합니다.

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

지식 그래프 자동 생성 방법





![Video Highlight Detection](/assets/img/2024-07-27-AutomatingVideoHighlightsBreakthroughUnsupervisedMethodLeveragesAudioandVisualCues_0.png)

비디오 하이라이트 감지는 비디오 콘텐츠 분석 분야에서 중요한 작업으로, 긴 비디오 콘텐츠에서 가장 중요하거나 매력적인 세그먼트를 자동으로 식별하고 추출하는 것을 목표로 합니다. 이 기능은 다양한 도메인에서 관련 콘텐츠에 빠르게 액세스할 수 있도록 함으로써 사용자 경험을 크게 향상시킬 수 있습니다.

현재 비디오 하이라이트 감지 방법은 종종 비싼 수동으로 레이블이 지정된 프레임 수준의 주석에 의존하거나 카테고리 정보를 통해 약한 지도를 위한 대규모 외부 데이터 집합이 필요합니다.

이 도전 과제를 해결하기 위해 사스카치완 대학과 구글 리서치의 연구팀이 발표한 새 논문 'Unsupervised Video Highlight Detection by Learning from Audio and Visual Recurrence'에서는 수동 주석 요구를 제거하면서 이전 방법과 비교했을 때 우수한 성능을 달성하는 자동 비디오 하이라이트 감지의 혁신적인 비지도 학습 방법을 소개합니다.


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


![Example](/assets/img/2024-07-27-AutomatingVideoHighlightsBreakthroughUnsupervisedMethodLeveragesAudioandVisualCues_1.png)

The proposed approach leverages both audio and visual cues to enhance video highlight detection. This research is the first to exploit both modalities in an...


비디오 하이라이트 자동화 오디오와 비주얼 신호를 활용한 비지도 학습 방법




![2024-07-27-ATime-SeriesModelusingEncoder-DecoderLSTMwithAttentiontopredictifJoeBidenwillresignthePresidency_0.png](/assets/img/2024-07-27-ATime-SeriesModelusingEncoder-DecoderLSTMwithAttentiontopredictifJoeBidenwillresignthePresidency_0.png)

안녕하세요! 2024 선거는 1968년 이후 가장 갈등이 심한 선거로 입증되었고, 조 바이든이 재선을 위해 캠페인을 벌이지 않을 것이라는 발표로 더욱 갈등이 심해졌습니다. 이 발표는 바이든이 도널드 트럼프와의 토론에서의 성능을 비판하는 코멘테이터들의 주장과 그의 인지능력 저하 및 약한 성능에 대한 막막한 부인 이후에 이뤄졌습니다.

이는 일부 민주당원들의 걱정을 줄였습니다. 그들은 트럼프에 맞서 비가능한 후보를 출마시키는 일을 우려했는데, 바이든이 대통령직에서 사퇴하거나 25번째 수정안을 통해 퇴진될지, 또는 사망할 가능성이 있습니다. 바이든이 최근 코로나19로 진단받았고 공안기를 통해 치료를 받았다는 사실은 언론에서 최근 강조되었습니다.

또한 바이든 내각이 아직 그를 지원하는 충분한 지지를 받고 있는지, 노인 민주당 정치인들이 있는지 등도 의문이 있습니다. 25번째 수정안은 대통령을 외부 당사자들에 의해 퇴임시킬 수 있게 해 주며, 내각 구성원이 그의 건강에 대해 우려하거나 카말라 해리스에게 대통령 선거 출마의 임자적 이점을 제공하기를 희망하는 민주당원들에 의해 발동될 가능성이 있습니다.

주의 메커니즘을 사용한 인코더-디코더 LSTM으로 시계열 모델링




<img src="/assets/img/2024-07-27-YOLOInferencewithDockerviaAPI_0.png" />

# 소개

이 글에서는 Docker를 사용하여 YOLOv8 객체 검출 모델에서 추론을 실행하는 방법과 추론 프로세스를 조율하는 데 사용할 REST API를 생성하는 방법을 설명합니다. 이 글은 YOLOv8 추론 실행 방법, API 구현 방법 및 Docker 컨테이너에서 두 가지를 실행하는 방법으로 세 가지 섹션으로 나뉩니다.

글 내내 프로젝트에 필요한 모든 개념과 구성 요소의 코드 구현이 표시됩니다. 전체 코드는 제 GitHub 저장소에서도 찾을 수 있습니다.

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

더 깊이 들어가서 코드와 구조를 살펴보고 몇 가지 명령어로 간단하게 도커를 통해 REST API를 통해 추론을 실행할 수 있으며, 저장소의 README 파일에는 따를 단계, API 문서 가져오는 방법, 프로젝트 구조 등을 자세히 설명하고 있습니다.

# YOLOv8 추론

YOLO는 훈련 시간과 정확도를 균형있게 유지하는 어려움을 해결하고, 물체 탐지를 달성하기 위해 탄생했습니다...

Docker와 API를 사용한 YOLO 추론 방법




LLM(대형 언어 모델)은 인간 지능을 모방하면서 동시에 분화하는 방식으로 AI 인식의 경계를 넓혀 나가고 있어요.

이러한 정교한 시스템들은 순수한 텍스트 생성기가 아니라, 여러 k가지 인지 전략을 신속하게 생성하고 테스트함으로써 인공지능 이해와 개발 방식을 혁신하고 있어요.

최근 의료 AI 분야의 역작이란, 연구자들이 Chain of Diagnosis (CoD) 방법론을 활용해 DiagnosisGPT를 개발한 사례 [1]를 살펴보세요.

이 시스템은 단순히 의사의 사고 과정을 모방하는 것이 아니라, 의료 판단에 대한 서로 다른 "지능" 접근법을 대표하는 다양한 진단 경로를 동시에 생성하고 평가합니다.

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

다양한 인지 전략을 빠르게 구상하고 평가하는 능력은 AI 연구에서 진화의 전환점입니다.

마찬가지로 수학 문제 해결 영역에서는, AlphaProof와 AlphaGeometry와 같은 AI 시스템이 국제 수학 올림피아드에서 은메달 수준을 달성한 것을 볼 수 있습니다.

이러한 모델들은 문제를 해결뿐만 아니라 다양한 문제 해결 기술을 탐구하며, 종종 숙련된 인간 수학자조차 놓칠 수 있는 새로운 접근법을 발견합니다.

Posts