본문 바로가기

전체 글

 (79)
2025년 개발자가 알아야 할 AI 툴 https://youtu.be/BoDJ0A1AVPg?si=3Cid_WIh6ZXa1wT_ 영상을 요약했습니다.1. AI 기반 통합 개발 환경(IDE)Cursor: AI 기능이 내장된 코드 편집기로, 자동 완성, 리팩토링, 코드 설명 등 다양한 기능을 제공합니다.Windsurf: AI를 활용하여 코드 작성과 디버깅을 지원하는 차세대 IDE입니다.2. 코드 생성 및 보조 도구GitHub Copilot: OpenAI의 기술을 기반으로 한 코드 자동 완성 도구로, 개발자의 생산성을 향상시킵니다.Tabnine: 다양한 프로그래밍 언어를 지원하는 AI 코드 보조 도구로, 실시간 코드 제안을 제공합니다.3. 테스트 자동화 및 코드 품질 향상 도구CodiumAI: 기존 코드를 분석하여 자동으로 테스트 케이스를 생성해주는..
웹 브라우저에서 엑셀? 구현하기 - SpreadJS 브라우저에서 엑셀과 같은 기능 구현에 대한 니즈가 있어 찾던 중 SpreadJS에 대해 알게 되어 공부해보았습니다. 처음에는 엑셀 기능을 JS로 구현할 수 있다는 말에 과연이라는 생각이 들었는데 막상 써보니까 나쁘지 않더라구요 공식 홈페이지를 보니 그냥 엑셀 웹버전이고 필터, 차트, 수식 설정도 있구요 공식 문서에 기본 예제에 그냥 복붙하니 금방 구현 가능했어요 ㅋㅋ 단순하게 html 에 호스팅할 div 태그 설정해주고 WorkBook 인스턴스 생성하면 워크북이 만들어집니다setValue 는 데이터 할당해주는 메서드인 거 같습니당https://demo.mescius.co.kr/spreadjs/learn-spreadjs/features/workbook/initialization/purejs Spread ..
소통을 잘하는 개발자들의 습관 커뮤니케이션 잘하는 개발자의 4가지 습관 | 인프콘2023 에 대한 요약 글입니다!🧠 스펙 구현형 vs 문제 해결형 개발자주로 개발자를 두 가지 유형으로 구분합니다:스펙 구현형 개발자: 주어진 요구사항(스펙)을 그대로 구현하는 데 집중하며, 협업 시 "그건 안 돼요"와 같은 단호한 표현을 사용합니다. 이는 개발 용어에 익숙하지 않은 타 직군과의 소통에서 오해를 불러일으킬 수 있습니다.문제 해결형 개발자: 요구사항의 배경과 의도를 파악하려 노력하며, 단순히 불가능하다고 말하기보다는 대안을 제시하고 문제 해결에 집중합니다.이러한 구분은 개발자가 협업 과정에서 어떤 태도를 취해야 하는지를 명확히 보여줍니다.✅ 커뮤니케이션 잘하는 개발자의 4가지 습관해결하려는 문제와 의도에 대해 묻는다요구사항을 받았을 때, ..
nuxt 에서 cdn 추가하는 방법 nuxt 간단하게 테스트하면서 CDN 을 추가해야 하는 일이 생겼습니다..(프레임워크 종류들 너무 많아서 따라가기 힘드네요 증말..) 암튼 nuxt.config.js 에 head 설정을 주어서 아래 코드와 같이 간단하게 넣을 수 있습니당export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://awesome-lib.js' } ], link: [ { rel: 'stylesheet', href: 'https://awesome-lib.css' } ], } }}) 링크 : https://nuxt.com/docs/api/nuxt-config#head
📌 프론트엔드 프레임워크의 주요 문제점 (Pain Points) state of javascript 2024 리포트를 요약한 글입니다.State of JavaScript 2024 조사에서는 프론트엔드 개발자들이 현재 사용하는 프레임워크에서 겪는 주요 문제점(Pain Points)에 대해 분석했습니다.1️⃣ 번들 크기(Bundle Size) 문제많은 프레임워크가 기본적으로 포함하는 코드 크기가 커서 앱 로딩 속도를 저하시킴.React, Angular 같은 대형 프레임워크는 필요하지 않은 기능까지 포함될 가능성이 높음.최근 경량 프레임워크(예: Svelte, SolidJS, Qwik)가 인기를 끄는 이유 중 하나.💡 해결 방법:✅ 트리 쉐이킹(Tree Shaking) 및 코드 스플리팅(Code Splitting) 적극 활용.✅ Vite, esbuild 같은 경량 빌드 ..
서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR) 비교 웹 애플리케이션을 개발할 때 중요한 결정 중 하나는 렌더링 방식을 선택하는 것입니다. 최근에는 서버 사이드 렌더링(SSR, Server-Side Rendering)이 각광받고 있으며 SSR 트렌드 이전에는 클라이언트 사이드 렌더링(CSR, Client-Side Rendering)이 있었습니다. 이번 글에서는 이 두 가지 렌더링 방식의 차이점, 장단점, 그리고 어떤 상황에서 적합한지에 대해 알아보겠습니다.1. 서버 사이드 렌더링(SSR)란?서버 사이드 렌더링(SSR)은 웹 페이지의 HTML을 서버에서 생성한 후, 클라이언트(브라우저)로 전송하는 방식입니다.📌 SSR 동작 방식사용자가 웹사이트에 접속하면 요청을 서버로 보냅니다.서버에서 HTML을 완전히 구성한 후 클라이언트에게 반환합니다.브라우저가 받은 ..
Next.js 알아보기: 개념부터 최신 기능까지 최근 프런트엔드 개발에서 Next.js가 큰 주목을 받고 있습니다. 이번 글에서는 Next.js의 등장 배경부터 개념, 설치 방법, 주요 특징, 그리고 최신 버전인 Next.js 15에서 추가된 기능까지 한 번에 정리해 보겠습니다. Next.js의 등장 배경과거 웹 개발은 주로 서버 측에서 이루어졌지만, 인터랙션이 많은 웹 환경이 증가하면서 클라이언트 측 처리가 중요해졌습니다. 이에 등장한 Client Side Rendering(CSR)은 성능과 SEO 측면에서 한계를 보였고, 이를 보완하기 위해 서버에서 페이지를 만들어 보내는 Server Side Rendering(SSR)이 필요해졌습니다. 이런 요구사항을 충족하기 위해 등장한 것이 바로 Next.js입니다. Next.js란?Next.js는 풀스택 웹..

티스토리툴바