Skip to content

Latest commit

 

History

History
206 lines (114 loc) · 21.1 KB

File metadata and controls

206 lines (114 loc) · 21.1 KB

2025-04

📚 링크 & 읽을거리

ChatGPT와 같은 대형 언어 모델의 한계를 분석한 내용이다. 논리는 크게 11개의 실패 유형으로 구분되며, 논리적 추론, 수학적 계산, 사실 오류, 편견 및 차별, 코딩 오류 등 다양한 영역에서 제한이 발견된다.

또한, 모델의 자기인식 및 윤리적 판단에서도 결함이 존재하며, 인간처럼 감정을 동반한 표현이나 독창적 관점을 제공하는 데 어려움을 겪습니다. 이런 분석은 향후 언어 모델 개발과 성능 평가를 위한 기준점을 제시하려는 목적이 있다.

대표적인 실패 사례 중 하나는 시간적 추론(Temporal Reasoning) 의 부족으로 예를 들어, ChatGPT에게 다음과 같은 질문을 했을 때 문제가 발생한다:

"나는 파티에 갔다. 나는 John보다 먼저 도착했다. David는 Joe보다 늦게 도착했다. Joe는 나보다 먼저 도착했다. John은 David보다 늦게 도착했다. 누가 제일 먼저 도착했는가?"

이 질문은 여러 사람의 도착 순서를 분석하고 논리적으로 정리해야 하는 문제로, ChatGPT는 이 문제를 해결하는 데 실패하여 정확한 답을 제시하지 못했다. 이는 모델이 시간적 관계와 사건 순서를 파악하는 데 있어 한계를 보인 사례로, 정 논리적 연결과 패턴 학습에 의존한다는 점을 보여준다.

프롬프트 엔지니어링은 다양한 애플리케이션과 연구 주제에 언어 모델(LMs)을 효율적으로 사용하기 위해 프롬프트를 개발하고 최적화하는 비교적 새로운 분야이다.

가이드는 프롬프트 엔지니어링에 관한 모든 최신 논문, 학습 가이드, 모델, 강의, 참고 문헌, 새로운 LLM 기능 및 도구가 포함되어 있으며, '프롬프트'의 기초부터 다양한 테크닉들과 모델별 프롬프트 기법들을 살펴볼 수 있다.

테크닉 중 하나인, "Zero-shot"은 모델이 이전에 학습한 지식만으로 작업을 수행하도록 하는 것을 의미하며, 한 가지 예는 다음과 같다.

## 프롬프트
텍스트를 중립, 부정 또는 긍정으로 분류합니다.
텍스트: 휴가는 괜찮을 것 같아요.
감정:

## 답변
중립 ## Copilot
긍정 ## Claude

[참고]

최근 개발자들 사이에서 가장 뜨거운 이슈 중 하나로 꼽히는 Vibe Coding은, 인공지능에 의존하는 새로운 프로그래밍 기법으로 Wikipedia에서 소개되고 있다. Tesla의 전 AI 책임자이자 OpenAI 공동 창립자인 Andrej Karpathy가 처음 언급한 이후, 이 개념은 Hacker News, Reddit, X 등 다양한 플랫폼에서 활발히 논의되었다.

이 영상에서는 기존의 코드 작성 방식이 AI에 의해 어떻게 재정의되고 있는지, 그리고 개발자의 역할이 단순한 코딩을 넘어 제품 감각과 시스템 설계 능력으로 확장되고 있는지를 심도 있게 다룬다.

LLM을 활용한 코딩 작업은 빠르고 유용하지만, 성공적인 사용을 위해 적절한 기대와 전략이 필수적이다. 저자는 2년여간 LLM을 활용한 경험을 바탕으로, LLM을 활용한 코딩 작업에 대한 팁을 제시한다.

LLM은 작업 속도를 높이고 반복적인 작업을 처리하는 데 강점이 있지만, 오류 가능성이 있으므로 코드 테스트는 필수적이며, 학습 데이터의 최신성을 고려해 적합한 라이브러리를 선택하고, 맥락을 정확히 전달하여 원하는 결과를 얻는 것이 중요하다.

LLM은 전지적 존재가 아닌, "자신감 있는 디지털 조수"로 간주해야 하며, 인간의 전문성을 증폭시키는 도구로서 가장 효과적으로 작동한다. 프로젝트 초기 연구부터 코드 작성, 테스트에 이르기까지 적극적으로 대화를 이어가며 도구로 활용한다면, 창의성과 생산성을 모두 증진시킬 수 있다.

새로운 웹 라이브러리가 끊임없이 등장하여 이전의 코딩 딜레마를 해결해 줄 것을 약속한다. 하지만 기본을 다시 살펴본다면 어떨까?

