웹/JS
[JS] 난독화 풀기 - Deobfuscate
최근 알아낸 사실인데 아래 2개 사이트 정도면 웬만한 Javascript 난독화가 대부분 풀립니다. 당연하지만 다 풀리는건 아닌거 같구요 1. https://deobfuscate.relative.im/ console to see them in a better view" data-og-host="deobfuscate.relative.im" data-og-source-url="https://deobfuscate.relative.im/" data-og-url="https://deobfuscate.relative.im" data-og-image=""> JavaScript Deobfuscatorsynchrony ver. 2.2.0 A simple deobfuscator for mangled or obfuscate..
웹/JS
[JS] async & await란? - 제대로 알고 사용해보자!
본 글을 읽기 전에 Promise 에 대해 미리 알고 계셔야 합니다. 안녕하세요 파일입니다. 이전에 Promise를 통해 CallBack 지옥을 .then() 과 .catch() 를 이용해 개선시킬 수 있었습니다. 이제는 조금 더 나아가서 async await를 통해 Promise로 작성된 코드들을 한번 더 개선시켜 보겠습니다. * 여기서 개선되는 것은 대부분 가독성 입니다. Async & Await이란? async 와 await은 Promise를 조금 더 간편하게 사용 할 수 있도록 도와주며 동기적으로 실행되는 것 처럼 보이게 하는 문법입니다. async와 await은 새로운 것이 추가된 것이 아니며 기존에 존재하는 Promise를 쉽게 사용할 수 있게 해줄뿐인, 즉 Promise의 Syntatic s..
웹/JS
[JS] "==" 와 "===" 연산자의 차이점
프로그래밍을 하면서 값들의 같음을 비교하려면 == 연산자를 이용해서 같음을 비교할 수 있습니다. 대부분의 언어에서 사용하는 것이기도 하구요. 그런데 JS는 다른 프로그래밍 언어들과 다르게 "==" 도 있고 "==="도 있습니다. == 은 알겠는데 ===은 뭘까요? 인터넷에 관련글을 찾아보면 글이 빼곡히 쌓여있는데 그만큼 JS를 접한 개발자들을 당황시킨 내용이라고 할 수 있습니다 당연히 저도 당황을 해서 글을 쓰는것이구요 -.- 저는 난잡한 특성이 많은 JS를 싫어하는 편인데 웹 개발을 하면 현재로썬 대체제가 없어서 어쩔 수 없이 사용을 하고 있습니다. 잡담은 여기까지 하고 == 와 ===에 대해 알아봅시다. 용어 정리 연산자, 피연산자라는 용어를 잘 모르실 수 있으므로 미리 설명하고 넘어갑니다. 3 + ..
웹/JS
웹 프로젝트 리팩토링 -> TS(타입 스크립트) 도입했습니다
기존에 Node.js Express 로 짜여진 백엔드단 코드가 일반 JS였는데 TS(타입 스크립트) 를 도입해서 리팩토링 과정을 거쳤습니다. Vue 코드도 언젠가 타입 스크립트로 바꿔줘야 하는데.. Vue 3는 공식적으로 TS를 지원하지만 제 프로젝트 환경의 경우 Vuetify 를 사용하기 위해 부득이하게 Vue 2 버전을 사용해서 (Vuetify 가 Vue 3를 공식[Release]으로 지원하지 않고 있습니다.) Vue 2는 각종 플러그인을 이용해야 TS를 사용할 수 있습니다. 쉽게 말해서 귀찮아서 나중에 한다 이말입니다. 이렇게 전부 js에 CommonJS require("...") 로 가득한 코드를.. ts 파일로 바꿔주고 ES6 import 구문으로 바꿔줬습니다. TS 의 장점인 자동 완성, 잘못..
웹/JS
[JS] Promise란? (then, catch, ...) - 프로미스 쉽게 이해하기
안녕하세요 파일입니다. 오늘은 JS에서 일종의 진입장벽이라고 할 수 있는 Promise에 대해 알아보겠습니다. 본 글은 우선 콜백 함수에 대해 어느정도 알고있다는 걸 전제로 합니다. 콜백 함수에 대해 모르시면 이 글을 참고해주세요. 동기 vs 비동기 우선 Promise에 대해 알아보기 위해 선행지식이 몇 가지 필요합니다. 그 중 하나가 바로 동기와 비동기 입니다. 동기와 비동기는 꼭 JS에서만 국한되는 개념은 아닙니다. 프로그래밍 언어를 좀 깊게 공부하시다가 보면 한번쯤은 만나게 되는 개념입니다. 쉽게 설명해서 동기는 순서대로 실행하는 것이고, 비동기는 순서대로 실행되지 않는 것 입니다. JS의 경우에도 호이스팅 이후 순서대로 실행, 즉 동기적으로 작동합니다. 코드를 위에서 부터 아래대로 순차적으로 읽어..
웹/JS
[JS] 콜백 함수(Callback Function)란? [콜백 함수를 쓰는 함수 직접 만들어보기]
안녕하세요. 오늘은 JS에서 자주 사용되는 개념은 콜백 함수(Callback Function) 에 대해 알아보겠습니다. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] 위 코드는 developer.mozilla.org 란 곳에서 가져온 배열의 filter 메소드(함수) 를 사용하는 방법을 다루고 있습니다. JS에서 배열을 생성하면 그 배열은 .filter()라..
웹/JS
[JS] 화살표 함수란? (Arrow Function)
adder = (a, b) => a + b; console.log(adder(2, 3)); >>> 5 JS로 작성된 코드들을 보면 위와 같이 () 와 화살표(=>) 를 이용한 표현들을 볼 수 있습니다. adder에 어떤 표현식을 대입할 수 있고 adder(2, 3) 를 호출하면 return a + b; 를 하는 함수처럼 동작합니다. 실제로 위 표현은 화살표 함수라고 해서 함수를 간결하게 쓸 수 있는 표현 방법입니다. adder = (a, b) => a + b; 사실 이 표현은 adder = function(a, b) { return a + b }; 이 표현과 같은 것입니다. 대충 function 키워드를 빼고 화살표를 추가한 거 같은데 return은 어디로 사라졌을까요? 오늘은 화살표 함수(Arrow F..
웹/JS
[JS] var, let, const의 차이점
이번에 웹 공부의 필요성을 느껴서 이전에 대강 대강 이해하고 넘어갔던 JS를 심화 학습중입니다. 기존 응용 프로그램만 개발하면서 언어 자체가 '어렵다' 정도는 있어도 (C++ 이라던가...) 난해하다는 느낌은 없었는데 JS의 경우 제가 기존에 프로그래밍 하던 것과 다른 난해한 느낌을 받았습니다. 특히 자바스크립트의 과도한 유연성이 저에겐 혼돈의 카오스 그 자체였습니다... 'JavaScript is Weird' 라는 말이 개발자들 사이에서 도는게 그 증거겠죠. 그 중 첫번째가 바로 JS에서 변수 선언 방식인 var, let, const의 차이입니다. 오늘은 이 3가지의 차이점에 대해 좀 자세히 알아보겠습니다. *본 글에서 자바스크립트라는 단어는 전부 JS라는 단어로 축약해서 사용하겠습니다. var vs ..
이모티콘창 닫기
울음
안녕
감사
당황
춤
피폐
