전체 글

Spring 스프링 프레임워크(Spring Framework)는 자바 플랫폼을 위한 오픈소스 애플리케이션 프레임워크로서 간단히 스프링(Spring)이라고도 불린다. 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준프레임워크의 기반 기술로서 쓰이고 있다. Spring Boot 스프링 프레임워크는 기능이 많은만큼 환경설정이 복잡한 편이다. 이에 어려움을 느끼는 사용자들을 위해 나온 것이 바로 스프링 부트다. 스프링 부트는 스프링 프레임워크를 사용하기 위한 설정의 많은 부분을 자동화하여 사용자가 정말 편하게 스프링을 활용할 수 있도록 돕는다. 스프링 부트 starter 디펜던시만 추가해주면 바로 API를 정의하고, ..

루트 폴더에 아래와 같이 폴더 구조를 생성해주세요. css: css를 저장합니다. imgs: png, svg와 같은 이미지들을 저장합니다. js: js svg 파일, 모듈 파일들을 저장합니다. stylesheets: scss, sass 등의 스타일 시트를 저장합니다. 스타일 시트 정리 스타일 시트 구조는 사람마다 의견이 모두 다르므로 사용하면서 편한 대로 구성하시되 기본적인 골자를 알려드리기 위해 아래 가이드를 작성합니다. 아래와 같이 스타일 시트들을 생성해주세요. main.scss : 메인 스타일 시트 파일로써 각 포인트가 되는 scss 파일 임포트, 변수 export의 역할을 합니다. app.vue에 import 해줍니다. @import "./global"; @import "./colors"; @im..

저번 스토어 수업에서 피냐를 설치해보신 것처럼 plugins는 넉스트에서 사용할 라이브러리를 등록하는 역할을 합니다. plugins에 등록하면 라이브러리를 초기화 할 때 각 라이브러리가 의도한 대로 코드가 동작할 수 있게 해줍니다. (글로벌 변수 등록 등) import { PiniaPlugin, PiniaPluginContext } from "pinia"; // pinia에서 초기화 할 때 실행해줄 함수 function MyPiniaPlugin({ store }: PiniaPluginContext) { store.$subscribe((mutation) => { // 스토어 값이 바뀔 때 로그 찍어줌 if (process.env.MODE === "dev") console.log(`[🍍 ${mutation...

요즘 프론트엔드 개발 트랜드에서 스토어는 빼놓을 수 없는 개념입니다. Redux, Vuex… 여러 스토어들을 많이 들어봤을 거에요. 아.. 복잡하다… ㅜㅜ 하지만 우리에겐 🎉pinia🎉가 있습니다. 제가 살면서 본 스토어 중에 제일 쉬워요. 무려 dispatch가 없어요…!!! 진작 이렇게 좀 만들지. pinia를 설치해봅시다. 아래 명령어를 터미널에 입력해주세요. yarn add pinia @pinia/nuxt --save-dev yarn으로 설치하는 이유는 npm으로 설치하면 pinia와 @pinia/nuxt 간의 의존성이 잡혀 있지 않아 에러가 뜹니다. Nuxt는 yarn에 최적화 되어 있습니다. 하지만 우리는 기본에 충실하기 위해 npm을 사용해봐야해요.. ㅜㅜ 그래서 생성된 yarn.lock 삭..

docs: https://nuxt.com/docs/guide/directory-structure/layouts layouts는 Nuxt에서 헤더, 푸터나 배경 등을 재활용하기 위해 사용합니다. root 경로에 layouts폴더 생성 > default.vue 파일 생성 > 아래 코드 입력 home posts profile login footer app.vue에 아래 코드 넣기 혹시 에러가 난다면 컨트롤 + c 연타연ㅌ 아래와 같은 화면이 나온 것을 볼 수 있습니다. 되게 간편하죠? 이제 앱의 헤더와 푸터를 여러 페이지에서 동일하게 맞춰줄 수 있게 되었습니다. Nuxt3의 기본 레이아웃 이름은 default.vue 입니다. 그럼 다른 레이아웃은 어떻게 씌울까요? 로그인 페이지를 만들어 봅시다. 로그인 화면에..

docs: https://nuxt.com/docs/guide/directory-structure/pages pages는 홈페이지의 각 페이지들이 저장됩니다. Nuxt에서 자동으로 라우팅 설정을 해주기 때문에 따로 라우팅 설정을 안해도 되는 간편함이 있습니다. nuxt에서 sass, scss를 사용하기 위해서 아래 명령어를 입력해줍니다. npm install sass app.vue에 아래 코드를 넣어줍니다. home posts profile NuxtLink는 라우트 해주는 컴포넌트로 to안에 원하는 경로를 입력합니다. script옆의 setup은 vue3에서 제공해주는 setup스크립트를 사용한다는 의미입니다. docs: https://vuejs.org/api/sfc-script-setup.html vue..