본문 바로가기

전체 글

코딩 자율학습단 <AI 자율학습 클로드 코드·코덱스 CLI·제미나이 CLI 완전 활용법> 길벗에서 운영하는 코딩 자율학습단 20기로 4주간 진행했다.선정한 도서는 "AI 자율학습 클로드 코드·코덱스 CLI·제미나이 CLI 완전 활용법" 이다. CLI 기반 AI 도구 3대장인 클로드코드, 코덱스, 제미나이의 설치방법부터 기초 명령어, 고급기술 등을 알려준다.클로드코드나 코덱스, 제미나이의 사용방법을 배우면서 명령어나 고급기술들이 모두 비슷하다는 것을 알았다.제미나이의 경우 고급기술에서 다른 CLI AI 도구와 달리 MCP 설정외 Extension 설정을 추가하여 제미나이 멀티모달 에이전트를 풍성하게 사용할 수 있다는 것외에는 비슷했다. 그래도 각 AI 도구들의 기본적인 명령어와 사용방법을 배울 수 있었고 MCP를 설정하고 도구들을 더 잘 활용할 수 있는 고급 설정 들을 배움으로서 단순하 개발 .. 더보기
AI 자율학습 클로드 코드 코덱스 CLI 제미나이 CLI 완전 활용법 요즘 바이브 코딩을 넘어서 AI Agent를 활용하여 개발하는게 일상이 된것 같다.바이브 코딩 얘기가 나올때만 해도 비개발자도 프롬프트 만으로도 웹서비스를 만들 수 있다는게 소재였는데 지금은 개발환경 구축부터 계획, 구현, 테스트까지 AI를 이용하여 할 수 있다는것을 보여준다. 이번에 구매한 책도 이런 흐름에 맞춰서 AI 터미널 도구 3대장인 클로드 코드, 코덱스 CLI, 제미나이 CLI를 소개하고 각각의 도구의 특징과 사용하는 방법에 대해 설명하고 있다. 특히 각 도구별 고급기능 사용방법과 MCP 활용 등 확장하는 방법까지 알려준다.마지막으로 클로드 코드를 이용하여 요구분석 문서(PRD) 작성 -> 실행 계획 및 WBS 작성 -> 개발(구현) -> 테스트 -> 배포 까지 프로젝트 시작단계부터 마지막 .. 더보기
Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 11일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #11일차 댓글 목록이 표시되는 UI 만들기 UI에서 아이콘을 사용하기 위해 fontawesome을 사용한다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com cdn방식으로 사용할 것이므로 cdnjs에서 fontaswome을 검색하여 link를 index.html에 삽입한다. https://cdnjs.com/libraries/font-awesome font-awesome - Libraries.. 더보기
Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 9일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #9일차 페이징 구현하기 현재 작성된 프로그램은 강제로 최신 10개 글만 표시하도록 제한되어 있다. 이번시간에는 페이지를 이동하면서 다른 글들도 확인할 수 있도록 페이징 기능을 구현해보자. 1. 페이징 UI 만들기 function newsFeed () { const newsFeed = getData(NEWS_URL); const newsList = []; newsList.push(''); for (let i = ((store.currentPage - 1) * 10); i < store.currentPage * 10; i++) { newsList.push(` ${ newsFeed[i].title } (${ newsFeed[i].commen.. 더보기
Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 10일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #10일차 복잡한 UI 구현을 위한 준비 작업 - 템플릿 코드를 명확하게 하기 위해 newsFeed의 출력방식을 template로 HTML 구조를 문자열로 담고 이를 replace하는 방식으로 변경해 보자. 1. template 변수를 만들고 HTML 구조를 문자열로 담는다. 반복적인 출력을 위한 뉴스 목록은 {{__news_feed__}} 라는 임의의 문자열로 만들고, 이전페이지번호와 다음페이지번호는 각각 {{__prev_page__}}와 {{__next_page__}}로 정한다. function newsFeed () { const newsFeed = getData(NEWS_URL); const newsList = []; let tem.. 더보기
Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 8일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #8일차 라우터? 화면 처리기 만들기 이전 시간에 간단하게 목록과 내용보는 화면을 구현했다. 그런데 목록에서 제목을 클릭하면 아래 내용(?)이 표시되었고, 계속 목록 제목을 클릭하면 클릭한 제목이 하단에 순차적으로 보여지고 있다. 이번시간에는 화면에 목록과 내용을 따로 표시하기로 하자. 먼저 내용 표시하는 부분이 DOM api가 아닌 지난 시간에 배운 HTML 문자열로 변경하는 작업 부터 해보자. window.addEventListener('hashchange', function () { const id = location.hash.substr(1); const newsContent = getData(CONTENT_URL.replace(.. 더보기
Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 7일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #7일차 문자열을 활용한 HTML 다루기 UI를 만들기 위해 DOM객체를 사용하였다.목록을 위해 를 만들어서 글 전체를 감싸고 각각의 글은 안에 그리고 링크를 위해 를 만들었다.이처럼 DOM api를 이용해서 UI(HTML)를 만들면 이해하기 불편하다. 게다가 디자인적인 스타일을 위해 혹은 기능이 추가되거나 확장 되면 사용방법이 복잡해지고 이해하기 어렵다. 그래서 이를 해결하기 위해 문자열로 태그를 작성해서 사용하는 것으로 개선해보자. 아래는 문자열을 활용하여 기존의 DOM Element를 수정한 것이다. for (let i = 0; i < 10; i++) { // const li = document.createElement('li');.. 더보기
Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 6일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #6일차 두 개의 화면을 가진 웹 앱 이전시간에 해커뉴스 api를 통해 뉴스를 가져와서 화면에 출력하는 것을 했다. 이번시간에는 이전시간에 이어서 가져온 목록에 앵커 태그를 추가하여 해당 글의 내용을 해커뉴스 api에서 가져와서 제목을 표시 하자. 1. 앵커 태글 추가하기 for (let i = 0; i < 10; i++) { const li = document.createElement('li'); const a = document.createElement('a'); a.href = `#`; a.innerHTML = `${ newsFeed[i].title } (${ newsFeed[i].comments_count })`; li.appen.. 더보기

티스토리툴바