Bundle, install, and run JavaScript & TypeScript - all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in.

Bun - A fast all-in-one JavaScript runtime

Bun은 Node.js, Webpack, Vitest등의 프론트엔드 개발환경에 필요한 라이브러리의 설치가 필요 없는 올인원 도구인데요. 빠른 시작속도, 실행속도 그리고 DX(개발자경험)을 위해 만들어졌습니다. Bun의 주요 역할은 다음과 같습니다.

 1. 런타임및 패키지매니저
    요즘 리액트 개발을 하려면 Node.js 설치가 필수인데요. Bun은 자체적인 런타임을 제공하여 Node.js 설치가 필요 없습니다 게다가 WebKit의 JavaScriptCore 엔진과 저수준 프로그래밍 언어인 Zig를 사용하여 Node.js보다 훨씬 빠른 속도를 자랑합니다. npm 패키지와 호환되는 내장 패키지 매니저로 'bun install'을 사용하면 약 5배 빠른 속도로 패키지를 설치할 수 있고, 전역 모듈 캐시로 중복 다운로드를 제거하여 최적의 성능을 보장합니다

 2. 번들러 및 트랜스파일러
    Bun은 타입스크립트를 기본적으로 지원하고, 런타임에 자바스크립트 트랜스파일러가 통합되어 있어 js, ts, jsx, tsx 파일을 추가 변환 없이 즉시 실행할 수 있습니다. 트랜스파일러와 번들러 기능을 모두 갖추고 있어 Babel, Webpack, Rollup 등의 설치가 필요 없습니다. 또한 자바스크립트 매크로 도입으로 번들링 속도가 빠르기로 유명한 esbuild보다도 1.75배 빠릅니다 🚀
    
 3. 테스트 러너
    Bun은 자체적으로 테스트 러너 기능을 제공합니다. 'bun:test' API로 Jest 스타일의 API를 지원합니다. 따라서 Jest 테스트 코드를 Bun으로 쉽게 전환할 수 있고, 타입스크립트와 JSX를 기본 지원하여 추가 구성이나 플러그인이 필요 없습니다. 네이티브 코드로 구현된 매처 덕분에 빠르기로 유명한 Vitest보다도 8배 빠른 속도를 자랑합니다 ⚡

Bun을 사용하면 별도의 패키지 설치 없이도 훌륭한 개발 환경을 설정할 수 있습니다. 아직 Github 이슈가 2900개가 있어 당장 프로덕션 레벨에서 사용하기는 힘든것처럼 보이는데요. 향후에 안정화가된다면 매우 빠르고 효율적인 개발 환경을 제공해줄 것으로 기대되어 한'Bun' 써봐도 좋을것 같습니다.

https://bun.sh/

Bun은 Node.js, Webpack, Vitest등의 프론트엔드 개발환경에 필요한 라이브러리의 설치가 필요 없는 올인원 도구인데요. 빠른 시작속도, 실행속도 그리고 DX(개발자경험)을 위해 만들어졌습니다. Bun의 주요 역할은 다음과 같습니다. <ol><li>런타임및 패키지매니저요즘 리액트 개발을 하려면 Node.js 설치가 필수인데요. Bun은 자체적인 런타임을 제공하여 Node.js 설치가 필요 없습니다 게다가 WebKit의 JavaScriptCore 엔진과 저수준 프로그래밍 언어인 Zig를 사용하여 Node.js보다 훨씬 빠른 속도를 자랑합니다. npm 패키지와 호환되는 내장 패키지 매니저로 'bun install'을 사용하면 약 5배 빠른 속도로 패키지를 설치할 수 있고, 전역 모듈 캐시로 중복 다운로드를 제거하여 최적의 성능을 보장합니다</li></ol> <ol start="2"><li>번들러 및 트랜스파일러Bun은 타입스크립트를 기본적으로 지원하고, 런타임에 자바스크립트 트랜스파일러가 통합되어 있어 js, ts, jsx, tsx 파일을 추가 변환 없이 즉시 실행할 수 있습니다. 트랜스파일러와 번들러 기능을 모두 갖추고 있어 Babel, Webpack, Rollup 등의 설치가 필요 없습니다. 또한 자바스크립트 매크로 도입으로 번들링 속도가 빠르기로 유명한 esbuild보다도 1.75배 빠릅니다 🚀 </li><li>테스트 러너Bun은 자체적으로 테스트 러너 기능을 제공합니다. 'bun:test' API로 Jest 스타일의 API를 지원합니다. 따라서 Jest 테스트 코드를 Bun으로 쉽게 전환할 수 있고, 타입스크립트와 JSX를 기본 지원하여 추가 구성이나 플러그인이 필요 없습니다. 네이티브 코드로 구현된 매처 덕분에 빠르기로 유명한 Vitest보다도 8배 빠른 속도를 자랑합니다 ⚡</li></ol> Bun을 사용하면 별도의 패키지 설치 없이도 훌륭한 개발 환경을 설정할 수 있습니다. 아직 Github 이슈가 2900개가 있어 당장 프로덕션 레벨에서 사용하기는 힘든것처럼 보이는데요. 향후에 안정화가된다면 매우 빠르고 효율적인 개발 환경을 제공해줄 것으로 기대되어 한'Bun' 써봐도 좋을것 같습니다. https://bun.sh/

Bun: 자바스크립트와 타입스크립트를 위한 올인원 솔루션

[모집] 우아한스터디 2024 여름시즌 | 우아한형제들 기술블로그

https://techblog.woowahan.com/17328/

우아한형제들 구성원들과 함께 진행하는 우아한스터디 여름시즌 모집이 시작되었네요

 * [테크] KU배당
 * [테크] 기술 블로거 모여라
 * [테크] 코드와 함께 쉽게 배우는 리눅스
 * [테크] 프롬프트 참 잘하는 집
 * [테크] 우아한 대규모 시스템 설계 스터디2

이상 5가지 스터디가 운영한다고 합니다.

 * 활동기간 : 6월 1일~7월 31일(2달)
 * 신청기간: 5월 8일~5월 14일
 * 선발결과: 5월 22일 개별 안내

https://techblog.woowahan.com/17328/ 우아한형제들 구성원들과 함께 진행하는 우아한스터디 여름시즌 모집이 시작되었네요 <ul ><li>[테크] KU배당</li><li>[테크] 기술 블로거 모여라</li><li>[테크] 코드와 함께 쉽게 배우는 리눅스</li><li>[테크] 프롬프트 참 잘하는 집</li><li>[테크] 우아한 대규모 시스템 설계 스터디2</li></ul> 이상 5가지 스터디가 운영한다고 합니다. <ul ><li>활동기간 : 6월 1일~7월 31일(2달)</li><li>신청기간: 5월 8일~5월 14일</li><li>선발결과: 5월 22일 개별 안내</li></ul>

우아한형제들 기술블로그 |

[모집] 우아한스터디 2024 여름시즌

feat. 투자도, 유료 마케팅도 없이

단 둘이서 시작해 6개월 만에 월 1천만원의 매출을 내는 AI 서비스

2주간 80개의 아이디어
그 중 8개의 렌딩 페이지
반응이 많은 3개 중에 선택된 Lilys

창업자 2분의 이야기가 상당히 흥미롭습니다
https://maily.so/unsexybusinesskr/posts/4046fc76

2주간 80개의 아이디어그 중 8개의 렌딩 페이지반응이 많은 3개 중에 선택된 Lilys 창업자 2분의 이야기가 상당히 흥미롭습니다https://maily.so/unsexybusinesskr/posts/4046fc76

레드버스백맨

From Solo MVP to Scaled Success - Building a $70k+/Month Transactions E-Commerce App | GO Lee

How Two Front-End Developers Built an E-Commerce App in 10 Weeks

https://www.golee.me/blog/early-stage-startup-tech-stack

응원합니다

다음 글은 월 100$ 이하로 커머스앱 운영 하기라고 하네요 👍

https://www.golee.me/blog/early-stage-startup-tech-stack 응원합니다 다음 글은 월 100$ 이하로 커머스앱 운영 하기라고 하네요 👍

golee.me

프론트엔드 개발자 2명이 만든 명품 주얼리 거래 이커머스 앱

