2023년 8월 1주차 회고록

개발환경 준비

InteliJ , VScode , Slack , Figma

*. VScode Plugin : Vue Language Features (Volar), HTML CSS Support, Auto Rename Tag, Material Icon Theme, Vue 3 Snippets

 

 

---

 

 

Cannot read properties of undefined (reading 'stdin') 오류 해결

VScode 에서 npm run server 명령어 실행시 " Cannot read properties of undefined (reading 'stdin') " 에러가 발생했었다.
이유는 npm 버전(9.5.1)과  Node.js 버전(18.16.1)이 서로 달라서 발생했고, npm 버전 다운그레이드로 해결했었다 : )

npm install -g npm@7

 

 

---

JPA Native Query 사용 방법 

기존의 자료를 정리하던중,  우연히 JPA Native Query 관련 내용을 발견해서 정리해보았다.

 

 

Repository 파일에서

게시판의 제목, 혹은 내용을 검색하는 내용으로 작성되어있다.

words 내용은 Service 계층에서 받아온다

        @Query(
        nativeQuery = true
        , value =" SELECT * FROM board"
                +" WHERE UPPER(board_title)"
                +" LIKE UPPER(:words) OR UPPER(board_content) LIKE UPPER(:words);"        
        )
    	public List<BoardEntity> getSearchWord(@Param("words") String words);

Service 파일에서

검색할 때 필요한 내용 words 변수를,  Repository로 전달해주는 코드가 작성되어있다.

 

List<BoardEntity> resultSet = boardRepository.getSearchWord(words);

 

 

---

 

 

Vuejs 공부

ref 와 reactive,  반응성의 차이

ref 는 모든 타입의 데이터를 받을 수 있으며, 원본이 변경될경우 사본의 내용이 같이 변경되는 특징이 있고,

reactive 는 정해진 타입의 데이터(Object, Map, Set ..)만 받을 수 있고,  원본의 내용이 변경되어도 사본은 변경 x

💡 단, ref 로 감싸진 값에 접근하기 위해선  변수명.value 를 통한 접근이 필요하다

 

 

 

reactive 를 사용한 원본 값이 변경될 때, 사본도 같이 변경되게하려면,  toRef() 함수

reactive 는 원본 내용이 변경되었을때,  사본의 데이터는 유지되는 특징이 있는데

만약, 원본 변경시 사본도 함께 변경되는 ref 처럼 작동되길 원한다면 toRef() 함수를 이용하면 된다.

<script setup>
import { reactive, toRef } from 'vue';

// 실험용 reactive 객체 생성
const reactiveObject = reactive({
  name: 'minwoo'
});

// 변수명 = toRef(reactive객체명, '객체가 갖고있는 변수명');
const nameRef = toRef(reactiveObject, 'name');

// reactive -> ref 로 변경되었기에, 변수명 뒤에 .value 를 붙여서 출력
console.log(nameRef.value); // 'minwoo'

// reactive 의 변수(원본)을 변경시,  nameRef(사본)의 값이 변경되는걸 볼 수 있다.
reactiveObject.name = 'mw';
console.log(nameRef.value); // 'mw'

</script>

 

 

---

 

 

Vue Component Library,  Element Plus

Element Plus 란

부트스트랩과 같이 디자인 컴포넌트들을 모아놓은 뷰js 라이브러리이다.

만들어진 컴포넌트들은 <el-태그명>  으로 사용된다.  <el-button>버튼명</el-button> 이런식으로 ..

 

공식문서 : A Vue 3 UI Framework | Element Plus (element-plus.org)

A Vue 3 UI Framework | Element Plus

 

설치

npm install element-plus

 

적용 

기본

// 원래있던 내용들
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 추가된 내용들
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
  
// 마무리
createApp(App).use(router).use(ElementPlus).mount('#app')

한글화

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 추가된 내용 (한글 언어)
import ko from 'element-plus/dist/locale/ko.mjs'

// (기존 내용 주석처리) createApp(App).use(router).use(ElementPlus).mount('#app')
createApp(App).use(router).use(ElementPlus, {locale: ko}).mount('#app')

아이콘

// 기본 (라우터 포함)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Element Plus 라이브러리
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// Element Plus 한글화
import ko from 'element-plus/dist/locale/ko.mjs'

// Element Plus 아이콘 
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  
// 아이콘 적용 및 app 준비
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 마무리 ..
app.use(createPinia())
      .use(router)
      .use(ElementPlus, {locale: ko})
      .mount('#app')

 

사용

공식 문서 : Button | Element Plus (element-plus.org)

Button | Element Plus

 

기타

페이지네이션<el-pagination>을 사용할때,  page-size 속성 값이 변경되었으나  페이지 개수가 그대로인 경우가 있다.

원인은 전달된 숫자를 문자로 인식해서 오류가 발생했던 것이었고,  그래서 Number() 함수를 이용해 숫자로 변경해주니 해결되었다 😅

 

그 외, 달력 사용시 영어로 나오던 현상은 " 5.3.2 한글화 " 내용으로 main.js 파일을 작성하니 해결되었다.

element plus 달력을 한글로 사용하는 방법은 구글 검색해도 안나와서 당황했지만,  공식문서를 꼼꼼히 훑어보다 발견했다 ㅎㅎ;

 

 

 

 

---

 

UX에 대해서

UX(User experience)는,  UI 디자인을 이용할 때 사용자 경험을 뜻한다.

이쁜 디자인을 만드는 것도 중요하지만,  사용하기에도 편할 수 있도록 디자인하는 것이 UX 를 고려한다 이야기할 수 있다.

 

컴포넌트 배치는 중요도 순으로 좌측에서,  우측으로 해주는 것이 좋고,

아이콘 사용은 강조하고 싶은 곳에만 적용하는 것이 좋다. 

 

그리고 수정과 삭제버튼은 우측 하단에 주로 배치하는데,

자주 사용되는 수정 버튼이 가장 우측에 배치되는 특징이 있다.