JavaScript
메타프로그래밍 (MetaProgramming)
https://jonghakseo.github.io/posts/metaprogramming/ Metaprogramming This post is about metaprogramming. What is meta programming? jonghakseo.github.io
[AssetManager] 리액트에서 에셋 상수관리를 간편하게!
몸이 근질근질 거리는 여름. 남는 시간에 미리미리 생산성을 올려줄 수 있는 툴을 만들 생각으로 옆자리 동료분께 여쭤봤다. "혹시 지금 프로젝트에서 제일 반복, 단순 노동인 부분이 어디일까요?" "음... 이미지 에셋 import 후 상수 관리하는 부분이요!" 나 역시 기존 프로젝트에서 이미지 에셋을 관리하는데에 적잖은 노력을 들였던 부분이 생각났다. 좋아. 오늘은 이 반복노동을 줄일 수 있는 툴을 만드는데 시간을 보내보자고 마음을 먹었다. 먼저 목표를 정했다. import -> 네이밍 -> export의 번거로운 과정 없이 에셋 폴더 기준 자동 상수 정의가 되게 하자. 에셋의 이름은 파일명 및 폴더명의 조합으로 만들어준다. 폴더구조와 파일명에 신경쓰면 그게 곧 해당 에셋의 이름이 된다! (ex. asse..
promise.all / promise.allSettled 차이
비동기 처리를 위해 자주 사용되는 Promise. Promise는 ES6부터 자바스크립트에 본격적으로 적용되어 현재는 대부분의 개발자들에게 친숙한 개념이다. 보통 Promise는 async / await 문법과 사용되고, 특정 상황에서 유용하게 쓰이는 내장 메서드들을 가지고 있다. 오늘은 그 중에서 자칫 혼동되기 쉬운 Promise.all과 Promise.allSettled의 차이점을 알아보도록 하자. Promise.all Promise.all([ promise1, promise2, ... ]) 의 형태로 사용되며, 배열로 받은 모든 프로미스가 fulfill 된 이후, 모든 프로미스의 반환 값을 배열에 넣어 반환한다. 이때 배열에 들어있는 값의 순서는 완료 순서와 상관없이, 인자로 받은 프로미스 배열의 ..
JS 정렬함수(sort function)
Array.sort(정렬함수) JS에서 임의의 Array를 정렬할 때 sort 메소드를 사용한다. 정렬함수는 정렬 순서를 결정하는 데 사용되는 함수로, 정렬함수가 없는 기본값 상태에서는 오름차순, ASCII 문자 순서대로 정렬된다. 배열 안의 요소를 ASCII 순서대로 정렬하다 보니, 숫자 크기 순서대로 정렬이 될 것 같지만 실제 결과는 다르다. var arr = [1, 2, 10, 9, 4, 2]; var sort_default = arr.sort(); console.log(sort_default); 실제 숫자의 크기가 아닌, ASCII 값으로 정렬되어 이 부분이 문제가 될 수 있다. 즉, 직관적이지가 않다. 이 문제를 해결하기 위해 정렬 함수를 정의해서 사용해야 한다. 정렬함수에 인수를 넣고 아래의 ..
Web에서 ScrollTop버튼 넣는 코드
특정 버튼을 클릭하면 스크롤을 맨 위로 올리는 기능. jQuery와 Vanilla JS를 사용한 버전을 둘 다 써놓는다. 원하는 버전으로 쓰시길. jQuery 사용 //페이지 상단으로 이동하는 메소드입니다. const html_top = () => { // scrollTop은 상단이기 때문에 0, duration은 애니메이션 속도입니다 (ms) $('html, body').animate({ scrollTop: 0 }, { duration: 500 }); }; //버튼에 클릭 이벤트 바인딩해서 사용 $('#top_button').on('click', () => html_top()); Vanilla JS 사용 //페이지 상단으로 이동하는 메소드입니다. //임의의 버튼에 클릭 이벤트 리스너를 추가합니다. do..
jQuery를 이용한 Ajax
jQuery를 이용한 Ajax 코드 예제이다. const ajax = (ajax_url, ajax_type, ajax_data, ajax_data_type) => { $.ajax({ // 요청을 보낼 URL url: ajax_url, // HTTP 요청 방식 (GET, POST) type: ajax_type, // HTTP 요청과 함께 서버로 보낼 데이터 data: ajax_data, // 서버에서 보내줄 데이터의 타입 ( xml, text, html, json 등) dataType: ajax_data_type, }) .done(function (data) { console.log('성공적으로 데이터 수신 : ' + data[0]); }) .fail((data) => { console.log('실패');..
JavaScript 정규식 패턴 정리
개인 확인 및 공부용입니다. // 정규식 패턴 (Regex Pattern) // 단순 패턴 사용하기 // /hi/ --> 문자열에서 정확히 'hi'부분이 나타나야 대응됩니다. // 특수 문자 사용하기 // \ --> 특수 문자가 아닌 문자 앞에서 사용되면 해당 문자는 특별한 명령어로 간주됩니다. // ex) \b 는 단어 경계에 대응됩니다. // ^ --> 입력의 시작 부분에 대응합니다. // ex) /^A/ 는 "an A" 의 'A'와는 대응되지 않습니다, 그러나 "An E" 의 'A'와는 대응됩니다. // $ --> 입력의 끝 부분과 대응됩니다. // ex) /t$/ 는 "eater" 의 't'에는 대응되지 않습니다, 그러나 "eat" 과는 대응됩니다. // * --> 앞의 표현식이 0회 이상 연속으..