본문 바로가기

전체 글

[typescript 기본] interface란?
interface란, 변수나 함수의 형태를 미리 선언해놓고 가져다 쓰기 위한 것으로, 데이터타입을 변수로 선언해놓은것이라고 생각하면 이해가 빠를듯하다. 기본선언 // 인터페이스 선언 interface User { age: number; name: string; }​ interface 라고 쓰고 파스칼표기법으로 사용한다. 안에는 세미콜론으로 구분한다. interface안에 선언한 값들은 무조건 있어야한다. 안그러면 에러가 남. 1. 변수에 인터페이스 활용하기 // 인터페이스 선언 interface User { age: number; name: string; } // 변수에 인터페이스 활용 var seho: User = { age: 33, name: '세호' }; 2. 함수에 인터페이스 활용하기 - 매개변수..
[typescript 기본] 함수에 interface 활용하기
todoItems 안에 넣을 데이터 모양 let todoItems = [ { id: 0, title: "", done: false, } ]​ 타입스크립트에서 선언할때 1. 변수(배열이고 안에는 객체) 선언하기 - 배열안의 요소는 객체다라고 선언할때 let todoItems: Array; let todoItems: object[];​ 그런데 이렇게 하면 안에 값들에서 type을 지정해주지 않았다고 오류가 남. 2. 변수(배열이고 안에는 객체) 안 선언하기 - 배열 안의 요소는 객체인데 객체 안의 값들은 ~~다 라고 선언할때 let todoItems: { id: number; title: string; done: boolean }[];​ 이렇게 해야 안에 값들을 쓸때 에러가 나지 않음. 근데 너무 길기 때문..
[typescript 기본] 타입 설정 (기본, 함수)
기본타입설정 기본적으로 변수 뒤에 :를 붙여 타입 설정을 한다. //JS 문자열 선언 let jsStr = "hello"; //TS 문자열 선언 let str: string = "hello"; // 숫자 let num: number = 10; // 배열 let arr: Array = [1,2,3]; let heroes: Array = ["Capt", "Thor", "Hulk", 10]; let items: number[] = [1, 2, 3]; // 튜플 (모든 인덱스의 타입까지 지정하기) let address: [string, number] = ["테스트", 10]; // 객체 let obj: object = {}; let person: object = { name: "capt", age: 100 };..
[typescript 기본] 세팅하기
1. vsCode에서 tslint 설치 2. typescript 설치 npm i typescript -g 3. typescript파일을 js파일로 컴파일하기 tsc index.ts 4. tsconfig.json 파일생성해서 컴파일 옵션정하기 { "compilerOptions": { "allowJs": true, "checkJs": true, "noImplicitAny": true } } 참고: https://www.typescriptlang.org/tsconfig TSConfig Reference - Docs on every TSConfig option From allowJs to useDefineForClassFields the TSConfig reference includes information a..
[Node.js & nvm] nodejs 버전 관리하기 (여러버전 사용하기)
상황 PHP프로젝트는 노드버전 10.15.3을 사용하고 JAVA프로젝트는 노드버전 16.13.0을 사용. 둘 다 동시에 하는 작업은 없지만 가끔 PHP 프로젝트 대응이 필요. 해결방법 1. 터미널 git bash로 열기 2. 아래 명령어로 nvm 설치 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 3. 아래 명령어로 설치된 것 확인 command -v nvm 4. nvm ls하면 현재 설치되어있는 노드버전 나옴 (앞에 * 붙어있는게 현재 쓰고 있는 버전임) nvm ls 5. 필요한 노드버전 다운받기 (ex ) 16.13.0) nvm install v16.13.0 6. 아래 명령어로 원하는 버전으로 변..
[Javascript] 가격 콤마찍기 / 돈 (,) 콤마 단위 붙이기 toLocaleString
const price = 13000; price.toLocaleString("ko-kr"); //'13,000' 참고 1. 혹시라도 13000.toLocaleString() 하게 되면 에러가 나니 꼭 변수에 담아서 사용!!! 2. money가 스트링이라면 Number()로 감싸서 처리하기.
[Vue3] 컴포넌트간 통신하기 vue2의 eventbus, Vue3에서는 mitt (emitter)
부모컴포넌트에서 자식컴포넌트로 이벤트를 보낼 일이 있어 eventbus를 사용하려는데, vue3에서는 사용하지 말라고 되어있어 어떤 방법을 써야하나 찾아봤더니 mitt 이라는걸 다운받아서 emitter 로 선언하여 사용하는 방법이 가장 많았다. 동작방법 1. store에 emitter선언해서 어느 컴포넌트간에 접근할 수 있도록 한다. 2. eventbus와 동일하게 보내는곳에서 emit / 받는 곳에서 on 으로 처리한다. Vue3 1. mitt 다운로드 npm i mitt 2. store의 state에 emitter 선언 import mitt from 'mitt'; //mitt 가져오기 export default createStore({ state: { emitter: mitt(), //emitter ..
[firebase] vue프로젝트를 SPA 방식으로 이동하는데 새로고침시 404 error 뜰때 (파이어베이스 vue router설정해주기)
상황 vue router 설정도 잘 해줬고, history설정도 해줬음. SPA방식으로 (router-link) 페이지를 이동한 후 새로고침을 하면 로컬에서는 잘 되다가 배포 후에 404 에러가 뜸 해결 firebase.json 파일을 수정해주면된다. rewrites 부분 추가 !! { "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ], "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } } spa방식은 index.html에서 모든 처리를 해주게 되어있는데, router-link로 이동을 하면 url뒤에 붙는 파라미터로 페이..
[IOS & javascript] ios 이모티콘 키패드 height 조정하기 (emoji keypad window resize)
상황 앱에서 키패드를 이모티콘으로 변경했을때 height가 높아져 입력란이 가려짐 이슈 해결 1. window.visualViewport window.resize를 해봤는데 앱이라 그런지 안됨.. 찾아보다가 window.visualViewport로 해결 간단하게 정리한 소스 !! function resizeKeypad = () => { requestAnimationFrame(() => { //필요한 함수 실행 }) } window.visualViewport.addEventListener("resize", resizeKeypad) 전체소스 $(function () { let flag = false; function handler(e) { if (flag) return; flag = true; request..
[kakaoMap & javascript] 카카오 지도 연결했는데 크로스도메인 오류 날때 This request has been blocked; the content must be served over HTTPS.
상황 로컬에서는 잘 됐었는데 firebase로 배포한 후 카카오 developer 페이지에서 사이트 도메인 설정도 해줬는데 갑자기 안나던 크로스 도메인 이슈가 났다. 해결 head태그에 넣는 카카오 맵 url에 잎에 있는 http를 삭제하고 //로 시작하게 만든다. //dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=개인API키 전체코드 지도 페이지 참고 만약 아래와 같은 오류가 난다면 지도를 넣을 요소를 잘 찾는지 확인하면 된다. (ref(null) 로 불러와서는 value를 안쓴다거나 보통 찍어보면 못찾는다고 나온다. ) ’Cannot read property ‘defaultView’ of undefined’

티스토리툴바