어떤 일을 꾸준하게 하기 위해선 완벽함과 거리를 두어야 하는 것 같습니다.

돌이켜보면 2022년 블로그 글을 쏟아낼 땐 별 기대가 없었습니다. 누구도 제 글에 관심 두지 않았으니까요.

글을 자주 올리면서 점차 좋아해 주시는 분들이 늘어갔죠. 늘어가는 관심은 부담, 완벽해야 한다는 생각으로 돌아왔습니다.

개발자로서의 역량, 메이커로서 자질 등. 모든 면에서 완벽해 보여야 한다는 압박감만 커졌습니다. 실행은 더 어려워지고 자기 검열은 강화됐죠. 한 번의 글을 쓰기가 더 어려워졌습니다.

어떤 일을 꾸준히 하기 위해선 주위의 시선에 신경 쓰지 않고 행동해야 하는 것 같습니다. 완벽해야 한다는 생각은 잠시 내려두고요.

어떤 일을 꾸준하게 하기 위해선 완벽함과 거리를 두어야 하는 것 같습니다. 돌이켜보면 2022년 블로그 글을 쏟아낼 땐 별 기대가 없었습니다. 누구도 제 글에 관심 두지 않았으니까요. 글을 자주 올리면서 점차 좋아해 주시는 분들이 늘어갔죠. 늘어가는 관심은 부담, 완벽해야 한다는 생각으로 돌아왔습니다. 개발자로서의 역량, 메이커로서 자질 등. 모든 면에서 완벽해 보여야 한다는 압박감만 커졌습니다. 실행은 더 어려워지고 자기 검열은 강화됐죠. 한 번의 글을 쓰기가 더 어려워졌습니다. 어떤 일을 꾸준히 하기 위해선 주위의 시선에 신경 쓰지 않고 행동해야 하는 것 같습니다. 완벽해야 한다는 생각은 잠시 내려두고요.

완벽함과 거리두기

웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.

웹 컴포넌트 - Web API | MDN

웹 컴포넌트(Web Components)는 웹 개발에서 코드의 재사용성을 높이고 컴포넌트의 캡슐화를 실현하기 위한 기술입니다.
전통적인 웹 표준에서는 코드의 재사용이 쉽지 않았는데요. 웹 컴포넌트는 웹 표준 기술을 사용하여 컴포넌트를 재사용할 수 있도록 합니다. 이는 개발 효율성을 높이고 코드의 유지보수성을 향상시키는 데 도움이 되는데요.

웹 컴포넌트는 다음과 같은 주요 개념으로 구성됩니다:
 1. 사용자 정의 요소(Custom Elements): 개발자가 직접 정의한 HTML 태그와 해당 태그의 동작을 나타내는 API입니다. 이를 통해 커스텀 엘리먼트를 생성하고 활용할 수 있습니다.
 2. 섀도우 DOM(Shadow DOM): 컴포넌트의 내부 구조와 스타일을 외부로부터 격리시키는 기술입니다. 이를 통해 컴포넌트의 기능을 프라이빗하게 유지할 수 있으며, 다른 부분의 스타일과 충돌하지 않도록 보장합니다.
 3. HTML 템플릿(HTML Templates): 컴포넌트의 구조를 정의하는 마크업 템플릿입니다. 이 템플릿은 렌더링된 페이지에 직접 나타나지 않으며, 컴포넌트가 인스턴스화될 때 사용됩니다.
 
 
웹 컴포넌트는 자바스크립트의 클래스 문법을 사용하여 구현됩니다. 또한, 리액트나 뷰와 유사하게 라이프사이클 메서드를 제공하여 컴포넌트의 생성, 업데이트, 제거 등의 과정을 제어할 수 있습니다. 웹 컴포넌트는 웹 표준 기술이기 때문에 별도의 라이브러리나 프레임워크 없이 사용할 수 있다는 장점이 있습니다.
다음은 간단한 웹 컴포넌트 코드 예제입니다:
<script>
 class SimpleGreeting extends HTMLElement {
 constructor() {
 super();
 const shadowRoot = this.attachShadow({mode: 'open'});
 shadowRoot.innerHTML = `안녕하세요 웹컴포넌트 예제입니다!`;
 }
 }
 customElements.define('simple-greeting', SimpleGreeting);
</script>
</head>
<body>
 <simple-greeting></simple-greeting>
</body>

웹 컴포넌트는 클래스 문법을 사용하기 때문에 익숙하지 않은 개발자에게는 다소 복잡해 보일 수 있을것 같은데요. 또한, 현재 리액트나 뷰와 같은 인기 있는 라이브러리가 널리 사용되고 있어 웹 컴포넌트가 이들을 완전히 대체하기는 쉽지 않을것 같습니다.

하지만 웹 컴포넌트의 가장 큰 장점은 웹 표준 기술을 사용하여 컴포넌트를 구현할 수 있기 때문에 라이브러리 사용이 제한된 특수한 환경이나 간단한 컴포넌트 구현이 필요한 상황에서 유용하게 활용될 수 있을것 같습니다.

https://developer.mozilla.org/ko/docs/Web/API/Web_components

웹 컴포넌트(Web Components)는 웹 개발에서 코드의 재사용성을 높이고 컴포넌트의 캡슐화를 실현하기 위한 기술입니다. 전통적인 웹 표준에서는 코드의 재사용이 쉽지 않았는데요. 웹 컴포넌트는 웹 표준 기술을 사용하여 컴포넌트를 재사용할 수 있도록 합니다. 이는 개발 효율성을 높이고 코드의 유지보수성을 향상시키는 데 도움이 되는데요. 웹 컴포넌트는 다음과 같은 주요 개념으로 구성됩니다:<ol ><li>사용자 정의 요소(Custom Elements): 개발자가 직접 정의한 HTML 태그와 해당 태그의 동작을 나타내는 API입니다. 이를 통해 커스텀 엘리먼트를 생성하고 활용할 수 있습니다.</li><li>섀도우 DOM(Shadow DOM): 컴포넌트의 내부 구조와 스타일을 외부로부터 격리시키는 기술입니다. 이를 통해 컴포넌트의 기능을 프라이빗하게 유지할 수 있으며, 다른 부분의 스타일과 충돌하지 않도록 보장합니다.</li><li>HTML 템플릿(HTML Templates): 컴포넌트의 구조를 정의하는 마크업 템플릿입니다. 이 템플릿은 렌더링된 페이지에 직접 나타나지 않으며, 컴포넌트가 인스턴스화될 때 사용됩니다. </li></ol>웹 컴포넌트는 자바스크립트의 클래스 문법을 사용하여 구현됩니다. 또한, 리액트나 뷰와 유사하게 라이프사이클 메서드를 제공하여 컴포넌트의 생성, 업데이트, 제거 등의 과정을 제어할 수 있습니다. 웹 컴포넌트는 웹 표준 기술이기 때문에 별도의 라이브러리나 프레임워크 없이 사용할 수 있다는 장점이 있습니다.다음은 간단한 웹 컴포넌트 코드 예제입니다:<pre ><code>&lt;script&gt;
 class SimpleGreeting extends HTMLElement {
 constructor() {
 super();
 const shadowRoot = this.attachShadow({mode: 'open'});
 shadowRoot.innerHTML = `&lt;p&gt;안녕하세요 웹컴포넌트 예제입니다!&lt;/p&gt;`;
 }
 }
 customElements.define('simple-greeting', SimpleGreeting);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;simple-greeting&gt;&lt;/simple-greeting&gt;
&lt;/body&gt;</code></pre> 웹 컴포넌트는 클래스 문법을 사용하기 때문에 익숙하지 않은 개발자에게는 다소 복잡해 보일 수 있을것 같은데요. 또한, 현재 리액트나 뷰와 같은 인기 있는 라이브러리가 널리 사용되고 있어 웹 컴포넌트가 이들을 완전히 대체하기는 쉽지 않을것 같습니다. 하지만 웹 컴포넌트의 가장 큰 장점은 웹 표준 기술을 사용하여 컴포넌트를 구현할 수 있기 때문에 라이브러리 사용이 제한된 특수한 환경이나 간단한 컴포넌트 구현이 필요한 상황에서 유용하게 활용될 수 있을것 같습니다. https://developer.mozilla.org/ko/docs/Web/API/Web_components

