본문 바로가기
관리자

분류 전체보기

(997)
Typescript / 기초 / 설치, 세팅 및 기본 문법 1. Typescript를 사용하는 이유 자바스크립트는 자유도가 높은 대신, 형식이 정해져 있지 않기 때문에 버그가 발생한다거나 팀원간에 코드를 통한 의사소통에 어려움이 생긴다는 단점이 있다. 타입스크립트는 변수와 데이터의 종류를 명확히 지정해주기 때문에 이런 단점들이 보완될 수 있다. 타입스크립트를 통해 작성된 코드는 자바스크립트 코드로 컴파일링 되고, 해당 자바스크립트 코드가 브라우저나 node.js 등의 런타임에서 구동되게 된다. 따라서 타입스크립트는 프로그래밍 언어이자 컴파일러 역할도 한다고 할 수 있다. : Node.js가 Typescript를 이해하지 못하기 때문에 일반적인 Javascript 코드로 컴파일 하는 작업을 해준다. 2. 초기 세팅 설치 타입스크립트를 글로벌로 설치한다. npm i..
extension 스터디 목록 path intellisense : path를 자동으로 완성해주는데 도움을 줌 bracket pair colorizer : 짝이 맞는 괄호끼리 색을 칠해줌
Vue.js / 기초 / 5. 인스턴스, 컴포넌트 1. 인스턴스 여러 개의 인스턴스 생성하기 new Vue 명령어를 통해서 Vue를 생성하고, el 객체에서 적용되는 id값만 바꿔서 적용해주면 된다. id=app 과 id=app2인 요소를 2개 만들고, 같은 인스턴스를 만들고 같은 메서드를 적용하되, el객체의 값을 바꿔주었다.(instance.html 파일) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 {{name}} change {{name}} change new Vue({ el: '#app', data: { name: 'charlie' }, methods: { changeName() { this.name = this.name +..
Vue.js / 기초 / 4. 클래스와 스타일 바인딩, v-if와 v-show, v-for 1. 클래스 바인딩 클래스 바인딩은 어떤 요소의 class 이름을 단순 문자열값으로 지정하는 것이 아니라, data 객체 내부의 변수값으로 지정하는 것을 의미한다. 이렇게 함으로써 data 객체의 변수값이 변하면 자동으로 class 이름이 변하도록 만들 수 있다. 이것은 객체 구문, 배열 구문 또는 삼항연산자를 통해 지정할 수 있다. 객체구문 적용 객체 구문으로 적용하는 방법을 통해 클래스 바인딩을 익혀보자.(class-binding.html 파일) class를 객체형태로 지정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 .red { color : red; } .font-size { font-s..
Vue.js / 기초 / 3. 데이터 양방향 바인딩(v-model), computed, watch 속성 1. 데이터 양방향 바인딩을 통한 텍스트 미리보기 만들기(v-model) input 입력창에 입력하는 텍스트 정보를 미리 볼 수 있는 요소를 만들어본다. v-model.html 파일로 만들어보자. 비슷하지만 코드를 여러 번 쳐보면서 익숙해지자! 태그에 cdn 코드 넣는 것 까먹지 말고... @keyup으로 바인딩 html에는 input 박스와 {{write}} data를 만들어 놓는다. 그리고 input창에 어떤 입력이 오면 추적을 하도록 @keyup 이벤트를 걸어놓는다(@ 는 v-on:의 단축어로 사용되니 기억하자!). 굳이 @keyup 이벤트에 textModifier라는 함수를 textModifier(event)와 같이 실행문에 파라미터를 넣는 방식으로 작성하지 않더라도, keyup 이벤트에서 알아서..
정규표현식, 비밀번호 특수문자 포함(자바, 자바스크립트, 파이썬) 비밀번호 : 문자+숫자+특수문자 가능한 정규식(22.03.02 추가) 영어 및 숫자를 허용하며, 숫자키와 관련된 특수문자만 허용한다. 일반적인 방식이다. ^[a-zA-Z\\d`~!@#$%^&*()-_=+]{8,24}$ ^[ ] : 대괄호 안의 문자로 시작한다. a-zA-Z : 영어문자 \\d : 숫자 (\d 로도 표현함, 언어마다 escape 기준이 다른듯함) 대괄호 나머지 부분 : 특수문자들 {8,24}$ : 8-24자리수를 허용하며, 중괄호 안의 문자로 끝난다($) ^[a-zA-Z0-9`~!@#$%^&*()-_=+\|[]{};:'",./?]{8,24}$ 위 식에서 숫자키 위 특수문자 외 다른 특수문자들도 허용한다. 다만, \\'\\" 등('와 "는 문자가 아니라 정규표현식의 기능처럼 인식될 수 있어서..
Prm 18 : getItemFromTwoSortedArrays / 이진탐색 문제 길이가 m, n이고 오름차순으로 정렬되어 있는 자연수 배열들을 입력받아 전체 요소 중 k번째 요소를 리턴해야 합니다. 입력 인자 1 : arr1 자연수를 요소로 갖는 배열 arr1.length는 m 인자 2 : arr2 자연수를 요소로 갖는 배열 arr2.length는 n 인자 3 : k number 타입의 0 이상의 정수 출력 number 타입을 리턴해야 합니다. 주의사항 두 배열의 길이의 합은 1,000,000 이하입니다. 어떤 배열 arr의 k번째 요소는 arr[k-1]을 의미합니다. 입출력 예시 let arr1 = [1, 4, 8, 10]; let arr2 = [2, 3, 5, 9]; let result = getItemFromTwoSortedArrays(arr1, arr2, 6); cons..
Weekly Report - 21/01/11~21/01/17, 204일차 보호되어 있는 글입니다.