Frontend/javascript

첫 회사에서 개발을 시작했을 때, 소장님께서 "로그는 꼭 필요할 때만 남기는 게 좋다"라는 조언을 들었다. 그래서 나는 그 이후로 로그를 남길 때 정말 신중하게 접근하는 편이 되었다. 그런데 지금 회사는 분위기가 완전히 다르다. 협업하는 사람들이 굉장히 많고, 그들 모두 로그를 적극적으로 남긴다. 뭐가 맞고 뭐가 틀리다라고는 할 수 없겠지만 한 가지 문제가 있다. 너무 많은 로그 속에서 내 로그를 찾는 일이 쉽지 않다는 것이다. 화면이 렌더링 되는 순간 후루룩 쌓이는 로그들... 그렇다고 남의 로그를 지우는 것도 예의는 아닌 것 같다. 지금은 임시 방편으로 마운트 시점에 console.clear() 라인을 적어서 내 로그만 볼 수 있게 해뒀다. 혹시 이렇게 로그를 남기는 습관이 든 분들은 남의 로그도 ..

객체/배열 변환const obj = { a: 1, b: 2, c: 3 };const entries = Object.entries(obj);console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]const newObj = Object.fromEntries(entries);console.log(newObj); // { a: 1, b: 2, c: 3 } 배열 중복 제거const arr = [1, 2, 2, 3, 3, 4];const unique = [...new Set(arr)];console.log(unique); // [1, 2, 3, 4] Math.floor() 대신 정수 구하기 (정수 변환)console.log(~~4.2); // 4console.log(5.7..

자바스크립트 내장 객체인 Intl에는 국제화를 지원하는 기능들이 포함되어 있다.날짜나 통화같이 국제적으로 형식이 다른 데이터들을 Intl API를 이용해서 포맷해보자. Intl.NumberFormat()NumberFormat 메소드는 숫자를 특정 지역에 맞는 형식으로 자동으로 변환해준다.const cost = 1267900;// 원화(KRW)로 변환const krw = Intl.NumberFormat("ko-KR", { style: "currency", currency: "KRW" }).format(cost);console.log(krw); // ₩1,267,900// 달러(USD)로 변환const usd = Intl.NumberFormat("en-US", { style: "currency", curre..

개발을 하면서 디버깅이나 로깅을 할 때 console 객체의 log, warn, error 메소드를 보통 많이 쓴다.가장 많이 사용하는건 console.log()와 console.error().하지만 생각보다 더 많은 메소드들이 있었다. 이번 포스팅에서는 console 객체의 메소드들에 대해서 살펴보고 다양한 상황에 잘 활용할 수 있도록 공부해보려고 한다. console.log(), console.info()console.log("String");console.log("Number: ", 123);console.log("Object: ", { name: "youngdev", age: "30" }); 일반적인 로그 메세지를 출력할 때 사용하는 log() 메소드이다.가장 많이 사용한다. console.inf..

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