Language/Javascript (14) 썸네일형 리스트형 [Javascript] 자바스크립트의 즉시실행 함수와 익명 함수(예시 포함) Intro 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의하자마자 즉시 호출하는 패턴입니다. 이는 함수를 선언과 동시에 실행하여 사용할 수 있는 유틸성 함수나 모듈 패턴을 구현하는 데에 자주 사용됩니다. (function() { // 코드 작성 })(); 위의 구문에서, 함수는 익명으로 선언되고 함수 정의를 괄호로 둘러싸서 함수를 표현식으로 만듭니다. 그리고 바로 뒤에 괄호로 함수를 호출하여 즉시 실행합니다. 즉시 실행함수의 이점 1. 스코프 격리 즉시 실행 함수 내에서 선언된 변수와 함수는 즉시 실행 함수 내에서만 유효하며, 전역 스코프를 오염시키지 않습니다. 이를 통해 변수 충돌을 방지하고 모듈화를 구현할 수 있습니다. (functio.. [Javascript] 자바스크립트 Promise과 예시, 사용법 Intro JavaScript Promise는 비동기 작업의 결과를 나타내는 객체입니다. Promise는 비동기 작업이 완료되었을 때 성공 또는 실패 여부에 따라 콜백 함수를 실행하거나 다른 Promise 객체와 연결하여 체이닝할 수 있습니다. 이를 통해 비동기 작업을 더 효율적이고 가독성 좋게 처리할 수 있습니다. Promise 구성요소 - Pending(대기): 비동기 작업이 아직 완료되지 않은 상태입니다. - Fulfilled(이행): 비동기 작업이 성공적으로 완료되었습니다. - Rejected(거부): 비동기 작업이 실패하였습니다. Promise 생성하기 const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 // 작업이 성공하면 re.. [Javascript] 자바스크립트(js) Cookie(쿠키) 사용법 Intro 안녕하세요. 플리체입니다. 이번에는 Javascript를 통하여 Cookie를 제어(생성, 설정) 하는 방법에 대해 공유해 드리겠습니다. - 쿠키란? 브라우저에 저장되는 작은 데이터 조각으로, 이전에 방문한 웹 사이트에 대한 정보를 저장하거나 사용자 지정 환경 설정 등을 유지하는 데 사용됩니다. 쿠키는 일반적으로 유효 기간이 있으며, 유효 기간이 지난 쿠키는 자동으로 삭제됩니다. 쿠키 설정하기 쿠키를 설정하려면 document.cookie 속성을 사용합니다. 이 속성은 현재 페이지의 모든 쿠키를 포함하는 문자열을 반환하며, 이 문자열을 편집하여 새로운 쿠키를 추가하거나 수정할 수 있습니다. document.cookie = "key=value; expires=expirationDate; path.. [JavaScript/jQuery] console과 객체의 주의점 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 내용은 jQuery를 이용해서 console과 객체의 주의점 입니다. Intro 저는 JavaScript 코드를 작성을 할때에 debugger보다 console.log()가 익숙하여 많이 더 많이 사용하는 것 같습니다. 최근에 소스를 분석하다가 객체를 console.log()를 통해서 확인 하는 과정에서 한참을 고민했던 경험이 있어서 소개해 드리려 합니다. 결과가 어떻게 나올지 같이 예상하고 고민해보면서 보시면 좋을 것 같습니다. 1. 객체 생성 & console.log 찍기 person이라는 이름을 가진 Object(객체) 하나를 생성하겠습니다. property(속성)으로는 이름과 나이까지만 간단히 생성하였습니다. var person = {'na.. [JavaScript/jQuery] Null 병합 연산자 '??' 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 내용은 jQuery를 이용해서 Null 병합 연산자(??)소개 입니다. Intro Script를 작성하면서 Null 체크는 빈번하게 사용할 일이 많습니다. 그때마다 비교적 길고 지저분한 코드들을 간단하게 줄일 수 있는 연산자 입니다. Null 병합 연산자(??)를 사용하지 않은 형태부터 동일한 결과의 코드를 차례로 예시를 들어 보여드리겠습니다. 1. 기본 연산자만 사용한 형태 해당 변수의 값이 Null일 때 '10' 이라는 값을 할당한다고 가정합니다. 그럼 data라는 변수가 있을때 해당 로직은 아래 사진과 같을 것입니다. var data = null if (data === null || data === undefined) { data = 10 }.. [JavaScript/jQuery] checkbox 선택자, 체크 여부 제어 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 내용은 jQuery를 이용해서 checkbox 활용하기 입니다. Intro input 태그의 type속성 중 하나인 checkbox는 정말 많이 활용이 되고 있다. radio와 다르게 중복 선택이 가능하여, 가장 흔히 볼 수 있는 것은 홈페이지 게시판에서 원하는 카테고리의 게시글들만 분류하는 기능이다. 물론 select와 input type="text" 등을 모두 활용하여 더 멋있는 검색기능을 구현할 수도 있지만 이번에는 checkbox활용에 대해서만 살펴보겠다. What? Why? 아래와 코드를 활용하여 간단한 5개의 check박스를 만들었다. 전체 자유 익명 기술 기타 여기서 label태그는 for타입의 값과 input태그의 id가 일치하게 작.. [JavaScript/jQuery] ajax 비동기통신 - html방식 리턴받기 안녕하세요! Plitche(플리체)입니다. 저의 첫 포스팅은 [jQuery] ajax 비동기 통신 - HTML방식으로 리턴 받기입니다. Ajax와 Submit 일반적으로 form태그를 사용하여 submit 처리를 하게되면, back단에서 데이터 처리/로딩 후 페이지를 이동하는 방식으로 화면에 표출된다. 반면, Ajax 비동기통신을 이용하게 되면 새로고침을 하는 듯한 동작은 더 이상 볼 수 없다! Ajax 비동기통신을 이용하면 화면 이동 없이 back단에서 데이터를 처리한 후 return 값을 이용하여, 원하는 방식으로 웹 화면에 표출되는 내용을 제어가 가능하다. Ajax의 return 타입은 datatype으로 핸들링이 가능하며 그 종류로는 xml, json, html 등등 다양하지만 오늘은 간단한 게시.. [JavaScript/jQuery] 실무에서 사용하는 ajax 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [jQuery] 실무에서 사용하는 ajax 비동기통신 입니다. Intro 첫 프로젝트에 들어가기 전까지만 해도, 앞서 ajax 비동기통신 간단하게 사용하기처럼 매번 필요할 때 마다 ajax 문법에 맞추어 모든 내용을 작성하고는 했다. 물론 당연히 정상 작동하지만, 스크립트 코드 길이가 길어지면 찾기도 수정하기도 번거롭고 어려워진다. 때문에 이번 포스팅에는 내가 첫 프로젝트에 투입이 되어서 나름 충격을 받았던 부분에 대해서 공유 하고자 한다. 사실 생각해보면 간단한데.. 왜 생각을 못했을까 ㅠㅠ 일반적인 ajax $.ajax({ url: '', // Controller의 mapping값 type: '', // get, post 방식 中 dat.. 이전 1 2 다음
