JavaScript (12) 썸네일형 리스트형 [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 비동기통신 간단하게 사용하기 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [jQuery] ajax 비동기통신 간단하게 사용하기입니다. Intro 먼저 ajax 비동기통신은 javascript를 더 쉽게 사용하기 위한 jquery 라이브러리의 한 메소드로 실무에서 정말 많이 쓰이는 라이브러리로 무조건 습득해야되는 것들 중 한가지 이다. 일반적인 MVC패턴을 통해서 개발을 진행할 때 controller에서 Return되는 값은 ViewResolver에 의한 Prefix, Suffix를 통해 jsp파일명을 반환한다. 하지만 페이지 이동이 아닌 동일한 페이지 내에서 통신을 하기 위해서는 ajax를 사용한다. 여기서 비동기통신이란 앞선 요청(request)에 대한 응답(response)를 기다리지 않고 계속해서 뒤의 요청.. [JavaScript] URL 주소 복사하기(.select(), copy) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] URL 주소 복사하기(.select(), copy) 입니다. Intro 현재 프로젝트 업무를 진행하면서 이벤트 페이지를 개발하고 있다. 그 중 몇 이벤트에서 카카오톡 공유하기와 URL 복사 버튼을 구현하였다. 개발함에 있어 생각보다 더 많이 고민하고 찾아보았던 URL 복사하기 기능에 대해서 설명하고자 한다. 라이브러리를 이용한 방법도 있지만 오늘은 javascript를 이용한 간단한 방식에 대해 알아보자. 1. Select (선택할 url 드레그) 먼저 html태그를 아래와 같이 작성해준다. 버튼을 클릭했을때 element.select(); 를 통하여 input 태그에 작성된 내용을 선택한다. (MDN 참고) > 여기.. 이전 1 2 다음