Vanilla JS, 최신 브라우저 APIs, 사이트 생성기를 포함한 다양한 서버 아키텍처를 사용하여 단순함과 속도를 만들어 낼 수 있다. 'Vanilla' 접근 방식이 제공하는 개발의 단순함과 속도를 수용하는 방법에 대해 이야기한다. 이 세션은 HTTP 프로토콜, 핵심 JavaScript, 브라우저 API만 사용해 종속성 없이 순수한 힘만으로 풍부한 웹 앱과 웹사이트를 제작하는 방법을 다루며, Vanilla JS나 라이브러리 없이 앱을 만들어본 적이 없다면 이 세션이 큰 도움을 줄 수 있을 것이다.

AI 분야에서 '에이전트'란 용어가 점점 더 모호해지고 있다. OpenAI, Microsoft, Google 등 주요 기술 기업들이 '에이전트'라는 개념을 다르게 정의하며 혼란과 기대 불일치를 초래하고 있다.

이러한 다양성은 기업에 유연성을 제공하지만, 표준화된 이해 부족은 성과 측정에 어려움을 더한다. 산업계의 공통 정의가 부족한 상태가 계속될 가능성이 높아 보인다.

Arc 브라우저는 탭 위치 변경과 다양한 커스터마이즈 옵션 등 뛰어난 디자인으로 소프트웨어 애호가들의 사랑을 받았으나, 대중성을 확보하지 못하고 확장성의 한계에 부딪혔다.

개인정보 보호를 강조하며 광고나 데이터 판매 없이 무료로 제공되었지만, 수익 창출 모델을 구축하지 못해 업데이트 중단을 결정했고 Arc를 개발하는 The Browser Company는 자동화 기술을 활용한 새로운 제품 개발에 집중할 계획을 밝혔다.

OpenAI 코드 실행 환경의 작동 방식을 우연히 발견한 사례에 대한 내용을 공유하는 글로, ChatGPT의 명령 실행 기능을 통해 내부 API에 접근해 다양한 포트와 파일 시스템을 탐구한다.

이 과정에서 Python Jupyter Kernel 기반의 코드를 실행하는 서버 구조와 네트워크가 철저히 보안화된 사실, gVisor를 이용한 프로세스 격리와 오래된 Linux 커널 사용 등 환경의 세부 사항이 밝혀졌다. C와 JavaScript 실행 환경을 구축해 보는 실험을 진행하며 코드 실행의 가능성과 한계를 탐구한다.

현대 프로그래밍에서 비동기와 동기화의 구분은 코드 설계의 핵심적인 문제다. 비동기 함수는 동기 함수와 자유롭게 섞일 수 없으며, 서로 다른 성격을 가진 두 함수 간의 연결은 개발자에게 복잡한 부담을 준다.

이러한 문제를 해결하기 위해 저자는 'Quansync'(Quantum + Sync)라는 새로운 접근법을 제안하며, 함수가 동기 및 비동기 방식 모두를 지원할 수 있도록 설계되어, 코드의 "색상 문제"(동기 블로킹, 비동기 논블로킹)를 완화시키고 유지 보수를 간소화할 수 있다고 주장한다. 이를 통해 라이브러리 설계에서 코드 분기를 줄이고, 선택적 비동기 실행을 가능하게 한다.

Quansync는 사용자가 함수 실행 방식을 결정할 수 있게 하여 프로그래밍 경험을 더욱 유연하게 만들어 줄 수 있다고 한다. 이 개념을 바탕으로 저자가 공개한 quansync를 통해 직접 사용해 볼 수 있다.

Node.js는 버전 22.6에서 기본 TypeScript 지원을 도입해 간단한 설정으로 TypeScript를 실행할 수 있도록 개선되었다. 하지만 타입 체크, JSX/TSX 지원, tsconfig 설정 등에서는 외부 도구가 여전히 필요하다.

반면, Deno는 통합된 TypeScript 도구 체인을 통해 코드 실행, 타입 체크, 타입 제거 과정을 간소화해 설정 없이 실행이 가능하며, JSR을 이용해 TypeScript 모듈을 직접 배포할 수 있다. Node와 Deno의 TypeScript 접근법은 각자 장단점이 있으며, 효율적인 코딩 환경 구축에 중요한 선택지를 제공한다.

Google Docs 팀에서 경험했던 가장 어려웠던 버그의 추적기를 다룬 글이다. 애초에는 복잡한 뷰 로직이나 캐싱 이슈처럼 보였지만, 정작 원인은 Chrome V8의 최적화 단계에서 Math.abs()가 잘못 구현된 치명적 버그였다.

