Dev 썸네일형 리스트형 [javascript] ES6 - 템플릿 리터럴(template literals) INTRO Frontend 개발을 진행하면서, 모호했던 javascript의 개념들을 다시 한번 정리하기 위한 포스팅이다. ES6(2015) 에서 추가된 템플릿 리터럴에 대해서 알아본다. 0. 서론 - 기존 자바스크립트에서 문자열을 사용할 때, " " 또는 ' ' (큰따옴표, 작은따옴표) 를 사용하여 선언하였다. - 템플릿 리터럴은 `` (백틱) 문자를 사용하여 문자열을 선언하며, 아래와 같은 기능들을 포함한다. 1. 여러 줄 문자열을 쉽게 표현(multi-line string) 2. 표현식을 끼워넣어 가독성 증가(expression interpolation) 3. 태그를 지정하여 태그된 함수를 사용할 수 있다.(tagged template literal) - 아래는 간단한 템플릿 리터럴의 예이다 con.. 더보기 [javascript] var, let, const 차이점 INTRO Frontend 개발을 진행하면서, 모호했던 javascript의 변수 선언 키워드에 대한 개념들을 다시 한번 정리하기 위한 포스팅이다. 0. 서론 - 기존 javascript는 var이라는 키워드로만 변수를 선언하였다. - ECMAScript2015(ES6) 가 2015년에 도입되면서 let, const 키워드를 사용할 수 있게 되었다. - 이 3가지 키워드는 지역/전역 범위(스코프), 호이스팅 등의 개념에서 차이가 있다. - 결론부터 얘기하면 var는 더 이상 사용하지 않는것이 좋다. - 아래와 같은 큰 기업들의 javascript 스타일가이드를 보면 사용을 지양하라는 얘기와 함께 그 이유를 잘 적어놓았다. - airbnb javascript 스타일가이드(https://github.com/.. 더보기 [Kotlin] 표준 입/출력에 대하여 정리 INTRO 코틀린에서의 표준 입출력에 대해 정리한다. 1. 입력 - Java Scanner 사용 - 자바의 Scanner를 사용하는 방법이다. - java.util 라이브러리를 import 해준다. - 이후 with 매서드를 사용하여 receiver를 Scanner로 지정해주면, - main 함수의 this 는 Scanner객체가 된다. import java.util.Scanner fun main(args: Array) =with(Scanner(System.`in`)){ println("String Type :: ${this.next()}") println("Int Type :: ${this.nextInt()}") println("Float Type :: ${this.nextFloat()}") print.. 더보기 [kotlin] 생성자 - 기본 생성자와 보조 생성자(주 생성자와 부 생성자) INTRO 코틀린의 생성자에 대해 알아본다. 1. 생성자? - 우선 자바와 비교해보자. - 비교해보고, 다른 점과 각각의 장 단점에 대해 이야기 해볼것이다. - 자바에서 자주 사용하던 생성자는 아래와 같을 것이다. class Test { String name; int age; public T1(String name, int age){ this.name = name; this.age = age; } } - 코틀린에서 위와 같은 생성자를 만들어보자 class Test { var name: String var age: Int constructor(name: String, age: Int) { this.name = name this.age = age } } - 여기까지 본다면 비슷하다. - 그러나 코틀린은 아래.. 더보기 [Vue.js] vue 3.0 + Typescript 에서 vue-router적용기 1. 하고자 했던 것 - vue3.0과 typescript를 사용한 개발을 공부해보고자 프로젝트를 생성했다. - 프로젝트 생성 커맨드는 아래와 같다. npm init vite@latest - 생성 후 이것 저것 테스트 해보던 도중, - router 설정을 아무리 맞게 했는데도 정상 동작하지 않는 현상이 있었다. - package.json, main.ts, router/index.ts 설정 방법은 pass 2. 문제의 시작 - @ = 프로젝트의 루트 디렉토리를 지정하는 문법으로 알고있었고, vue2사용시에는 이 부분에서 문제가 없었기에.. 당연하게 사용했다. - 그런데 위 에러처럼 찾을 수 없다는 에러가 계속 발생하였다. - 경로를 @/~ 에서 ../~ 로 변경하니 정상 동작하였고, 경로문법에서 @를 사용.. 더보기 [Vue.js] vue 2.0 에서 LifeCycle에 대한 삽질 후기 (Error in mounted hook) 1. 하고자 했던 것 - 회사에서 하는 프로젝트를 진행 중에 Vue.js 2.0 버전 내 echart 라이브러리를 도입해야 하는 일이 생겼다. - 회사에서 진행하는 프로젝트는 특이하게도 구 버전인 Vue 2.0 버전과.. 2.0버전과 호환성을 보장할 수 없는 Typescript를 사용하여 개발중이다. - 무튼.. - 도입을 위해 echart라이브러리를 dependency에 추가했다. - 이후 component화를 위해 아래와 같은 .vue 파일을 만들었다. - 도넛 차트를 그려보고 싶었고, view파일에서는 Props 로 형식에 맞는 option 을 전달만 하면 되게 하고싶었다. - 아래는 전달하는 View 파일에서 Component를 사용하는 모습 2. 문제의 시작 - 해당 option변수를 props.. 더보기 [vue.js] view에 바인딩 된 '배열' 변수를 업데이트 할 때, 감지 안되는 문제 1. 기존 하려고 했던 기능 우선 컨트롤하고자 하는 변수는 아래와 같이 선언되어있다. isError:boolean = false view에 아래와 같이 notiMessage를 띄워주기 위해, v-if로 감지하고 있었다. {{ notiMessage }} script에서 이 isError 플래그를 변경시킬 때는 아래와 같이 변경했다. // 에러일 경우 this.isError = true; or // 에러가 아닐 경우 this.isError = false; 위 코드는 잘 동작했다. 2. 문제의 시작 그런데 이 isError 변수를 2차원 배열 형식으로 변경하고 싶어 아래와 같이 변경하였다. 기능적인 이유로 인해 1차원 배열로 변경하였고, flag 변수와 notiMessage변수를 따로 가져가지 않기 위해 2차.. 더보기 [Vue.js] parent <-> child간 양방향 바인딩(with custom Tag) 방법1. .sync를 사용하기 parent child v-model 활용하기 parent child {{ inputNm }} {{ validCheck }} 더보기 이전 1 2 3 4 5 6 ··· 13 다음
