html의 form에서 선택된 checkbox의 값만 넘겨주려면 input:checkbox의 name값을 배열로 만들어주면 된다. 예를들어 checkbox의 이름을 checkList라고 할거라면 이렇게 name 값 뒤에 [] 배열 선언만 해주면 된다. 이렇게 체크한 값의 값만 배열로 넘어가게 된다. // 기존 코드 $("input:checkbox[name=checkList]:checked"); 그렇다면 jQuery에서 해당 값을 선택하려면 기존의 코드에서 변경해야할 것이다. 어떻게 해야되나 한참 삽질하던 찰나에 쉬운 방법을 찾았다. 참고한 사이트: https://chicpro.dev/jquery-input-%EB%B0%B0%EC%97%B4%EC%9D%BC-%EB%95%8C-selector/ [jQuery..
오랜만에 프로그래머스에서 코딩테스트를 연습해봤다. 레벨 1인데도 넘 어렵... 시저 암호 문제는 영어 대문자와 소문자가 들어오면 입력받은 숫자만큼 뒷 순서의 알파벳을 반환해주는 뭐 그런 문제였음. 자세한건 프로그래머스 참고하세용 아무튼 문제를 본 순간 아스키코드로 풀어야할 것 같은 늬낌이 와서 풀어봤음 우선 문제 풀이 전 자바스크립트에서 아스키코드 변환 법을 알아보쟙 ■ 문자에서 ASCII 코드로 변환하는 법 | charCodeAt() 함수 // 문자.charCodeAt(아스키 코드로 변환 할 문자 index); let convertString = "ABC"; console.log(convertString.charCodeAt(0)); // 출력: 65 console.log(convertString.cha..
■ 쿠키 저장하기 // 쿠키 저장하기 함수 export function setCookie(name, value = "", expireDays = "", path = "/") { let expires = ""; if (expireDays) { let date = new Date(); date.setTime(date.getTime() + expireDays * 24 * 60 * 60 * 1000); expires = `expires=${date.toUTCString()};`; } document.cookie = `${name}=${value || ""};${expires}path=${path}`; } 웹브라우저에 쿠키를 저장하는 함수이다. 매개변수로는 저장할 쿠키의 key 이름, 저장할 값, 그리고 만료일을..
참고: https://webisfree.com/2016-06-15/[자바스크립트]-이벤트-버블링-제거방법-stoppropagation() 이벤트 버블링 막기 { alert("전체 영역 클릭"); }} > 전체 영역 { alert("겹쳐진 영역 클릭"); }} > 겹쳐진 영역 이렇게 div나 다른 html 태그들이 겹쳐져 있을 때 겹쳐진 영역에서 클릭을 했을 때 클릭한 영역의 이벤트 1개만 일어나야 할 때가 많다. 겹쳐진 영역을 클릭 시 처음에는 겹쳐진 영역의 onClick 이벤트가 발생한다. 하지만 그 이벤트 이후..!! 이렇게 뒤에 있는 영역의 onClick 이벤트까지 겹쳐져서 발생하게된다. 이런 것을 이벤트 버블링이라고 하는데, 어떻게 해결해야될지 막막하다. 하지만 한 줄만 추가해주면 끝이다!!! 이..
다들 아시다싶이 formData에 들어있는 값은 console에 그냥 찍으면 나오질 않는다. 이럴 땐 반복문을 돌려서 안에 들어있는 값을 일일이 확인해주어야한다. 귀찮긴해도 안에 값이 제대로 들어갔는지 확인이 필요할 때가 많기 때문에...ㅠㅠ 1. formdata key와 값 확인하는 법 let formData = new FormData(); // ... formData.append("키이름", "값"); 생략 for (let key of formData.keys()) { console.log(key, ":", formData.get(key)); } formdata를 생성 후 안에 값을 넣어준다. 그 다음 formData.keys()를 통해 해당 form에 들어있는 key를 배열로 가져온 후 반복문을 돌..
개발하다가 처음으로 변수를 동적으로 추가해야할 일이 생겼다. 웬만하면 배열에 값을 추가하는 방법을 사용했는데 이번에는 그런식으로 개발했더니 기능이 제대로 동작을 안하더라ㅠㅠ (외부 API 연동하다가 생긴 일...) 처음에는 eval()이라는 함수를 이용하여 변수 명 뒤에 다른 변수(나는 count)를 붙여줬는데 ES버전이 올라가면서 전역변수로 생성이 안된다는 말도 있고... (다른 곳에서 값을 조회하려니까 존재하지 않는 변수라는 Warning창이 떴다.) 정말 다른 방법이 없는 것이 아니라면 eval()을 쓰지말라는 글이 굉장히 많았다. 그래서 다른 방법을 모색하던 차에 발견한 window 함수... 브라우저 내에서 글로벌 변수로 만들어진다고 한다. window['변수'+"3"] = "변수"+"3"; c..
오늘 갑자기 프로그래머스에 꽂혀서 이것 저것 풀어봤다. (풀어본 문제 5문제도 안되는 코테린이임...) 다른 사람의 풀이를 보고 배우는 것도 좋지만, 문제를 해결하기 전 검색 능력을 키우는 것이 목적이라 풀이를 검색하기 보단 내가 원하는 기능을 검색해서 찾아보고 적용하는 것에 의의를 두었댜. 그래서 풀이가 비효율적일 수도 있다는 점 양해부탁드려욥... 우선 동일한 Array.from()함수를 이용해 푼 모습을 보자. 버전 1이다. function solution(number) { let number_arr = Array.from(number.toString(), Number); //각 자리 수의 배열 생성 let final_sum = number_arr.reduce((sum, single_digit) =..
프로그래머스의 직사각형 별찍기 문제 풀다가 우연히 알게된 함수! 핸드폰 번호, 카드 번호, 아이디 일정 길이만큼 보여주고 나머지는 가려줘야하는 기능을 사용할 때에도 유용할 듯 하다. 아래는 모질라재단의 함수 설명 글! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd 얘를 이용해서 핸드폰 가리기 문제 또한 정규식을 사용하지 않고 편하게 풀 수 있을 듯 하다! 우선 js를 이용해 풀어 본 프로그래머스 직사각형 별 찍기 문제이다...