코딩짜는 일상

📕 오늘 배운 것jQuery 이벤트종류마우스 이벤트키보드 이벤트입력 양식 이벤트$.each() 메소드이벤트 객체의 중단 메소드jQuery DOM 요소 조작삽입 또는 삭제속성 추가 및 삭제클래스 속성jQuery 효과Basic 효과hide() / show() / toggle() 📙 새로 알게 된 것stopPropagation() / shopImmediatePropagation()맨날 preventDefault() 만 쓰다가 2가지 새로운 이벤트 중단 메소드 알게됨!근데... 이거 어떨 때 구분해서 쓰는거지...? preventDefault() 만 써도 충분하지 않나...? 나중에 강사님께 여쭤봐야 할 듯😂 📗 오늘 회고밀린 TIL 작성! 💪🔥

📕 오늘 배운 것jQuery 선택자직접 선택자인접 관계 선택자상위 요소하위 요소형제 요소필터 선택자속성 선택자jQuery 변수jQuery 이벤트사용 방법2개 이벤트 동시 적용종류윈도우 이벤트마우스 이벤트 📙 새로 알게 된 것메소드 체이닝객체.메소드1.메소드2. ... 형태로 하나의 객체에 여러가지 메소드를 한 줄에 적용시킬 수 있음.원래도 쓰고는 있었는데 이게 jquery 기능이었구나... 워낙 jquery랑 javascript를 혼용해 쓰다보니 몰랐다...😜jQuery 메서드 사용이 가능한 object 형태의 변수변수명 앞에 $를 붙이면 jQuery 메서드 사용이 가능한 object 형태의 변수임을 의미하게 된다고 한다!Ex) var $obj = $('#box1');의미도 몰랐는데 회사에선 나..

📕 오늘 배운 것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,..

서론회사에는 많은 이벤트들이 열리고 그중 몇은 링크로 이동이 필요합니다. DB에 url과 버튼 사용여부만 저장해서 대응하기엔다양한 디자인을 적용하기 어렵고롤링(이벤트 설명 이미지)과 따로 노는 문제가 있습니다.그렇다고 이벤트가 있을 때마다 하드코딩을 하기엔 인력이 없습니다...  해결책으로 디자인팀이 롤링에 버튼 이미지를 넣어주면개발팀은 해당 이미지에 태그를 이용해 링크를 맵핑합니다. 하지만 이것도 약간의 하드코딩이 필요하기에저는 관리자 서버에 맵핑 정보를 등록하는 기능을 만들었습니다. 아래 링크를 통해 이미지의 버튼 위치 coords값을 추출이미지 coords값 찾아주는 곳 : https://www.image-map.net/게시글 작성시 링크 추가 버튼 누름 ('shape값', 'coords값', '..

아무리 상황을 가정하고 대비해도 사용자는 늘 예상밖의 오류를 만듭니다. 이 글에선 제가 미처 대비하지 못해 발생한 오류를 소개하고자 하며 어떻게 보완하면 좋았을까, 고민하는 글입니다. # 서론 회사에서 협력 업체를 통해 데이터를 전달받고 업소정보를 업데이트하는 시스템을 만들게 되었습니다. 사장님 요청 → CS 접수 → 협력사 전달 → 파일 회신 → 업소정보 업데이트 위 순서로 업무가 이뤄지기 때문에 프로그램 구성은 다음과 같습니다. 업소검색 기능 cs를 접수하면 관리자가 곧장 해당 업소를 검색 후 [등록] 버튼을 눌러 파일 요청목록에 등록. 엑셀 다운로드 기능 파일 요청목록중 협력사 회신이 필요한 목록을 엑셀로 다운로드하는 기능. 파일 서버등록 기능 업체로부터 회신받은 데이터를 서버에 등록하는 기능 파일..

서론 제가 쓰려고 만들고 웹에 저장해 두는 함수입니다. 저의 지름길(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가지 함수를 활용하면 다음과 ..