수백 페이지에 달하는 문서를 반복 편집해야만 재현될 정도로 드문 상황이었고, 역추적에도 시간이 많이 소요되었다. 결국 뷰 로직 문제인 줄 알았던 것이, 이미 V8 팀에서 고친 버그로 판명되면서 허무한 결말로 끝난다. 글 전체가 고통스러운 디버깅 과정을 상세히 다루지만, 필자가 말하듯 특별한 교훈 없이 끝나버린 점이 오히려 가장 큰 교훈처럼 느껴진다.

Next.js 미들웨어(Middleware) 시스템에서 발생한 심각도 높은 취약점을 다룬 글이다. 핵심 문제는 x-middleware-subrequest 헤더를 악의적으로 조작할 수 있다는 점이다.

해당 헤더는 내부적으로 무한 미들웨어 재귀 호출을 막기 위해 사용되는데, 공격자가 이를 특정 값으로 위조하면 미들웨어가 완전히 건너뛰어져, 인증·인가 로직 등 핵심 보안 체크가 전혀 수행되지 않는 상태로 요청이 처리될 수 있다.

이로 인해 보호된 라우트에 대한 무단 접근이 가능해지므로, Next.js 팀은 아래 버전에서 긴급 패치를 적용했다. 해당 버전 이하를 사용 중이라면 즉시 업그레이드 하는 것을 권장한다.

  • 15.x: fixed in 15.2.3
  • 14.x: fixed in 14.2.25
  • 13.x: fixed in 13.5.9
  • 12.x: fixed in 12.3.5

구글 V8 엔진 내부 컴파일러가 기존 sea of nodes 구조를 벗어나 새롭게 재설계된 IR(Intermediate Representation) 방식을 채택해 나가는 과정을 다룬 글이다. sea of nodes는 컴파일러가 중간 표현을 관리하는 기법 중 하나로, 노드들 간의 연결 관계가 복잡해질수록 최적화 과정이 어려워지는 단점이 있었다.

V8 팀은 컴파일 파이프라인을 간소화하고 성능을 높이기 위해 새 IR 구조를 도입하고, 기존의 여러 최적화 단계를 대폭 재편했다. 구체적으로는, 불필요하게 얽힌 노드들을 줄이고, 코드를 더 직관적으로 분석·변환할 수 있도록 개선함으로써 전체적인 실행 속도를 끌어올릴 수 있다는 설명이다. 글에서는 이러한 내부 변화를 다이어그램과 이미지를 사용해 알기 쉽게 설명하고 있으니, 관심 있다면 함께 살펴보면 이해에 도움이 될 것이다.

React 기반 SSR(Server-Side Rendering)의 작동 흐름을 처음부터 끝까지 시각적으로 정리한 글이다. 클라이언트와 서버 간 요청·응답의 흐름, HTML 생성 시점, React가 개입하는 위치 등을 단계별로 설명하고 있어, 막연했던 SSR 개념을 구조적으로 이해하는 데 도움이 된다. 설명이 길지 않으면서도 핵심을 잘 짚고 있어, SSR 개념을 처음 접하거나 다시 정리하고 싶은 개발자에게 참고할 만하다.

🕹 튜토리얼

이 글은 DOM을 효율적으로 관리하기 위한 현대 JavaScript 패턴을 소개한다. DOM 직접 조작은 높은 성능이 필요한 경우 유용하며, 예를 들어 요소를 동적으로 생성하기보다는 숨기고 보이는 방식을 선호하면 성능이 개선된다.

textContent, insertAdjacentHTML, appendChild와 같은 효율적인 메서드 사용이 중요하며, WeakMap, WeakRef를 통해 메모리 누수를 방지할 수 있다. 이벤트를 제거하거나 AbortController로 그룹 이벤트를 효율적으로 관리하는 방법, Chrome DevTools를 활용해 메모리와 성능을 프로파일링하여 문제를 진단하고 최적화할 수 있다. 이런 기술은 웹 애플리케이션의 퍼포먼스를 높이고, 개발자에게 더 나은 제어를 제공한다.

6줄의 JavaScript 코드로 이미지 비교 슬라이더를 구현하는 방법을 설명한다.

슬라이더는 HTML의 기본적인 input[type=range] 요소를 활용하여 두 이미지의 비교를 가능하게 하는데, 슬라이더 값이 변경되면 JavaScript를 통해 CSS 변수 --slider-value를 업데이트하여 상단 이미지의 너비를 조정한다. 이 접근법은 간단하면서도 강력한 기능을 제공하며, 최소한의 코드로 유연하고 효율적인 성능을 구현할 수 있다. 브라우저 호환성과 접근성도 고려되었으며, 네이티브 요소를 활용함으로써 스크린 리더와 키보드 지원이 포함된다.

이런 방식은 추가적인 라이브러리 없이 네이티브 기능을 최대한 활용하여 코드의 간결성과 유지 보수성을 높일 수 있다.

