Framework

📍  패키지 설치yarn add -D @svg/webpack 📝 next.config.mjs/** @type {import('next').NextConfig} */const nextConfig = { webpack: (config) => { config.module.rules.push({ test: /\\.svg$/, use: ['@svgr/webpack'], }); return config; },};export default nextConfig; 📝스토리북에도 적용import type { StorybookConfig } from '@storybook/nextjs';const config: StorybookConfig = { stories: ['../src/*..

📘 Page Router 장점📄 파일 시스템 기반의 간편한 페이지 라우팅 제공pages 폴더 안의 파일 구조에 따라 라우팅동적 경로를 사용하는 다이나믹 페이지도 대괄호를 통해 하나의 URL 파라미터에 대응 가능book/1, book/2, book/3, ...catch-all segments: [..id]중첩된 모든 URL 파라미터에 대응 가능book/1, book/2/100, book/100/2345/233/5232, ...optional catch-all segments: [[...id]]인덱스 페이지까지 포함하면서 동시에 중첩된 모든 URL 파라미터에 대응 가능book, book/1, book/2/100, book/100/2345/233/5232, ...📄 다양한 방식의 사전 렌더링 제공리액트의..

Next.js는 Page Router 방식과 App Router 방식이 있는데 오늘은 Page Router 방식을 알아보고자 한다! 📄 Page Router현재 많은 기업에서 사용되고 있는 안정적인 라우터React Router처럼 페이지 라우팅 기능을 제공한다Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다 왼쪽 이미지처럼 파일 이름을 기반으로 페이지 라우팅을 자동으로 제공한다오른쪽 이미지처럼 폴더 이름을 기준으로도 페이지 라우팅이 자동으로 된다 import { useRouter } from 'next/router';const router = useRouter();// 쿼리스트링const { q } = router.query;// 파라미터const { id } = router.query;동적 ..

공통 프로젝트에서는 React를 썼는데 특화 프로젝트에서는 Next를 쓰려고 한다.React는 자바스크립트 라이브러리고, Next는 React의 프레임워크이다.라이브러리와 프레임워크의 차이가 뭔지 알아보자! 라이브러리 (Library)특정 기능을 구현하기 위해 제공되는 도구 모음개발자가 필요에 따라 호출하여 사용할 수 있는 함수나 클래스들의 집합ex) jQuery, Lodash, Numpy, pandas, tenserflow 등 프레임워크 (Framework)애플리케이션의 구조나 동작 방식을 정의하는 전반적인 툴 원하는 기능 구현에 집중하여 개발할 수 있도록, 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대 ex) Vue.js, Next.js, Spring, Django 등 여러 장치들이 합쳐져서 ..

안녕하세요~~~~ㅎㅎㅎ싸피 들어온 지가 엊그제 같은데 벌써 1학기가 끝나가네요😢 이제 곧 관통 프로젝트를 앞두고 있는데요!! 어떤 주제든 지도 API를 사용하실 거 같아요.그래서 지도 API를 미리 사용해 봤습니당! 전 카카오맵 API를 썼고, 이에 대해 정리해 보도록 하겠습니다🧐   1. API 키 발급 먼저 카카오맵 API를 쓰기 위해서는 여기에서 API 키를 발급받아야 합니다.  애플리케이션 추가하기를 누르고 정보를 입력해 주세요. 추가한 애플리케이션을 들어가면 이렇게 뜨는데, 저는 Vue에서 카카오맵을 활용해 개발할 거라 JavaScript 키를 사용할 거예요.그리고 아래 플랫폼 설정하기를 눌러서 도메인을 등록합니다. 저는 처음에 Web에 http://localhost:5173을 등록했고, 이..

Vue - Kakao Map1. Vue3에서 Kakao Map 사용하기 이전 글에서는 카카오맵을 활용해 기본 지도를 띄어 보았다.이번에는 마커 생성하기 예제를 활용해 마커를 띄어 보려고 한다. 📄 코드  🧩 결과

Vue에서 지도를 띄우기 위해 카카오맵 API를 사용하려고 한다. 카카오맵 API Key는 여기에서 받으면 되고, JavaScript 키를 사용하면 된다.플랫폼 등록하는 것도 잊지 말자! 포트 번호가 바뀌었을 때 바보 같이 도메인 등록하는 걸 까먹었다가 삽질했다... 아래는 카카오맵에서 제공하는 기본 지도 생성 예제를 활용해서 Vue에서 지도를 띄우는 코드이다. 📄 코드   options는 카카오맵 Docs에서 확인하고 필요한 대로 조정하면 된다. 🧩 결과

ref()반응형 상태(데이터)를 선언하는 함수 (Declaring Reactive State) ref() 사용인자를 받아 .value 속성이 있는 ref 객체로 wrapping하여 반환한다.ref로 선언된 변수의 값이 변경되면 해당 값을 사용하는 템플릿에서 자동으로 업데이트한다.인자는 어떠한 타입도 가능하다.const {createApp, ref } = Vueconst app = createApp({ const message = ref('Hello, Vue!') console.log(message) // ref 객체 console.log(message.value)}) 템플릿 렌더링반환된 객체의 속성은 템플릿에서 사용할 수 있다.Mustache syntax(콧수염 구문)를 사용하여 메시지 ..