MCP(Model Context Protocol)란? MCP는 Model Context Protocol의 약자로, Anthropic에서 만든 오픈 프로토콜이다. AI 모델이 외부 도구, 데이터 소스, 시스템과 안전하게 상호작용할 수 있도록 해주는 표준이다. 쉽게 말해, AI에게 “손과 발”을 달아주는 기술이라고 생각하면 된다. 왜 MCP가 필요한가? 기존 방식의 한계 기존에 AI에게 외부 기능을 추가하려면 각 서비스마다 개별적으로 연동해야 했다. 서비스마다 다른 인증 방식, 다른 데이터 형식, 다른 에러 처리가 필요했다. MCP의 해결책 MCP는 표준화된 인터페이스를 제공한다. 한 번의 표준 연동으로 모든 MCP 서버와 통신할 수 있다. MCP의 핵심 개념 1. MCP 호스트 (Host) MCP 프로토콜을 사용하는 AI 애플리케이션이다. Claude Desktop Claude Code (CLI) Cursor 기타 MCP 지원 앱 2. MCP 클라이언트 (Client) 호스트 내부에…

변화의 시작 2024년, 나는 처음으로 AI 코딩 어시스턴트를 본격적으로 사용하기 시작했다. 처음에는 단순한 자동완성 도구라고 생각했다. 그런데 어느 순간 깨달았다. “내가 코드를 작성하는 시간보다 AI가 작성한 코드를 검토하는 시간이 더 많아졌다.” 이건 단순한 도구의 변화가 아니었다. 개발자의 역할 자체가 바뀌고 있었다. 과거: 코드 작성자 (Code Writer) 불과 몇 년 전까지 프론트엔드 개발자의 핵심 역량은 명확했다. JavaScript/TypeScript 문법 숙달 React, Vue 등 프레임워크 API 암기 CSS 속성과 레이아웃 기법 숙지 알고리즘과 자료구조 이해 면접에서는 이런 질문이 나왔다. “클로저가 뭔가요?” “이벤트 루프를 설명해보세요.” “useEffect의 의존성 배열이 비어있으면 어떻게 되나요?” 얼마나 많이 알고 있는가, 얼마나 빠르게 코드를 작성하는가가 중요했다. 현재: 전환기 지금 우리는 전환기에 있다. AI가 잘하는 것 AI가 아직 어려워하…

React Router v7이 왔다 React Router v7은 단순한 업데이트가 아니다. Remix와 React Router가 합쳐지면서, 라우팅 라이브러리에서 풀스택 프레임워크로 진화했다. 무엇이 달라졌나? Remix + React Router = React Router v7 기존에 Remix를 사용하던 팀은 React Router v7으로 마이그레이션하면 된다. React Router를 사용하던 팀은 Remix의 강력한 기능들을 사용할 수 있게 되었다. 핵심 변화 Remix의 data loading 패턴 통합 서버 사이드 렌더링(SSR) 내장 파일 기반 라우팅 지원 더 나은 타입 안전성 설치하기 새 프로젝트 기존 프로젝트 업그레이드 프로젝트 구조 React Router v7은 파일 기반 라우팅을 지원한다. 라우트 파일 명명 규칙 파일명 URL 설명 인덱스 라우트 기본 라우트 동적 파라미터 레이아웃 무시 , 선택적 파라미터 Data Loading - load…

