분류 전체보기
-
인텔리제이(Intellij) / 웹스톰(Webstorm) 브라우저 팝업 제거 하는 법IT Common Sense 2021. 5. 5. 22:58
인텔리제이(Intellij) / 웹스톰(Webstorm) 을 사용하다 보면 계속 상단에 브라우저(Browser) 팝업(PopUp)이 떠서 코드를 가리는 경우가 존재한다. 이럴때 이 팝업 창을 없애고 싶은데 그럴 떄에는 아래와 같이 제거하면 된다. 1. 상단에 File을 클릭 후 settings -> tools -> Web browsers 에 들어간다. 2. 그런 뒤 제일 하단의 Show browser popup in the editor 의 체크 버튼을 모두 해제 한뒤 Apply 를 눌러준다. 3. 해결!
-
vue error 해결법 : vue 2 에서 sass-loader 설치 오류 해결하는법Error Handling 2021. 4. 28. 20:34
vue 버젼 2에서 scss 를 사용하기 위해 sass-loader 를 설치할 경우 아래와 같은 다양한 에러가 순차적으로 발생하면서 어려움을 겪을 때가 있다. Module build failed: TypeError: this.getOptions is not a function at Object.loader Module build failed: TypeError: Cannot read property 'toString' of undefined vue UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined 모두 설치한 모듈의 버젼이..
-
vue 프로젝트 구조 : views 와 components 차이Frontend 2021. 4. 28. 17:41
vue로 프로젝트를 구성하다보면 views 폴더와 compoents 폴더가 나눠져 있는걸 볼 때가 있다. 그리고 두 폴더를 확인하면 둘 다 vue 파일이라 어떤 기준으로 vue 파일이 위치하여야하는지 헷갈릴 때가 있다. 간단하게 router 폴더 아래에 index.js 를 보면 경로(path)별 component 가 명시되어 있는걸 확인할 수 있다. 즉, 이 router 속 component 에 명시된 vue 파일은 views 폴더 아래에 위치하고 views 폴더 속 vue 파일 내부에서 component로 호출하는 vue 파일들은 component 폴더 아래에 위치시키면 된다.
-
javascript 에서 웹브라우저 확인하는 방법Frontend 2021. 4. 28. 15:10
javascript로 익스플로어 IE 인지 크롬 Chrome 인지 확인하는 법 javascript 로 작업을 하다보면 IE 와 관련하여 CSS 를 반영하는 것이 어려워 IE 를 막을 떄가 있다. 그럴 떄에 코드에 IE 인지 Chrome 인지 체크하는 로직이 필요한데 아래와 같이 간단하게 navigator 를 이용하면 된다. 먼저 크롬인 경우에는 아래와 같이 userAgent 로 판별 가능하다. if (navigator.userAgent.toLowerCase().indexOf("chrome") != -1) { // 크롬 } 익스플로어 역시 IE 10 버전 까지는 위와 같은 방법으로 가능하지만 IE 11 버전에서는 또 이름을 Netscape 라고 이상하게 바꿔버려 아래와 같이 IE 의 레이아웃 엔진이름을 체..
-
vue 에서 페이지 접근 전 경고 창 또는 에러페이지 띄우는 법Frontend 2021. 4. 28. 14:56
vue를 이용하여 코딩을 하다보면 잘못된 경로로 접근하거나 권한이 없는데도 접근하려는 것을 막고 싶을 떄가 있다. 이럴때는 간단히 네비게이션 가드를 이용한다. router 가 지정되어있는 index.js 파일로 간뒤 아래와 같이 코드를 입력하면 된다. 아래와 같이 alert 부분에 방지하고 싶은 조건등을 적어준 뒤 이벤트를 발생 시키면 된다. const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // 조건 alert('here') }) 또는 원하는 에러 페이지로 이동 시키고 싶을 때에는 아래와 같이 next 에 해당 페이지 라우터 이름을 명시해주면 된다. const router = new VueRouter({ ... }..
-
Webpack / Bundler / Browserify / Babel 이란?Frontend 2021. 4. 20. 00:01
webpack 이란? 프로젝트 내부의 수많은 javascript 를 각각 브라우저에 로딩하면 느리고 충돌날수 있기 떄문에 어떤 파일이 어떤 파일을 바라보고 있는지 의존성을 파악한 뒤 이런 파일(모듈들)을 의존관계를 반영하여 묶어서 이용할 수 있게 하는 도구 => Javascript, Css, Image 등의 파일을 자바스크립트 모듈 하나로 로딩해서 사용할 수 있게 해주는 자바스크립트 정적 모듈 번들러 * Entry : 묶어줄 모듈의 시작점 * Loader : Image, Css 등을 웹팩이 알 수 있게 변경하는것 * Output : 하나로 묶을 결과물의 위치와 이름 * Plugin : bundle 된 javascript 결과물들을 처리, Loader 는 파일단위 처리 Bundler 란? 묶음이란 뜻처럼 ..
-
vue-cli 를 이용한 vue init 옵션별 차이Frontend 2021. 4. 19. 23:39
vue cli 를 통해 처음 프로젝트를 생성할때 다양한 옵션에 따라 지원되는것이 달라지는데 각각 명령어별 해당 옵션은 다음과 같다. $ vue init browserify Browserify + vueify 조합 (여러개 js 파일들을 하나로 묶어줌) => 코드 수정후 자동 재실행하는 hot-reload, 코드를 검사하는 eslint, 유닛 테스트 지원 $ vue init browserify-simple 간단한 Browserify + vueify 조합 (여러개 js 파일들을 하나로 묶어줌) => Browserify 를 이용한 빠른 개발을 위한 코드 수정후 자동 재실행하는 hot-reload 지원 $ vue init webpack webpack+vue-loader 조합 (자바스크립트 모듈을 비롯한 관련 리..
-
vue v-if 와 v-show 차이점Frontend 2021. 4. 11. 23:03
상태에 따라 현재 템플릿이나 정보를 보여줄지 말지를 Vue 를 통해 나타낼 때 흔히 v-if / v-else 디렉티브 또는 v-show 디렉티브 를 사용한다. 둘 다 보여줄지 말지를 조건에 따라 결정한다는 것은 같지만 큰 차이점이 있다. v-if 는 조건이 맞지않다면 해당 태그 자체를 생성하지 않고, v-show 는 조건이 맞지않아도 해당 태그는 생성한 뒤 보이지 않게 처리를 한다는 점이 다르다. 즉, v-show 는 사실 렌더링은 한 후 display: none 처리를 한것이라고 생각하면 된다. 따라서 둘다 결과적으로 화면에서 보이는 것은 같지만 상태가 true false 가 계속해서 한 화면에서 반복되는 경우에는 v-if 의 경우 해당 태그를 그렸다가 지웠다 하기 때문에 v-show 를 사용해 주는 ..