Frontend
-
CSS : background image 꽉차게 채우는 법Frontend 2021. 12. 27. 23:41
이미지를 호출하여 원하는 곳에 지정하다보면 해당 사이즈 만큼 꽉차게 채우고 싶을 때가 있다. 이럴때에는 간단하게 background-size 를 cover 로 설정하면 된다. 아래와 같이 CSS 를 설정하면 된다. .image { width: 50px; height: 50px; background-image: url('~@/assets/images/home_black.svg'); background-size: cover; }
-
javascript 배열에서 마지막 값만 제거하는 법Frontend 2021. 11. 30. 17:44
javascript 를 사용할때 배열에서 마지막 값만 제거 하고 싶을 때가 있다. 간단히 slice 로 원하는 범위로 끊어내면 된다. 이중 배열인 경우에는 map 함수를 같이 사용하면 되는데 각각 케이스별 구현은 아래와 같다. 1. 일반 배열에서 마지막 값 제거 마지막 은 뒤에서 - 로 계산 가능하다. const sample = [ "A", "B", "C", "D" ] sample.slice(0, -1); 2. 이중 배열에서 각 배열마다 마지막 값 제거 const sample = [["a", "b", "c", "d"], [ "A", "B", "C", "D" ]] sample.map(e => e.slice(0, -1));
-
javascript 객체의 key 와 value 확인하는 법Frontend 2021. 11. 28. 23:19
javascript 를 사용하다보면 객체에 키와 값을 동시에 확인하고 싶을때가 있다. 이럴때에는 간단하게 key를 뽑아내는 Object.keys 문법과 찾은 키를 객체내에 돌면서 찾아오는 forEach 문법을 함께 사용하면 해결된다. const obj = { firstKey: 'key1', secondKey: 'key2', } Object.keys(obj).forEach(key => { console.log(key); console.log(obj[key]); });
-
javascript: 객체 내부에 해당 key 값 존재하는지 확인하는 법Frontend 2021. 11. 28. 23:16
javascript 를 사용하다 보면 객체 내부에 해당 key 값이 있는지 여부를 체크하고 싶을 때가 있다. 이럴때에는 간단하게 in 문법을 통해 확인이 가능하다. '원하는 string' in 객체 와 같은 식으로 확인하면 된다. const obj = { firstKey: 'key1', secondKey: 'key2', } console.log('firstKey' in obj); console.log('secondKey' in obj);
-
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({ ... }..