Turborepo란? Turborepo는 JavaScript와 TypeScript 프로젝트를 위한 고성능 빌드 시스템이다. Vercel에서 개발하고 있으며, 모노레포(Monorepo) 환경에서 빌드 속도를 극적으로 향상시켜준다. 모노레포(Monorepo)가 뭔데? 모노레포는 여러 프로젝트를 하나의 저장소에서 관리하는 방식이다. 예를 들어 프론트엔드, 백엔드, 공통 라이브러리를 하나의 레포지토리에서 관리할 수 있다. 장점 코드 공유가 쉽다 일관된 개발 환경 유지 의존성 관리가 편리하다 원자적 커밋 가능 (여러 패키지 변경을 한 커밋으로) 단점 저장소 크기가 커진다 빌드 시간이 오래 걸릴 수 있다 → Turborepo가 해결! Turborepo의 핵심 기능 1. 캐싱 (Caching) Turborepo의 가장 강력한 기능이다. 한 번 빌드한 결과를 캐싱해서, 코드가 변경되지 않으면 다시 빌드하지 않는다. 2. 병렬 실행 (Parallel Execution) 의존 관계가 없는 태스크들은…

유틸리티 타입(Utility Types)? TypeScript에서 유틸리티 타입은 TypeScript에서 제공하는 여러 전역 유틸리티 타입으로, 일반적인 타입 변환을 쉽게 하기 위해 사용할 수 있다. 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 유용하게 쓰이며, 간결한 문법으로 새로운 타입을 정의할 수 있다. 하나씩 알아보자 타입스크립트 공식 문서 1. Awaited Promise 형태의 T 타입을 전달받아, 해당 Promise가 반환하는 리턴값의 타입을 반환한다. async ~ await의 await 키워드와 유사한 기능을 담당한다. 2. Partial T 타입의 일부 프로퍼티만 가질 수 있는 타입(subset)을 반환한다. 모든 프로퍼티는 optional로 취급되며, 모든 프로퍼티를 갖지 않는 빈 객체{ }도 허용된다. 3. Required T 타입의 모든 프로퍼티를 필수로 갖는 타입을 반환한다. 기존 타입 내의 모든 optional 프로퍼티는 필…

new Promise와 await new Promise 이해하기 JavaScript를 하다 보면 꼭 만나게 되는 개념이 있습니다. 바로 Promise와 async/await 입니다. 비동기 프로그래밍의 핵심인데, 막상 쓰다 보면 new Promise는 무엇이고, await new Promise는 또 어떤 의미인지 헷갈릴 때가 있습니다. 이번 글에서는 이 둘을 비교하면서 개념을 정리해보겠습니다. Promise란 무엇인가? Promise는 비동기 작업의 완료(혹은 실패)를 나타내는 객체입니다. 위 코드에서 new Promise는 “곧 결과가 생길거야!” 라는 약속을 만든 것입니다. 그리고 resolve를 호출하면 그 약속이 지켜지고, reject를 호출하면 약속이 깨집니다. new Promise는 언제 사용할까? 대부분의 경우 는 이미 API가 반환해줍니다. 예를 들어 는 Promise를 반환하죠. 그런데, 우리가 직접 비동기 동작을 Promise로 감싸고 싶을 때 를 씁니다. 이제…

BFF(Backend for Frontend)란? 프론트엔드(웹, 모바일, 디바이스 등)별로 특화된 백엔드 API를 따로 두어, 클라이언트가 필요한 데이터와 로직만을 최적화해서 제공하는 아키텍처 패턴. 등장 배경 단일 API 서버(모놀리식, 혹은 단일 백엔드)가 여러 클라이언트(웹, iOS, Android, IoT)에 동일한 응답을 주다 보니, 불필요한 데이터가 포함되거나 필요한 데이터가 빠지는 문제가 발생. 각 클라이언트의 UX 최적화를 위해 등장한 개념. 왜 필요한가? 클라이언트 맞춤 최적화 웹은 넓은 화면에 많은 데이터가 필요하지만, 모바일은 데이터 사용량이 적고 UI도 간단해야 함 BFF는 각 클라이언트 특성에 맞는 API 응답을 제공 복잡한 API 호출 단순화 여러 마이크로서비스에서 데이터를 모아야 하는 경우, 클라이언트에서 직접 여러 API를 호출하면 복잡해짐 보안 및 정책 제어 인증, 권한 검증, 로깅 등 클라이언트에 따라 달라질 수 있는 정책을 BFF에서 통제 …

