전체 글143 클로드 AI를 이용해 만들어 본 이미지 번역 브라우저 확장앱 최근 AI 툴들을 써보면서 아예 처음부터 만들어 볼 수 있을까? 싶어서 클로드를 이용해 만들어보기로 했다. 위의 이미지처럼 처음에는 그냥 브라우저 확장앱을 만들어보고 싶었다.그래서 프롬프트도 자세하게 지정하지 않고 그냥 생각나는대로 적어보았다.그랬더니 google vision과 traslation API를 이용하는 확장앱을 간단하게 만들어주었다. 그리고 몇 번의 에러 수정과 개선을 통해 그럭저럭 만족할 만한 앱이 만들어졌다.여기서 내가 한 것이라고는 클로드에 프롬프트를 주고 구글에서 API를 키를 받아온 것 밖에는 없다. 위는 UI를 조금 개선하고 원본 텍스트도 나오게끔 수정한 버전이다.이미지에 마우스를 갖다대기만 하면 팝업창이 떠서 실시간으로 번역해준다.영어, 일본어 상관없다.심지어 한글도 원본 그.. 2025. 3. 12. 스벨트 자바스크립트 문법 점검 좀더 진도를 나가기 전에 자바스크립트 문법 몇 가지를 확인하고 가야 진도가 편해질 것 같다.왜냐하면 제대로 자바스크립트 문법을 공부한 적이 없으므로...우선 예제에 자주 등장하는 3가지. 1. let함수 내부나 특정 블록에서만 사용할 변수를 선언할 때 사용for 루프나 if, switch 같은 조건문 내에서 특정 조건에 따른 변수 선언 시 사용let x = 1;if (x === 1) { let x = 2; // 새로운 블록 범위에서 선언 console.log(x); // 2}console.log(x); // 1 2. const프로그램 내의 상수값을 저장할 때 사용const PI = 3.14;if (true) { const PI = 2.71; // 새로운 블록 범위에서 선언 console.log(P.. 2025. 3. 11. 스벨트 첫 프로젝트 만들기 프로젝트 만드는게 뭔가 했더니 기본적인 템플릿을 내 로컬환경에 복제하는 것을 말했다.스벨트 공홈에서 다운로드 받는 방법도 있지만 깃허브에서 그대로 복제하는 방법이 더 편한다. 여기서부터는 VSC에서 새 터미널을 열고 하는 작업이다. 1. degit 설치degit 이란 명령을 사용하는데 깃허브의 파일들을 현재 경로로 복제하는 것이다.한번만 실행하면 되고, 전역으로 사용할 수 있게 해주는 것이다.npm install -g degit 여기서 잠깐!npm 이란 뭐지? npm(Node Package Manager)은 Node.js와 함께 설치되는 자바스크립트 패키지 매니저로, Node.js 프로젝트에서 필요한 패키지(모듈)를 설치, 관리, 삭제할 수 있는 도구다. 앞서 브라우저가 아닌 환경에서도 자바스크립트.. 2025. 3. 9. 스벨트 로컬개발환경 구축하기 이전에 다른 교재같은 것을 봤을 때 Node.js 를 사용하는 것들이 많았는데 사실 뭔지도 모르고 그냥 예제 따라하기 해봤던 기억이 있다. 지금 내 노트북에도 왠지 모르지만 Node.js는 설치되어 있다.그런데, 제이펍 출판사의 책을 읽으면서 새삼 알게되었다. Node.js란 브라우저 외의 환경에서도 자바스크립트를 실행할 수 있게 해주는 런타임도구라고.일단 스벨트가 실행하는데 Node.js가 필요하다는 정도만 알면 된다. Node.js — 어디서든 JavaScript를 실행하세요 Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org Node.js 설치한.. 2025. 3. 9. 스벨트(Svelte)란? 요즘 웹개발 시 React를 많이 쓴다고 해서 나도 한번 배워볼까? 싶었지만 취미로 웹개발하는데 트렌드 쫓아가기도 힘들고 어렵다는 얘기도 있었고... 그러던 중 우연히 제이펍 출판사의 이벤트에 당첨되어 아무거나 받고 싶은 책 하나 고르라길래 호기심에 이 책을 선택함. 이유는 단 하나 "배우기 쉽대!"잘은 모르겠지만 쉽게 배우고 쓰는 프레임워크?순수 자바스크립트의 기본문법을 그대로 사용해 코딩할 수 있는 장점이 있단다. 리치 해리스가 2016년 처음 출시한 오픈소스로 2019년 3번째 버전이 나오면서 주목받기 시작. "Frameworks without the framework" 이라는 철학을 가짐. 간단한 문법을 보려면 스벨트 공홈에서 Playground로 가면 간단한 테스트 해볼 수 있음 Svelte .. 2025. 3. 9. (팁) 그누보드 게시판 첨부파일 용량 조정하기 그누보드 관리자 모드에 보면 최대가 32메가까지 첨부파일 용량이 정해져 있다. 직접 서버를 운영하면 php.ini 파일을 건드리면 되지만 보통은 호스팅을 받으므로 쉽지 않다.그래도 방법은 있는데 간단하게 .htaccess 파일을 root에 추가해주면 끝난다. 그누보드 - 파일 업로드 용량 마음대로 조절 하는 법 > 그누4 팁자료실 (sir.kr) SIR" data-og-description="서버를 직접 운영 하지 않는 분들(호스팅계정이용자)이 대부분 많으십니다. 호스팅 계정을 이용하는 분들은 php.ini에 접근할 수 없기 때문에 용량제한을 할수가 없습니다. 더군다나 호스" data-og-host="sir.kr" data-og-source-url="https://sir.kr/g4_tiptech/3288.. 2024. 5. 29. (팁) 그누보드 새로운 폴더에 index.php 추가하기 그누보드 사용 중 잊어버릴 듯한 팁을 모아두면 좋을 것 같아 카테고리를 만들었다. 그누보드를 거의 사용해보지 않아 뭔가 해보려고 하면 찾기도 힘들고. 그누보드 폴더 말고 새로운 폴더를 생성 후에 그 안에 index.php 넣는다면 어떻게 출력하게 할까? 그누보드 QA - 최신글 관련 문의드립니다. (sir.kr)./ (${DOCUMENT_ROOT})├── common.php├── index.php└── test ├── _common.php └── index.php test 디렉토리의 소스는 다음과 같이 구성되어야 합니다. test/_common.php test/index.php 2024. 5. 29. 프론트엔드 성능 최적화 가이드 프론트엔드 성능 최적화 가이드 수강생 2천 명이 선택한 인프런 인기 강의 다년간의 컨설팅과 강의 노하우를 담았다! 4가지 실전 서비스로 배우는 웹 성능 최적화 기법 '웹 성능 최적화'는 프론트엔드 개발자라면 반드시 고민해야 하는 이슈다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르고, 기법도 매우 다양하기에 개발 중인 서비스 특성에 맞게 커스터마이징하는 능력이 중요하다. 저자는 수많은 기업의 웹 서비스 성능을 컨설팅하고, 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등 강의 플랫폼에서 최적화 및 개발 강의를 진행한 경험을 책에 고스란히 녹여 냈다. '성능 최적화' 주제를 효과적으로 배우는 데 이론보다는 실습이 중요함을 강조하며 현장감 있게 구성했다. 이 책은 실생활에서 흔히 개발하는 4.. 2023. 1. 11. JQuery 호환성 확보 JQuery 2.x 기반으로 작업을 했더니 몇몇 기능이 안된다는 문의가 들어왔다. 아무래도 이용 중인 브라우저 버전이 낮아서 그럴 것 같아서 호환성 문제를 찾아보니 역시나 JQuery 2.x에서 IE8 이하를 지원하지 않아서 발생하는 문제같다. 마이그레이션을 설치하면 된다고 하여 설치해 보았다. https://github.com/jquery/jquery-migrate/#readme 일단 클릭해도 드롭다운메뉴가 나오지 않는 문제, 카트 버튼을 눌러도 카트에 담았습니다...라는 경고창이 안뜨는 문제는 해결. 아래의 코드도 삽입해서 버전별로 분기하도록 처리. 2016. 5. 25. 이전 1 2 3 4 ··· 16 다음
