benscript 님의 블로그

2024년 말 현재 생성형 AI는 기업들의 개발 생산성을 비약적으로 향상시키는 도구로 각광받고 있습니다. 국내 IDC 조사에 따르면 한국 기업의 72%가 이미 생성형 AI를 업무에 활용 중이며, 도입 기업의 78%는 생산성 향상을 경험했다고 답했습니다. GPT-4와 같은 대형 언어모델(LLM) 기반 서비스나 GitHub Copilot 같은 코딩 보조 툴을 도입해 웹 개발, 백엔드, 데이터 분석, 문서 작성 등 다양한 분야에서 효율화를 꾀하는 기업들이 늘고 있습니다. 이하에서는 실제 기업들의 사례를 살펴보겠습니다.동원그룹 – 자체 GPT 플랫폼 ‘동원GPT’동원그룹은 2024년 4월 OpenAI GPT-4를 기반으로 한 자체 AI 챗봇 플랫폼 ‘동원GPT’를 사내에 도입했습니다. 동원GPT는 문서 작성, ..

SpreadJS 여러 기능을 테스트를 하는 중 이번에는 setDataSource() 메서드로 JSON 데이터 바인딩하는 기능에 대해서 보았습니다.1. 기본 바인딩 구조SpreadJS에서 JSON 데이터를 시트에 바인딩하려면 워크북 생성 → 시트 지정 → `setDataSource()` 순서로 연결하면 됩니다.예제:딱히 설정할 게 없고, JSON 객체의 key가 열로 자동 매핑됩니다. 2. 열 수동 설정자동으로 열이 생성되는 게 싫다면 autoGenerateColumns를 꺼두고 보여줄 열만 직접 바인딩할 수 있습니다. sheet.autoGenerateColumns = false;sheet.setDataSource(data); // 데이터 먼저 바인딩sheet.bindColumns([ { name:..

웹에서 Excel 파일을 불러오고 저장하는 니즈가 있어 SpreadJS의 엑셀 import/export 기능을 살펴보았습니다.일반 엑셀 유형 뿐만 아니라 자체적으로 지원하는 sjs, ssjson 등도 있더라구용 일단 설정 방법은 먼저 헤더 섹션에 gc.spread.sheets.io를 추가 설정해줘야 합니다.🔧 설정 방법 (HTML) 그 다음 spreadjs 컨트롤을 호스팅할 div 요소와 엑셀 불러오기/내보내기 이벤트를 불러올 버튼을 추가해줍니다. 🚀 JavaScript 설정📦 SpreadJS 초기화그 다음은 GC.Spread.Sheets.Workbook의 인스턴스를 생성해줍니다.var spread;window.onload = function () { sprea..

https://youtu.be/BoDJ0A1AVPg?si=3Cid_WIh6ZXa1wT_ 영상을 요약했습니다.1. AI 기반 통합 개발 환경(IDE)Cursor: AI 기능이 내장된 코드 편집기로, 자동 완성, 리팩토링, 코드 설명 등 다양한 기능을 제공합니다.Windsurf: AI를 활용하여 코드 작성과 디버깅을 지원하는 차세대 IDE입니다.2. 코드 생성 및 보조 도구GitHub Copilot: OpenAI의 기술을 기반으로 한 코드 자동 완성 도구로, 개발자의 생산성을 향상시킵니다.Tabnine: 다양한 프로그래밍 언어를 지원하는 AI 코드 보조 도구로, 실시간 코드 제안을 제공합니다.3. 테스트 자동화 및 코드 품질 향상 도구CodiumAI: 기존 코드를 분석하여 자동으로 테스트 케이스를 생성해주는..

브라우저에서 엑셀과 같은 기능 구현에 대한 니즈가 있어 찾던 중 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.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

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, Server-Side Rendering)이 각광받고 있으며 SSR 트렌드 이전에는 클라이언트 사이드 렌더링(CSR, Client-Side Rendering)이 있었습니다. 이번 글에서는 이 두 가지 렌더링 방식의 차이점, 장단점, 그리고 어떤 상황에서 적합한지에 대해 알아보겠습니다.1. 서버 사이드 렌더링(SSR)란?서버 사이드 렌더링(SSR)은 웹 페이지의 HTML을 서버에서 생성한 후, 클라이언트(브라우저)로 전송하는 방식입니다.📌 SSR 동작 방식사용자가 웹사이트에 접속하면 요청을 서버로 보냅니다.서버에서 HTML을 완전히 구성한 후 클라이언트에게 반환합니다.브라우저가 받은 ..

최근 프런트엔드 개발에서 Next.js가 큰 주목을 받고 있습니다. 이번 글에서는 Next.js의 등장 배경부터 개념, 설치 방법, 주요 특징, 그리고 최신 버전인 Next.js 15에서 추가된 기능까지 한 번에 정리해 보겠습니다. Next.js의 등장 배경과거 웹 개발은 주로 서버 측에서 이루어졌지만, 인터랙션이 많은 웹 환경이 증가하면서 클라이언트 측 처리가 중요해졌습니다. 이에 등장한 Client Side Rendering(CSR)은 성능과 SEO 측면에서 한계를 보였고, 이를 보완하기 위해 서버에서 페이지를 만들어 보내는 Server Side Rendering(SSR)이 필요해졌습니다. 이런 요구사항을 충족하기 위해 등장한 것이 바로 Next.js입니다. Next.js란?Next.js는 풀스택 웹..