Git Tiers 1년 동안 깃허브 commit, pull request 등 GitHub 활동 contribute에 따라 티어를 볼 수 있는 프로젝트를 만들어 보았다. Git Tiers 에서는 본인의 티어에 대한 정보를 얻을 수 있으며 해 본인의 깃허브 README.md 에 보여줄 수 있다. Git Tiers 홈페이지 Git Tiers 깃허브 페이지에는 티어 순서와 contribute 수에 따른 티어 표가 있다. 차후 계획은 유저가 이미지를 직접 다운로드해서 깃허브 README.md 에 넣는 방식이 아닌, 본인만의 URL을 생성해서 깃허브 README.md 에 URL만 저장해 놓으면 티어가 변경될 시 이미지를 변경해야하는 불편함 없이 자동으로 변경이되는 기능을 구현해볼 계획이다. 사용하는 유저가 많아져 누군가의 깃허브를 들어갔을 때, README.md 에 Git Tiers가 보였으면 좋겠다. https://github.com/git-tiers/gittiers ++ 추가 업데…

Tree Shaking (트리쉐이킹) 트리쉐이킹은 나무를 흔들어 잔가지를 털어내듯 사용하지 않는 코드를 제거하는 이다. Bundler (번들러) 웹개발을 할 때 번들러를 통해서 을 한다. 이때 불필요한 코드가 함께 포함될 수 있기 때문에 번들러는 코드를 최적화하는 트리쉐이킹을 진행한다. sideEffects (사이드이펙트) sideEffects는 package.json에 명시하는 내용으로 패키지의 어떤 파일이 사이드 이펙트를 갖고 있는지 번들러에게 알려주는 역할을 한다. 로 설정하면 해당 패키지의 모든 파일이 사이드 이펙트가 없다고 선언하는 것이고, 이 말은 번들러에게 는 얘기를 하는 것이다. 위처럼 설정하면 CSS파일들과 특정 파일만 사이드 이펙트가 있다고 알려주는 것이고, 나머지 파일들은 효과적으로 트리쉐이킹될 수 있다. 개발자가 할 수 있는 것들 ESM 사용하기 CommonJS(require) 대신 ES Modules(import/export) 사용 동적 import는 …

지금까지 써 본 상태 관리 라이브러리는 Redux toolkit, mobX, Recoil이었다. 처음 썼던 상태관리가 Redux toolkit이었기 때문에 주로 사용해오다가 이직을 하면서 Recoil을 사용하게 되었다. 그런데 Recoil이 업데이트가 느리다는 글을 보게 된 후에 다른 상태 관리 라이브러리를 찾아보았다. Next도 15가 나왔고 React도 19가 임박한 시점에서 Recoil이 자주 업데이트가 안된다는 점이 맘에 안들었던 것 같다. 그러다 찾게 된 Zustand Zustand는 독일어로 라는 뜻이다. 아직 Redux가 많이 사용된다고 하는데 작은 기능을 사용하더라도 몇개의 파일과 코드들을 만들어야하는 boilerplate의 단점은 어쩔 수 없는 것 같다. Zustand 장점? 간단하고 직관적인 API를 제공한다. boilerplate가 거의 필요 없다. 사용 방법이 간단하다. 상태 변경 시 불필요한 컴포넌트 렌더링을 방지하는 최적화를 자동으로 처리한다. Zusta…

