본문 바로가기

전체 글50

Gemini CLI와 Notion MCP 연결하기 도커에서 gemini cli를 실행 시켰으니 이제 notion mcp와 연결하려고 한다.이렇게 연결 후 cli와 나눈 기획 / 개발 계획이나 디렉토리 등을 notion에 문서화 하기 위함이다. 1. 노션 MCP 키를 발급한다.https://app.notion.com/developers/connections Notion | Where teams and agents work togetherA collaborative AI workspace, built on your company context. Build and orchestrate agents right alongside your team's projects, meetings, and connected apps.app.notion.com위 사이트에서 연결.. 2026. 10. 4.
[window] Docker에 gemini cli 설치하기 Gemini와 기획 -> 노션에 저장 -> 코드 검증 및 컨펌 등 QA 받기 자동화 로직을 구현하고 있다.크롬 확장 프로그램이나 다른 프로그램을 사용하지 않고 MCP만으로 진행하기에는 google AI와 Antigravity를 이용하는게 가장 원활하고 경제적으로 사용 할 수 있을 것 같아 선정했다. 근데 gemini pro와 cli는 다른..결제 수단이어서 결국 antigravity로 설정했지만.. 먼저 내 로컬 컴퓨터에는 노드가 설치 돼 있지 않아 도커에 gemini cli를 설치해준다.로컬 개발 폴더 내에 docker-tools 폴더를 새로 만들어 앞으로 도커 관련 관리 항목은 여기서 설정할거다. 도커에 gemini 설치하기 1. Dockerfile파일 생성 후 gemini 설치를 설정해준다.FROM.. 2026. 10. 4.
[css] - clamp() 가변적인 사이즈 지정하기 반응형 웹을 만들기 위해 js뿐만 아니라 css에서 먼저 지원되는 기능이 갈수록 많아지는데, container query나 media query 등이 가장 대표 주자이지 않을까.그래도 그 외에도 간단하게 쓸 수 있는 min, max를 포함해서 좀 더 유연하게 객체를 지정 할 수 있는 css가 있어서 기록하려고 한다. 1. clamp기본적으로 calc처럼 안에 수식을 추가하면 되는데, clamp(최솟값, 가변값, 최대값) 이렇게 작성하면 된다. .box { width: clamp(100px, 200px, 300px) font-size: clmap(13px, 16px, 20px)} 위처럼 객체 사이즈나, 폰트 사이즈, 패딩 등의 다양한 값들을 지정 할 수 있는데, width값은 100px 미만으로 작아.. 2025. 12. 9.
10월 중순에서 11월 중순까지 입사한지 약 한달이 지났다. 레드오션도 이런 레드오션이 없는 불바다를 어떻게 헤엄쳤는지 모르겠지만, 아직 어정쩡하게 탈출한 계약직 인턴이지만! 입사 후 약 일주일 정도는 개발 셋팅을 설정하고, 회사에서 필요한 정보 들을 받거나 컨벤션을 읽어 회사에서의 개발이 어떻게 이루어지고, 어떤 방향을 지향하는지를 분석했다.그러는 동안 간단한 업무를 받았는데 원래 기존 클라이언트에서는 이메일을 이미지로 만들어서 보냈었는데, 이번에 다국어 대응- 번역을 위해 html로 이메일을 보내기로 결정이 난 듯 했다. 그래서 그 이메일을 html로 만드는 일을 진행했다.앞으로 보낼 이메일도 내가 담당해서 할 듯 하다. 그 후 2주 째부터는 회사 홈페이지에 올라갈 회사 포트폴리오를 만들었다. html, css와 js(gsap)을 .. 2025. 11. 17.
[Gemini CLI] - AI로 개발하기 근데 터미널을 곁들인 역시 개발자분들께 가장 핫한 주제를 꺼내자면 AI가 아닐까 싶다. Chat GPT가 처음 나왔을 때만 해도 아는 분들만 쓰곤 했는데 몇달이 지나자마자 대부분의 개발자 분들이 Chat GPT를 사용하셨었다. 그런데 시간이 조금 더 흐르니 이제는 IDE에 AI를 접목하고 IDE에 파일 권한을 넘겨 AI가 수정도 해주고 파일도 생성해주는 시대가 와버렸다. (e.g. 커서 IDE)정말 AI의 시대가 와버렸구나 싶은 찰나 최근 구글에서 CLI로 AI를 호출하여 특정 IDE가 아닌 내가 사용하는 컴퓨터 환경에서 더 편하게 사용할 수 있는 Gemini CLI를 발표했다. 이번 포스팅의 주인공이다. 1. Gemini CLI?Gemini는 구글에서 만든 오픈 소스 AI로 Chat GPT와 비슷하게 이미지 생성, 질문과 .. 2025. 7. 17.
[RN] - 기본 컴포넌트 구조 알아보기 앱 개발은 처음인지라, A to Z부터 공부가 필요했다.그 중에서도 가장 생소했던 부분을 고르라면 웹과는 다른 리액트 네이티브 전용의 앱 컴포넌트가 그랬다.웹과 같은 경우에는 사실 기능 자체로는 div로만 구성해도 구현할 수 있지만, RN 앱에서는 태그 내에서가 아니라면 글이 작성되지 않았다. 또한 웹 표준화처럼 웹 페이지 구조를 명확하게 구분하는 것 같았다. 1. 기본적인 리액트 네이티브 구조와 태그 html에서 가장 기본적으로 많이 쓰이는 태그라고 한다면, 개인적으로는 div일 것 같다. 물론 리액트 네이티브에서도 div같은 개념이 존재한다. 바로 태그인데, 다만 차이점이라면 div와는 달리 없이 글씨가 써지지 않는다. 더하여 스크롤도 되지 않는다.스크롤 기능을 구현 하고 싶다면 태그를 사용하면.. 2025. 7. 3.

티스토리툴바