[Vue] Vite로 프로젝트 시작하기

vite

프로젝트 생성하기 시작하기에 앞서 Vite 는 Node 18 이상 설치 되어있어야 한다.터미널(cmd) 에서 프로젝트가 생성되길 원하는 경로에서 명령어를 실행한다.[my-app] 이란 이름으로 Vite 프로젝트를 생성하였다. 명령어 실행 후 프로젝트를 생성에 관련된 몇가지 질문이 나온다. Framework 는 Vue로 선택한다. Typescript를 주로 하기도 하지만 Typescript로 하면 귀찮은 면도 있어서…Javascript 로 선택하였다. 터미널 명령어를 쳤던 경로에 프로젝트가 생성되어있는 것을 … Read more

[Node.js] 노드 버전 여러개 사용하기

NVM 설치하기 NVM 은 Node Version Manager 약자로 말그대로 Node 버전을 여러개 관리할때 사용한다.다운로드는 NVM 의 Github에서 다운로드 받을 수 있다. NVM 사이트로 이동 Download Now 를 클릭한다. 조금 내려보면 파일리스트가 나온다.nvm-setup.exe 를 받아준다. 다운받은 실행해 NVM을 설치해준다. 나같은 경우는 node 16이 이미 설치 되어있어서 nvm에서 관리를 하겠냐는 알림이 떴다.예(Y) 해준다. 이후 설치가 완료된 후 … Read more

[Vue] Vue는 뭐고 Vite는 뭐야

vite

Vite 란? Vite(바이트)는 Vue의 빌드 도구이다.Vite 는 프랑스어로 빠르다 라는 뜻인 vitesse 에서 영감을 받아 명명했다고 한다.Vite는 프론트엔드 개발에 사용되는 모듈번들러 이다. Module Bundler(모듈번들러) 란? 모듈 번들러는 프론트엔드 개발에 사용되는 도구로 여러 개의 모듈화된 자바스크립트 파일 및다른 종류의 파일들을 하나로 묶어주는 역할을 한다. 모듈 번들러 없이 import, export 같은 모듈화 문법을 사용하면 에러가 발생한다.이러한 모듈화 … Read more

[Thymeleaf] 비동기(ajax)로 View 갱신하기

비동기로 변경? 타임리프를 사용한다면 서버에서 받아온 데이터로 화면을 그리는 경우가 많을 것이다.그러다보면 화면 깜박임없이 새로운 데이터로 view를 갱신해야할때가 생긴다.그럴때 비동기 ajax를 활용해 View 를 갱신한다. 준비 Controller 에 list 라는 key 값에 a,b,c,d 값을 던져주도록 하였다. 이후 view 에서는 list 값을 그려주도록 하였다. 결과 서버에서 response 된 list 값인 a,b,c,d 가 제대로 그려지는걸 확인 할 … Read more

[Datepicker] Datepicker 추천(JQuery UI 아님)

Datepicker 란? datepicker 는 쉽게 말해 날짜를 선택할때 사용하는 UI 라이브러리다.흔히 JQuery UI 를 사용을 한다. JQuery UI 흔히 사용하는 JQuery UI 는 디자인이 너무 별로이다.그래서 다시 css를 커스텀 해줘야하는 번거러움이 있다. 추천하는 Datepicker Datepicker 사이트로 이동 사이트로 이동하면 datepicker 의 샘플들을 볼 수 있다. JQuery UI 보다는 깔끔한 편이여서 커스텀 없이도 그냥 쓰기에도 괜찮다. … Read more

[Thymeleaf]타임리프 시작하기

패키지 추가하기 먼저 타임리프를 사용하기 위해선 당연히 타임리프 패키지가 필요하다.프로젝트에서 사용하는 것에 맞게 gradle 이나 maven에 추가해준다. 기본 구성 이후 application.yml 에 가서 thymeleaf 단어를 살짝 쳐보면 인텔리제이의 경우prefix가 나오는데 classpath:/templates/ 가 기본 경로라는 것을 알수가 있다.여기서 경로를 바꾸고 싶다면 변경을 해준다. 보통은 templates 그대로 사용하기때문에 나도 templates 폴더를 만들고하위에 index.html 을 만들어주었다. 이후 index … Read more

네이버페이x삼성페이 랜덤박스 이벤트

네이버페이x삼성페이 네이버페이에 삼성페이를 연결해서 사용할 수 있다는 걸 알고 계신가요?이번에 12월달 한 달간 네이버페이 삼성페이로 현장결제를 하면 랜덤박스에서 나온포인트를 지급해주는 이벤트를 진행 중입니다.(3천원 이상 결제시) 랜덤박스 네이버페이 앱을 설치 후 혜택 탭으로 들어갑니다.해당 탭에 들어가면 랜덤박스 이벤트가 보입니다. 이벤트를 선택해서 들어가면 랜덤박스 확인하기 나옵니다. 저 같은 경우에는 랜덤박스 확인하기를 해보니 5천원이 당첨되었습니다. 이 5천원은 아직 … Read more

[IntelliJ]인텔리제이 플러그인 추천

인텔리제이플러그인

Atom Material Icons 인텔리제이 파일 확장자에 따라 아이콘들을 바꿔주는 플러그인 입니다.필수적은 아니지만 쓰다보니 기본 아이콘은 못쓰겠더군요.나름 아이콘도 깔끔하고 확장자가 뭔지 눈에 확 들어오기 때문에 사용해보시길 추천합니다. 단점으로는 조금 느려지기도 한다더군요. 저는 예전부터 써서 느린건지 모르겠네요. CamelCase 다음으로 추천드릴 플러그인은 camelcase 입니다.개발을 조금 해보셨다면 들어봤을 단어죠? 카멜케이스는 명명규칙의 한 단어 입니다.보통 Java 는 카멜케이스(camelcase)로 작성하고 sql은 … Read more

[MySQL/Maria] 자주쓰이는 DATE Query

datequery

ADDDATE (날짜 더하기/빼기) 먼저, 가장 자주 쓰게 되는 쿼리로 날짜 더하기/빼기 입니다.ADDDATE 혹은 DATE_ADD 를 사용합니다. 년 year 월 month 일 day 개발 하실때 주의하실 점 한가지 말씀드리 year 입니다.뭐를 주의해야하냐구요..? 바로 윤달 입니다. 2020년은 윤달이 있는 해로서 2월 29일이 있는데요. 2020년처럼 윤달이 있는 해 일때 1 년을 더하면 28일로 동일한 결과가 나옵니다.이러한 결과는 배치나 … Read more

[SpringBoot] 스프링 트랜젝션(@Transactional) 사용

spring transaction

스프링에서의 트랜잭션 스프링에서는 트랜젝션을 적용하려면 어떻게 해야할까?스프링에서는 간편하게 트랜젝션을 적용할수 있다. 바로 @Transactional 어노테이션을 사용하면된다.트랜젝션이 적용을 하고 싶은 서비스의 class 나 method에 @Transactional 을 붙여준다면 알아서 트랜젝션이 적용된다. 소스 구성 먼저 Mybatis 를 사용한 예시를 보여드리겠습니다. TestController -> TestService -> TestMapper 구조입니다. 먼저 Controller 입니다. Serivce 이구요. Mapper 입니다. 생성한 Test Table 입니다. 정말 단순한 … Read more