React-Native cli 환경 설정은 항상 한번에 된 적이 없다. 그래서 이번엔 Expo를 이용해서 환경 설정을 진행했다. 지금까지 Expo를 사용하지 않은 이유는 장단점이 극명하기 때문이었다. Expo CLI의 장단점을 가볍게 알아보자 장점 개발 환경 구축이 용이하다. Android Studio와 XCode 하다. 안드로이드 앱과 ios 앱을 하다. 개발 중 내 실제 디바이스로 개발 과정을 바로 확인할 수 있다. 단점 빌드 시간이 길다. Expo에서 제공해주는 모듈만 사용 가능하다. 개발시 (Native 모듈의 사용에 제한적) 프리티어로 1개월 기준 빌드만 가능하다. 그럼 React-Native CLI의 장단점은? 장점 Expo로 사용하지 못하는 에 접근이 가능하다. 빌드 시간이 단점 Android Studio와 XCode 하다. 초기 개발환경 구축과 앱 개발 시 상대적으로 시간 소요된다. Mac일 경우에만 ios 개발 및 배포가 가능하다. 그럼 Expo로 세팅을 해…

새로운 프로젝트 환경설정을 할 일이 있어서 yarn 패키지를 사용해서 진행하였다. 그런데 자주 보던 node_modules 폴더가 안보이는데? 찾아보자 yarn berry 를 사용하면 우리가 자주 봐왔던 node_modules 폴더가 설치되지 않는다. 그 대신 와 파일이 설치된다. Yarn Berry Yarn Berry는 Node.js를 위한 패키지 관리 시스템으로 Yarn의 최신 버전인 을 지칭하는 말이다. 기존의 Yarn 1.x 에서 큰 변화가 이루어진 버전으로, 여러 개선사항과 새로운 기능이 있다고 한다. 그 중 오늘 다룰 내용은 Plug’n’Play (PnP) Yarn Berry는 기존의 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, 에 의존성을 찾을 수 있는 정보가 기록된다. .pnp.cjs를 이용하면 디스크 I/O없이 어떤 패키지가 어떤 라이브러리에 의존하는지, 각 라이브러리는 어디에 위치하는지를 바로 알 수 있다. 장점 패키지의 모든 의…

저번 포스트에서 Organization 레포를 Vercel에 자동 배포하는 방법을 다뤘다. 발생 오류 main branch에 merge가 되면 자동으로 배포가 진행되는 플로우인데 정작 를 잡지 못하고 있었다. 그러기 위해선 main branch 에 PR을 올렸을 때 build 를 실행해 오류를 먼저 잡아내는 플로우가 추가로 필요했다. 플로우 Organization 레포를 Vercel에 자동 배포하는 플로우에서 PR 올렸을 때 build test를 진행하는 플로우가 추가되었다. 해보자 yml 파일 추가 main branch에 PR 올렸을 때 실행할 플로우가 담긴 yml 파일을 추가한다. 실행할 내용은 코드 내려받기 actions/checkout@v2 프로젝트 내에 사용 중인 yarn 버전 사용하기 corepack enable Install dependencies yarn install lint test yarn lint build test yarn build build-test…

Github Organization 레포를 Vercel에 배포를 하려면 이 필요하다. Organization 레포를 fork 해서 무료로 배포하는 방법을 기록하려고 한다. Todo Organization 레포 main branch에 를 하면 Vercel에 배포되게 작업 플로우 다른 branch에서 작업 후 main branch로 merge한다. main branch에 merge 완료. github action을 통해 fork한 개인 유저 레포로 코드 전체를 보낸다. 개인 유저 레포 main branch가 변경되면 vercel에서 자동 배포를 진행한다. 해보자 개인 계정에서 할 일 Organization 레포를 개인 레포로 fork 한다. Vercel에 로그인 후 fork한 레포(개인 레포)를 연동한다. 개인 유저의 secret 토큰을 발급한다. 로 시작하는 토큰은 다시 볼 수 없으니 어딘가에 잘 기록해야함. Organization 레포에서 할 일 Organization 레포 …

