Frontend
-
html label 이란? label 태그 for 사용법Frontend 2021. 2. 8. 22:18
html 에서 로그인양식이라든지 어떠한 틀을 만들려고 할때 아래와 같이 label 태그를 보는 경우가 있다. 로그인 ID label 은 주로 값을 입력받는 곳에 이름을 적는 태그이며 for 를 통해 for 뒤에 나오는 값 과 id 이름 이 같은것을 찾아 연결시키는 역할을 한다. 즉, 간단히 말하면 위와 같은 경우에 label 부분을 마우스로 클릭하여도 for="userId" 를 통해 id="userId" 를 가지는 input 부분에 값을 입력할 수 있다.
-
javascript 에서 ... rest 연산자 란?Frontend 2021. 2. 1. 21:36
javascript 에서 아래와 특정 데이터를 나눠서 선언하여 불러올 때 ... 으로 표시된 형식을 보는 경우가 있다. const arr = [1,2,3] const [a, ...rest] = arr 이런 ... 을 붙여 특정값을 선언하는 것을 rest 연산자라고 하며 ES6 에서 새롭게 등장하였다. 영어 뜻 그대로 rest 즉, 나머지를 의미하며 선언된 객체 전부 또는 특정 나머지 부분을 가져와 사용할 수 있다. 따라서 [a, ...rest] 과 같이 함께 적어주면 기존 배열 중 첫번째 값 1 을 a 로, 나머지 값인 [2,3] 을 rest로 자연스럽게 선언 하여 사용할 수 있다. const arr = [1,2,3] const [a, ...rest] = arr // a 는 첫번째 값인 1 console..
-
javascript 에서 ... spread 연산자 란?Frontend 2021. 2. 1. 21:22
javascript 에서 아래와 같이 ... 을 기존 값에 붙여주어 재사용하는 경우가 있다. let arr = [...arr, 1] 이런 ... 처럼 기존에 선언된 값앞에 적어주는 주는 것을 Spread 연산자라고 하며 ES6 에서 새롭게 등장하였다. 영어 뜻 그대로 spread 즉, 펼치다는 의미이며 객체나 배열을 펼쳐서 나열 할 수 있다. 따라서 [...arr, 1] 과 같이 함께 적어주면 기존 arr 을 [1,2,3] 과 같이 다시 적어줄 필요가 없이 간단히 새로운 글자나 객체를 추가할 수 있다. const arr = [1,2,3] // 아래와 같이 spread 연산자를 통해 배열을 간단히 합쳐줄 수 있다. // [1,2,3,1] console.log([...arr, 1])
-
vue class binding 여러개 하는 법Frontend 2021. 1. 29. 00:05
vue를 사용하다보면 아래와 같이 class 에 바인딩을 하여 CSS 를 준다거나 동작의 활성화등의 조건을 주는 경우가 있다. test 그리고 위와 같이 한가지의 클래스를 추가하는 것이 아닌 다양한 조건에 따라 클래스를 통해 기능을 활성화 시키거나 CSS 처리를 하고 싶을 때가 있는데 이럴 때에는 간단하게 아래와 같이 각각의 조건을 [ ] 를 통해 한번 더 감싸주면 된다. test 또는 더 간단하게 { } 사이에 콤마(,) 를 통해 연결하여도 동작한다. test
-
npm install 과 npm install --save 차이Frontend 2021. 1. 26. 21:42
npm 을 통해 패키지를 인스톨하려고 할때 아래와 같이 옵션으로 --save 를 붙이고 할때와 그냥 install 하는 경우가 있다. $ npm install pkg $ npm install --save pkg --save 옵션이 없는 경우에는 현재 node_modules 에 설치만 하지만 --save 옵션을 붙인 경우에는 package.json 의 dependecies에 추가되게 된다. 따라서 다음에 프로젝트를 다운받은 뒤 npm install 을 하게 될때에 함께 설치가 되게 된다. 따라서 협업을 할때에 새롭게 설치한 필요한 필수 모듈의 경우는 --save를 한 뒤에 반영하는것이 좋다.
-
export default 와 export 변수명 차이점Frontend 2021. 1. 23. 13:17
es6 에서 선언한 내용을 다른 곳에서 import 하기 위해 export 를 사용할 때가 있다. 그리고 이 때 export default 를 사용하는 경우와 name 이라고 선언한 내용을 반영하기 위해 export name 과 같이 사용하는 경우가 있는데 차이점은 아래와 같다. export default 를 사용하면 파일 전체를 가져올수 있으며 import 시에 내가 원하는 이름으로 사용이 가능하다. 예시는 아래와 같다. export 파일 export default { login() { console.log('login') } } import 파일 // 아래 import 다음 이름(loginfunc)은 마음대로 지정 가능 import loginfunc from './exportfile' loginfun..