MCP Cursor 연동 Cursor란?Cursor는 AI 기능이 탑재된 코드 에디터로, 개발 생산성 향상에 초점을 맞춘 도구다. VSCode 기반으로 만들어져서 기존 VScode 설정을 그대로 옮겨와 사용할 수 있어 편리하다. Cursor 설치하기Cursor 다운로드 페이지에서 설치 파일을 받아 실행하면 된다. Cursor MCP 소개Cursor는 MCP(Multimodal Conversational Playground)를 기본 지원한다. 이를 통해 AI와 다양한 서비스를 쉽게 연결할 수 있는 장점이 있다.설정 방법:Open Cursor Settings 클릭MCP 탭 선택원하는 MCP 설정 적용 이 글에서는 두 가지 MCP 서버 연동 방법을 살펴본다:GitHub MCP ServerBrowserTools..
2주차 항해소소리 바람봄이 다가오면서 많이 포근해진 날씨에 옷차림도 가벼워지니 몸과 마음이 한결 가벼워져서 기분이 좋습니다. 다들 사는게 바쁘고 힘드시겠지만 설레임이 가득한 봄 향기 속에서 피어난 꽃처럼 행복도 활짝 피어났으면 좋겠습니다~.발제이미 1주차에서 많은 기가 빨렸기 때문에 2주차는 소울리스 상태로 진행해야 할 것 같다. 회사에 쌓였던 업무와 과제를 함께 하니 나의 콧구멍에선 빨간 땀이 흐르기 시작했고, 푸바오 빙의한 다크서클과 2배로 늘어난 쌍꺼풀 덕분에 주변에서 걱정을 많이 해주신다(고맙읍니다 (__ ) 실제로도 굉장히 피곤한 상태입니다).지금 상태면 서서 잘 수도 있을 것 같다. 과연 내가 10주를 다 마무리할 수 있을까 의문이 들지만... 부딪쳐 봐야지... !1주차 때와 마찬가지로 기존..
개강 전 현 직장에서 2년차가 되어가고 있는데, 성장이 멈췄다는 것을 뼈저리 느끼며 일상을 살아갔다.1년 조금 넘을 쯤 이직을 빡세게 준비하며 여러 곳 면접을 보러다니던 중 개인적인 일이 크게 생겨 반년정도를 허투루 보내고 있었다.다시 이직 준비를 했을 땐 이미 취업 시장은 레드오션이였고 나는 도저히 낄 틈이 보이지 않았다.퇴사를 하고 이직을 준비하기엔 힘들었던 취준 2년의 과거가 떠올랐기에 도저히 퇴사는 힘들었고, 그렇게 이리저리 찾아보다가 항해 플러스를 알게 되었다.항해 플러스 광고 중 "물경력"이라는 단어가 나를 혹하게 만들었고 바로 결제를 해버렸다. (코인으로 메울 것이다. 그럴 것이다.)개강 전까지 항해 플러스에서 마련해준 사전 스터디를 진행하였고 5기 학생분들과 온라인으로 TypeScript와..
비동기 프로그래밍 입문개념 일반적으로 코드는 동기적으로 실행된다. 즉 앞에 있는 코드가 끝나야만 그 다음 코드가 수행이 된다.// (1)const a = 1;// (2)const b = 2;// (3)console.log(`a의 값은 ${a}입니다.`);// (4)alert(`hello ${b}!`);// 항상 코드는 (1) -> (4)의 순서대로 실행이 됩니다. 이러한 방식을 동기적 방식이라 하고, 비동기는 그에 반대되는 방식이다.비동기(asynchronous)적 방식이란? 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식이며, 대표적으로 setTimeout, addEventListner 등이 있다. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드이며 주로 ..
Routerreact-router를 사용하기 전에 Router의 기본적인 내용만 훑고 가보자. Routing라우팅이란 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.주소(URL)의 파라미터로 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜주는 작업이라 보면 될 것 같다. React Router설치 및 세팅패키지를 설치하자.yarn add react-router-dom import { BrowserRouter, Routes, Route } from 'react-router-dom'위는 가장 많이 사용되는 모듈 3가지다. BrowserRouterhistory API를 활용해 history 객체를 생성한다.history API는 내부적으로 stack 자료구조의 형태를 띄우며 사용자가 방문한 url..
CHATER9 타입 제한자9.1 top 타입top 타입은 시스템에서 가능한 모든 값을 나타내는 타입이다. 모든 다른 타입이 top인 위치에 제공될 수 있으며, 즉 모든 타입은 top 타입에 할당할 수 있다. 9.1.1 any 다시 보기any 타입은 모든 타입의 위치에 제공 될 수 있다는 점에서 top 타입 처럼 작동할 수 있지만, TS가 해당 값에 대한 할당 가능성 또는 멤버에 대해 타입 검사를 수행하지 않도록 명시적을 지시한다는 문제점을 가지고 있다.이러한 안정성 부족은 TS의 타입 검사기를 건너뛰려고 할 때 유용하지만, 타입 검사를 비활성화하면 해당 값에 대한 TS의 유용성이 줄어든다.예를 들어 아래의 name.toUpperCase() 호출은 확실히 문제가 되지만, name이 any로 선언되었기 때문..
CHAPTER8 클래스Class를 학습하기 전 먼저 객체지향 프로그래밍을 살짝 알고 들어가자. 객체지향 프로그래밍(OOP: Object-oriented programming)모든 것을 객체(Object)로 보고 그 객체들끼리 역할, 책임, 협력 등 객체들의 관계를 중심으로 프로그래밍 하는 기법을 말한다. 객체지향의 4대 특성1. 캡슐화(encapuslattion)연관된 데이터(변수)와 기능(메소드)을 하나로 묶고, 불필요한 요소를 외부에 노출되지 않도록 설계하는 방식을 뜻한다. 2. 상속(inheritance)기존의 클래스에 기능을 추가하거나 재정의하여 새로운 클래스를 정의하는 것을 의미한다. 상속을 이용하면 기존에 정의되어 있는 클래스의 모든 필드와 메서드를 물려받을 수 있다. 3. 추상화(abstra..
React-Query(Tanstack-Query)React Query는 리액트 어플리케이션에서 비동기 데이터의 페칭(Fetching)과 캐싱(caching)을 간편하게 관리할 수 있게 해주는 라이브러리다.* 페칭과 캐싱더보기데이터 페칭이란?서버로부터 데이터를 가져오는(읽는) 것캐싱이란?특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것 주요 기능데이터 캐싱 : 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상시킴.자동 리페칭 : 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지함.쿼리 무효화 : 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있음. 라이플 사이클 상태 정의 fresh : 만료되지 않은 쿼리컴포넌트 마운트, 업데이트..
Redux리덕스(Redux)는 어플리케이션 상태관리를 위해 만들어진 JS 라이브러리이며, 특히 리액트와 함께 사용된다.전역 상태관리 라이브러리이며 단방향 데이터 흐름의 리액트를 사용할 때에 불편한 점들을 해소해준다.예를 들면 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때 반드시 부모 컴포넌트를 거쳐야만 하기 때문에 부모 컴포넌트에서 그 값이 필요 없어도 불필요하게 거쳐야한다.그렇기 때문에 중앙에서 상태관리 해주는 것이 필요하다. 리덕스의 주요 기능1. 중앙화된 상태 관리어플리케이션의 모든 상태를 하나의 중앙 저장소(Store)에서 관리하며, 상태를 한 곳에서 관리하므로 데이터 흐름을 추적하기 쉽다. 2. 예측 가능한 상태 변경상태는 리듀서(Reducer)라는 순수 함수에 의해 변경되며, 리듀서는..
CHAPTER5 함수5.1 함수 매개변수function sing(song: string) { console.log(song);}sing("Hello");변수와 마찬가지로 타입 애너테이션을 통해 타입을 선언해 준다. 5.1.1 필수 매개변수JS에서는 인수의 수와 상관없이 함수를 호출할 수 있지만, TS에선 함수에서 선언된 모든 매개변수가 필수라고 가정하여 잘못된 수의 인수로 호출하면 타입오류가 발생한다.function singTwo(first: string, second: string) { console.log(`${first} ${second}`);}singTwo("do"); //Expected 2 arguments, but got 1singTwo("do", "re"); 5.1.2 선택적 매개변수JS..