사용자가 로그인하거나 가입했을 때 사용자가 지정한 비밀번호가 그대로 DB에 저장이 되고 있었다. 이는 개발자 모드 네트워크 탭에서도 비밀번호를 확인할 수 있어 비밀번호 노출의 위험이 있다. Crypto JS를 이용해 salt를 생성하고 password + salt 조합으로 SHA-256 해시 알고리즘(단방향)을 통해 비밀번호를 암호화하여 DB에 저장하려고 한다. 아래는 내가 사용했던 방식을 기록해 놓았다. 해시(Hash) 란? 해시는 임의의 길이를 갖는 데이터를 고정된 길이의 데이터로 매핑하는 를 말한다. 암호화된 데이터는 복호화가 불가능하다. 입력값이 동일하면 암호화 데이터 또한 동일하다. 입력값과 상관없이 항상 일정한 길이의 암호화 데이터를 출력한다. 입력값이 다르지만 암호화 데이터가 같을 수도 있다. SHA 256 가장 많이 사용되는 해시 알고리즘은 다이제스트 크기가 256비트인 이다. 암호화된 데이터는 다이제스트(digest)라고 한다. Crypto JS JS 에서 해시…

다른 페이지에 있을 때도 알림이 오면 보여주는 기능을 만들려고 한다. 그러기 위해서는 실시간으로 데이터를 받아오는 로직이 필요하다. SSE(Server-Sent-Events) 라는 것을 알게 되었다. SSE (Server-Sent-Events) 란? 간단하게 서버의 데이터를 실시간, 지속적으로 Streaming 하는 기술이다. SSE 특징 서버에서 클라이언트로 실시간 이벤트를 전송하는 웹 기술로 서버에서 발생하는 업데이트나 알림 등을 으로 클라이언트에 전달할 수 있다. 단방향 통신이기 때문에 만 데이터를 전송할 수 있다. 클라이언트는 HTTP 프로토콜을 통해 SSE 연결을 설정하고, 서버는 HTTP 응답을 유지한 상태에서 데이터를 전송한다. 을 제공하기 때문에 연결이 끊어졌을 때 자동으로 다시 연결한다. WebSocket과의 차이점 가장 큰 차이점은 데이터 흐름에 있다. SSE는 서버 —> 클라이언트 ( 통신 방식) 일방적인 데이터 전송이 필요한 주가 업데이트, 실시간 알림에 적…

오늘 개발 블로그를 둘러보다가 프론트엔드 개발자이신 단민님의 최근 포스트를 마주하게 되었다. node.js로 cli 포트폴리오를 만들어서 npm에 배포하는 글이었다. 상당히 흥미로운 글이었다. 전부터 npm 라이브러리를 만들고 배포해서 유용하게 쓸 수 있는 개발자가 되고 싶은 생각이 있었는데 이번에 배포한 작디작은 CLI가 그 생각의 이 되길 바라며… 시작해보자. 단민님의 글 뿐만아니라 여기저기 블로그를 참고했다. 먼저 디렉토리 구조는 아래와 같다. package.json 새로 프로젝트를 생성한 후 명령어로 package.json 을 생성한다. (node가 설치되어 있다는 전제하에) 사용하는 라이브러리는 chalk (터미널 글씨 스타일 적용) commander (Node.js에서 CLI프로그램을 작성할 때 유용한 라이브러리) inquirer (터미널에서 사용자와 상호작용할 수 있는 질문(prompt) 시스템을 제공) init.js src 폴더 생성 후에 파일을 생성한다.…

Next 또는 React로 프론트엔드 개발을 하다 보면 항상 드는 생각이 있다. “내가 컴포넌트를 잘 분리한 건가..” 디자인 시스템을 공부하고 적극 활용해 본 경험은 없고 그냥 뭉뚱그려 생각하고 진행했던 것 같다. 디자인 시스템을 생각하고 개발을 진행하면 처음엔 불편할지라도 시간이 지나고 나면 만족할 만한 결과가 나오지 않을까 하는 생각이 들었다. 그 중 가장 흥미가 가는 Atomic Design 아토믹 디자인은 에서 영감을 얻은 디자인 시스템 방법론이다. 화학적 관점 이란 말이 흥미를 돋우었다. 먼저 Atom은 분해할 수 없는 단위인 원자를 의미한다. 가 모여서 를 만들고 가 모여서 를 만들고.. Atomic 디자인 역시 각 요소를 분해할 수 없는 단위까지 나누고, 이를 조합하여 컴포넌트를 만들고 나아가 페이지를 구성하는 방식을 의미한다. Atom(원자) Atom은 더 이상 분해할 수 없는 기본 컴포넌트로 input, label, button 과 같이 기본 Html태그…

