Frontend

커링(Curring)이라는 기법을 들은 적이 있다.커링이란 하나의 함수가 여러 개의 인수를 받는 대신, 하나의 인수를 받고 나머지 인수를 받는 새로운 함수를 반환하는 기법이다.처음엔 커링 기법이 적용된 화살표 함수의 코드만 보고 뇌가 잠깐 정지해서 이게 뭘까...? 싶은 마음이 들었다.계속 보다보면 뭔가 동작법을 알 것도 같으면서 조금 헷갈리는 면이 많았다. 그래서 이참에 좀 더 알아보려고 글을 쓴다. 먼저 기본 함수와 비교해보며 알아보자. 기본 함수 그리고 커링 기법을 적용한 함수// 기본function add(a, b) { return a + b;}add(10, 5); // 15// 커링기법 적용function curriedAdd(a) { return function(b) { return a..

관련글 보기Content type 'application/octet-stream' not supportedFormData 파일 전송 방법: Blob 그리고 JSON.stringify() 오늘은 인터넷 미디어 타입(MIME Type) 중 하나인 application/octet-stream에 대해서 알아보자. MIME Type (Multipurpose Internet  Mail Extensions Type)MIME 타입은 인터넷 미디어 타입이라고도 불리우며 인터넷에서 전송되는 파일 또는 데이터의 형식을 나타내는 규격이다.서버와 클라이언트가 데이터를 주고받을 때 이 데이터가 어떤 형식인지 알 수 있게 하여 올바른 처리를 돕는다. 본문에서 설명하고자 하는 application/octet-stream 처럼 일반..

이전에 게시한 에러 분석글 Content type 'application/octet-stream' not supported에 대해 조금 더 파헤쳐보고자 작성해본 글이다. 저번 글의 요약으로는 객체 형태의 데이터를 FormData에 그대로 추가했고"Content type 'application/octet-stream' not supported" 라는 서버 에러가 발생했다. 서버에서 기대한 데이터의 content type은 application/json이었는데, application/octet-stream 타입으로 전송이 되었고 이를 지원하지 않아 발생한 문제. 다행히 JSON 데이터를 알맞게 변환하여 깔끔하게 해결했다. 나는 사실 기존에 Blob 객체로 감싼 파일을 전송했었는데 JSON.stringify(..

업무할 때는 편리함때문에 jQuery를 많이 이용한다. 같은 DOM 조작이지만 언제까지나 제이쿼리만 쓸 수 없다는 생각이 들었고, 자주 이용하는 jQuery 문법을 순수 자바스크립트로 마이그레이션을 진행해 봤다. 진행한 프로젝트는 개인 프로젝트이고 일이 바쁘니까 조금씩 조금씩 걷어내는 중.걷어내면서 사용한 코드들을 여기에 정리해 본다.  getElementById(), querySelector(), querySelectorAll()// jquery$('#targetId');$('.targetClass');// jsdocument.getElementById('targetId');document.querySelector('.targetClass');document.querySelectorAll('.targe..

프로젝트 디자인이 나왔는데 폰트가 Pretendard 여서 적용해봐야 한다.바닐라JS 환경이기에 패키지 매니저로 관리할 수 없어서 CDN으로 적용했다.  Pretendard 공식 문서https://github.com/orioncactus/pretendard GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform - orioncactus/pretendardgithub.com 공식 문서에서 다양한 타입의 cdn을 찾을 수 있다.나는 가변 다이나..

자바스크립트로 파일 다운로드 함수를 만들어서 사용하고 있었다.요즘 이렇게 만들어뒀던 코드들을 분석하며 되돌아보는 시간을 가지고 있다. downloadAuthorizedFile()async function downloadAuthorizedFile(fileName = "file", { downloadURL = "", requestParam, responseType}) { function checkIncludeExtension(fileName) { const regex = /\.[0-9a-z]+$/i; return regex.test(fileName); } if (!downloadURL) throw new Error("Cannot found download..

자바스크립트로 HTML 코드에서 순수한 텍스트만 추출하려면 어떤 방법을 써야 할까?우리는 항상 서버단으로 데이터를 보낼 때 HTML이 포함된 본문 내용과 텍스트로만 이루어진 데이터를 함께 보내줘야 한다. 지금껏 기존의 다른 작업자분이 만들어놓은 코드를 가져와서 쓰고 있었는데 갑자기 이 코드는 어떻게 구성되어 있는건지 궁금해져서 글을 써본다. function getPlainTextFromHTML(html = "") { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); let allText = ""; const textNodes = doc.createTreeWalker(doc.bod..

이전글 보기JavaScript 법정동 데이터 관리와 동적 선택기 모듈 구현: 최신 데이터 가져오기 및 데이터 가공하기  저번글에서는 최신 데이터를 가져와 가공하는 법에 대해서 글을 썼다. 오늘은 저장한 JSON 데이터를 기반으로 동적 셀렉트 박스를 구현해보려고 한다. 모듈 외부 코드 살펴보기우선 모듈을 테스트할 HTML 코드이다. 시/도 선택 시/군/구 선택 읍/면/동 선택 동/리 선택 구조는 단순히 select와 id 값만 넣어줬다. 내부의 기본 선택 옵션은 넣어주지 않아도 되지만 최초 렌더링 후 확인할 수 있게 넣어줬다. 이후에 선택기가 동작하면 모듈 내부에서 option을 갈아끼울 때 새로 넣어준다.  다음은 JavaScript 코드let regionModule;// DOM l..