MDN Web Docs

웹 표준 기술로 구현하는 웹 컴포넌트(Web Components)

자바스크립트 객체에 특정 속성이 있는지 확인하는 방법

객체 지향 프로그래밍 언어인 자바스크립트에서는 객체에 어떤 속성이 들어 있는지 알아내야 할 때가 많은데요. 이번 포스팅에서는 자바스크립트 객체에 특정 속성을 있는지 확인하는 다양한 방법에 대해서 실습을 통해 정리해보겠습니다.

📝 포스팅: https://www.daleseo.com/js-object-has-own/

객체 지향 프로그래밍 언어인 자바스크립트에서는 객체에 어떤 속성이 들어 있는지 알아내야 할 때가 많은데요. 이번 포스팅에서는 자바스크립트 객체에 특정 속성을 있는지 확인하는 다양한 방법에 대해서 실습을 통해 정리해보겠습니다. 📝 포스팅: https://www.daleseo.com/js-object-has-own/

Daleseo

자바스크립트 객체에 특정 속성이 있는지 확인하는 방법 🔍

37signals팀이 프레임워크나 전처리기(preprocessors) 없이 최신 기능과 순수 CSS를 사용하여 ONCE/Campfire 서비스를 어떻게 구축했는지 자세히 살펴보세요.

(번역) Campfire의 모던 CSS 패턴

오늘 소개해드릴 글은 라인플러스의 김찬희님이 번역해주신 글입니다.

CSS에 새로 도입된 최신 기능들을 얼마나 사용하고 계신가요? 이 글에서는 :has(), :is(), oklch() 등 최신 기능들을 사용해 개발하며 발견한 유용한 패턴들을 소개합니다. CSS 코드 구조를 보다 체계적이고 직관적으로 개선 할 수 있고, 개발 편의성을 높여 줄 뿐만 아니라 기존 자바스크립트로 해결해야 했던 부분들을 보다 간단한 방법으로 대체해 복잡성을 줄일 수 있는 매력적인 기능들을 어떻게 사용하고 있는지 자세히 설명합니다. 기능을 사용했을 때의 장점과 이를 이용해 어떻게 구조화 할 수 있는지 실제 사례에 기반한 코드와 이미지들을 통해 설명하고 있기 때문에 CSS의 최신 기능들을 어떻게 사용해야 할지 막막 하셨다면 이 글이 도움이 되실 겁니다.

글 링크 : https://velog.io/@superlipbalm/modern-css-patterns-and-techniques-in-campfire

오늘 소개해드릴 글은 라인플러스의 김찬희님이 번역해주신 글입니다. CSS에 새로 도입된 최신 기능들을 얼마나 사용하고 계신가요? 이 글에서는 :has(), :is(), oklch() 등 최신 기능들을 사용해 개발하며 발견한 유용한 패턴들을 소개합니다. CSS 코드 구조를 보다 체계적이고 직관적으로 개선 할 수 있고, 개발 편의성을 높여 줄 뿐만 아니라 기존 자바스크립트로 해결해야 했던 부분들을 보다 간단한 방법으로 대체해 복잡성을 줄일 수 있는 매력적인 기능들을 어떻게 사용하고 있는지 자세히 설명합니다. 기능을 사용했을 때의 장점과 이를 이용해 어떻게 구조화 할 수 있는지 실제 사례에 기반한 코드와 이미지들을 통해 설명하고 있기 때문에 CSS의 최신 기능들을 어떻게 사용해야 할지 막막 하셨다면 이 글이 도움이 되실 겁니다. 글 링크 : https://velog.io/@superlipbalm/modern-css-patterns-and-techniques-in-campfire

Velog

Campfire의 모던 CSS 패턴

오래된 코드에 기능을 추가하다 보면 젠가 후반전에 접어든 것 같은 기분이 들 때가 있습니다. 어딘가 무너질 것 같아 불안하죠.

물론 안정적인 구조로 시작한 프로젝트는 이런 불안감이 덜합니다. 하지만 처음부터 많은 걸 고려하면 오버 엔지니어링이 될 수도 있죠. 상황에 따라 작게 시작해야 할 때도 있습니다.

무너질까 불안한 프로젝트를 다시 처음부터 만드는 게 가장 마음이 편한 결정입니다. 판을 엎어버리고 다시 시작하면 안정감 있게 서비스를 쌓아 올릴 수 있으니까요.

반면 기존 코드에 새로운 코드 조각을 계속 쌓아 올리는 건 마음이 어렵습니다.

회사는 개발자의 마음을 신경 쓰지 않습니다. 시간을 낭비하지 않고 새로운 기능을 빠르고 안정적으로 붙여나가길 기대합니다. 그 때문에 공들여 쌓은 탑을 무너트리고 처음부터 시작할 시간을 허락하지 않죠. 시간은 곧 돈이니까요.

서비스를 다시 만드는 데 시간을 들이기보다 오래된 코드를 조금씩 개선해서 안정적인 상태를 만들 줄 아는 개발자를 높게 평가하는 이유입니다.

젠가 후반전과 같은 마음으로 개발하고 있는 분이라면, 역량 있는 개발자가 될 기회를 누리고 계신 것일지도 모릅니다.

오래된 코드에 기능을 추가하다 보면 젠가 후반전에 접어든 것 같은 기분이 들 때가 있습니다. 어딘가 무너질 것 같아 불안하죠. 물론 안정적인 구조로 시작한 프로젝트는 이런 불안감이 덜합니다. 하지만 처음부터 많은 걸 고려하면 오버 엔지니어링이 될 수도 있죠. 상황에 따라 작게 시작해야 할 때도 있습니다. 무너질까 불안한 프로젝트를 다시 처음부터 만드는 게 가장 마음이 편한 결정입니다. 판을 엎어버리고 다시 시작하면 안정감 있게 서비스를 쌓아 올릴 수 있으니까요. 반면 기존 코드에 새로운 코드 조각을 계속 쌓아 올리는 건 마음이 어렵습니다. 회사는 개발자의 마음을 신경 쓰지 않습니다. 시간을 낭비하지 않고 새로운 기능을 빠르고 안정적으로 붙여나가길 기대합니다. 그 때문에 공들여 쌓은 탑을 무너트리고 처음부터 시작할 시간을 허락하지 않죠. 시간은 곧 돈이니까요. 서비스를 다시 만드는 데 시간을 들이기보다 오래된 코드를 조금씩 개선해서 안정적인 상태를 만들 줄 아는 개발자를 높게 평가하는 이유입니다. 젠가 후반전과 같은 마음으로 개발하고 있는 분이라면, 역량 있는 개발자가 될 기회를 누리고 계신 것일지도 모릅니다.

프로그래밍과 젠가

React의 등장 이후 프론트엔드 개발 환경은 급격한 변화를 겪고 있습니다. 초기의 Webpack과 Babel에 이어서 Vite, Rollup, Rolldown, Esbuild 등 다양한 컴파일러와 번들러 그리고 통합된 패키지들이 등장하고 있는데요.

프론트엔드 프로젝트에서 컴파일러 번들러는 필수적인 기술이기 때문에 이런 패키지들을 이해하려면 컴파일러와 번들러가 무엇인지 개념을 명확히 알아야 하는데요.

컴파일러(트랜스파일러)
 * 코드의 변환을 담당합니다.
 * 자바스크립트가 실행되는 곳은 브라우저 외에도 서버, 웹뷰 등 다양한 곳에서 실행이 될 수 있기 때문에 호환성을 고려해서 변환해줍니다.
 * 대표적으로는 Babel, TypeScript, esbuild, SWC등이 있습니다.

번들러
 * 개발 중에 작성된 여러 파일을 트리 쉐이킹, 코드 스플리팅, 모듈 연결 등을 통해 최적화 및 여러 개의 파일로 결합하는 작업을 합니다.
 * 개발자가 작성한 수많은 파일과 라이브러리를 효율적으로 하나의 파일 또는 여러 파일로 분할합니다.
 * 대표적으로는 Webpack, Rollup, Vite, esbuild, SWC 등이 있습니다.

