본문 바로가기

전체 글

Babel과 Webpack 그리고 Vite +a https://news.hada.io/topic?id=21430 위 글을 읽고 Next.js15.1+ 부터는 Vercel에 묶여있다는 말에 그게 무엇인가! 왜 Vite를 못쓴다고 난리인지 찾아보는 과정에서 번들링, 트랜스파일, 빌드 개념을 다시 잡았습니다. IE와 같은 구형 브라우저는 JavaScript의 최신 표준인 ESM(ECMAScript Modules)을 지원하지 않습니다. 또한 ES6 이상의 문법(예: 화살표 함수, 지수 연산자 등)도 제대로 동작하지 않기 때문에, 이러한 브라우저 환경에서 최신 문법으로 작성한 코드를 실행하려면 추가적인 개발 환경 설정이 필요합니다.대부분의 현대 브라우저는 ESM을 지원하지만, 여전히 실무에서는 모듈 로더나 번들러를 사용하는 것이 일반적입니다. 특히 다양한 환경.. 더보기
[2025 US:CODE 해커톤] 팀 갈릭홀릭 우수상 후기 1. 참가 해커톤 소개 의성군과 Google for Developers가 후원하는 US:CODE 해커톤에 참가했다.한창 Gemini CLI가 나온다는 소식에 Gemini에 대한 관심이 컸었고 크레딧도 무료로 제공하는 점이 매력적이었다.게다가 중요한건 … 참가비가 없었다! 2. 참가 이유AI 과도기인 지금 AI개발자를 만나서 서비스를 만들어보고 싶었다.해커톤에 나갈때마다 안해본 기술들을 사용하게 되는데, 리프레쉬 할 수 있는 그런 경험이 필요했다.내 한계를 다시 가늠해 보고 싶었다. 나는 얼마나 발전했을까? 궁금했다!취준이 길어지니까 의욕이 떨어져서 스스로 동기부여가 필요했다.지난번 수상이 운인지, 실력인지 궁금해서 검증하고 싶었다. 3. 팀 빌딩으레 해커톤이 그렇듯, US:CODE 해커톤도 참가자들을 디.. 더보기
PR Agent 도입해서 혼자서 코드 리뷰 하기 (aka. 혼자여도 코드리뷰가 하고싶어!) 0. 목적사이드 프로젝트 프론트엔드가 저 혼자지만 코드리뷰가 하고싶었어요..우리는 AI가 있기때문에 혼자서 북치고 장구치고 다 할수 있습니다. 그렇게 찾아냈습니다! PR 생성을 도와주고 코드리뷰도 해주는 PR-Agent 오픈소스! https://github.com/qodo-ai/pr-agent GitHub - qodo-ai/pr-agent: 🚀 PR-Agent (Qodo Merge open-source): An AI-Powered 🤖 Tool for Automated Pull Request Analysis,🚀 PR-Agent (Qodo Merge open-source): An AI-Powered 🤖 Tool for Automated Pull Request Analysis, Feedback, Su.. 더보기
서버컴포넌트와 클라이언트 컴포넌트 분리를 통해 성능 최적화 (with.Next.js) 문제발견로딩페이지의 LCP 최대 콘텐츠 페인트 속도가 약 5초로 Core Web Vitals 기준 Poor(매우구림) 수준이었다.또한 로딩 프로그래스바가 없어서, 리프레쉬토큰을 재발급 할 때, 사용자가 알 지 못한다.개선 목표로딩속도를 최적화 하기위해, 메인페이지(클라이언트 컴포넌트)를 서버컴포넌트와 클라이언트 컴포넌트로 분리하자!!로딩프로그래스 바를 추가하여 CLS (누적 레이아웃 시프트)를 최소화하자!메인 페이지SSR로 페칭하는 부분이 있음,페칭하고 전역상태로 저장하는 부분이 있음이를 분리 할 수는 없을까?이유 : fetching데이터를 외부에서 가져오고, useEffect로 client상태는 분리하자.결과 기존코드 //[channelID]/[sessionCode]/page.tsx const r.. 더보기
서버컴포넌트와 클라이언트 컴포넌트 잘 사용하기 (with Next.js) 1. Next.js의 서버 컴포넌트와 클라이언트 컴포넌트서버 컴포넌트서버 컴포넌트란 React에서 선택적으로 서버에 캐시하여 렌더링할 수 있는 컴포넌트다. Next.js에서는 라우트 세그먼트별로 세분화하여 부분 렌더링과 스트리밍이 가능하도록 설계되어 있다. Next.js에서 서버 컴포넌트를 렌더링하는 전략은 다음 세 가지가 있다.정적 렌더링: 라우트가 빌드 타임에 미리 렌더링되거나 백그라운드에서 재검증된다.동적 렌더링: 라우트가 사용자의 각 요청 타임에 맞춰 렌더링된다.스트리밍: 서버에서 생성된 UI가 준비되는 대로 점진적으로 클라이언트로 전송된다. 이를 통해 사용자는 전체 콘텐츠가 로딩되기 전에 일부 콘텐츠를 미리 볼 수 있다. (Next.js의 앱 라우터 기본값)서버컴포넌트의 장점 : 클라이언트 번들.. 더보기
Node.js 패키지 매니저 선택(npm& yarn & pnpm 비교) 패키지 매니저란?패키지 매니저는 애플리케이션의 의존적인 패키지를 관리해 준다.라이브러리의 설치, 삭제, 업데이트등을 도와주고 여러 dependencies 환경에 설치하고 관리할 수 있게 해 준다.0. 시작하며 대표적인 패키지 매니저로는 npm, pnpm, yarn (yarnBerry)가 있다.오늘은 이 세 가지 패키지 매니저의 차이를 알아보고 각각의 장단점을 알아보고자 한다.1. NPM장점Node.js 설치 시 기존으로 함께 제공되는 공식 패키지 매니저200만 개 이상의 패키지를 보유한 세계 최대 오픈소스 패키지 저장소단점설치속도가 느리다- 의존성 하나하나를 실제로 node_modules 폴더에 복사한다.- 특히 프로젝트가 커질수록 node_modules의 파일수가 증가하여 수만 개 이상이 되기도 한다... 더보기
React의 state는 동기인가 비동기인가. with 이벤트 루프 🤔 시작하며결국 시작은 우리가 처음 리액트를 배울때 헷갈렸던 가장 기초적인 예제에서 시작한다. const handleClick = () => { setCount(count + 1); console.log(count); // 이전 값이 찍힘}; 왜 여기서 이전 값이 찍히는가 ? 왜 바로 count+1된 값이 찍히지 않는걸까? state는 언제 업데이트 되는걸까?이에 대한 답을 알아보도록 하겠다.📚 동기와 비동기 간단 정리동기(sync) : 실행순서가 보장되는 것을 뜻한다. 호출 시 결과를 바로 확인할 수 있다. (const, let, for, if, function, console.log() 기본적으로 모두 js의 함수는 모두 동기이다.) 비동기(async) : 실행순서가 보장되지 않는것을 뜻한다.. 더보기
Cursor 사용 후기: 초보자도 웹사이트 만들기 가능한 AI 코드 에디터 체험기 한줄요약 : 세시간 반동안 Cursor로 이거만듬 삼행시로 행복한 시간 0. 발단코파일럿과 같은 AI 어시스턴트가 생산성을 올려준다는 요즘, 저는 코드는 직접 쳐야 늘지! 라는 사람입니다. 주변의 무수한 코파일럿 추천에도 꿋꿋이 경험치가 쌓일 때까지 쓰지 않겠다는 마음이었는데요.하지만 너무 궁금했습니다! 너무 써보고 싶어! 궁금해! 대체 왜 다들 그렇게 열광하는가?! 그래서   네, Cursor, AI code editor 결국 찍. 먹 시작합니다.  1. 개요 : Cursor란? 요즘 핫 한 AI를 활용한 코드 에디터입니다.탭과 간단한 프롬프트를 통해 코드를 짜주며, 개발자의 코드 베이스를 읽고 그에 맞춰 응답한다고 합니다. 2. Cursor랑 다른 AI 랑 가격비교 completions란?Comple.. 더보기

티스토리툴바