분류 전체보기 322

[VSCode Extension] AI 기반 코드 어시스턴트 - Continue와 Cline

✅ Cline vs. Continue 요점 비교항목ContinueCline🧠 주요 기능대화형 AI 코드 어시스턴트 (Chat + 코드 작성·수정)계획-실행 기반 작업 자동화 (명령어 실행, 파일 생성 등)🔄 인터페이스사이드바 기반 GPT 인터페이스명령어 기반, 실행 로그 중심🧩 모델 지원GPT-4, Claude, Llama 등 다양하게 설정 가능동일, Anthropic/Claude 연동에 강점⚙️ 특징코드 맥락 이해 + 편한 사용성복잡한 자동화 작업에 더 강함🛠️ 활용 예함수 설명, 리팩터링, 디버깅파일 생성, 테스트 작성, 리포 구조 수정💻 설치VS Code 확장으로 설치VS Code 확장으로 설치 (GitHub 오픈소스) 🔍 핵심 차이Continue: "내가 물어볼게, 너 도와줘" → 채팅..

AI 2025.05.20

최신 ECMAScript 요약

최신 ECMAScript 버전 요약:ECMAScript 2024 (ES2024): 미발표, 현재는 그 기능이 어떻게 될지에 대한 제안들이 논의되고 있는 상태ECMAScript 2023 (ES2023): ECMAScript 2023은 2023년 6월에 발표ECMAScript 2022 (ES2022): 주요 기능으로는 top-level await와 class fields가 포함ECMAScript 2021 (ES2021): 새로운 배열 메서드인 Array.prototype.at(), 논리적 연산자 &&=, ||=, ??= 등을 포함ECMAScript 2023 (ES2023) 주요 특징Array.prototype.toSorted(), toSpliced(), toReversed(), with(): 배열을 수정하지..

Web Vitals란?

Web Vitals는 구글이 정의한 웹사이트 사용자 경험(UX) 품질을 측정하는 핵심 지표웹페이지의 로딩 속도, 인터랙션 반응 속도, 시각적 안정성을 평가해서 SEO(검색엔진 최적화)와 사용자 경험을 개선하는 데 도움을 줌.✔ Core Web Vitals (핵심 지표 3가지)현재 가장 중요한 Web Vitals 지표는 LCP, FID, CLS✔ 각 Web Vitals 최적화 방법① LCP (Largest Contentful Paint) → 로딩 속도 최적화🚀 문제: 페이지에서 가장 큰 콘텐츠가 늦게 로드되면 사용자 체감 속도가 느려짐✅ 해결 방법:이미지 최적화 → WebP 사용, 크기 조정, loading="lazy" 적용Critical Rendering Path 최적화 → preload로 중요한 리소..

Web 2025.02.12

SSG (Static Site Generation)란?

SSG(Static Site Generation)는 웹사이트를 빌드할 때 미리 HTML 파일을 생성하여 제공하는 방식서버에서 동적으로 HTML을 생성하는 SSR(Server-Side Rendering)과 달리, SSG는 정적인 HTML을 미리 만들어서 배포 속도가 빠르고 서버 부하가 적은 것이 특징✔ SSG의 특징✅ 미리 생성된 정적 HTML 제공 → 빠른 로딩 속도✅ CDN 캐싱 최적화 가능 → 트래픽이 많아도 안정적✅ 서버가 필요 없거나 최소한의 리소스만 사용✅ 데이터가 자주 바뀌지 않는 페이지에 적합✔ SSG vs SSR vs CSR 비교✔ SSG를 지원하는 대표적인 프레임워크Next.js (getStaticProps, getStaticPaths 활용)Gatsby (GraphQL로 데이터 페칭)Hu..

Web 2025.02.12

Web Performance 최적화 방법

1. 코드 최적화① 불필요한 렌더링 최소화React의 경우, useMemo, useCallback, React.memo를 활용해 불필요한 리렌더링 방지Virtual DOM 업데이트 최소화② 코드 분할 (Code Splitting)Webpack의 Dynamic Import(import()), React의 React.lazy를 사용하여 필요한 부분만 로드예시 (React Lazy Loading):const LazyComponent = React.lazy(() => import('./LazyComponent'));③ Tree Shaking 적용Webpack, Rollup 등을 활용해 사용하지 않는 코드 제거ES6 모듈을 사용하면 자동으로 Tree Shaking 적용됨2. 네트워크 최적화④ 이미지 최적화WebP..

Web 2025.02.12

WSL2 Ubuntu 버전 18.04에서 22.04로 올리기

WSL 버전 확인powershell에서 진행wsl -l -v  WSL 버전 업데이트18.04 to 20.04wsl에서 순차적으로 진행sudo apt purge snapdsudo apt updatesudo apt upgradesudo apt install update-manager-coresudo do-release-upgrade컴퓨터 재시작lsb_release -a20.04 to 22.04wsl에서 순차적으로 진행 (위에서 수행했던 것을 다시 반복)sudo apt updatesudo apt upgradesudo do-release-upgrade컴퓨터 재시작lsb_release -a 출처https://www.benjaminrancourt.ca/how-to-update-ubuntu-in-wsl-from-18..

기타 2024.06.11