그런데 흥미로운 점은 esbuild, SWC가 컴파일러와 번들러 두 가지 역할을 모두 수행한다는 것인데요.. esbuild는 번들러 이지만 Babel과 같이 자바스크립트 버전 간 호환성을 위해 코드를 변환하는 컴파일러 기능도 제공합니다.

SWC 역시 컴파일과 번들링 모두 지원하며 "Rust 기반의 웹 플랫폼" 으로 소개되고 있는데요. 이는 컴파일과 번들러의 기능이 점차 통합되는 추세를 보여줍니다.

하지만 아직까지는 esbuild는 0.2버전으로 정식 출시되지 않았고, 트랜스파일 기능이 Babel 만큼 세밀하지 않은 상황입니다. 또, SWC는 일부 복잡한 설정에서 안정성 이슈가 있어 주로 개발 환경 에서 사용되고 있는데요.

이러한 컴파일러와 번들러의 차이를 이해하고, 이들이 통합된 라이브러리의 발전 과정을 관찰하는 것은 꽤 흥미로운 일인것 같습니다. 이런 발전 동향을 주시하면서, 적절한 시점에 새로운 기술을 도입해서 개발 생산성 향상과 더 나은 개발 환경을 구축의 도입을 추천드립니다.

React의 등장 이후 프론트엔드 개발 환경은 급격한 변화를 겪고 있습니다. 초기의 Webpack과 Babel에 이어서 Vite, Rollup, Rolldown, Esbuild 등 다양한 컴파일러와 번들러 그리고 통합된 패키지들이 등장하고 있는데요. 프론트엔드 프로젝트에서 컴파일러 번들러는 필수적인 기술이기 때문에 이런 패키지들을 이해하려면 컴파일러와 번들러가 무엇인지 개념을 명확히 알아야 하는데요. 컴파일러(트랜스파일러)<ul ><li>코드의 변환을 담당합니다.</li><li>자바스크립트가 실행되는 곳은 브라우저 외에도 서버, 웹뷰 등 다양한 곳에서 실행이 될 수 있기 때문에 호환성을 고려해서 변환해줍니다.</li><li>대표적으로는 Babel, TypeScript, esbuild, SWC등이 있습니다.</li></ul> 번들러<ul ><li>개발 중에 작성된 여러 파일을 트리 쉐이킹, 코드 스플리팅, 모듈 연결 등을 통해 최적화 및 여러 개의 파일로 결합하는 작업을 합니다.</li><li>개발자가 작성한 수많은 파일과 라이브러리를 효율적으로 하나의 파일 또는 여러 파일로 분할합니다.</li><li>대표적으로는 Webpack, Rollup, Vite, esbuild, SWC 등이 있습니다.</li></ul> 그런데 흥미로운 점은 esbuild, SWC가 컴파일러와 번들러 두 가지 역할을 모두 수행한다는 것인데요.. esbuild는 번들러 이지만 Babel과 같이 자바스크립트 버전 간 호환성을 위해 코드를 변환하는 컴파일러 기능도 제공합니다. SWC 역시 컴파일과 번들링 모두 지원하며 "Rust 기반의 웹 플랫폼" 으로 소개되고 있는데요. 이는 컴파일과 번들러의 기능이 점차 통합되는 추세를 보여줍니다. 하지만 아직까지는 esbuild는 0.2버전으로 정식 출시되지 않았고, 트랜스파일 기능이 Babel 만큼 세밀하지 않은 상황입니다. 또, SWC는 일부 복잡한 설정에서 안정성 이슈가 있어 주로 개발 환경 에서 사용되고 있는데요. 이러한 컴파일러와 번들러의 차이를 이해하고, 이들이 통합된 라이브러리의 발전 과정을 관찰하는 것은 꽤 흥미로운 일인것 같습니다. 이런 발전 동향을 주시하면서, 적절한 시점에 새로운 기술을 도입해서 개발 생산성 향상과 더 나은 개발 환경을 구축의 도입을 추천드립니다.

프론트엔드 개발의 필수 기술: 컴파일러와 번들러 이해하기

NAVER D2

국내
네이버 - https://d2.naver.com/home
네이버 플레이스 - https://medium.com/naver-place-dev
카카오 - https://tech.kakao.com/blog/
카카오페이 - https://tech.kakaopay.com/
카카오스타일 - https://devblog.kakaostyle.com/ko/
쿠팡 - https://medium.com/coupang-engineering/kr/home
우아한형제들 - https://techblog.woowahan.com/
요기요 - https://techblog.yogiyo.co.kr/
현대자동차 - https://42dot.ai/blog
토스 - https://toss.tech/
뱅크샐러드 - https://blog.banksalad.com/
쏘카 - https://tech.socarcorp.kr/
직방 - https://medium.com/zigbang
지마켓 - https://dev.gmarket.com/
마켓컬리 - https://helloworld.kurly.com/
당근 - https://medium.com/daangn
중고나라 - https://teamblog.joonggonara.co.kr/
여기어때 - https://techblog.gccompany.co.kr/
라인 - https://engineering.linecorp.com/ko
넥슨 - https://www.intelligencelabs.tech/
데브시스터즈 - https://tech.devsisters.com/
왓차 - https://medium.com/watcha
무신사 - https://medium.com/musinsa-tech

국외
구글 - https://developers.googleblog.com/ko/
구글플레이 - https://medium.com/googleplaydev
아마존 - https://developer.amazon.com/en-US/blogs/alexa
애플 - https://developer.apple.com/
깃허브 - https://github.blog/
이베이 - https://innovation.ebayinc.com/tech/
페이스북 - https://engineering.fb.com/
슬랙 - https://slack.engineering/
트위터 - https://blog.twitter.com/engineering/en_us
에어비앤비 - https://medium.com/airbnb-engineering
넷플릭스 - https://netflixtechblog.com/?gi=f87f6e01f27a
MS - https://techcommunity.microsoft.com/

국내네이버 - https://d2.naver.com/home네이버 플레이스 - https://medium.com/naver-place-dev카카오 - https://tech.kakao.com/blog/카카오페이 - https://tech.kakaopay.com/카카오스타일 - https://devblog.kakaostyle.com/ko/쿠팡 - https://medium.com/coupang-engineering/kr/home우아한형제들 - https://techblog.woowahan.com/요기요 - https://techblog.yogiyo.co.kr/현대자동차 - https://42dot.ai/blog토스 - https://toss.tech/뱅크샐러드 - https://blog.banksalad.com/쏘카 - https://tech.socarcorp.kr/직방 - https://medium.com/zigbang지마켓 - https://dev.gmarket.com/마켓컬리 - https://helloworld.kurly.com/당근 - https://medium.com/daangn중고나라 - https://teamblog.joonggonara.co.kr/여기어때 - https://techblog.gccompany.co.kr/라인 - https://engineering.linecorp.com/ko넥슨 - https://www.intelligencelabs.tech/데브시스터즈 - https://tech.devsisters.com/왓차 - https://medium.com/watcha무신사 - https://medium.com/musinsa-tech 국외구글 - https://developers.googleblog.com/ko/구글플레이 - https://medium.com/googleplaydev아마존 - https://developer.amazon.com/en-US/blogs/alexa애플 - https://developer.apple.com/깃허브 - https://github.blog/이베이 - https://innovation.ebayinc.com/tech/페이스북 - https://engineering.fb.com/슬랙 - https://slack.engineering/트위터 - https://blog.twitter.com/engineering/en_us에어비앤비 - https://medium.com/airbnb-engineering넷플릭스 - https://netflixtechblog.com/?gi=f87f6e01f27aMS - https://techcommunity.microsoft.com/

Naver

회사 테크 블로그 모음 👨🏻‍💻

3개월간 개발한 마이크로서비스에 498개의 테스트 코드를 작성한 시니어 개발자가 추천해준 을 번역했다. 테스트의 종류와 이유, 철학을 Java, SpringBoot, JUnit을 사용한 예시와 함께 설명한다.

실용적인 테스트 피라미드 (번역)

