본문 바로가기

Javascript47

자바스크립트 AES암호화 및 복호화, 파이썬에서 복호화 자바스크립트 const handleCertification = () => { if (inputUser === '' || inputPassword === '') { sweetAlert('', '아이디와 비밀번호를 입력해주세요.', 'warning', 'center') return } // AES-256 암호화 const secretKey = CryptoJS.enc.Utf8.parse('abcdabcdabcdabcdabcdabcd'); // zY7wR8uH2kP4mQ9tV3xB1nC6jW5sL8oT'라는 문자열을 UTF-8로 인코딩하고, 이 값을 CryptoJS 라이브러리의 // Utf8.parse 메서드를 사용하여 WordArray 형태로 변환합니다. 이 변환된 WordArray가 AE.. 2024. 8. 22.
tree구조 데이터를 postorder traversal방식으로 javascript로 구현해보자 데이터구조 : tree구조 출처 : https://ko.wikipedia.org/wiki/%ED%8A%B8%EB%A6%AC_%EC%88%9C%ED%9A%8C 트리 순회 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 전산학에서 트리 순회(Tree traversal)는 트리 구조에서 각각의 노드를 정확히 한 번만, 체계적인 방법으로 방문하는 과정을 말한다. 이는 노드를 방문하는 순서에 ko.wikipedia.org sample 데이터 : let rootTest = { name: 'root', children: [ { name: 'root-1', children: [ { name: 'root-1-1', children: [] }, { name: 'root-1-2', children: [.. 2023. 9. 5.
타입스크립트 오류) error TS2584: Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'. 해결방법 : npm install --dev @types/node 이후 다시 Run Code하니 정상적으로 console이 찍혔다!! 2022. 10. 24.
함수 내보내기, 가져오기 관련 함수 내보내기, 가져오기 관련 어떤 경우에 export default function으로 내보내고 import ~ from ‘./~’;로 가져오고 어떤 경우에 exports.함수명 , var http = require(“http”);로 가져오는 것일까? commonJS 방식 : (exports / require ) ESM 방식 : ( import from / export / export default ) 2022. 10. 19.
closure 클로저 자바스크립트에서 함수는 객체이다. 클로저는 자바스크립트가 일급객체의 성질을 갖는다는 것(함수를 변수처럼 다룰 수 있다는 것)을 이용해서 만들수 있는 공간임. 내부에 변수가 있을 때 자바스크립트는 그 변수를 클로저 공간에 저장을 한다음 리턴된 함수와 그 변수가 생명을 같이하도록 만든다. 함수를 생성해서 리턴하는 함수를 팩토리함수라고도 부른다. 팩토리 함수 내부에서 생성된 변수들이 있는데 함수가 끝나도 변수들이 살아있게 된다. 그 변수들이 어딨을까? 하는게 클로저의 의미임. 클로저의 예 1 function createCard(){ let title=""; let content=""; function changeTitle(text){ title = text; } function changeContent(tex.. 2022. 10. 18.
this, 기본적으로 전역컨텍스트에서 this는 window를 가리킨다. const name = "elice"; console.log(this); //window {...} 일반함수 안에서 name을 정의해놓고 this.name으로 접근하려고 한다면 불가능하다. this는 window를 가리키기 때문이다. function myFunc() { const name = "elice"; console.log(this); } myFunc(); // 일반 함수 호출시 window {...} 1. 객체의 메서드 호출 시 this값은 객체를 가리키게 된다. const person2 = { name: 'min', study : function() { console.log(`${this.name}이는 js를 공부하고 있습니다.`) .. 2022. 10. 18.
HTTP request, response, CSR, SSR, FETCH API 1. 의미 : Hypertext Transfer Protocol Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것. 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상이다. 2. naver.com으로 요청이 보내지는 과정 요청은 먼저 가장 가까운 cdn서버로 요청이 되고 cdn서버는 네이버가 어디 위치에있는지 알아내서 아이피주소로 요청을 리다이렉트 하고 요청은 코어네트워크를 타고 쭉쭉 네이버 서버로 가서 네이버 서버에 도달을 한다. 그 서버도 게이트웨이 서버 프록시 서버 여러가지가 있고 이 모든것을 거친 후에야 네이버 비즈니스 서버로 도달한다. HTTP는 이런 존재들 사이의 통신 방법을 규정한 것이다. HTTP는 OSI 7계층이 속하는 통신방법중의 하나이다. 클라이언트와 server가 HTT.. 2022. 10. 11.
Map에 대하여 키와 값의 쌍으로 이루어진 컬렉션 객체 - Key - value값의 한쌍으로 이루어진 데이터 집합이다. const map = new Map([ ['cat', '나비'], ['dog', '바둑이'], ]); console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' } 값을 추가하기, 해당 값이 포함되어있는지 확인하기 const map = new Map([ ['cat', '나비'], ['dog', '바둑이'], ]); console.log(map); //Map(2) { 'cat' => '나비', 'dog' => '바둑이' } // 추가 map.set('rabbit', '토순이'); console.log(map); //Map(3) { 'cat' => '나비', .. 2022. 10. 7.
set에 대하여 set 1. 모든 값이 고유하다.(데이터가 중복될 수 없다) 2. 인덱스를 사용하지 않는다. 3. undefined와 NaN도 저장할 수 있다. 생성하는 방법 : new Set 예제 ) let set1 = new Set([1, 2, 2, 3]); console.log(set1); // Set(3) { 1, 2, 3 } 이미 값이 있는 경우 추가도 되지 않는다. let set1 = new Set([1, 2, 2, 3]); console.log(set1); // Set(3) { 1, 2, 3 } set1.add(1); console.log(set1); 없는 값인 경우 삭제되지 않는다. let set1 = new Set([1, 2, 2, 3]); console.log(set1); // Set(3) { 1, 2.. 2022. 10. 7.
널병합연산자 ?? 표기법 : ?? 오직 null과 undefiend값만 false한 값으로 인식한다. 기존에는 0, -0 이 false로 인식되었으나 ??에서는 true한 값으로 인식된다. // 널병합 연산자 console.log('=============='); let num = 0; console.log(num || '-1'); // -1 console.log(num ?? '-1'); // 0 console.log(num ?? '1'); //0 console.log(num ?? '2'); //0 console.log(null || '3'); // 3 console.log('' || '4'); // 4 console.log(null ?? '5'); //5 console.log('' ?? '6'); // '' 빈문자열이 .. 2022. 10. 7.
옵셔널체이닝 연산자 ?. 표기법 : ?. 객체를 가리키기를 기대는 변수가 null또는 undefined가 아닌지 확인하고 프로퍼티를 안전하게 참조할 때 유용. null또는 undefined만 false로 인식한다. 즉, 빈문자열을 true로 인식한다. 옵셔널 체이닝 도입 이전에는 논리곱(&&)을 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했음. 첫번째 예로, &&를 쓰는 경우 str = ''; lengthone = str && str.length; console.log(lengthone) ==> 결과는 빈칸이 나온다. // 옵셔널 체이닝 연산자 str = ''; length = str?.length; console.log(length); // 0 ==> 0이 나온다. 예전 방식과 현재 방식 let d.. 2022. 10. 7.
논리 연산자 단축평가 || 와 && || : 왼쪽부터 오른쪽으로 진행하면서 하나라도 참이면 return && : 왼쪽부터 오른쪽으로 진행하면서 하나라도 거짓이면 return "Cat" || "Dog" //"Cat" false || "Dog" //"Dog" "Cat" || false //"Cat" "Cat" && "Dog" //"Dog" false && "Dog" //false "Cat" && false //false 2022. 10. 7.
형변환 1. 문자형으로 변환 String(value) let string = true; console.log(typeof(string)) //boolean string = String(string) console.log(typeof string) //string 2. 숫자형으로 변환 2.1 / 나누기가 있는 경우 alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다. 2.2 Number(value) let str = "123"; alert(typeof str); // string let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다. alert(typeof num); // number 3. 불린형으로 변환(Boolean(valu.. 2022. 10. 7.
자바스크립트 기본 QUIZ 1.실행 환경에 독립적이라면? 코어자바스크립트 2. HTML테그 안에 자바스크립트를 사용하려면? 3. Javascript를 외부에서 가져오려면? 4. Javascript외부 태그 안에 자바스크립트 내용을 쓴다면? 에러가 난다. 6. 세미콜론을 생략해도 되는지? 가능 7. 자바스크립트의 여러줄 주석은? /**/ 8. 여러줄 주석을 중첩해서 쓴다면? /*...*/안에 또 다른 /*...*/이 있을 수 없습니다. 9. 자바스크립트를 엄격모드로 바꾸는 방법은? "use strict"를 맨앞에 쓴다. 10. 변수를 생성하는 방법은? let message; 11. 변수 안에 데이터를 저장하는 방법은? message = "hi" 12. 변수명에 $나 _를 사용한다면 특이점은? 없다. 문자와 같음. 13. 변.. 2022. 10. 7.
JSON데이터와 객체의 차이(javascript) *차이점 일반 객체 : key에 쌍따옴표가 안붙음 JSON 객체 : key에 쌍따옴표가 붙음 *바꾸기 일반객체를 JSON객체로 바꾸기 : JSON.stringify(객체) JSON 객체를 JavaScript 객체로 변환 : JSON.parse(JSON문자열) 예제) const cat = { name: '나비', //String타입 age: 4, //숫자타입 play: () => { console.log('낚시줄놀이'); //function타입 }, owner: { name: '박연미', age: 30 }, //객체타입 favorite: ['캣잎', '잠자기', '츄르'], //배열타입 }; // 객체 -> json파일(문자열)로 변환 const json = JSON.stringify(cat); conso.. 2022. 10. 7.
이터러블과 이터레이터(Iterable, Iterator protocol) 이터레이션 for-of loop나 spread 연산자를 쓸 수 있는 것을 이터레이션이라고 한다. 해당하는 것은 Array, String, Map, Set, NodeList에 해당한다. 이것들 안에 [Symbol.iterator]가 들어가 있어서 for-of loop나 spread 연산자를 쓸 수 있다. 1. 이터러블 이터러블 프로토콜 : 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. for .. of문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. 이터레이터 프로토콜 : 이터레이터 프로토콜은 준수한 객체를 이터레이터라고 한다. const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'fu.. 2022. 10. 6.
Symbol,Map, 1. Symbol : 변경 불가능한 원시 타입의 값. - 다른 값과 중복되지 않는 유일무이한 값. => 이름 충돌 위험이 없는 프로퍼티 키 값을 만들기 위해 주로 사용한다. - 리터럴 표기법이 없다 - 심벌은 외부로 노출되지 않는다. - 무조건 Symbol() 를 호출해서 생성한다. const symbol = Symbol('jenny'); console.log(typeof symbol); //타입은 심볼 console.log(symbol); //Symbol객체인데 디스크립터는 제니야! 결과 symbol Symbol(jenny) 2. 안의 description이 같아도 다른 객체로 인식된다. const key1 = 'key'; const key2 = 'key'; const key3 = Symbol('key.. 2022. 10. 6.
제너레이터 일단 제너레이터에 대해 알아보자. 1. 제너레이터란? 코드 블록의 실행을 일시중지했다가 필요한 시점에 재개할 수 있는 특수한 함수. 특징 1) 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 2) 제이레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 함수가 실행되면 제어건이 뺏겨 버리는데 generator함수는 next()를 이용해서 한줄한줄 제어할 수 있다. 3) 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. - 일반함수는 코드를 실행하고 값을 return하지만 제너레이터함수는 함수코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다. 4)제너레이터 함수는 화살표 함수로 정의할 수 없고 new 연산자와 함께 생성자 함수로.. 2022. 10. 6.
타이머, Throttle(쓰로틀), 디바운스(debounce) 1. 타이머함수 종류 setTimeout, setInterval, clearTimeout, clearInterval이 있다. 2. 타이머함수는 ECMASCRIPT함수인가? 아니다. 브라우저 환경과 Node.js환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 호스트객체이다. 3. debounce 디바운스 (자바스크립트 딥다이브책) 짧은시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정시간동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러가 한번만 호출되도록 하는 것. 1초가 되기 전에 input을 하면은 if(alertTimer)부분에서 clearTimeout이 작동되어서 alert가 안뜨게 되는 것이다! 4. throttle 스로틀 짧은시간 간격으로 이벤트.. 2022. 10. 4.
오답노트) 3,2,1,끝이 1초에 한번 출력 내 오답이었던 답) 60점짜리답 // 지시사항에 따라 코드를 작성합니다. function countDownThree() { let number = 3; console.log(number); let interval = setInterval(() => { number--; console.log(number); if (number == 1) { setTimeout(() => { console.log('끝'); clearInterval(interval); }, 1000); } }, 1000); } // 실행 혹은 제출을 위한 코드입니다. 지우거나 수정하지 말아주세요. module.exports = { inputs: [], func: countDownThree }; 솔루션 : function countDownTh.. 2022. 10. 4.
이벤트루프, 동기,비동기,Promise 1. 자바스크립트 엔진에서 비동기를 처리하나? 자바스크립트 엔진은 하나의 메인스레드로 구성되며 비동기 처리를 제공하지 않는다. 대신, 비동기 코드는 정해진 함수를 제공하여 사용한다. 그것을 API라고 한다. API의 예시로 setTimeout, XMLHttpRequest, fetch등의 Web API가 있다. node.js의 경우 파일처리 API, 암호화 API등이 있다. 2.1 동기란? 현재 실행중인 태스크가 종료될 때 까지 다음에 실행될 태스크가 대기하는 방식 태스크를 순서대로 하나씩 처리하므로 실행순서가 보장된다는 장점이 있지만 앞선 태스크가 종료될때까지 이후 태스크들이 블로킹되는 단점이 있다. 예제) function sleep(func, delay){ const delayUntil = Date.n.. 2022. 10. 4.
프로토타입 1. 프로토타입이란? 어떤 제품을 만드는 과정에 시험용으로 미리 만들어본 물건이다 자바스크립트는 프로토타입을 기반으로 상속을 구현한 언어이다. 빈 {}를 콘솔창에 찍어보면 어떤 Prototype을 상속받았는지 볼수있다 빈 []을 콘솔창에 찍어보자. 엔진에서 자동적으로 new Array()를 쳐준것이다. 밑쪽에 보면은 밑에 [[Prototype]] : Object가 하나 더있다. 또 펼쳐 보면은, 객체가 또 부모로 있는데, Object가 최상위 객체임을 알수있다. 모든 객체의 상속이 결국에는 올라가는 구조로 되어있다.(이것을 다중상속, 즉 프로토타입 체인이라고 한다) 오토박싱 : 원시타입 객체를 객체타입으로 바꿔주는것. name이라는 변수를 선언했다. name을 쳤더니 그냥 'hello'만 나온다. 그렇다.. 2022. 10. 2.
여러개의 element를 공통된 TagName으로 가져온 후 addEventListener처리해보기 여러개의 element를 공통된 TagName으로 가져온다. html코드는 User1 User2 User3 index.js에서 element를 공통된 TagName으로 가져온다. const users = document.getElementsByTagName('button'); 그 다음에 for문으로 객체의 길이만큼 돌리면서 하나씩 addEventListener를 연결해준다. for(let i=0;i 2022. 10. 2.
export로 내보내고, import로 가져오기 **export로 내보낼 때는 import 시 {}를 붙이고 export default로 내보낼 때는 import 시 {}를 붙이지 않는다. 1. export 만을 사용해서 변수를 내보내는 경우 greetings.js export const hello = "hello" index.js import { hello } from "./greetings.js"; console.log(hello) 결과 : 주의사항 ) import해올 때 파일명.js를 붙인다!! 2. export default 로 함수를 내보내는 경우 greetings.js export default function (){ console.log('nice to meet you') } index.js import nice from './greeti.. 2022. 10. 2.
함수선언문과 함수표현식의 차이, 호이스팅 함수 선언문과 표현식의 포맷은 다음과 같다. 1)함수 선언문 function hello(){ } 2)함수 표현식 const hi = () => { }; 함수 선언문은 호이스팅이 되지만 함수표현식은 호이스팅이 되지 않는다. 이유는 전 포스팅 참조! 1)함수선언문 hello() function hello(){ console.log('hello') } hello라는 결과가 나온다! 2)함수표현식 hi() const hi = () => { console.log('hi') }; 에러가 나온다! 2022. 10. 2.
Javascript reduce사용법 reduce는 전체 배열 값을 합해주는 역할을 한다. 첫 번째 인자에는 콜백함수를, 두번째 인자에는 sum의 초기값을 넣는다. sum의 초기값을 넣지 않으면 자동으로 0이 된다. 콜백함수에는 2가지 인자가 들어가는데 첫번째는 초기값이 들어가고 두번째에는 배열이 하나씩 들어가서 더해진다. 1. acc가 sum값을 의미하고 curr가 1,2,3,4가 차례대로 대입되며 전체 배열 값을 더해준다. const numbers = [1,2,3,4]; const answer = numbers.reduce((acc, curr)=>{ return acc+curr; },5) //두번째 인자값 : acc의 초기값 console.log(answer) 답 : 15. 2. 숫자가 아닌 문자값을 넣었을 때. 쌓인값과 현재 값을 찍어.. 2022. 10. 2.
객체안에 함수에서 변수를 접근할 경우 this를 붙여야한다 오답) const TwoDotDistance = { point1: { x: 0, y: 0, }, point2: { x: 0, y: 0, }, setPoints: function (x1, y1, x2, y2) { // point1, point2의 값을 세팅합니다. this.point1.x = x1; this.point1.y = y1; this.point2.x = x2; this.point2.y = y2; }, calculateDistance: function () { // 두 점 사이의 거리를 구해, 소숫점 두자리까지 계산하고 문자열을 리턴합니다. // 결과가 NaN 이라면, 숫자 0을 문자열로 리턴합니다. let d = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - .. 2022. 10. 1.
오답노트) 구조분해할당과 filter사용방법 리펙토링 전 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on('line', function (x) { input.push(x); if (input.length >= 3) { rl.close(); } }).on('close', function () { letcardssplit = input[1].split(' '); answer = 0; letcardssplit.map(v => { if (v === input[2]) { answer++; } }); console.log(answer); proc.. 2022. 9. 29.
타입변환, {}의중의적표현,this 1. 암묵적 타입변환 : JS가 알아서 타입을 변환 "1" + 23; // '123' -> 문자가 맨 앞에 나와서 2,3도 문자로 바꿔버린다. 2 + 1 + "2"; // '32' -> 1+2는 계산이되지만 2라는 문자가 있어서 결국 문자 32가 된다. 123 + ""; //문자열 123으로 바꿔준다. 1 + true; // 2 -> boolean값을 true를 1로 바꿔주었다. 1 + false; // 1 -> boolean값을 false를 0로 바꿔주었다. 1 + null; // 1 -> > null을 0로 바꿔주었다. 1 + undefined; // NaN -> undefined는 숫자로 바꿀 수 없다. 2. 명시적 타입변환 // 1. String 생성자 함수. 값을 문자열로 바꿔주는 함수. Str.. 2022. 9. 28.
자바스크립트에서 비동기 처리가 가능하게 해주는 Web API API = Application Programming Interfaces로, 직접 기능을 만들지 않고 누군가가 만든 기능들을 가져다 쓰는 것이다. 그 중 DOM APIs를 사용해서 웹페이지에 있는 요소들을 조작할 수 있다. Process와 Thread의 차이점은? 프로세스는 운영체제 위에서 연속적으로 실행되고 있는 프로그램. 카카오 유튜브를 보고있다면 각각의 프로세스라고 보면 된다. 프로세스(프로그램) 안에서 수행하는 여러 기능. 게임을 한다고 치면 로딩중 데이터 받아오는 기능, 음악 나오는 기능 등등이 하나하나의 쓰레드이다. 쓰레드는 한가지 일만 한다. 쓰레드 안에서는 동기. 하지만 여러개의 쓰레드가 작동되니까 여러가지 일이 처리되는 것이다. JavaScript는? 싱글쓰레드이다. 즉, 콜스택에서 함수.. 2022. 9. 21.

티스토리툴바