Web/JavaScript
JavaScript - TypeScript
TypeScript란? 마이크로소프트에서 구현한 JacaScript의 슈퍼셋(Superset) 프로그래밍 언어 정작 타입 정의 (Static Type Definitions)을 추가한 것 쉽게 말해 JavaScirpt는 예로 변수 지정 시 타입을 지정 하지않지만(JavaScrpit는 동적 타입) TypeSript를 통해서 타입을 지정하는 것 타입의 종류 Boolean: true, false 타입 let boolean_type_1 :boolean = false; let boolean_type_2 :boolean = 123; // Error Number: 숫자형 let number_type_1 :number = 123; let number_type_2 :number = "123"; // Error Stri..
Vue.js - Kakao Map API
'load-script-once' 라이브러리 사용 'load-script-once' 라이브러리 미 사용 (반복문 사용할 경우 동일한 script가 존재) Composition API 사용 안함 (개인적으로 이게 더 깔끔해 보임) package.json 설정 (설정안하면 에러 뜸, 에러 무시하기 위한 설정) { ... "globals": { "kakao": false }, "rules": { "no-unused-vars": "off" } ... } 참고 링크 1: https://apis.map.kakao.com/ 참고 링크 2: https://github.com/okchangwon/vue-daum-map GitHub - okchangwon/vue-daum-map: Vue Daum Map Component..
Vue.js - DOM 요소 접근
Vue 2 html 속성 ref 추가 (Vue에서 접근하게 위함) "this.$refs.ref_이름"으로 접근 "document.querySelector("선택자")"와 동일 Vue 3 (Composition API) 은 Vue 2와 동일 접근 할때 ref 이름과 동일한 변수 추가 후 사용 참고 하위 컴포넌트의 요소에 접근할 경우 "ref_이름.value.$el" 사용
Vue.js - AWS S3 (Vue.js 설정 부분)
Vue.js 설정 부분 AWS-SDK 설치 및 기본 설정 터미널 → npm install --save aws-sdk import 및 기본 설정 하기 생성한 Cognito 자격 증명 풀 ID는 Cognito 자격 증명 풀 편집에서 볼 수 있음 AWS.config.region: 지역 설정 AWS.config.credentials: ID 정책 설정 new AWS.S3: 객체 인스턴스 생성 params: 기본 파라미터 설정 import AWS from 'aws-sdk' AWS.config.region = 'ap-northeast-2(지역)'; AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: '생성한 Cognito 자격 증..
Vue.js - AWS S3 (AWS 설정 부분)
AWS 설정 부분 1. Amazon S3 버킷 객체 생성 2. Amazon Cognito 자격 증명 풀 생성 1. Amazon Cognito 링크 2. 자격 증명 풀 만들기 3. 인증되지 않은 자격 증명에 대한 액세스 활성화 체크 4. 풀 생성 클릭 3. Identity and Access Management(IAM)에서 Cognito 자격 증명 역할 ARN (Unauth_Role) 가져오기 1. Amazon IAM 링크 2. 왼쪽 메뉴 → 엑세스 관리 → 역할 → 생성한 Cognito 자격 증명 Unauth_Role 클릭 3. 역할 ARN 복사 및 저장 4. Amazon S3 버킷 객체 정책 설정 생성한 버킷 객체 선택 → 권한 → 버킷 정책 편집 (정책 예제 및 정책 생성기 이용) 키 설명 "Sid"..
JavaScript - Axios (Ajax)
Axios Promise 기반의 자바스크립트 비동기 처리방식 REST API 이용함 Axios 설치 터미널 → npm install --save axios import 하기 import axios from 'axios' REST API 가져오기: axios.get(url[, config]) 입력하기: axios.post(url[, config]) 부분 수정하기: axios.patch(url[, data[, config]]) 전체 수정하기: axios.put(url[, data[, config]]) 삭제하기: axios.delete(url[, config])) // ID 조회 (GET) axios.get('/user?ID=12345') .then(function (response) { // 성공 실행 코..
Vue.js - Composition API
Composition API란? 컴포넌트 로직을 유연하게 구성할 수 있는 API 모음 Vue 3 버전에 추가될 기능 setup 함수에 데이터가 구룹핑이 되어 데이터의 흐름을 파악하고 유지보수가 용이해짐 함수를 재사용하기가 용이해짐 필수가 아닌 옵션으로 vue 2에서 사용하는 옵션 그대로 사용해도 됨 Composition API 설치 vue 2에서 사용하려면 설치가 필요 (3으로 업데이트 되면 내장될 예정) 터미널 → npm install @vue/composition-api import 하기 변수 및 함수 선언 setup() 안에 변수, 함수를 선언하고 return 해주면 됨 ref 모든 원시타입(Primitve) 값을 포함한 여러가지 타입의 값을 받아 생성 setup() 함수안에서 값을 사용해야할 경우..
JavaScript - 선언적 함수, 익명 함수, 화살표 함수
1. 선언적 함수 호이스팅이 되어 함수 선언하기 전에도 사용 가능 2. 익명 함수 함수 선언 전에 사용하면 에러 발생 변수에 함수 대입 3. 화살표 함수 익명 함수에서 function(매개변수) {}를 (매개변수) => {} 로 표현한 것 return 코드가 하나 일 경우 return과 {} 생략 가능 메소드 함수가 아닌 곳에 사용 (객체에서 this를 사용할 경우 자기 자신의 변수가 아닌 전역 변수를 가져옴) 참고 링크: https://mygumi.tistory.com/229
Vue.js - vue 인스턴스
name: vue 객체의 이름 components: 현재의 컴포넌트에서 다른 컴포넌트를 사용하고자 할 때 정의하는 곳 data: vue 객체 내부적으로 사용하는 변수를 선언하는 곳 computed methods와 동일한 역할이지만 변수와 동일하게 사용 특정 값을 계산해서 보여줌 (return 값이 특정 값의 계산한 값) 이전의 계산된 값을 캐시해 두었다가 특정 값이 변경될 경우 사용 methods는 캐싱이라는 개념이 없기 때문에 매번 재 렌더링함 같은 연산을 반복으로 사용할 경우 선으면에서 효율적으로 사용 가능 참고 링크1(getter, setter): https://kyounghwan01.github.io/blog/Vue/vue/computed/#computed-getter-setter 참고 링크2: ..
JavaScript - 변수 선언 방식 (const, let, var)
const 변수 재선언, 변수 재할당 모두 불가능 상수 선언 역할 기본적으로 변수 및 객체 선언 시 사용 let 변수 재선언 불가능, 변수 재할당 가능 재할당이 필요한 경우 사용 var 변수 재선언, 변수 재할당 모두 가능 호이스팅이 이루어짐 (위치 상관 없이 먼저 선언, 선언 하기 전에 사용하기전엔 에러가 뜨지 않고 undefined로 나옴) 참고 호이스팅 참고 링크: https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html 변수 선언 let, const, var 참고 링크: https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90 스코프(Scope): h..