728x90
반응형

til 3

[TIL] Vue에서의 백엔드 통신

🙋🏻‍♂️ 오늘 받은 질문 "Vue에서 axios를 통해 백엔드로 통신하는데 사용하는 proxy를 이해 못 하겠어요. 왜 이렇게 사용하는 건가요.?" 질문을 받고 난감했다... 프로젝트를 진행할 때 항상 그렇게 사용해 왔기에 전혀 의구심을 품지 못 했었다. 그렇기 때문에 대답을 못 해드렸다. 같이 모니터를 보면서 어떤 식으로 동작하는 건지 이곳저곳을 고쳐보면서 흐름을 찾아나갔다. 그치만 어떤 식으로 흘러가는지만 확인할 뿐 정확히 왜 그렇게 되는지 알지 못했다. 그래서 오늘은 이 부분을 정리해볼까 한다.. Vue에서는 최상단(루트) 위치에 vue.config.js를 생성하여 아래와 같이 작성하면 proxy 패턴을 사용할 수 있다. module.exports = { devServer: { proxy: { '..

개발노트/Note 2022.11.14

[TIL] Vue Router Guard (2022-08-01 내용 이전)

💡 문제점 유니서베이 테스트 중에 URL에 프로젝트 번호를 입력하면 권한이 없더라도 접근이 가능한 문제점이 발견되었다. 프로젝트의 고유 번호가 630 이라고 하면 URL에 직접 make/630 등 프로젝트 번호를 입력하면 내 프로젝트가 아니여도 편집 및 실사 진행이 가능하다. ⚡ 원인 프로젝트에 관련하여 이 프로젝트가 내 프로젝트인지 확인해주는 검사 로직이 없었다. 그렇기 때문에 URL로 직접 입력하게 된다면 누구나 접근할 수 있는 문제점이 있다. ⚒️ 해결 - vue routes 에서 처리 라우터 이동 전에 권한을 검사하는 로직을 짜서 접근을 막는 방법 - Nest 에서 Custom Guards 를 만들어서 처리 요청이 왔을 경우 백엔드에서 권한을 조회한다. 이 2가지 중 하나만 해줘도 권한이 없는 프..

개발노트/Note 2022.09.13

[TIL] JavaScript Function (2022-08-10 내용 이전)

이번에 새로 두 분이 입사하셨다. 한분이 제이쿼리를 학습하시면서 remove()를 사용하는데 선택한 값이 지워지지 않는다고 질문을 주셨다. (사내 서베이 솔루션이 제이쿼리로 짜여있어 이 솔루션 한에서는 제이쿼리를 활용하고 있기 때문에 어느정도 제이쿼리를 다룰 줄 알아야한다.) 코드는 이러했다. $(document).ready(() => { $('#menu li').click(() => { this.remove(); }) }); 로그를 찍어보니 여기서 this 가 window 객체를 가르키고 있었다. 그래서 내가 알려준 코드는 아래와 같다. $(document).ready(() => { $('#menu li').on('click',(e) => { const target = e.target target.re..

개발노트/Note 2022.09.08
728x90
반응형