본문 바로가기

javascript26

231001 src 내부 image 파일 import 후 다운로드 하는 방법 src 내부 image 파일 import 후 다운로드 하는 방법 지난 포스팅에 이어서 이미지를 다루는 방법을 또 마주치게 되었다. 프레임워크의 src 디렉터리 내부에서 이미지 파일을 import 로 호출한 후, 다운로드 받을 수 있지 않을까 하는 생각이었는데, 이것저것 문서를 찾아보니 되었습니다! import * as imageURL from '~/assets/image/sample/sample.png' function downloadFile () { const img = document.createElement('img') img.style = { height: '25%', width: '25' } img.src = imageURL.default console.log('imported', imageUR.. 2023. 10. 1.
230930 Promise 객체로 image file 목록 모두 Base64 로 변환하기 사진 파일을 올린 후, 화면 미리보기 (Preview) 기능을 구현할 때 사용해야했는데, 개별적인 image 파일을 FileReader() 객체를 통해 base64로 변환하는 것은 이미 기존에 정리해둔바 있습니다. (링크) 한번 정리해둔적이 있어서 참고하면 편하더라구요. 그런데 개별적인 파일이 아닌, Array 형식의 image 파일인 경우는 onload 이벤트를 통해 비동기 형식으로 데이터를 반환하기 때문에, Promise 객체를 사용하지 않으면 안됐습니다 ...! async preview (files) { const promises = [] for (const file of files) { const promise = new Promise((resolve, reject) => { const reade.. 2023. 9. 30.
221128 Node.js 업데이트 방법 안녕하세요 또야입니다. 오늘은 오랜만에 포스팅으로 Node.js 업데이트를 하는 명령어를 가져왔습니다. 엄청 간단하긴 하지만 매번 잊어버려서 검색을 자주 하게되는 명령어라 정리했습니다. node -v # 현재 버전 확인 npm cache clean -f # npm 캐시 삭제 npm install -g n # node.js 버전을 관리할 수 있는 n 모듈 설치 # n 모듈을 사용해 node.js 설치 (n + 설치를 원하는 버전) n stable # 안정 버전 n latest # 최신 버전 n lts # lts 버전 n 14.15.4 # x.x.x 버전 2022. 11. 28.
220801 Promise 를 이용한 값 대기 Promise 를 이용한 값 대기 /** * 파라미터로 받은 token에서 정보를 확인 하여 저장 * 데이터를 가져오는동안 token === null 이기 때문에, * 해당 구문이 동작하지 않기때문에 20ms 마다 가져오는 것으로 설정하였습니다. */ function promiseTimeout (token) { if (!token) return // promiseTimeout(token) return new Promise((resolve, reject) => { // token 이 들어올때까지 20ms 마다 체크하기 const interval = 20 // 임의로 20ms 로 설정 (20ms 마다 확인하기) let timeout = 1000 // 임의로 1s 로 설정 const intervalId = (.. 2022. 8. 1.
220801 Typescript Handbook Typescript 핸드북 Typescript 핸드북 원시타입 (Primitives) : string, number, boolean Array any 변수의 Type 정의(Annotation) 함수 (Function) Parameter Type 정의 Return 타입 정의 익명 함수 (Anonymous Function) 오브젝트 타입 (Object) Parameter Type 정의 Optional Properties Union Types Union Type 정의 Union Types 사용하기 Type Aliases Interfaces Type Aliases 와 Interface 의 차이? 타입 단언 (Type Assertion) Literal Types null 과 undefined Non-null 단언.. 2022. 8. 1.
220503 화 Request Payload 를 숨기는 방법? Request Payload 를 숨기는 방법이 있나요? 먼저, 누구를 위한 포스팅인가? 해당 번역 포스팅은, 클라이언트 사이드에서 브라우저 개발자도구를 통하여 아이디/비밀번호를 전송하면서 발생하는 보안 정보 노출에 대해서 검색하다가 결과에 노출된 검색결과입니다. 참고로 이 포스팅은 생각보다 개발자에게 유용한 정보를 담고있지는 않았습니다. 정말 단순히 "크롬의 Network 탭을 닫는 방법", "Swagger 의 API 를 숨기는 방법" 등 방법적인것이 주를 이루어져있었기 때문에, 클라이언트 개발자들이 궁금해하고 필요해보이는, 명료한 내용만 번역하여 정리해보았습니다. 클라이언트사이드에서 암호화하여 데이터를 전송하는 방법은 추후에 다른 포스팅으로 다뤄보겠습니다. 목차 Request Payload 를 숨기는 .. 2022. 5. 3.
220121 LeetCode - Palidrome 풀이 (JS) LeetCode 풀이 Palidrome (Easy) /** * @param {number} x * @return {boolean} */ const isPalindrome = function(x) { const reversed = String(x).split('').reverse().join('') const regex = new RegExp(reversed, 'g') return regex.test(x) } Palidrome Linked List (Medium) head 가 조건이 있는 연결리스트로 구현되어있어 일단 연결리스트부터 코드로 작성하였다. 직접 작성한 답안 /** * @param {ListNode} head * @return {boolean} */ var isPalindrome = functi.. 2022. 1. 21.
220120 LeetCode - Two Sums 풀이 (JS) LeetCode 풀이 Two Sums (Easy) 코테준비를 위해 풀이를 시작했다. 프로그래머스를 선택하지 않은 이유는, 나름 코딩테스트 초급수준인데 level2 부터는 구현하기 꽤 어려웠기 때문이다. /** * @param {number[]} nums * @param {number} target * @return {number[]} */ var twoSum = function(nums, target) { let test = [] const queue = [...nums] let firstIdx = 0 while (queue.length > 1) { for (let i = firstIdx; i < nums.length; i++) { if (i === firstIdx) continue // console... 2022. 1. 20.
211105 Javascript - Array 에서 최소, 최대 값(Min/Max) 구하기 Math.max(1, 2, 3) // 3 Math.min(1, 2, 3) // 1 const nums = [1, 2, 3] Math.min(nums) // NaN Math.max(nums) // Nan var nums = [1, 2, 3] Math.min.apply(Math, nums) // 1 Math.max.apply(Math, nums) // 3 Math.min.apply(null, nums) // 1 Math.max.apply(null, nums) // 3 const nums = [1, 2, 3] Math.min(...nums) // 1 Math.max(...nums) // 3 Math.min(1, 2, 3) Math.max(1, 2, 3) 2022. 1. 13.
211206 Javascript if 의 대체코드 작성방법 Javascript if 의 대체코드 작성방법 if 조건 // 나쁜 예 const welcomeMessage = ({ admin }) => { let message if (admin) message = 'Welcome, administrator!' return message } 간단한 if 조건은 아래와 같이 삼항 연산자로 대체할 수 있습니다. boolean ? valueForTrue : valueForFalse // 좋은 예 const welcomeMessage = ({ admin }) => admin ? 'Welcome, administrator!' : 'Welcome, user' const welcomeMessage = ({ admin }) => `Welc.. 2021. 12. 6.
211201 Javascript Module Export & Import Module Export & Import Export Import Export 사용 예시 Module Export & Import MDN export, import 모듈 설명이 너무 성의없이 되어있어 사용 방법이랑 정리를 해봤다. Export /* MDN 공식문서 export */ // Exporting individual features export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function functionName(){...} export class ClassName {...} // Export list export { na.. 2021. 12. 2.
211201 Javascript Reduce Method 활용법 JavaScript Reduce Method Made Simple reduce() 메서드는 가장 자주 사용되는 Array 메서드인 ES6(ECMAScript 2015) 에 추가된 JS 기능입니다. reduce() 의 역할은 제공된 reducer function 을 실행하여 주어진 Array 를 한 개의 값으로 줄여나가는 역할을 합니다. 결과적으로는 한 개의 값으로 줄여나가는 것 입니다. // reduce() 문법 array.reduce(callback, initialValue) const reducer = (accumulator, currentValue, index) => { // ... } 사용법 reduce 메서드는 보통 전체 총합/평균/최소/최대 값을 구할 때 사용됩니다. 이 말은 다른데에도 사용할.. 2021. 12. 1.

티스토리툴바