React Router와 같은 라우팅 라이브러리를 사용하여 페이지를 이동할 때 React Router는 React 컴포넌트의 라이프사이클과 히스토리 API를 이용하여 스크롤 위치를 관리하고, 페이지 간 전환 시 스크롤 위치를 초기화하지 않도록하기 때문에 스크롤 위치가 유지된 채로 페이지가 이동된다. 이를 해결하기 위해 아래와 같이 컴포넌트를 생성해서 사용하였다. ScrollToTop Component useLocation을 이용하여 현재 페이지의 경로를 가져오고, useEffect를 이용하여 경로가 변경될 때마다 window.scrollTo(0,0)을 호출하여 스크롤을 페이지의 맨 위로 이동시킨다. 생성한 ScrollToTop 컴포넌트를 BrowserRouter의 내부에 포함시킨다. Router Component BrowserRouter는 라우트를 처리하고 URL과 연결된 컴포넌트를 렌더링하는 역할을 합니다. 따라서 ScrollToTop 컴포넌트를 BrowserRouter내에 …

Webview PostMessage 회사에서 앱을 개발할 때 React-Native webview로 React 프로젝트를 씌워서 앱 등록을 하였다. 그때 RN -> React 또는 React -> RN 으로 데이터를 전달해야하는 일이 생긴다. 그 당시 사용했던 방법을 기록해 놓으려고 한다. 🔍 React-Native Webview 옵션 세팅 React-Native webview 작업 시 속성에 react에서 보내는 데이터를 받을 때 사용할 함수를 적는다. 🔍 React-Native -> React 🔍 React -> React-Native Webview PostMessage 🔍 React-Native Webview 옵션 세팅 🔍 React-Native -> React 🔍 React -> React-Native

API 통신이 안된다.. 왜? 로컬에서는 잘 되는데 서버에서는 통신이 안되는 이유는 뭘까… 먼저 오류에 대해 알아보자 Access to XMLHttpRequest at ’https://cedarsojt.store:4000/signup/list/country/branch’ from origin ’https://cedarsojt.store’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 오류 내용을 해석해보면 XMLHttpRequest 요청이 CORS(Cross-Origin Resource Sharing) 정책에 의해 차단된 것을 나타냅니다. 이 에러는 요청된 리소스에 ‘Access-Control-Allow-Origin’ 헤더가 없기 때문에 발생합니다. 악명 높은 CORS 에러 메세지라고 한다. 웹 개발을 하다 보면 반드시 마주치는…

현재 진행 중인 개발동아리에서 앱을 만들기로 하였다. 근데 우리는 앱개발자가 없는걸..? 그래서 react-native 를 이용해 웹뷰를 만들어 모바일 웹에 씌우기로 하였다. 이를 하이브리드앱이라고 한다. react-native-webview 를 개발하는 과정에서 엄청난 오류와 시간이 걸렸기 때문에 다음에 작업할 때 이를 방지하기 위해 기록하려고 한다. 처음에 expo를 사용하여 작업을 했지만 알 수 없는 오류들을 해결하는데 시간이 더 걸릴 것 같아서 다 지우고 react-native-cli 로 환경 설정을 진행했다. 나는 mac을 사용하고 있기 때문에 기준으로 작업하였다. 1. Homebrew 설치 Homebrew 는 mac용 패키지 관리자이다. 아래 명령어로 설치하면 된다. 2. rbenv 설치 rbenv 는 Ruby 버전 관리자이다. mac에는 기본적으로 Ruby가 설치되어 있지만 버전이 안맞을 수 있기 때문에 버전 확인 후 설치해준다. 3. Node.js 설치 간단하니 넘…

