본문 바로가기

728x90
반응형

개발/JAVASCRIPT

(6)
[map] JavaScript 유용한 함수 map 예를 들어 다음과 같은 배열 요소가 있다고 가정해 보자. let arr = [3, 4, 5, 6]; 이제 배열의 각 요소에 3을 곱해야 한다고 상상해 보자. 원초적인 판단으로는 다음과 같이 for 루프 사용을:할 수 있다. let arr = [3, 4, 5, 6]; for (let i = 0; i < arr.length; i++){ arr[i] = arr[i] * 3; } console.log(arr); // [9, 12, 15, 18] 그러나 사실 Array.map() 메소드를 사용한다면 이런 동일한 결과를 얻을 수 있다. let arr = [3, 4, 5, 6]; let modifiedArr = arr.map(function(element){ return element *3; }); console.l..
[Pixi.js] Vue3를 곁들인 PixiJS설치법 npm install pixi.js CDN 설치는 내가 별로 안좋아하니까 npm으로 설치함 import * as PIXI from 'pixi.js'; 사용할 파일에 import해서 쓰면 됨 예를 들어서 코드를 이렇게 짜면 이런식으로 화면이 나오게 된다. 오늘은 여기까지.
[MD5] md5로 암호화해보자 MD5(Message-Digest algorithm 5)는 암호화 해시 함수이다. npm install md5 하면 쉽게 사용 가능하다. 설치 후 md5() 함수를 사용하면 된다. 괄호 안에 문자열을 입력하면 리턴값으로 암호화된 값을 내놓는다. 예를 들어 md5("Hello World")는 리턴값으로 b10a8db164e0754105b7a99be72e3fe5가 나온다. 그럼 의문이 들 수 있다. 그럼 md5 코드를 역으로 인코딩하면 원문이 나오는 거 아님? 이라고 생각할 수 있다. MD5는 해싱 알고리즘이므로 일방향 함수이다. 입력 값을 출력 값으로 변환할 수는 있지만, 출력 값을 입력 값으로 변환할 수는 없다. 이러한 특성 때문에 비밀번호와 같은 중요한 데이터를 저장할 때 사용하는 암호화 방식이 아니라..
[IndexedDB] 생소한 그 이름 파헤쳐 보자 팀에서 IndexedDB를 한 번 사용해보자는 이야기가 나왔다. 내게는 신기술로 느껴지는 만큼 기록을 남겨두지 않으면 분명 나는 까먹고 말 것이다. 그래서 IndexedDB가 뭐냐면 늘 무심하게도 지나쳤던 이 항목이다. 기존 DB들과는 구조도 조금 다르고 쿼리문(?)도 익숙하지 않으니 그냥 예제부터 보고 갑시다. const dbName = "myDatabase"; const storeName = "Person"; const data = { "김창식": { age: "25", gender: "male" }, "윤옥분": { age: "30", gender: "female" } }; const request = indexedDB.open(dbName, 1); request.onupgradeneeded = f..
[map/filter] 자주 사용하는 배열 메소드 배열 메소드를 잘 알아두면 실무에 큰 도움이 된다고 한다. 간단히 정리해두고자 한다. map 함수와 filter는 형태가 비슷하다. 결론, 용도에 따라 적절한 함수를 사용하면 된다. map은 조건에 맞는 요소의 value값만을 배열에 넣어 반환한다. filter는 조건과 요소가 부합할 때(true) 해당 요소의 key:value 값을 배열에 넣어 반환한다.
자바스크립트 기초 프로그래밍 공부를 하면서 하루라도 서둘러 실무에 투입되고자 개인프로젝트부터 시작했다. 아무런 지향성 없이 절차지향적으로 코드를 작성하다보니 애로사항이 꽃피고 있다. ES6를 제대로 학습하지 못해 var const let 키워드를 혼용하여 사용하기도 했다. 기능 단위로 함수를 만들었지만 클로저를 제대로 활용하지 못해 전역변수를 사용하기도 했다. 부족함을 깨닫고 블로그를 열었다. 당분간 다음 세 가지에 대한 포스팅을 생각하고 있다. 1. 절차지향vs객체지향vs함수형 프로그래밍. - FP in JS (자바스크립트로 접해보는 함수형 프로그래밍) - 코드 스타일 (velog.io) 2. ES6 3. 클로저

728x90
반응형