최근에 이직한 미국 회사에 테스트에 진심인 시니어 개발자가 있었습니다. 그가 혼자서 약 3개월간 개발한 Java/Spring 기반의 백엔드 마이크로서비스는 무려 498개의 테스트가 작성되었습니다. 😵

물론 개수가 많다고 무조건 좋은 테스트는 아니지만, 그는 필요한 테스트들만 견고하게 작성했고, 다양한 종류와 범위의 테스트들을 깔끔하게 구성하고 읽기 편하게 작성했으며, JUnit5와 Mockito 등의 테스트 라이브러리의 기능들을 풍부하게 활용해서 배울 점이 많았습니다.

심지어 테스트하기 쉬운 프로젝트도 아니었습니다:
 1. 외부 서비스들 및 사내 마이크로서비스들간의 복잡한 연계가 필요한 서비스였고,
 2. 1980년대부터 현재까지 운영중인 사내 레거시 시스템(BASIC과 COBOL로 개발됨)의 동작은 일정하지 않았으며,
 3. 암호화되지 않은 개인정보들 때문에 DB 접근 권한이 제한되어 실시간 데이터를 얻을 수 없는 반면, 비즈니스 관리자들은 데이터를 직접 변경할 수 있었으며,
 4. 다양한 이해관계자들에 의해 요구사항이 수없이 바뀌었고,
 5. 시간 및 위치 데이터에 민감한 서비스라 미국 각 지역의 시차에 따라 다른 동작이 필요한 까다로운 서비스였다.

이정도로 복잡한 백엔드 서비스들은 봐왔지만 이렇게 확실하게 테스트하는 경우는 본 적이 없어서,
이래서 차는 독일차를 사라는건가..🤔
라는 구시대적 선입견이 스멀스멀 피어오르기도 했습니다. (그는 독일 혹은 폴란드 출신입니다)

그에게
너처럼 테스트 코드 작성하려면 어디서부터 시작해야해?
라고 물었는데, 그는 곧바로
Test Pyramid를 먼저 이해하는게 좋아
라며 이 글을 추천해줬습니다.

그래서 주말에 각 잡고 읽는 김에 번역해보았습니다. 🙃

https://www.integer.blog/practical-test-pyramid/?ref=careerly.co.kr

최근에 이직한 미국 회사에 테스트에 진심인 시니어 개발자가 있었습니다. 그가 혼자서 약 3개월간 개발한 Java/Spring 기반의 백엔드 마이크로서비스는 무려 498개의 테스트가 작성되었습니다. 😵 물론 개수가 많다고 무조건 좋은 테스트는 아니지만, 그는 필요한 테스트들만 견고하게 작성했고, 다양한 종류와 범위의 테스트들을 깔끔하게 구성하고 읽기 편하게 작성했으며, JUnit5와 Mockito 등의 테스트 라이브러리의 기능들을 풍부하게 활용해서 배울 점이 많았습니다. 심지어 테스트하기 쉬운 프로젝트도 아니었습니다:<ol ><li>외부 서비스들 및 사내 마이크로서비스들간의 복잡한 연계가 필요한 서비스였고,</li><li>1980년대부터 현재까지 운영중인 사내 레거시 시스템(BASIC과 COBOL로 개발됨)의 동작은 일정하지 않았으며,</li><li>암호화되지 않은 개인정보들 때문에 DB 접근 권한이 제한되어 실시간 데이터를 얻을 수 없는 반면, 비즈니스 관리자들은 데이터를 직접 변경할 수 있었으며,</li><li>다양한 이해관계자들에 의해 요구사항이 수없이 바뀌었고,</li><li>시간 및 위치 데이터에 민감한 서비스라 미국 각 지역의 시차에 따라 다른 동작이 필요한 까다로운 서비스였다.</li></ol> 이정도로 복잡한 백엔드 서비스들은 봐왔지만 이렇게 확실하게 테스트하는 경우는 본 적이 없어서, <code >이래서 차는 독일차를 사라는건가..🤔</code>라는 구시대적 선입견이 스멀스멀 피어오르기도 했습니다. (그는 독일 혹은 폴란드 출신입니다) ​그에게 <code >너처럼 테스트 코드 작성하려면 어디서부터 시작해야해?</code> 라고 물었는데, 그는 곧바로 <code >Test Pyramid를 먼저 이해하는게 좋아</code>라며 이 글을 추천해줬습니다. 그래서 주말에 각 잡고 읽는 김에 번역해보았습니다. 🙃 https://www.integer.blog/practical-test-pyramid/?ref=careerly.co.kr

1nteger 🏄🏻‍♂️

498개의 테스트 코드 (번역)

Dev Ranking

GeekNews 에서 소개를 해준 사이트인데요,
커리어리와 GeekNews 포함한 유명 it 서비스 및 뉴스의 글들을 랭킹으로 보여주고,

유명한 it 기업 기술 블로그 사이트도 정리되어 필요할때 찾아보기 너무 좋습니다.

it 기술 관련 블로그나 뉴스를 살펴보고 싶으신 분들은 참고하면 좋겠습니다.

📚 링크
 * https://dev-ranking.vercel.app/

GeekNews 에서 소개를 해준 사이트인데요,커리어리와 GeekNews 포함한 유명 it 서비스 및 뉴스의 글들을 랭킹으로 보여주고, 유명한 it 기업 기술 블로그 사이트도 정리되어 필요할때 찾아보기 너무 좋습니다. it 기술 관련 블로그나 뉴스를 살펴보고 싶으신 분들은 참고하면 좋겠습니다. 📚 링크<ul><li>https://dev-ranking.vercel.app/</li></ul>

Vercel

🌐 개발자가 알고 있으면 좋은 사이트

일을 시작할 땐 개인의 성장에만 집중했습니다.

시간이 흐르며 함께 성장하는 것에 집중하게 됐습니다. 동료의 성장뿐 아니라 회사, 제품의 성장에도 관심을 가졌습니다.

조금 더 시간이 흐르자, 회의감이 들었습니다. "내가 왜 이러고 있지?"

성장의 의미를 돌아볼 시간이 찾아온 것이었습니다.

성장을 통해 이루고자 하는 바를 잊고 있었다는 걸 깨달았습니다. 왜 성장하고 싶었을까요. 왜 함께 성장해야 했을까요.

문제를 해결하고 싶었기 때문입니다. 세상을 살며 마주한 문제가 많고 이를 해결하고 싶은데 그럴 능력이 되질 않았거든요. 그래서 공부하고 일하고 발표하고 글을 쓰며 성장했습니다. 덕분에 크고 작은 문제를 푸는데 기여할 수 있었죠.

다른 말로 정리하면 더 나은 세상을 만들고 싶기 때문이라고 할 수 있겠네요. 여러분은 어떤 이유로 성장하려 하시나요?

마주한 문제를 해결해서 조금 더 나은 세상을 만드는 것. 바로 우리가 성장하기 위해 노력하는 이유가 아닐까요.

일을 시작할 땐 개인의 성장에만 집중했습니다. 시간이 흐르며 함께 성장하는 것에 집중하게 됐습니다. 동료의 성장뿐 아니라 회사, 제품의 성장에도 관심을 가졌습니다. 조금 더 시간이 흐르자, 회의감이 들었습니다. "내가 왜 이러고 있지?" 성장의 의미를 돌아볼 시간이 찾아온 것이었습니다. 성장을 통해 이루고자 하는 바를 잊고 있었다는 걸 깨달았습니다. 왜 성장하고 싶었을까요. 왜 함께 성장해야 했을까요. 문제를 해결하고 싶었기 때문입니다. 세상을 살며 마주한 문제가 많고 이를 해결하고 싶은데 그럴 능력이 되질 않았거든요. 그래서 공부하고 일하고 발표하고 글을 쓰며 성장했습니다. 덕분에 크고 작은 문제를 푸는데 기여할 수 있었죠. 다른 말로 정리하면 더 나은 세상을 만들고 싶기 때문이라고 할 수 있겠네요. 여러분은 어떤 이유로 성장하려 하시나요? 마주한 문제를 해결해서 조금 더 나은 세상을 만드는 것. 바로 우리가 성장하기 위해 노력하는 이유가 아닐까요.

성장의 이유

The library for web and native user interfaces