업무 진행을 하다가 차트 내에 날짜를 입력하는 부분이 있었다. 입력하는 날짜 형식이 배열로 지정되어 있어서 오늘 날짜로 부터 며칠 전까지의 날짜를 구하고 그 사이 기간을 배열로 만드는 작업을 하였다. 오늘 날짜로부터 며칠 전 날짜 구하기 파라미터 값으로 며칠전의 날짜를 구할것인지 입력하게 되면 차트 옵션에 맞는 형식으로 날짜를 반환해주는 함수를 만들었다. 이를 이용해서 오늘 날짜로부터 의 반환된 날짜까지를 배열로 만드는 함수를 만들었다. 파라미터 값 사이의 날짜를 배열로 반환하기 차트는 원하는 형태로 잘 구현이 되었다. 여러 레퍼런스를 참고해서 작업을 했고, 차트 라이브러리는 ApexCharts.js 를 사용했는데 공식 문서에 레퍼런스도 잘 나와있고 js 프레임워크들에서도 쉽게 사용할 수 있어서 확장성이 넓다. (차트, 그래프 모양이 맘에 들기도 한다.) [Reference] https://apexcharts.com/ https://lts0606.tistory.com/230 오늘 …

모든 React Component에는 Lifecycle(수명 주기)이 존재합니다. Component의 수명은 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 라이프 사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프 사이클은 총 세가지, Mount, Update, Unmount 로 나눕니다. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것을 **마운트(Mount)**라고 합니다. 이때 호출하는 메서드는 다음과 같습니다. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 ren…

Swiper swiper는 slick과 같은 슬라이드 라이브러리이지만 jQuery가 아닌 를 사용하며 다양한 옵션을 지원해서 사용하기 편합니다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 측면에서도 뛰어납니다. 설치 방법 swiper를 사용하려면 여러가지 방법이 있습니다. 원하는 방식으로 사용하시면 됩니다. 으로 사용하는 방식 을 직접 다운받아 사용하는 방식 으로 설치하여 사용하는 방식   CDN 기본 사용법(구조) 사용법은 매우 간단합니다. 슬라이더를 사용하기위해 만들어 놓은 html문서 안에 swiper의 기본 구조에 맞는 class를 넣어주면 됩니다. 주의할 점은 swiper에서 정해 놓은 을 지정해줘야 합니다. ✔ swiper-container > swiper-wrapper > swiper-slide 구조로 되어 있습니다.   아래 작성된 태그를 보시면 < HTML > - 기본 구조   < JavaScript > swiper 사용시 으로 사용되는 들 입니다. 커스…

slick-slider slick-slider 는 반응형 웹을 지원하는 jQuery 슬라이더 라이브러리입니다. 기본 사용법과 반응형 작업방법을 설명 드리겠습니다. slick 다운로드 및 css,js 파일 로드 slick 메인 홈페이지 오른쪽 상단에 를 클릭한 후 다운로드를 진행하거나 그 아래의 CDN주소를 복사해서 태그안에 넣어서 사용하면 됩니다. 그리고 slick-slider는 jQuery 기반으로 만들어졌기 때문에 jQuery가 필요합니다. 기본 사용법 slick-slider의 기본 구성은 아래 코드 처럼 div형태로 구성되어 있는 html문서를 슬라이더 형태로 변경해줍니다.   < HTML >   < JavaScript > slick-slider 옵션 내의 안에 화면사이즈(breakpoint)를 지정해 놓으면 그 안에서는 으로 슬라이드가 변경됩니다. slick 자주 사용되는 함수 slider에 새로운 컨텐츠 추가하기 이미 slick이 적용된 상태에서 슬라이더를 동적으로 추…