분류 전체보기

인텔리제이를 사용하다보면 간헐적으로 자동 빌드된 후에 포커싱되는 문제가 생긴다.1~2주에 한 번 있을까 말까 싶지만 한 번 시작하면 금방 풀릴 때도 있고 오래 끌 때도 있는데 오늘은 생각보다 꽤 오래 지속되어서 해결 방법을 찾아봤다. 이슈문제 분석인텔리제이 IDE에서 코드를 수정하고 포커스를 브라우저나 ide 외부로 돌리면 자동 빌드가 시작된다. 대게 수 초 안에 빌드는 끝나게 되는데 문제는 빌드가 끝날 때 인텔리제이로 다시 포커싱이 된다.코드를 계속 보는 상황이라면 상관없지만, 웹 개발 특성상 코드 수정 후 브라우저에서 테스트를 해야 하는데 계속 포커스 되고 브라우저를 조작하고 또 포커스되고 이게 무한 반복이라 사실상 테스트가 불가능하다.입력 테스트를 하다보면 자동 포커스 때문에 어느샌가 코드창에다가 ..

jsTree는 자바스크립트에서 트리 구조로 데이터를 표현할 때 유용한 jsTree 라이브러리이다.커스텀할 부분이 많아보이지만 차근차근하기로 하고 오늘은 간단한 사용법에 대해서 알아보자. CDN 추가하기 jsTree를 간편하게 cdn으로 구현해보자. html 내 내부에 위 cdn을 삽입해준다. jstTree 컨테이너 만들기 컨테이너는 기본적으로 최대 width를 가지고 있기 때문에 테스트용 div로 한겹 더 감싸주었다.컨테이너는 완성되어도 기본적으로 아무 데이터가 없기 때문에 확인할 수 없다. 기본 데이터 추가하기document.addEventListener("DOMContentLoaded", function () { $('#jstree').jstree({ plugins:..

간단한 디데이 위젯을 만들었던 코드다. const setDate = (params, rootElement) => { function getDaysDifference(targetDate) { const today = new Date(); const gap = today - targetDate; return Math.floor(gap / (1000 * 60 * 60 * 24)); } const date = params.get("date"); if (!date || date.length !== 8) { console.error("Invalid Date: ", date); rootElement.querySelector(".date").textContent = "Invalid D..

커링(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(..

프론트 개발 중에 서버에 데이터를 전송했는데 에러가 발생했다.org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported 예전에도 똑같은 에러를 마주한 적이 있었는데, 대충 해결만 하고 치웠다.application/octet-stream 이란 Content-Type은 생소해서 확실히 기억난다. 근데 이번에 또 발생했고 같은 에러였는데도 제대로 기억나지 않아서 블로그에 글을 쓰기로 마음먹었다.이렇게 글로 남겨놓으면 기억이 오래가니까 :) 무엇보다 그냥 해결법만 보고 해결을 한 이후라 기억나지 않는 점이 큰 것 같다. 이슈 분석const formData = new F..

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