본문 바로가기

전체 글79

javascript byte 수 계산 euc-kr byte 구하기 한글 한 글자당 2byte 기준 바이트 수 계산 function calcByteEuckr(str) { return str .split('') .map(s => s.charCodeAt(0))// 유니코드 값으로 변환 .reduce((prev, c) => (prev + ((c === 10) ? 2 : ((c >> 7) ? 2 : 1))), 0); // c 값이 0~127사이에 있으면 1바이트 } 최대 byte 만큼만 문자열 자르기 function getLimitedByteEuckrText(str, maxByte) { if (!str) return; let b; for (b = i = 0; (c = str.charCodeAt(i)); ) { b += (c === 10) ? 2 : .. 2022. 6. 21.

Vue.js xlsx 엑셀 다운로드 Vue 엑셀 다운로드 서버를 거치지 않고 화면 상에서 xlsx 라이브러리를 사용해 엑셀 다운로드를 하는 방법이다. xlsx 라이브러리 설치 npm install --save xlsx xlsx 를 사용한 엑셀 다운로드 기능 구현 import xlsx from 'xlsx'; ... excelDownload() { const fileName = 'excelFile';// 파일명 const sheetName = 'sheet1';// 시트명 const header = [['이름', '나이', '이메일']];// 컬럼명 const list = [{ name: '홍길동', age: 15, email: '홍길동@naver.com' }, { name: '김길동', age: 44, email: '김길동@naver.com'.. 2022. 6. 16.

vue router / query vs params vue router 뷰로 싱글 페이지 어플리케이션을 구현할 때 화면 전환 및 페이지 이동을 위해 사용하는 라이브러리이다. 웹에서 라우팅은 페이지 간의 이동 방법을 뜻하는데 뷰는 화면 이동 시 DOM을 새로 갱신하지 않고 변경된 컴포넌트만 갱신하여 깜빡임 없이 매끄럽게 전환되는 장점이 있다. 페이지 이동 태그로 화면에서 태그로 치환되어 실행된다. :to 속성 path: 이동하려는 경로 name: 이동하려는 경로를 라우터에 설정된 이름으로 지정 query: query string 형태로 전달되는 파라미터, GET 방식 params: name 속성을 지정하여 이동할 때(path가 아닌) 전달될 파라미터, POST 방식 query vs. params 🧐 params를 사용하려면 path가 아닌 name으로 이동.. 2022. 6. 14.

LeetCode - Missing Number https://leetcode.com/problems/missing-number/ Missing Number - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 조건 n == nums.length 이고 nums의 모든 숫자는 중복이 없다. nums 배열의 값은 0 a+b, 0); return (nums.length) * (nums.length + 1) / 2 - sum; }; 개선 코드 2 - 비트 XOR은 값이 두 번 적용되면 초기 값으로 돌아온다. - 순서가 .. 2022. 5. 30.

git branch 따서 개발하기 / 충돌 대처하기 git 사용하기 개발 시 형상관리로 git을 사용한다면 기능 별로 branch를 따서 개발 후 원본 소스에 merge하는 방식으로 사용한다. vscode에 git scm을 설치하여 명령어 기반으로 git branch 관련 명령어를 다루어봤다. git branch 따서 개발하고 충돌 대처하기 📌branch 생성 git branch [만들브랜치명] [분기할브랜치명] 📌다른 branch 소스 pull 받기 git pull origin [다른브랜치명] 1. 여기서 충돌 발생 시 현재 branch 수정한 파일을 먼저 commit & push 한다.(현재 branch에 올린다.) 2. 다시 위 명령어로 다른 branch를 pull 받으면 Automatic Merge Failed 되며 충돌난 파일과 파일 내 충돌 위.. 2022. 5. 20.

Object.freeze 객체 동결 / 객체 읽기 속도 Object.freeze() 객체에 새로운 속성을 추가하거나 제거할 수 없는 상태로 바꾸어 immutable한 Object를 만들 수 있다. 프로토타입 객체를 동결하는 함수 동결된 객체는 속성을 추가, 삭제하는 등 변경 불가 객체를 변경하려는 시도 시 TypeError 예외 발생 객체의 불변성 유지 얕은 복사(1 depth까지만)를 하므로 중첩된 객체는 동결되지 않음 Object.isFrozen() 메소드로 객체 동결 여부 확인 가능 const info = { name: 'Anna', age: 19 }; Object.freeze(info); info.age = 20; // 변경되지 않음 info.email = 'hello@gmail.com'; // 추가되지 않음 const vs. Object.freeze.. 2022. 5. 12.

ES6 Syntax 목차 Restructing(구조 분해 할당) Spread Operator(전개 구문) Default Parameters(기본 값 매개변수) Template Literal(템플릿 리터럴) Arrow Function(화살표 함수) for of ... loop 1. Restructuring(구조 분해 할당) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식 1-1. 객체 ✔ 구문 ES5 에서는 각 변수에 값을 할당해야 했다. var info = { myName: 'Anna', myAge: 10 }; var myName = info.myName; var myAge = info.myAge; console.log(myName, myAge);// Anna 10 ES6 에서는 중괄호 안에.. 2022. 5. 3.

클라우드 컴퓨팅과 IaaS/PaaS/SaaS 2022. 5. 1.

TypeScript TypeScript 란? Javascript 를 기반으로 하여 정적 타입 문법을 추가한 프로그래밍 언어 JavaScript 의 상위 집합으로 Microsoft 에서 개발했다. 따라서 JavaScript의 모든 기능을 TypeScript 에서도 사용할 수 있다. ES6 신규 문법을 포함하고 클래스, 인터페이스, 상속, 모듈 등의 객체 지향 프로그래밍 패턴을 제공한다. TypeScript 컴파일러를 사용하여 TypeScript(.ts) 파일을 Javascript(.js) 파일로 변환하여 실행한다. TypeScript vs. JavaScript 🧐 속도, 안정성 자바스크립트는 동적 타입 언어로 런타임 속도는 빠르지만, 타입 안정성은 보장되지 않는다. 타입스크립트는 정적 타입 언어로 컴파일 시간이 길지만, 안정.. 2022. 4. 28.

자바스크립트 비동기 처리 / Promise / async / await / fetch 비동기 처리 구조 자바스크립트는 원래 싱글 스레드 기반 언어이며 동기적으로 실행된다. 호출 스택(Call Stack)이 하나여서 스택 내에 쌓인 작업을 순서대로 처리한다. 하지만, 시간이 오래 걸리는 코드가 있으면 그 작업이 끝나고 콜백할 때까지 기다렸다가 다음 작업을 처리하게 된다. 그 시간 동안은 대기해야 하므로 비동기적으로 처리하는 방법이 필요하다. setTimeout() 으로 일정 시간 동안 작업을 지연시키는 예시이다. 이 예제를 실행하면 3초 뒤에 '3초 지연!'이라는 문구를 찍는다. setTimeout(function() { console.log('3초 지연!'); }, 3000); 지금은 3초짜리 코드이지만, 서버에서 대량의 데이터를 받아오는 등의 처리가 필요할 때는 더 시간이 길어지게 된다.. 2022. 4. 20.

이전 1 2 3 4 5 ··· 8 다음

티스토리툴바