React 19 Beta - React

React 19 베타 버전이 npm을 통해 출시되었습니다. 이번 업데이트에서 주목할 만한 것은 "Actions"이라는 개념인데요. Actions은 비동기 전환을 사용하는 함수를 말합니다.
그럼 비동기 전환을 사용하는 함수란 무엇일까요?
비동기 작업을 콜백함수나 Promise로 처리하게 되면 코드 가독성이 떨어지고 복잡성이 증대되는데요. React에서는 이런 문제를 해결하기 위해 비동기 전환 즉 Action을 사용하여 비동기 작업을 마치 동기 작업처럼 쉽게 처리할 수 있습니다.

이런 Actions 개념을 바탕으로 React 19에서는 'useOptimistic'과 'useActionState'와 같은 새로운 훅(Hook)들이 추가되었습니다. 이 훅들은 비동기 작업을 보다 선언적이고 간결하게 처리할 수 있도록 도와주는데요.

React 19의 Actions 및 관련 훅들은 비동기 작업 처리, 데이터 제출, 오류 처리, 상태 관리 등을 자동화하고 추상화합니다. 이를 통해 개발자는 복잡한 비동기 로직 구현(Pending, Error 등)에 직접 개발을 하지 않아도 되어 개발 생산성 향상과 코드 품질 개선을 기대할 수 있습니다.

개인적으로는 Promise를 반환하는 함수의 결과를 사용할수 있는 'use'훅과 낙관적 업데이트로 UX를 개선할수 있는 'useOptimistic' 훅이 가장 기대가 되네요.

https://react.dev/blog/2024/04/25/react-19

React 19 베타 버전이 npm을 통해 출시되었습니다. 이번 업데이트에서 주목할 만한 것은 "Actions"이라는 개념인데요. Actions은 비동기 전환을 사용하는 함수를 말합니다. 그럼 비동기 전환을 사용하는 함수란 무엇일까요?비동기 작업을 콜백함수나 Promise로 처리하게 되면 코드 가독성이 떨어지고 복잡성이 증대되는데요. React에서는 이런 문제를 해결하기 위해 비동기 전환 즉 Action을 사용하여 비동기 작업을 마치 동기 작업처럼 쉽게 처리할 수 있습니다. 이런 Actions 개념을 바탕으로 React 19에서는 'useOptimistic'과 'useActionState'와 같은 새로운 훅(Hook)들이 추가되었습니다. 이 훅들은 비동기 작업을 보다 선언적이고 간결하게 처리할 수 있도록 도와주는데요. React 19의 Actions 및 관련 훅들은 비동기 작업 처리, 데이터 제출, 오류 처리, 상태 관리 등을 자동화하고 추상화합니다. 이를 통해 개발자는 복잡한 비동기 로직 구현(Pending, Error 등)에 직접 개발을 하지 않아도 되어 개발 생산성 향상과 코드 품질 개선을 기대할 수 있습니다. 개인적으로는 Promise를 반환하는 함수의 결과를 사용할수 있는 'use'훅과 낙관적 업데이트로 UX를 개선할수 있는 'useOptimistic' 훅이 가장 기대가 되네요. https://react.dev/blog/2024/04/25/react-19

React

React 19 베타 출시: Actions의 도입과 새로운 비동기

직장인이 된 지 한 달이 되었다.

🐣 우당탕탕 신입개발자의 한달간의 기록

뚝딱거렸던 신입 시절을 떠올리며 즐겁게 읽었네요.
회식 2차까지 버틸 수 있는 체력이 무척 부럽습니다

https://velog.io/@wndpseo/%EC%9A%B0%EB%8B%B9%ED%83%95%ED%83%95-%EC%8B%A0%EC%9E%85%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%ED%95%9C%EB%8B%AC%EA%B0%84%EC%9D%98-%EA%B8%B0%EB%A1%9D

뚝딱거렸던 신입 시절을 떠올리며 즐겁게 읽었네요.회식 2차까지 버틸 수 있는 체력이 무척 부럽습니다 https://velog.io/@wndpseo/%EC%9A%B0%EB%8B%B9%ED%83%95%ED%83%95-%EC%8B%A0%EC%9E%85%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%ED%95%9C%EB%8B%AC%EA%B0%84%EC%9D%98-%EA%B8%B0%EB%A1%9D

신입 개발자의 한 달

Are you stuck on a programming challenge? Does the code not compile? Does the API work differently than you expect? Little problems can add up and get in the way of seeing the big picture. As a software developer, you need to be able to overcome these obs

5 Practical Ways to Quickly Overcome a Programming Obstacle

 1. 한 발짝 물러서기
 2. 소리내서 말하기
 3. 산책하거나 달리기
 4. 문서 읽기
 5. 타이머 설정하기

정말 공감갑니다!

https://blog.supereasyapps.com/5-practical-ways-to-quickly-overcome-a-programming-obstacle/

<ol ><li>한 발짝 물러서기</li><li>소리내서 말하기</li><li>산책하거나 달리기</li><li>문서 읽기</li><li>타이머 설정하기</li></ol> 정말 공감갑니다! https://blog.supereasyapps.com/5-practical-ways-to-quickly-overcome-a-programming-obstacle/

Super Easy Apps

코딩하다가 막혔을때 극복하는 5가지 방법

Meta released the most capable open-source language model, Llama 3, yesterday. Because it is open-source, you can download the model weights and run them locally on your own machine. I know, I know...

How To Run Llama 3 In Visual Studio Code With CodeGPT

최근에 Meta에서 인기있는 오픈소스 언어 모델인 Llama 3를 발표했습니다. 전문가가 아닌데 Llama 3를 비쥬얼 스튜디오 코드에서 실행할 수 있을까요? 비전문가를 위해 친절하게 비쥬얼 스튜디오 코드에서 Llama 3를 실행하는 가이드를 소개한 기사 공유합니다.😃

<Visual Studio Code에서 Llama 3를 실행하는 방법 — 단계별 가이드>

Prerequisites
 * Llama3 3를 실행할비쥬얼 스튜디오 코드가 설치된 노트북의 사양을 확인하세요.

 * GPU가 없어도 괜찮은 성능의 CPU와 충분한 RAM이 있으면 아무런 문제 없이 노트북에서 Llama 3를 실행할 수 있다고 합니다.

1단계: Ollama 다운로드 및 설치
 * Ollama 웹사이트로 이동하여 설치 프로그램의 최신 버전을 다운로드하세요. Ollama는 다양한 플랫폼에서 대규모 언어 모델(LLM)을 로컬에서 실행, 생성 및 공유하도록 설계된 도구라고 합니다.

 * 제대로 설치가 되었는지 확인하기 위해
 ollama -v
 명령어를 사용하세요.

2단계: VS Code에 CodeGPT Extension 설치
 * Visual Studio Code를 실행하고 확장(Extension) 탭으로 이동한 후, codegpt.co 에서 "CodeGPT"를 검색하고 확장을 설치하세요.

 * 확장이 설치되면 VS Code의 왼쪽 사이드바에 CodeGPT 아이콘이 표시된다고 합니다.

3단계: 모델 다운로드
 * VS Code에서 터미널을 열고
 ollama pull llama3:8b
 명령을 실행하여 Llama 3 모델을 다운로드합니다. 모델 크기가 커서(4GB 이상) 생각보다 시간이 걸릴 수 있다고 합니다.

4단계: Llama 3 모델 선택
 * VS Code의 왼쪽 패널에 있는 CodeGPT 대시보드에서 Provider 드롭다운 메뉴를 찾아 Ollama를 선택하고, 모델 드롭다운에서 "Lama3:8b"를 선택합니다.

5단계: VS 코드에서 Llama 3 실행
 * VS Code에 모델을 다운로드하고 CodeGPT를 설치했으면 테스트 프롬프트를 제공하여 모든 것이 제대로 작동하는지 확인해 봅니다.

원본 기사 링크는 아래와 같습니다. 상세 내용은 원본 기사를 통해 확인하실 수 있습니다. 감사합니다🙏
[Source Link] https://generativeai.pub/how-to-run-llama-3-in-visual-studio-code-with-codegpt-18cb105cf9d5

