TechTonic

JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 데이터를 처리하고 조작하는 데 있어 매우 강력한 기능들을 제공합니다. 그 중에서 객체와 배열을 다루는 기본적인 메서드인 Object.keys, filter, map은 개발자들이 자주 사용하는 도구입니다. 이 글에서는 이 세 가지 메서드를 각각 소개하고, 함께 사용하여 복잡한 데이터를 효율적으로 처리하는 방법을 설명하겠습니다. 1. Object.keys(): 객체의 키를 배열로 반환하기 JavaScript에서 객체는 키와 값의 쌍으로 구성됩니다. 때로는 객체의 모든 키를 추출하고 싶을 때가 있습니다. 이때 사용되는 메서드가 바로 Object.keys()입니다. Object.keys()의 기본 사용법Object.keys(..

JavaScript는 웹 애플리케이션에서 비동기 처리를 효율적으로 다룰 수 있도록 다양한 방식의 비동기 처리 기법을 제공합니다. 그 중에서도 async와 await는 비동기 코드 작성 시 매우 중요한 도구입니다. 이 글에서는 async와 await를 사용한 비동기 처리 방식과, 이를 사용하지 않았을 때의 차이를 중점적으로 살펴보겠습니다.   1. 비동기 처리란? 비동기 처리(asynchronous programming)는 코드가 실행되는 동안 다른 작업들이 동시에 진행될 수 있도록 하는 방식입니다. JavaScript에서 비동기 처리는 서버 요청, 파일 읽기, 타이머 설정 등 시간이 걸리는 작업을 처리할 때 주로 사용됩니다. 비동기 처리를 통해 UI가 멈추지 않게 하고, 사용자 경험을 개선할 수 있습니다..

코딩을 하면서 문자열을 가공하는 작업은 참으로 많이 쓰입니다.    해당 포스팅에는  마지막 문자를 제거하는 방법에 대해 알아보겠습니다.○ slice 활용     ○ slice 설명 참조더보기slice() 함수 :배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는 데 사용. 첫번째 인자: 시작 인덱스, 두번째 인자 : 종료 인덱스를 받음.※시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환.   사용 예시)var str = "hello world"str = str.slice(0, str.length - 1); console.log(str); //hello worl시작인덱스 0 부터, 종료인덱스(문자열길이 - 1)※ 문자열 길이 - 1 = 전체 문자열 중 마지막 문자열 전까지

개발을 하다보면, 특정 로직에 대한 수행 시간이 얼마나 걸리는 지 확인해야 할 경우가 있습니다. 이때, 사용할 만한 기법에 대해서 소개 하고자 합니다. ○ console.time() ○ console.timeEnd()  console.log()는 다 아시잖아요?  그렇담, 이번 기회에 console.time(), timeEnd() 도 챙기자구요. time()과 timeEnd()는 쌍을 이루는 함수입니다. 사용예시)function test(){ console.time('function test'); //측정 시작 ~~~ console.timeEnd('function test'); //측정 종료 }   time, timeEnd의 매개변수를 지정해주면 어떠한 로직 동작 시 측정했는 지를 쉽게 확인할 수 있습..

var url = window.location; // http://test.com/test/index var baseurl = url.protocol + "//" + url.host + "/" + url.pathname.split('/')[1]; // http://test.com/test/

var isTrue = 'true'; //string var isTrueRealTrue = (isTrue==='true'); //string -> boolea

원인 : ajax 통신 시, contentType이 맞지 않아서 발생한 오류. [해결] 스크립트 상 ajax 구문에 contentType: 'application/json' 추가 cf.컨트롤러에서 @RequestBody Map params 를 통해 넘어온 data 확인 가능

- 환경 : 스프링 시큐리티의 csrf 기능을 사용 중이면서, ajax 통신 시 head에 csrf meta 정보를 넘겨주지 않아서 발생한 오류. [해결] head 태그에 csrf 토큰을 추가 예시) thymeleaf

$.ajax({ var name = "apple"; var text = "red color"; type: 'POST', url: '', dataType: 'json', data : { "name": name, "description": text}, success : function(result){ }, error : function(request, status, error){ } });

window.open('경로', '팝업 이름', '옵션'); 예시) window.open('/test/popup.html', 'popup', 'top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no');