[JavaScript] 자바스크립트를 이용한 팝업창 띄우기

2021-09-04 화면 이동이 아닌 현재 화면에서의 팝업창을 띄워야 하는 경우가 생길 수 있다. 간단한 공지사항이나 이벤트 정보의 경우 팝업창으로 보여주면 아무래도 사용자의 집중과 관심을 유도할 수 있다. 오늘은 이러한 방법을 자바스크립트를 통해서 구현하는 방법을 알아보자. - 예제 우선 방법은 a 태그를 클릭하면 팝업창이 뜨는 방식으로 구현할 것이다. 단순 팝업창만 띄울거기 때문에 컨트롤러 로직 및 차후 파라미터를 서로 forward 하는 방법까지는 다루지 않는다. 우선 아래는 구체적인 함수구현 부분이다. 크게 어려운 것은 없으며, 창 크기 및 창을 띄울 위치 이외의 window 속성을 지정하고 마지막으로 window.open을 통해 자신이 팝업으로 띄우고 싶은 url 맵핑 정보 이름 window 속..

• format_list_bulleted WEB/JavaScript
• · 2021. 9. 4.
• textsms

[JavaScript] a 태그 뒤로 가기 링크 부여하기 history.back() / go(-1)

2021-07-24 뒤로 가기 버튼을 구현하기 위해서는 크게 준비할 거 없이 a 태그 하나만 사용하면 손쉽게 구현할 수 있다. 오늘은 이와 같은 방법을 빠르게 알아보도록 하자. - 소스코드 // 히스토리의 back을 사용한 뒤로가기 링크 구현 뒤로가기 // 히스토리의 go를 사용한 뒤로가기 링크 구현 뒤로가기 위의 두 코드는 뒤로가기 버튼 구현 시 상당히 많이 사용하는 코드로 자신의 기호와 상황에 맞게 사용해주면 된다. (작성자는 가독성 면에서 back() 메서드가 조금 더 눈에 들어오기 때문에 자주 사용하곤 한다.) (버튼 형식으로 구현하고 싶으면 a 태그안에 button 태그를 넣어서 구현하면 된다.) 메인 이미지 출처: Photo by Toa Heftiba on Unsplash

• format_list_bulleted WEB/JavaScript
• · 2021. 7. 24.
• textsms

[JavaScript] 자바스크립트 apply() 통한 바인딩 알아보기.

2021-07-18 자바스크립트에서는 객체를 바인딩하는 몇 가지 메서드가 존재하는데, 그중에서 오늘은 apply를 알아보도록 하자. - 예제1 //사람의 정보 함수 function person(name, age){ this.hisName = name; this.hisAge = age; } const person1 =new person('king', 25); // 학년이 추가된 학생 함수 function student(name, age, grade){ person.apply(this, [name,age]) this.hisGrade = grade; } const student1 = new student('kking', 30, 5); console.log(person1.hisName); //king conso..

• format_list_bulleted WEB/JavaScript
• · 2021. 7. 18.
• textsms

[JavaScript] 자바스크립트 배열 중복 제거하는 방법.

2021-07-11 자바스크립트 내에서 중복된 값을 가지는 여러 인덱스들이 존재하며, 이를 제거하고 싶어질 수가 있는데, 이럴 경우 일일이 for문과 같은 루프를 돌리는 것보다 간단히 제거하는 방법이 있다. 이 방법을 알아보자. - 예제 아래의 예제는 간단한 문자들을 가지고 있는 배열이며, 불필요하게 중복되는 문자열이 다수 존재하는 것을 확인할 수 있다. const arr = ['W', 'W', 'o', 'o', 'r', 'l', 'd'] console.log(arr) // [ 'W', 'W', 'o', 'o', 'r', 'l', 'd' ] - Set set이라는 자료구조는 중복된 값을 포함할 수 없다. 오로지 유니크한 값들만 가지게 되는데, 이를 활용해보자. const arr = ['W', 'W', '..

• format_list_bulleted WEB/JavaScript
• · 2021. 7. 11.
• textsms

[JavaScript] 자바스크립트 bind() 메소드 알아보기.

2021-07-11 자바스크립트 내에서는 개발자가 직접 바인딩할 대상을 지정할 수 있는 몇 가지 메서드가 있는데, 그중에서 오늘은 bind에 대해서 알아보도록 하자. - 예제 아래는 간단한 사람이라는 객체이며, 객체 필드로 자신의 이름과 나이 이를 출력하는 간단한 함수가 정의 되어 있다. const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이름은 " + this.name + "이며, 나이는 " + this.age + "입니다." ) } } - bind와 unbind 된 객체 const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이..

• format_list_bulleted WEB/JavaScript
• · 2021. 7. 10.
• textsms

[JavaScript] 자바스크립트 Destructuring 디스트럭처링 알아보기.

2021-07-08 자바스크립트를 공부하던 도중 흥미로운 기능을 발견했다. 바로 디스트럭처링(Destructuring) 풀어서 구조 분해라고도 하는 자바스크립트 만의 고유 문법이다. 아래의 예제를 보자. - 예제 1 const arr = ['king', 'world'] const name1 = arr[0] const name2 = arr[1] console.log(name1) // king console.log(name2) // world 위와 같은 배열 형식의 값을 변수에 다시 담을 경우 보통은 해당 배열의 인덱스 번호를 기준으로 하여 값을 지정할 것이다. 하지만 디스트럭처링을 사용하면 조금 더 간단하게 이를 해결할 수 있다. 바로 다음 예제를 살펴보자. const arr = ['king', 'worl..

• format_list_bulleted WEB/JavaScript
• · 2021. 7. 8.
• textsms