Dahoon06 Store

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

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

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

JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. JSON 특징 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체 표기법과 아주 유사하다. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 ..

AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것 비동기 방식 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다. 비동기 방식의 장점 페이지 리로드의 경우 ..

https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org

location.replace('교체할페이지'); replace는 현재의 페이지에서 실행된다(새로운창에서 열리는게 아니라) 또한 페이지가 이동하는것이 아니라 교체 되는 것이기 때문에 뒤로가기 버튼이 비활성화 되어있다. location.href="이동할페이지"; 페이지의 이동이 일어난것이기 때문에 뒤로가기 버튼 활성화(이동가능)