jji_veloper

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..

JavaScript 2022. 1. 14. 00:00

오랜만에 프로그래머스에서 코딩테스트를 연습해봤다. 레벨 1인데도 넘 어렵... 시저 암호 문제는 영어 대문자와 소문자가 들어오면 입력받은 숫자만큼 뒷 순서의 알파벳을 반환해주는 뭐 그런 문제였음. 자세한건 프로그래머스 참고하세용 아무튼 문제를 본 순간 아스키코드로 풀어야할 것 같은 늬낌이 와서 풀어봤음 우선 문제 풀이 전 자바스크립트에서 아스키코드 변환 법을 알아보쟙 ■ 문자에서 ASCII 코드로 변환하는 법 | charCodeAt() 함수 // 문자.charCodeAt(아스키 코드로 변환 할 문자 index); let convertString = "ABC"; console.log(convertString.charCodeAt(0)); // 출력: 65 console.log(convertString.cha..

JavaScript 2021. 12. 3. 14:16

■ 쿠키 저장하기 // 쿠키 저장하기 함수 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 이름, 저장할 값, 그리고 만료일을..

JavaScript 2021. 11. 30. 09:39

참고: https://webisfree.com/2016-06-15/[자바스크립트]-이벤트-버블링-제거방법-stoppropagation() 이벤트 버블링 막기 { alert("전체 영역 클릭"); }} > 전체 영역 { alert("겹쳐진 영역 클릭"); }} > 겹쳐진 영역 이렇게 div나 다른 html 태그들이 겹쳐져 있을 때 겹쳐진 영역에서 클릭을 했을 때 클릭한 영역의 이벤트 1개만 일어나야 할 때가 많다. 겹쳐진 영역을 클릭 시 처음에는 겹쳐진 영역의 onClick 이벤트가 발생한다. 하지만 그 이벤트 이후..!! 이렇게 뒤에 있는 영역의 onClick 이벤트까지 겹쳐져서 발생하게된다. 이런 것을 이벤트 버블링이라고 하는데, 어떻게 해결해야될지 막막하다. 하지만 한 줄만 추가해주면 끝이다!!! 이..

JavaScript 2021. 11. 29. 17:47

다들 아시다싶이 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를 배열로 가져온 후 반복문을 돌..

JavaScript 2021. 11. 24. 11:11

개발하다가 처음으로 변수를 동적으로 추가해야할 일이 생겼다. 웬만하면 배열에 값을 추가하는 방법을 사용했는데 이번에는 그런식으로 개발했더니 기능이 제대로 동작을 안하더라ㅠㅠ (외부 API 연동하다가 생긴 일...) 처음에는 eval()이라는 함수를 이용하여 변수 명 뒤에 다른 변수(나는 count)를 붙여줬는데 ES버전이 올라가면서 전역변수로 생성이 안된다는 말도 있고... (다른 곳에서 값을 조회하려니까 존재하지 않는 변수라는 Warning창이 떴다.) 정말 다른 방법이 없는 것이 아니라면 eval()을 쓰지말라는 글이 굉장히 많았다. 그래서 다른 방법을 모색하던 차에 발견한 window 함수... 브라우저 내에서 글로벌 변수로 만들어진다고 한다. window['변수'+"3"] = "변수"+"3"; c..

JavaScript 2021. 11. 23. 09:32

오늘 갑자기 프로그래머스에 꽂혀서 이것 저것 풀어봤다. (풀어본 문제 5문제도 안되는 코테린이임...) 다른 사람의 풀이를 보고 배우는 것도 좋지만, 문제를 해결하기 전 검색 능력을 키우는 것이 목적이라 풀이를 검색하기 보단 내가 원하는 기능을 검색해서 찾아보고 적용하는 것에 의의를 두었댜. 그래서 풀이가 비효율적일 수도 있다는 점 양해부탁드려욥... 우선 동일한 Array.from()함수를 이용해 푼 모습을 보자. 버전 1이다. function solution(number) { let number_arr = Array.from(number.toString(), Number); //각 자리 수의 배열 생성 let final_sum = number_arr.reduce((sum, single_digit) =..

JavaScript 2021. 10. 14. 01:20

프로그래머스의 직사각형 별찍기 문제 풀다가 우연히 알게된 함수! 핸드폰 번호, 카드 번호, 아이디 일정 길이만큼 보여주고 나머지는 가려줘야하는 기능을 사용할 때에도 유용할 듯 하다. 아래는 모질라재단의 함수 설명 글! 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를 이용해 풀어 본 프로그래머스 직사각형 별 찍기 문제이다...

JavaScript 2021. 10. 13. 23:36

1. split() ___문자열.split( 기준 문자 ) 문자열을 배열로 바꾸기 split() 안에 매개변수를 넣지 않는 것과 "," 쉼표를 넣어주는 것은 동일한 결과를 반환함! let exampleString = "홍길동,이순신,유관순"; // exampleString 문자열을 "," 쉼표 기준으로 배열로 나눈다. let stringToArray = exampleString.split(",");//exampleString.split(); 과 동일함 console.log(stringToArray); //출력: ["홍길동","이순신","유관순"]; 만약 공백을 기준으로 나누고 싶다면? split() 함수에 " " 공백이 들어간 문자열을 넣어주면 된다. let exampleString = "홍길동 이순신 ..

JavaScript 2021. 9. 20. 23:03

옛날에 했던 프로젝트 리팩토링하는데, React의 state에 있는 객체의 값을 반복문 돌려서 다른 객체 변수에 저장해주는 코드가 있었다ㅋㅋㅋㅋㅋㅋㅋ react와 node.js를 학습하면서 만든 첫 프로젝트였기 때문에 이런 일이 발생한 것 같다... 그냥 지우기엔 나중에 쓸 일이 분명 있을 것이므로 글을 쓰기로 했다 // ...생략 const [review, setReview] = useState({ ocode: "", pcode: "", category : "후기", rating: 5, title: "", content: "" }); // ...생략 let data = {}; //data 객체에 inputs state에 있는 값들을 for 문을 통해 간편히 추가 for(let i in Object.ke..

JavaScript 2021. 9. 15. 23:43

프로젝트 진행 중 페이지 별로 날짜를 출력해줘야 하는데, 페이지 별로 날짜의 출력 길이나 기호를 바꾸고 싶을 때가 있다. 아니면 위의 사진처럼 조회한 날짜가 이상한 형태로 출력될 때ㅠㅠ 그래서 함수를 만들어봤따!! (날짜 형식 바꾸는 방법을 따로 구글링해보지 않았기에 비효율적인 방법일 수 있음) 언어는 node.js를 사용했고, 전역 함수로 사용하기 위해 export 시켰다. 함수는 2가지를 사용했다. 1. 날짜를 YYYY-MM-DD HH:MM:SS 형식의 문자열로 반환해주는 함수 (2021년 9월 10일이면 2021-9-10 으로 출력될텐데, 한자리일 때 앞에 0을 넣어주는 함수이다.) 2. 날짜를 사용할 기호와 출력 길이를 입력 받아 반환해주는 함수 함수를 굳이 2개로 분리한 이유는 생활코딩님께서 하..

JavaScript 2021. 9. 10. 22:24