eunas blog

■ 동적 라우팅 URL이 필요에 따라 바뀌어야하는 경우 아래와 같이 콜론(:)을 사용하여 파라미터를 넣어줄 수 있다. 파라미터의 이름이 id 인 것은 필수는 아니나, 컨벤션이라고 함 const routes = [ { path: '/user/:id', component: UserAuth, }, { path: '/main', component: Main, }, ] export default routes 물론 두 개 이상의 동적 파라미터를 가질 수도 있다. { path: '/user/:id/auth/:pageNm', component: UserAuth, }, {{ item.user }} 해당 컴포넌트에서 파라미터의 변경 시점을 잡고 싶다면? 방법 1. watch로 $route 객체를 감지하면 된다. watch..

정말 오랜만에 개인 프로젝트를 켰는데 화면단과 서버가 연결되지 않았다. 내 흐린 기억 속 분명 정상적으로 돌았는데 (...) Access to XMLHttpRequest at 'http://localhost:8081/api/diary/selectAll' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 열심히 구글링을 해보니 SOP 정책을 위반하여 그렇다고 한다. SOP 정책이란 무엇일까 ㅡ.ㅡ ■ SOP (Same-origin policy) SOP는 '동일 출처 정책'의 약자로, 보안 메커니즘..

자주 헷갈려서 참조형은 아묻따 JSON.parse()와 JSON.stringify()를 이용하여 깊은 복사를 해왔는데 이 방법은 문제가 발생 할 여지가 있다고 한다. 아래에 같이 이야기하겠다. 객체는 참조형이라 복사 시, '='를 이용하면 값이 복사되지 않으며, 단지 메모리 주소 값을 복사하여 같은 메모리를 공유하게 된다. 원본 데이터를 건들 수 있기 때문에 매우 주의하여야 한다. ■ 얕은 복사(Shallow Copy) 1. Object.assign(target, ...sources) 객체 자체는 깊은 복사가 가능하다. 단, 객체가 2차원 이상이라면 얕은 복사가 된다. let obj = { a: 1, b: { c: 2 } }; let copyObj = Object.assign({}, obj); conso..

const arr = [{a:1, b:2, c:3}, {a:4, b:5, c:6}]; { a: 5, b: 7, c: 9 } const arr = [{a:1, b:2, c:3}, {a:4, b:5, c:6}]; const result = arr.reduce((acc, cur) => { acc.a += cur.a; acc.b += cur.b; acc.c += cur.c; return acc; }, {a:0, b:0, c:0}); const arr = [ { key: 100, alphabet: [{ a: 1, b: 2, c: 3 }] }, { key: 200, alphabet: [{ a: 4, b: 5, c: 6 }] }, ]; { a: 5, b: 7, c: 9 } let rsltObj = {}; for (c..

{{ index }} /** 결과 1 2 3 4 5 6 7 8 9 10 11 12 */ {{ index }} /** 결과 0 1 2 3 4 5 6 7 8 9 10 11 */

state.thisYearTypeR은 객체 해당 데이터의 변경을 감지할 때, 변경 전 데이터가 필요한 경우가 있다. const func = (value, preVal) => { console.log('현재값', value); console.log('이전값', preVal); }; watch( () => state.thisYearTypeR, async (val, preVal) => { await func(val, preVal); }, { deep: true, } ); 위와 같이 deep 플래그를 이용하여 데이터 감지 시, 동일한 배열을 참조하기 때문에 새 값과 동일하다. const func = (value, preVal) => { console.log('현재값', value); console.log('이전..

input 태그에 number 타입의 데이터를 입력함에 따라 타 컬럼의 데이터가 계산되어야하는 경우, 해당 input box에는 string 타입의 데이터가 들어오면 안된다. @input 태그를 써서 데이터 변경을 감지하고, 그때그때 계산을 해주기 때문에 string이 들어오면 바로 NaN 값이 되어버리므로, 다시 number를 입력해도 NaN이 되어버렸기 때문에 계산이 불가하다. 결론은, input 박스에 잠깐이라도 string이 입력되어서는 안되는 상황 보통 이렇게 type을 number로 주는 경우가 많은데, 이건 잠깐이나마 string 값이 입력된 후 사라지기 때문에 @input에 감지된다. type을 text로 바꾸고, oninput에 정규식을 넣어 숫자가 아닌 값이 입력되는 경우 replace..

input 태그에 입력하는 데이터의 변화를 감지함에 따라 어떤 추가 행위를 하고싶을 때 v-model을 이용하여 watch를 사용할 수도 있지만 v-model에서 내부 for문에 의한 변수를 사용하는 경우(아래와 같이) watch에서 v-model을 끌어와서 사용할 수 없기 때문에 곤란하다. 이럴때엔 @input 을 사용하면 간단하다. const changeYearly = (e) => { console.log('데이터 변화 감지'); console.log('event', e); }; 주의 저 event 객체에서 data를 가지고 오면 순간 데이터 값을 가져온다. 즉, 111을 입력해도 e.data는 1이다. 111을 가지고 오고 싶다면 e.target.value를 가져와야함

customize the value and text Customize the Appearance {{ data.text }} https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Columns/Customize_Cells/#Customize_the_Value_and_Text Customize Cells: DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress Thank you! We appreciate your feedback. js.devexpress.com 실무 적용 const roadAddress = (rowData) => { re..

마스터 테이블에서 A, B, C 데이터 3개를 이용하여 검색기능을 구현한다. 우선, 프론트쪽에서 단순 String 값이 아닌, Body형태로 데이터를 보내고 싶어서 백엔드에서 PostMapping을 이용하여 조회 API를 구현했다. (참고로 GetMapping으로 구현하면 Body로 데이터를 보내도 포스트맨에서는 오류가 나지 않는다. 프론트에 갖다 붙이면 당연히 오류가 남 axios가 아닌 다른 통신 라이브러리에서는 GET & BODY 조합이 가능한 게 있어서 그렇다고 한다.) 여튼 얼레벌레 만들었음 프론트에 붙일 때, 주의해야할 것이 바로 param get / post형식으로 보낼 때 약간의 차이가 있다. const { data } = await axios.get(process.env.V..