Frontend
-
javascript Array 객체 foreach 사용법Frontend 2021. 3. 19. 13:35
자바스크립트를 하다보면 각 배열의 값을 foreach 문을 사용하여 하나씩 뽑고 싶을 때가 있다. 이럴 때에는 간단하게 세가지 방법이 있는데 forEach 함수나 map 함수, 그리고 for of 형식을 사용하면 해결된다. 각각의 예시는 아래와 같다. ex) forEach 함수 const arr = ['a','b','c','d']; arr.forEach((item) => { console.log(item); }) ex) map 함수 const arr = ['a','b','c','d']; arr.map((item) => { console.log(item); }) ex) for of 형식 const arr = ['a','b','c','d']; for (const key of arr) { console.log..
-
vue 에서 문자열 html 코드를 읽게 하는 법Frontend 2021. 3. 16. 23:04
vue에서 각각의 정보를 하나씩 읽어 화면에 표현하는 것 대신 미리 생성되어있는 html 코드를 바로 입력해주고 싶을때가 있다. 이럴때에는 간단하게 v-html 이라는 디렉티브를 사용하면 된다. 특히 이는 값이 html 코드 값이 DB 에 저장 되어 있어 String 형식으로 호출될 때 유용하다. v-html 을 이용하게 되면 문자열로 되어있는 html 코드를 판단하여 바로 호출 가능하다. 예시는 아래와 같다. 실행 결과 css 까지 잘 입력 받는것을 확인 할 수 있다. ex) test.html
-
Javascript : 배열에서 특정 값 제거 하는 법Frontend 2021. 2. 17. 22:13
Javascript 에서 배열에서 특정 값을 제거 하고 싶을 때가 있다. 이때는 filter 함수를 사용하면 손쉽게 가능하다. filter() 함수는 배열 속에서 특정 조건을 만들고 그 조건들을 만족시키는 새로운 배열을 만들어서 리턴이 가능하다. 따라서 아래와 같이 filter 속에 조건을 넣어 사용하면 된다. ex) 배열 중 값이 1인 것을 제거하시오. let arr = [1, 'a', 'b'] // 1인것 제외 arr.filter(v => v != 1)
-
Javascript : map 함수에서 return dictionary 형태로 받는 법Frontend 2021. 2. 17. 22:03
Javascript 에서 map 함수를 통해 각 값을 하나는 dictionary 형태의 key로, 또 다른 값은 dictionary 형태의 value 로 받고 싶을 때가 있다. 이럴 때에는 간단하게 아래와 같이 key로 가지고 싶은 함수를 [] 로 감싸주고 : 뒤에 value 로 가지고 싶은 값을 입력하면 된다. let arr = [{'a':'wantTokey', 'b': 1}] // 아래와 같이 key 부분을 [] 로 감싸준다. arr.map(v => ({[v.a]:v.b})) 그리고 또 다른 경우로 Javascript 에서 map 함수를 통해 이미 정해진 값을 key 로 한 뒤 다른 값을 value 로 설정해주고 싶을 때가 있다. 그럴 때에는 위와 비슷하게 key 부분에 [] 없이 원하는 이름을 적어..
-
Javascript : 다중 배열 합치는 법 (열 병합)Frontend 2021. 2. 17. 18:51
Javascript 아래와 같이 두개의 다차원 배열이 있을 때 이 둘을 합쳐 하나의 배열로 만들고 싶을 때가 있다. 특히 일반적인 병합이 아니라 각각의 열병합 형식으로 두개를 합치고 싶을 때가 있다. let arr1 = [[ 1, 'a' ], [ 2, 'b' ]] let arr2 = [[ 3, 'c' ], [ 2, 'd' ]] 이럴 때에는 map 함수를 응용하면 된다. map 내부에서 배열의 순서를 기억하는 index 파라미터를 사용한다. 코드는 아래와 같다. let arr1 = [[ 1, 'a' ], [ 2, 'b' ]] let arr2 = [[ 3, 'c' ], [ 2, 'd' ]] // 열 병합 let arr3 = arr1.map((arr, index) => arr.concat(arr2[index]..
-
package-lock.json 이란?Frontend 2021. 2. 8. 22:49
흔히 npm 관련 모듈의 정보를 package.json 에 저장한다. 그런데 npm install 을 하는 경우에 package-lock.json 이라는 파일이 생성되어 있음을 확인할 수 있다. package-lock.json 은 package.json 보다 정확한 버전 정보를 기록하고 생성시의 의존성에 대한 정보를 가지고 있어 협업시 다른사람이 npm install 을 할 때에 잘못된 모듈을 설치하여 오류가 나는 것을 방지한다. 예를 들면 package.json 은 아래와 같이 버젼의 범위가 기록되어있지만 "devDependencies": { "@vue/cli-service": "~4.5.0", }, package-lock.json 파일은 아래와 같이 정확한 버젼이 명시되어있다. "@vue/cli-se..