코딩짜는 일상

📚 요약javascript 배열을 복사하는 방식에는 2가지가 있다.배열의 참조 주소만 변수에 복사하는 얕은 복사완전 별개의 배열로써 복사하는 깊은 복사 과거 회사에서 메뉴 편집 시스템을 만들 때 배열이 별개의 배열로써 복사가 되는 게 아니라 참조되어수정하는 배열의 값과 원본 배열의 값이 자꾸 같이 바뀌는 것 때문에 고생했던 기억이 났다.😂 마침 이번에 배우게 된 김에 조금 더 파보기로 했다! 🎷 얕은 복사얕은 복사는 원본 배열의 참조값을 변수에 복사해준다. 형태는 다음과 같다. 이제 참조값이 복사된다는 것이 어떤 뜻인지 보려면 newArr의 값을 바꿔본 다음,newArr와 originArr가 각각 어떻게 바뀌었는지 보면 된다. 이처럼 console창으로 확인했을 때 분명 나는 newArr..

📕 오늘 배운 것javascript객체(object)브라우저 객체setInterval()문서 객체 모델(DOM)문서 내 요소(태그) 제어 메서드요소 생성동적 태그 객체 생성요소 속성 변경요소 참조이벤트이벤트 리스너이벤트 핸들러폼 객체폼 객체 사용법유효성 확인jQueryjQuery란?사용 방법다운로드 / CDN 📙 새로 알게 된 것setInterval() 사용시 보안 이슈setInterval('함수명()', 1000) 의 형태로 사용시 문자열이 넘어가면 보안상 이슈가 있을 수 있다고 비권장한다고 하셨다. 인터넷에서 찾아본 자세한 이유는 아래와 같다.크로스 사이트 스크립팅(XSS) : '함수명()' 부분에 공격자가 다른 코드를 삽입해 브라우저에서 실행되도록 할 수 있음.문자열 기반 코드는 가독성이 떨..

📕 오늘 배운 것함수디폴트 매개변수객체(object)내장 객체Date 객체Array 객체Math 객체String 객체브라우저 객체window 객체setTimeout() / setInterval()문서 객체 모델(DOM) 📙 새로 알게 된 것document.cookie자바스크립트로도 쿠키에 접근할 수 있다는 걸 알게 되었다!문제는 쿠키 활용법을 아직도 모르겠다는 것...😓 수업때 알려주시겠지...? 📗 오늘 회고자꾸 뭔가 거창하게 적으려고 TIL을 미루는 경향이 있다;;다행이 수기로 필기해둔 종이가 있어서 뭘 배웠는지는 알고 있음!일단은 일기처럼 적고 1주일이 지나면 그중 나름 중요하다고 생각했던 것(?)을 복습해서 적어보는 방식이 좋을 것 같다.

📕 오늘 배운 것반복문whiledo while배열여러가지 배열 표현식얕은 복사깊은 복사깊은 복사 방법 3가지함수표현식기본 함수즉시실행 함수함수 반환값 (return)함수의 매개변수함수 호이스팅일반 함수익명 함수콜백 함수화살표 함수 표현식 📙 새로 알게 된 것do while주로 for, if, foreach만 쓰다보니 생소했다.최소 1번 이상 반복을 수행한다는 점이 독특함. 어딘가 쓰면 좋을 것 같은데 당장에 떠오르는 예시 없음...😓깊은 복사 방법 3가지map만 알고 있었는데 JSON 인코딩 후 다시 디코딩 하는 방법은 새롭다! 배열이 크면 클 수록 이 방법의 효율이 더 클듯.그 외에도 concat(), 스프레드 연산자 사용이 있는데 어느쪽이 더 효율적일지는 알아봐야 할듯...!익명 함수map,..

서론 제가 쓰려고 만들고 웹에 저장해 두는 함수입니다. 저의 지름길(shortcut)~ 사업자번호 표시 정규식 숫자가 10자리 이상인 경우를 상정해 작성했습니다. const saupjaNum = e => { return e.toString().substr(0,10).replace(/^(\d{3})(\d{2})(\d{5})$/, '$1-$2-$3'); } saupjaNum(1234567890123123); // 123-45-67890 숫자만 가져오기 정규식 자주 함께쓰는 함수라 같이 포스팅합니다. const leaveNum = e => { return e.toString().replace(/\D/g, ''); } leaveNum('12n34.56,7'); // 1234567 2가지 함수를 활용하면 다음과 ..

서론 ajax로 배열을 넘겨야 할 일이 있었는데 제대로 넘어가나 확인하려고 script에 넘기기 전 데이터를 console.log로 출력하도록 코드를 추가했습니다. 하지만 아무리 새로고침을 해도 console에 출력이 없었고 확인삼아 console.log("test") 를 찍어봐도 undefined가 떴습니다. 결론 한참을 테스트해보고 검색해보다가 알게 된 사실... 제가 전날 코드를 검색하다가 Filter 란에 검색어를 남겨뒀는데 그게 원인이었습니다... 진짜 한참을 찾아봤는데... 알고나니 허탈하네요...

메뉴의 서브메뉴를 숨겼다 펼치거나 특정 목차의 컨텐츠 내용을 접었다 펼칠 때 주로 collapse 또는 아코디언을 검색합니다. 찾아보시면 여러가지 방법을 소개하고 있지만 일단 이 글에선 Javascript와 jQuery를 쓰는 방식을 비교해보고자 합니다. 먼저 HTML은 다음과 같습니다. HTML main 1 sub 1 sub 2 sub 3 Javascript 먼저 자바스크립트 입니다. 서브 메뉴의 max-height를 0으로 만들거나 원래 높이로 되돌리는 방식으로 접었다 폈다 하는 컨셉입니다. sub 클래스 스타일에 transition을 추가해주지 않으면 애니메이션 없이 팟 나타났다가 팟 사라집니다. 주의!! jQuery 마지막으로 제이쿼리 입니다. 자바스크립트보다 코드가 훨씬 짧아졌습니다! 서브 메뉴..

업무의 일환으로 설문조사 웹 페이지를 만들게 되었습니다. 처음에는 간단해서 반나절이면 끝날 줄 알았는데 역시나 생각할 거리가 많았고 2일정도 걸렸습니다. 문항처럼 반복 작성하는 노가다가 있었지만 VS코드의 단축키 기능 도움을 많이 받았습니다. (특히 ctrl+alt+방향키 , alt+클릭...) 기능 구상 기능은 크게 3가지가 있습니다. 1. 각 설문 문항 (checkbox, radio) 2. 미응답 여부 확인 3. 설문 저장 특히 미응답 여부를 확인할 때 1) 단순히 선택값의 유무를 판단하는 경우 2) 기타(직접입력)을 선택한 경우 3) n개 이상, m개 이하 복수선택인 경우(checkbox) 이렇게 3가지 경우를 추가로 고려해야 하죠. 우선은 각 설문 문항부터 작성하고 이후 JS로 미응답 여부를 판단..