본문 바로가기

반응형

전체 글

(23)
[Vue3] Vite Project 생성하기(Vite 서버 실행 속도 비교) 1. Vite Project 생성하기vite project생성 명령어 실행y 입력 후 엔터로 vite pakages 설치❯ npm create vite@leastNeed to install the following packages: create-vite@5.2.3Ok to proceed? (y) y  project name 입력✔ Project name: … vite-project  vite를 사용할 framework 선택 (vue)? Select a framework: › - Use arrow-keys. Return to submit. Vanilla❯ Vue React Preact Lit Svelte Solid Qwik Others  사용할 스크립터 언어..
[Vue3] Vite란? 무엇이며, 사용해야하는 이유 1. Vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.첫 번째, 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement(HMR)두 번째, 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용하여 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.vanilla, reat, vue 등에서 사용 가능 2. 기존 번들러 기반 도구의 문제점JavaScript 기반의 도구는 성능 병목 현상이 발생 및 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야함.HMR을 사용하..
[Vue3] Typescript 설정하기 터미널에서 Typescript를 적용할 프로젝트로 이동Typescript 추가 명령어 실행❯ vue add typescript  필요한 옵션 선택(Yes/No)? Use class-style component syntax? Yes? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes? Convert all .js files to .ts? Yes? Allow .js files to be compiled? No? Skip type checking of all declaration files (recommended for apps)? YesUse class-style comp..
[Vue3] 1. 환경 설정 및 프로젝트 생성하기 1. 환경 설정nodejs 설치https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgnode 버전 확인❯ node -vv16.20.0  vue cli 설치❯ npm install -g @vue/cli  vue 버전 확인❯ vue -V@vue/cli 5.0.8   2. vue 프로젝트 생성vue create {프로젝트이름} 실행❯ vue create vue-test-project  Vue3 선택Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)❯ Default ([Vu..
Spring Boot application.properties 값 가져오기 application.properties 에 있는 값을 가져오는 테스트를 진행해보겠습니다. 테스트해볼 값을 입력해줍니다. application.properties test.value=TESTVALUE test.value.int=123456789 TestController.java @Slf4j @RestController public class TestController { @Value("${test.value}") private String testValue; @Value("${test.value}") private static String testValue2; @Value("${test.value.int}") private int testValueInt; @Value("${test.value.int}"..
[STS] SpringBoot Database postgreSQL JDBC 연동(Hibernate, JPA, SLF4J2 + Log4j2) 1. local postgreSQL 환경 설정 postgreSQL설치 superuser(postgres) password 설정 시 잊어버리시면 안됩니다. 기본 포트 : 5432 https://www.postgresql.org/download/ PostgreSQL: Downloads www.postgresql.org DBeaver 설치 https://dbeaver.io/download/ Download | DBeaver Community Download Tested and verified for MS Windows, Linux and Mac OS X. Install: Windows installer – run installer executable. It will automatically upgrade ve..
[JAVA Logging] SLF4J(Simple Logging Facade for Java)란 무엇일까 Simple Logging Facade for Java의 약자로 로깅 프레임워크(ex: logback, log4j)에 대해 추상화 역할을 합니다. 최종 배포 시 사용자가 원하는 로깅 프레임워크로 배포할 수 있게 되는데 Facade에서 의미를 찾을 수 있습니다. 소프트웨어 공학 디자인 패턴에서는 크게 생성, 구조, 행위 패턴으로 나눌 수 있는데, Facade Pattern은 그 중 구조패턴에 속합니다. Facade Pattern 특징 서브 클래스들의 기능들을 미리 구현해놓고, 상위의 인터페이스를 제공함으로써 복잡한 로직을 알 필요가 없어진다. 인터페이스에만 접근하면 되므로 사용성이 용이하고, 사용자 또는 시스템끼리의 결합도를 낮춰 의존성이 감소된다. 따라서, 시스템의 복잡성을 감추고, 사용자가 시스템에 접..
STS github 연동하기(github 처음 commit) 1. github 가입 https://github.com/ GitHub: Let’s build from here GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 2. git 설치 https://git-scm.com/ Git git-scm.com 3. github > Create a new repository - 왼쪽 상단에 있는 New 버튼으로 새로운 repository 생성 -..

반응형