JavaScript에서 Event Loop를 완전히 이해하지 못했다면 이 가이드를 통해 모든 것이 어떻게 작동하는지 알 수 있다. Event Loop를 단계별로 분해하여 call stack, microtasks, macrotasks, Web API를 다루고 이 모든 것이 함께 작동하는 방식을 설명한다.

JavaScript는 동적이고 느슨한 타입 시스템을 가진 특성상 성능에서 불리할 수 있지만, 현대 JS 엔진의 JIT(Just-In-Time) 컴파일 덕분에 놀라운 최적화가 가능하다.

JS 엔진은 코드를 실행 중에 분석해 자주 실행되는 코드 경로를 확인하고, 이를 머신 코드로 최적화하여 실행 속도를 크게 향상시킨다. V8 엔진을 기준으로 보면, 코드 프로파일링 후 Sparkplug가 초기 컴파일을 수행하고, TurboFan은 심화된 최적화를 통해 반복문 해체, 타입 체크 제거 등을 진행한다. 만약 가정된 조건이 깨지면 디옵티마이징을 통해 다시 초기 상태로 돌아가게 된다.

이런 과정은 WebAssembly와 같은 정적 컴파일 기술과 JS의 미래에도 영향을 미칠 가능성이 있다.

📦 코드와 도구

"Copy any UI" 모토와 같이 입력창에 복제할 웹사이트 주소(또는 유형)를 입력하면 해당 웹사이트를 분석하고 필요한 개발 라이브러리와 기본 프로젝트 환경을 구성해 준다.

프롬프트를 입력해 웹사이트를 클론 하는 것과 같이 동작하며, 단계별 작업들의 수행 과정을 직접 확인할 수 있는 형식으로 진행된다.

복제가 완료되면, 프로젝트를 netlify로 배포되며 생성된 코드들도 모두 다운로드 가능하다. 빠르게 특정 웹사이트를 스캐폴딩해 시작하거나 프로토타이핑하는 용도로는 좋은 선택지가 될 수 있어 보인다.

OXLint는 Rust로 작성된 초고속 TypeScript 린터로, 작년 10월 설립된 VoidZero(FE-News 24/11 소개)의 프로젝트 중 하나이다.

OXC 파서와 타입 분석기를 기반으로 하여 빠른 속도와 높은 정확도를 동시에 제공한다. 기존 ESLint 대비 최대 100배 빠른 성능을 보여준다고 한다. 지난 1년간의 개발 끝에 베타 버전으로 출시되었다.

VS Code 익스텐션인 Omlet은 컴포넌트(및 props)가 사용되는 방식과 위치를 에디터 내에서 바로 확인할 수 있게 해준다.

Nuxt와 Vitest를 개발한 Anthony Fu가 개발한 도구로, node_modules를 시각화하고 종속성을 검사하는 등의 작업을 수행한다.

분석하고자 하는 대상 패키지를 입력하면, 패키지의 종속성 정보와 함께 웹 컨테이너를 통해 패키지의 설치를 수행하고 설치된 패키지를 통해 정보를 제공한다.

🧑🏻‍💻 from NAVER Front-end

GitHub Copilot은 사용자의 개발 환경에 맞는 답변을 제공하도록 커스텀 지침을 설정할 수 있는 기능을 제공한다.

프로젝트 공통 지침을 설정하거나 개인 설정 파일(settings.json)에 개인용 지침을 추가하여 코드 작성, 테스트 생성, 코드 리뷰 등에 원하는 스타일과 규칙을 적용할 수 있으며, 자주 사용하는 프롬프트를 별도의 마크다운 파일로 작성해 놓고 특정 상호작용에 맞춘 지침을 활용할 수 있다.

매번 반복적인 프롬프트 입력이나 프로젝트 가이드라인을 준수한 결과를 얻을 수 있기 때문에 효율성을 높이고, 협업과 프로젝트 관리에 유용하게 사용될 수 있다.

이 글은 테스트 코드를 효과적으로 작성하여 프로그램 품질을 개선하는 방법과 좋은 설계 원칙을 강조한다.

고수준 Mock을 남용할 경우 테스트 작성과 유지 보수가 어려워지는 문제를 지적하며, 이를 해결하기 위해 험블 객체 패턴을 소개한다. 험블 객체 패턴은 테스트하기 어려운 코드를 분리하고 인터페이스를 활용하여 테스트를 간소화하며, 단일 책임 원칙, 의존관계 역전 원칙 등 SOLID 설계 원칙을 자연스럽게 준수하게 만든다. 이를 통해 테스트 용이성을 높이고 코드의 유지 보수성과 확장성을 동시에 확보할 수 있다.