최근에 Meta에서 인기있는 오픈소스 언어 모델인 Llama 3를 발표했습니다. 전문가가 아닌데 Llama 3를 비쥬얼 스튜디오 코드에서 실행할 수 있을까요? 비전문가를 위해 친절하게 비쥬얼 스튜디오 코드에서 Llama 3를 실행하는 가이드를 소개한 기사 공유합니다.😃 &lt;Visual Studio Code에서 Llama 3를 실행하는 방법 — 단계별 가이드&gt; Prerequisites<ul ><li>Llama3 3를 실행할비쥬얼 스튜디오 코드가 설치된 노트북의 사양을 확인하세요.</li></ul> <ul ><li>GPU가 없어도 괜찮은 성능의 CPU와 충분한 RAM이 있으면 아무런 문제 없이 노트북에서 Llama 3를 실행할 수 있다고 합니다.</li></ul> 1단계: Ollama 다운로드 및 설치<ul ><li>Ollama 웹사이트로 이동하여 설치 프로그램의 최신 버전을 다운로드하세요. Ollama는 다양한 플랫폼에서 대규모 언어 모델(LLM)을 로컬에서 실행, 생성 및 공유하도록 설계된 도구라고 합니다.</li></ul> <ul ><li>제대로 설치가 되었는지 확인하기 위해 <code >ollama -v</code> 명령어를 사용하세요.</li></ul> 2단계: VS Code에 CodeGPT Extension 설치<ul ><li>Visual Studio Code를 실행하고 확장(Extension) 탭으로 이동한 후, codegpt.co 에서 "CodeGPT"를 검색하고 확장을 설치하세요.</li></ul> <ul ><li>확장이 설치되면 VS Code의 왼쪽 사이드바에 CodeGPT 아이콘이 표시된다고 합니다.</li></ul> 3단계: 모델 다운로드<ul ><li>VS Code에서 터미널을 열고 <code >ollama pull llama3:8b</code> 명령을 실행하여 Llama 3 모델을 다운로드합니다. 모델 크기가 커서(4GB 이상) 생각보다 시간이 걸릴 수 있다고 합니다.</li></ul> 4단계: Llama 3 모델 선택<ul ><li>VS Code의 왼쪽 패널에 있는 CodeGPT 대시보드에서 Provider 드롭다운 메뉴를 찾아 Ollama를 선택하고, 모델 드롭다운에서 "Lama3:8b"를 선택합니다. </li></ul> 5단계: VS 코드에서 Llama 3 실행<ul ><li>VS Code에 모델을 다운로드하고 CodeGPT를 설치했으면 테스트 프롬프트를 제공하여 모든 것이 제대로 작동하는지 확인해 봅니다.</li></ul> 원본 기사 링크는 아래와 같습니다. 상세 내용은 원본 기사를 통해 확인하실 수 있습니다. 감사합니다🙏[Source Link] https://generativeai.pub/how-to-run-llama-3-in-visual-studio-code-with-codegpt-18cb105cf9d5

Medium

비쥬얼 스튜디오 코드에서 Llama 3 실행하기

성숙한 사람이 되기 위한 8가지 노력 - 일을 마치고 '시스템 종료'를 할 때마다 의식적으로 스스로에게 묻는 질문이 있습니다. 오늘 나는 어떻게 일 했는가? 충분히 친절했고, 충분히 정확했는가? 의도와 상관없이 다른 사람을 불쾌하게 만든 상황은 없는가?

성숙한 사람이 되기 위한 8가지 노력

일을 마치고 '시스템 종료'를 할 때마다 의식적으로 스스로에게 묻는 질문이 있습니다. 오늘도 나는 부끄럽지 않게 일을 했는가? 충분히 나에게 우아했으며, 남에게 친절했는가? 의도와 상관없이 다른 사람을 불쾌하게 만든 상황은 없었는가? 저는 의식적으로 성숙한 사람이 되기 위해 어떤 노력을 할 수 있을까 고민하고 있습니다. 여기서 '성숙함'이란 자기 주위에서 일어나는 일을 명확히 인식하고 그 일이 일어난 이유와 배경을 이해하며 그 일의 최종 결과에 대해 과도하게 흥분하거나 침울해하지 않는 상태를 의미합니다.

 1.  성숙함은 더 많이 듣고 더 적게 말하세요
 2.  책임을 회피하지 마세요
 3.  덜 따지고 더 많이 협조하세요
 4.  변화를 받아들이세요
 5.  다양한 연령대의 사람과 어울리세요
 6.  버는 것보다 덜 쓰세요
 7.  다른 사람만큼 나를 소중하게 여기세요
 8.  내가 어느새 사회의 잘못된 관행이나 습성에 물들었을지 모른다고 받아들이세요
 9.  낯선 사람에게도 기꺼이 친절을 베푸세요
 10. 읽고 쓰고 공유하고 다른 사람이 성장하도록 도우세요
     
     https://www.redbusbagman.com/waytobegood/

일을 마치고 '시스템 종료'를 할 때마다 의식적으로 스스로에게 묻는 질문이 있습니다. 오늘도 나는 부끄럽지 않게 일을 했는가? 충분히 나에게 우아했으며, 남에게 친절했는가? 의도와 상관없이 다른 사람을 불쾌하게 만든 상황은 없었는가? 저는 의식적으로 성숙한 사람이 되기 위해 어떤 노력을 할 수 있을까 고민하고 있습니다. 여기서 '성숙함'이란 자기 주위에서 일어나는 일을 명확히 인식하고 그 일이 일어난 이유와 배경을 이해하며 그 일의 최종 결과에 대해 과도하게 흥분하거나 침울해하지 않는 상태를 의미합니다. <ol><li>성숙함은 더 많이 듣고 더 적게 말하세요</li><li>책임을 회피하지 마세요</li><li>덜 따지고 더 많이 협조하세요</li><li>변화를 받아들이세요</li><li>다양한 연령대의 사람과 어울리세요</li><li>버는 것보다 덜 쓰세요</li><li>다른 사람만큼 나를 소중하게 여기세요</li><li>내가 어느새 사회의 잘못된 관행이나 습성에 물들었을지 모른다고 받아들이세요</li><li>낯선 사람에게도 기꺼이 친절을 베푸세요</li><li>읽고 쓰고 공유하고 다른 사람이 성장하도록 도우세요 https://www.redbusbagman.com/waytobegood/</li></ol>

REDBUSBAGMAN | 빨간색 광역버스에 백팩을 메고 탑니다

⟪성숙한 사람이 되기 위한 10가지 노력⟫

집에서도 서버를 운영할 수 있을까? 생각은 하지만 실제로 실행하는 사람은 별로 없는 것 같습니다.

집에서 서버를 운영하는 게 가능한가요?

집에서도 서버를 운영할 수 있을까?
생각은 하지만 실제로 실행하는 사람은 별로 없는 것 같습니다.

왜? 몰라서. 귀찮아서. 무서워서.
정전되면 어쩌지?
인터넷 끊어지면 어쩌지?
IP 바뀌면 어쩌지?

커피한잔은 집에서 서버를 운영했습니다.
하루 이틀도 아니고 6년 동안이나.

좋은 컴퓨터도 아니었습니다.
카카오 다닐 때 자취방에서 쓰려고 샀던 데스크톱으로 시작했습니다.

[사진]
2015년 10월. 이 고물 컴퓨터가 몇 년 뒤 커피한잔 서버로 쓰였습니다.

램 16기가짜리 리눅스 데스크톱.
100Mbps 짜리 제일 싸구려 인터넷.
그리고 3만 원짜리 고물 iptime 공유기.
이게 커피한잔 인프라의 전부였습니다.

3년쯤 이렇게 쓰다가 업그레이드를 한 번 했습니다. 램을 좀 넉넉하게 쓰고 싶어서.
램 64기가짜리 데스크톱.
500Mbps 인터넷.
10만 원짜리 공유기.

그럼에도 너무 싸다.
중고등학생들이 게임하려고 쓰는 인프라보다도 열악하지 않을까?(웃음)
하지만 커피한잔 정도의 서비스를 운영하기에는 충분하고도 남았습니다.

