본문 바로가기

front-end4

github에 올린 내 프로젝트를 url주소로 들어가 볼 수 있게 하려면? 난 방금전에 만들어본 오늘의 명언 앱을 기준으로 설명하겠음 // vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ base: '/quote-app/', // 깃허브 저장소 이름 plugins: [vue()]}) base경로는 꼭 자신의 현재 작업한 프로젝트 깃허브 리포지토리 이름으로 맞출 것 npm run build 배포용 빌드 실행ㄱ빌드 돌려보면 아래 캡쳐처럼 dist폴더가 생성된것을 볼 수 있음 파일 몇 개 없어도, 정상이니까 너무 개의치않아도 됨.. npm install --save-dev gh-pages gh-pages 패키지를 설치하겠.. 2025. 6. 15.
Vue.js + Vite + Typescript 를 활용해서 오늘의 명언 앱 만들어보기 #2 ↓ 이전 포스팅 ↓ Vue.js + Vite + Typescript 를 활용해서 오늘의 명언 앱 만들어보기 #1출근길에 카톡 프로필들 보다가'왜 이리 명언들이 많아?' 하는 생각에서 출발했다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ프론트는 이런게 재andersonlab.tistory.com 지난 시간에는 프로젝트의 기본 세팅을 완료했으니이번 시간에는 실제 외부API를 불러와 적용해보고 간단한 스타일링까지 해보겠음.. 기본 디렉토리 구조는 이렇게 될 예정 (사실 매우 간단) src/components 디렉토리 내에QuoteCard.vue 파일을 생성하자 "{{ quote }}" — {{ author }} 일단 대충 모양만 잡아두고상세한 스타일링은 나중에.. 2025. 6. 15.
Vue.js + Vite + Typescript 를 활용해서 오늘의 명언 앱 만들어보기 #1 출근길에 카톡 프로필들 보다가'왜 이리 명언들이 많아?' 하는 생각에서 출발했다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ프론트는 이런게 재밌음머리속으로 생각만 해본걸 직접 만들어보는 재미가 있음제목그대로 Vue.js + Vite + Typescript 로 갈 것임Vite란게 뭐냐면 그냥 프론트엔드 빌드 툴임기존의 웹팩 Webpack 떠올리면 이해 쉬울것ES 모듈 기반이라 브라우저가 직접 파일을 처리하니 빠르고 수정 바로바로 잘 반영되고핫 리로드가 장점임ㅋ npm create vite@latest quote-app -- --template vue 플젝 폴더명은 quote-app 으로 했음근데 갑자기select a framework 라면서 Vanilla, Vue, 등등 선택.. 2025. 6. 11.
Nuxt.js 프로젝트 생성하기 요즘 Nuxt.js에 푹 빠져있음. 너무 재밌음.(사실 이전부터 빠져있었는데 플젝땜에 할시간이 없었음ㅋㅋㅋ)Nuxt는 라우팅이 자동이라 Vue보다도 손이 덜 간다는 엄청난 강점이 있음킹갓넉스트 (1) Node.js 설치https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 여기 들어가서 Node.js 다운받고 설치 ㄱ설치할땐 엄한거 건드리지 말고 무조건 기본 순정상태로 Next 연타가 근본임 (2) Yarn 설치터미널에 다음을 입력한다.npm install -g yarn npm써도 되긴하는데 난 yarn이 더 익숙.. 2025. 6. 8.
TOP

Designed by AndersonLab

티스토리툴바