전체 글 139

[vuejs] route를 통해 받은 중첩된 객체 param값, [Object object] 뜨는 문제 해결

Router를 이용하여 화면 전환을 하면서 데이터를 보내주는 경우 보통 아래와 같은 방식을 사용한다. const pageNm = 'FileName'; const param = {}; const router = useRouter() router.push({ name: pageNm, params: param }); }) 그리고 받아오는 쪽은 route를 이용하여 전달받은 데이터를 꺼내 사용할 수 있다. 그런데, param에서 중첩된 객체를 보내니 받는 쪽에서 제대로 꺼내오지 못하는 문제가 발생했다. 예를 들어 아래와 같은 형식의 데이터를 보내면 데이터 송신 부분 const fileName = 'Page'; const param = { a : 'A', b : 'B', bundleData: { c : 'C', ..

📕 Language/Vue 2023.03.31

[Javascript] 날짜 포맷 종류 (오늘, 이번달 말, 한달 전 등)

쓸 때 마다 찾아야해서 헷갈림 일단 여기에 모아놓고, 계속 추가 예정 0. 공통 데이터 포맷 유형 (YYYY-MM-DD) const getFormatDate = (date) => { let month = date.getMonth() + 1; month = month >= 10 ? month : '0' + month; let day = date.getDate(); day = day >= 10 ? day : '0' + day; return date.getFullYear() + '-' + month + '-' + day; } 1. 오늘 getFormatDate(new Date()) 2. 올해 1월 1일 getFormatDate(new Date(state.now.setFullYear(state.now.getFu..

[Javascript] Set

Set 1. 중복 값이 없는 유일한 값들의 집합 2. 순서에 의미가 없음 3. index로 접근 불가 1. Set 객체 생성 const set = new Set(); console.log(set); //Set(0) {} const set1 = new Set([1, 2]); //Set(2) {1,2} const set2 = new Set('hello'); //Set(4) {"h", "e", "l", "o"} ※ 배열의 중복제거 기능으로 사용 //기존 const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i); console.log(uniq([1, 1, 2, 2, 3])); // [1, 2, 3] //Set이용 const uniq = ..

[JPA] @Embeddable를 이용한 복합키 설정

JPA의 복합키 설정 방법은 @Embeddable 또는 @IdClass를 이용하면 된다. 여기서는 @Embeddable 이용 year와 category를 복합키로 만들어주고 싶은 경우 1. class를 하나 만들어 Serializable 인터페이스를 상속한다. 해당 클래스에 복합키로 사용할 컬럼들을 명시한다. @Data @Embeddable @NoArgsConstructor @AllArgsConstructor public class CategoryPK implements Serializable { @Column(name="YEAR") private String year; @Column(name="CATEGORY_NAME") private String categoryName; } 2. 선언한 복합키 클래스..

[javascript] 배열 안 객체 요소의 문자열 조합

/** * 3개의 타입 중, 2개의 타입 선택 시 해당 name 값 join을 이용해 하나의 문자열로 뽑아오기 */ const types =[ {name : '추천', value : 1}, {name : '묶음', value : 2}, {name : '단일', value : 3} ]; const values = [1, 2]; let arr = []; for(let i in values) { const data = types.filter((item) => item.value === values[i]).map(item => item.name); for(let n in data) { arr.push(data[n]); } } console.log(arr.join()); // "추천,묶음"

[vuejs] 이미지 업로드하여 preview 조회 (FileReader 또는 URL.createObjectUrl 사용)

방법은 2가지가 있다. (css는 모두 제거한 상태이므로 모양이 예쁘지 않음) 1. FileReader()를 사용하는 방법 - 비동기적으로 실행된다. - base64로 인코딩된 값을 반환 2. URL.createObjectUrl()을 사용하는 방법 - 동기적으로 실행된다. 실행 속도가 조금 더 빠르다. - hash 형태의 url을 반환 ■ FileReader 사용 const uploadImg = (e) => { var input = e.target; if (input.files && input.files[0]) { //사진 1개인 경우 (multiSelect 하려면 for문 돌려야함) var reader = new FileReader(); reader.onload = (e) => { state.imgUr..

📕 Language/Vue 2023.02.15

[TypeScript] 타입스크립트(TS) 기초

새로 옮긴 팀에서 타입스크립트를 쓴다. 예 그렇습니다. 뭐든 배워두면 좋으니까 ■ 타입스크립트(TypeScript)란? 마이크로소프트에서 개발한 자바스크립트의 슈퍼셋(superset) 오픈소스 프로그래밍 언어. 즉, 타입스크립트 ≥ 자바스크립트 타입스크립트(이하 TS)는 자바스크립트로 트랜스 컴파일된다. 1. 자바스크립트(이하 JS)는 매우 관대한 언어다. 이와 반대로 TS는 언어에 미리 타입을 부여하여 엄격하게 변수를 제한하는 것이므로 컴파일 시, 에러를 잡기에 용이하다. 2. 또한 실행 속도 시 장점이 있다. 런타임 시, 에러를 체크하는 대신 그 전에 사람이 직접 오류를 체크하기 때문에 JS에 비해 속도가 매우 빠르다. 3. 안전하며, 협업에 용이하다. 타인의 코드를 읽었을 때에 한 눈에 어떤 타입인..

[vuejs] vue-router 중첩 라우팅

// App.vue : 최상위 outlet 이 곳에 렌더링되는 컴포넌트가 최상위 outlet이 될 수 있다. 렌더링된 하나의 컴포넌트 안에 여러개의 중첩된 컴포넌트가 포함될 수 있다. // About.vue About App.vue라는 가장 바깥의 컴포넌트 안에 About.vue가 렌더링되고 About.vue 안에서 또 Info1.vue, Info2.vue가 렌더링되는 구조이다. children을 사용하여 중첩 라우팅을 할 수 있다. import Main from "@/views/Main.vue"; import DiarydWrite from "@/views/DiaryWrite.vue"; import Info1 from "@/views/Info1.vue"; import Info2 from "@/views/..

📕 Language/Vue 2023.02.07
반응형