이 컴퓨터로 전기 요금이 한 달에 5천 원~1만 원 정도 나왔을 겁니다.
그게 커피한잔 서버 운영비의 전부였습니다.
매달 들어가는 운영비가 거의 없으니 조급해 하지 않고 서비스를 만들어 나갈 수 있었습니다.

세이노의 가르침에 이런 내용이 있습니다.
"당신 스스로 불편함을 감수하고 시간을 투자해 직접 알아보고 결정한다면 언제나 당신의 지출은, 편리함을 택하는 사람들의 지출보다 적게 이루어진다.
내가 이해가 가지 않는 것은 월급 이외에는 특별히 돈 나올 구멍도 없고 그렇다고 해서 자기 계발에 열심이지도 않은 사람들이 돈이 절약되는 불편함보다는 돈을 더 지출해야 하는 편리함을 택하는 경우들이다."

aws를 선택하는 것도 이와 비슷한 고민 아닐까?
저는 기꺼이 불편함을 선택했습니다.

놀라운 비밀은… 사실 그렇게 불편하지도 않았다는 것.
장애도 거의 나지 않았습니다. 오히려 그 기간에 aws 장애가 더 많이 났습니다.
aws 전체 장애가 나서 쿠팡, 배민 같은 주요 서비스들이 다 안 되던 날에 커피한잔만 잘 되는 우스운 일도 있었습니다.

커피한잔도 작년부터는 aws로 이전했습니다.
엄청난 사건이 있었기 때문인데요.
긴 이야기가 될 거라… 다음 글에서 적어보겠습니다.

https://jeho.page/essay/2024/04/29/home-server.html

집에서도 서버를 운영할 수 있을까? 생각은 하지만 실제로 실행하는 사람은 별로 없는 것 같습니다. 왜? 몰라서. 귀찮아서. 무서워서. 정전되면 어쩌지? 인터넷 끊어지면 어쩌지? IP 바뀌면 어쩌지? 커피한잔은 집에서 서버를 운영했습니다. 하루 이틀도 아니고 6년 동안이나. 좋은 컴퓨터도 아니었습니다. 카카오 다닐 때 자취방에서 쓰려고 샀던 데스크톱으로 시작했습니다. [사진] 2015년 10월. 이 고물 컴퓨터가 몇 년 뒤 커피한잔 서버로 쓰였습니다. 램 16기가짜리 리눅스 데스크톱. 100Mbps 짜리 제일 싸구려 인터넷. 그리고 3만 원짜리 고물 iptime 공유기. 이게 커피한잔 인프라의 전부였습니다. 3년쯤 이렇게 쓰다가 업그레이드를 한 번 했습니다. 램을 좀 넉넉하게 쓰고 싶어서. 램 64기가짜리 데스크톱. 500Mbps 인터넷. 10만 원짜리 공유기. 그럼에도 너무 싸다. 중고등학생들이 게임하려고 쓰는 인프라보다도 열악하지 않을까?(웃음) 하지만 커피한잔 정도의 서비스를 운영하기에는 충분하고도 남았습니다. 이 컴퓨터로 전기 요금이 한 달에 5천 원~1만 원 정도 나왔을 겁니다. 그게 커피한잔 서버 운영비의 전부였습니다. 매달 들어가는 운영비가 거의 없으니 조급해 하지 않고 서비스를 만들어 나갈 수 있었습니다. 세이노의 가르침에 이런 내용이 있습니다. "당신 스스로 불편함을 감수하고 시간을 투자해 직접 알아보고 결정한다면 언제나 당신의 지출은, 편리함을 택하는 사람들의 지출보다 적게 이루어진다. 내가 이해가 가지 않는 것은 월급 이외에는 특별히 돈 나올 구멍도 없고 그렇다고 해서 자기 계발에 열심이지도 않은 사람들이 돈이 절약되는 불편함보다는 돈을 더 지출해야 하는 편리함을 택하는 경우들이다." aws를 선택하는 것도 이와 비슷한 고민 아닐까? 저는 기꺼이 불편함을 선택했습니다. 놀라운 비밀은… 사실 그렇게 불편하지도 않았다는 것. 장애도 거의 나지 않았습니다. 오히려 그 기간에 aws 장애가 더 많이 났습니다. aws 전체 장애가 나서 쿠팡, 배민 같은 주요 서비스들이 다 안 되던 날에 커피한잔만 잘 되는 우스운 일도 있었습니다. 커피한잔도 작년부터는 aws로 이전했습니다. 엄청난 사건이 있었기 때문인데요. 긴 이야기가 될 거라… 다음 글에서 적어보겠습니다. https://jeho.page/essay/2024/04/29/home-server.html

K리그 프로그래머

Kakao Tech Meet #5		
		트렌드와 경험 및 노하우를 자주, 지속적으로 공유하며 개발자 여러분과 함께 성장을 도모하고 긴밀한 네트워크를 형성하고자 합니다. 다섯 번째 Kakao Tech Meet에서는 웹 프론트엔드를 주제로 이미지 뷰어 라이브러리, 웹 에디터, 웹뷰 디버깅 등의 이야기를 준비했습니다. 또한 발표에서 못다 한 질문과 이야기를 나눌 수 있도록 패널토의를 진행합니다. 판교역에 연결된 카카오 아지트에서 열리는 이번 기술 세미나에 

제5회 Kakao Tech Meet에 초대합니다!

카카오 공개 기술 세미나 인 Kakao Tech Meet이 4월 11일(목요일) 저녁 7시 카카오 판교 아지트 에서 개최 됩니다. 오프라인 및 온라인 스트리밍 으로 참여가 가능하구요.

이번 세미나의 주제는 아래와 같습니다.
 * 사용자 경험 중심 이미지 뷰어 라이브러리
 * 웹 에디터 개발에 필요한 고민과 신규 에디터 소개
 * 크롬 Devtools를 활용한 나만의 웹뷰 디버깅 환경 만들기

개인적으로는 웹뷰 개발을 하고 있는 만큼 나만의 웹뷰 디버깅 환경 만들기가 관심이 가네요.
프론트엔드 기술 동향을 파악하고, 유용한 정보와 인사이트를 얻을 수 있는 기회가 될 것 같습니다.

https://tech.kakao.com/2024/03/20/kakao-tech-meet-5/

카카오 공개 기술 세미나 인 Kakao Tech Meet이 4월 11일(목요일) 저녁 7시 카카오 판교 아지트 에서 개최 됩니다. 오프라인 및 온라인 스트리밍 으로 참여가 가능하구요. 이번 세미나의 주제는 아래와 같습니다.<ul><li>사용자 경험 중심 이미지 뷰어 라이브러리 </li><li>웹 에디터 개발에 필요한 고민과 신규 에디터 소개</li><li>크롬 Devtools를 활용한 나만의 웹뷰 디버깅 환경 만들기</li></ul> 개인적으로는 웹뷰 개발을 하고 있는 만큼 나만의 웹뷰 디버깅 환경 만들기가 관심이 가네요.프론트엔드 기술 동향을 파악하고, 유용한 정보와 인사이트를 얻을 수 있는 기회가 될 것 같습니다. https://tech.kakao.com/2024/03/20/kakao-tech-meet-5/

tech.kakao.com

개인 독학 자바

순천향대학교 영어영문학과

정연준

안녕하세요, 프론트엔드 엔지니어를 취업준비생입니다.
#프론트엔드 #게임

(주)넥스넷 웹디자인/웹퍼블리셔

Leedayeong

제5회 Kakao Tech Meet 개최

플랫폼

html

javascript

프리랜서

시니어 프론트엔드 개발자

우아한형제들 주문웹프론트개발팀 주문 도메인 (배민스토어, 전국별미)
배달의민족 앱 내 전국별미 서비스 웹뷰 작업
배민상회, 배민문방구, 배민포스, 배민아카데미

프론트개발자

컴퓨터과학과

김의중

패스트캠퍼스 '내 생에 마지막 JavaScript' 강의

아키텍쳐,  자동화, 인프라, 풀스택 등에도 관심이 많습니다.
#개발자

제5회 Kakao Tech Meet 개최

댓글 0

비슷한 게시물

주간 인기 TOP 10

추천 프로필