안녕하세요🐱‍🐉 오늘은 jQuery Extensions 중 selector 접근 시 id나 name이 여러 개이거나, 유동적일 때 유용한 방법에 대해 정리해보려고 해요. 선택자를 확장하여 query의 like처럼 사용하는 방법입니다. (여러 개의 name을 가진 경우, id 뒷부분에 key 값을 붙이는 경우) .each와 함께 자주 사용돼요. $("input[id^='enchovy']").each(function(index, item){ } 이름이나 아이디을 특정 값과 비교하는 경우 바로 아래처럼 사용하는데 그 외에도 다양한 기능의 선택자를 사용할 수 있어요. Attribute Equals Selector [name="value"] 특정 값과 정확히 동일한 값을 가진 지정된 속성을 가진 요소를 선택합니다..

안녕하세요.🐱‍🐉 이번 글은 Ajax 대해 정리해보려고 해요. Ajax를 사용하면서 Success와 Done의 차이에 대해 뭘까 하는 궁금증이 생겼는데 혹시 여러분은 차이가 뭔지 아시나요? Ajax(Asynchronous JavaScript and XML)란? 자바스크립트를 이용한 비동기식으로 XML 이용하여 서버와 통신하는 방식 최근에는 XML보다 JSON을 더 많이 사용 주로 화면 전체를 전환시키지 않고 부분적으로 처리할 때 사용 페이지 일부분에만 새로운 콘텐츠를 로드하는 기능은 사용자의 전체적인 사용 경험을 향상 SPA(Sinlge Page Application, 브라우저에서 실행되지만 마치 소프트웨어 애플리케이션 같은 느낌을 주는 웹 기반 도구)가 등장하는 계기 2021.12.27 - SSR(Se..

안녕하세요🐱‍🐉 이번 글은 JavaScript에서 함수 선언식과 함수 표현식에 대해 알아보려고 합니다. 언뜻 보면 둘의 차이가 있을까 싶지만 차이도 함께 알아볼게요~! 함수 선언식 (Function Declarations) 일반적인 함수 선언 방식 function funcDeclarations() { return 'enchovy'; } funcDeclarations(); 함수 표현식 (Function Expressions) 자바스크립트 언어의 특징을 활용한 선언 방식 let funcExpression = function () { return 'enchovy'; } funcExpression(); ※ ES6에서 추가된 화살표 함수 방식을 정의할 수도 있다. let funcArrow = (x,y) => (x..

안녕하세요🐱‍🐉 자바스크립트 코딩 시 참고할 만한 팁에 대한 외국 글이 있어 번역본 포스팅합니다. 특히 스프레드신택스의 경우 구조 분해 할당 객체 복사 등 코드 양을 줄이는데 많은 도움이 되니 참고해보세요!~ 1. 배열 선언과 동시에 값 채워 넣기 let array = Array(5).fill(''); console.log(array) // outputs : (5) ["", "", "", "", ""] 배열을 선언하면서 동시에 동일한 값을 채워 넣는 작업은 생각보다 흔히 쓰이지 않습니다. 특히 고정 길이 배열이 아닌 동적 길이 배열을 사용하는 자바스크립트에서는 더욱 그렇죠. 저는 차라리 배열로 for 루프를 없애는 코드가 유용해 보여요. 빈 배열로 for 루프 없애기 let sum = 0 for (let..

안녕하세요.🐱‍🐉 오늘은 자바스크립트의 역사와 발전 과정에 대해 알아보려고 해요. 왜 ES6에서 큰 변화가 일어나게 되었는지 그 이유도 함께 알아보죠!~ 자바스크립트의 탄생 1993년 - 컴퓨터가 생소하던 시절. UI 요소가 더해진 Mosaic Web Browser 개발 - Mosaic Web Browser팀을 이끌던 Marc Andreessen, Netscape사 설립 1994년 - Mosaic Web Browser 개발 경험을 토대로 Netscape Navigator 출시 html과 css로 이루어진 간단한 웹페이지, Hyper Text 링크를 통한 정적인 이동만 가능 - 동적인 웹페이지 구현을 위해 새로운 언어를 개발 Brendan Eich 고용 → Scheme Script를 변형하되 문법은 Jav..

안녕하세요! 이번에는 프로젝트를 하다가 사용했던 전화번호, 휴대폰 번호에 대한 유효성 검사를 위한 정규식을 알려드릴게요. 1. 일반 전화번호 function isTelFormat(tel) { if(tel == ""){ return true; } var phoneRule = /^(070|02|0[3-9]{1}[0-9]{1})[0-9]{3,4}[0-9]{4}$/; return phoneRule.test(tel); } 위의 function은 일반전화번호를 위한 유효성검사 function 입니다! 일반전화번호 인터넷전화인 070 서울 번호인 02 등등 각 지역별로 앞자리가 달라서 구분을 해주고 중간 번호는 0~9까지 3, 4자리 뒤에는 0~9까지 4자리 수를 확인해 줍니다. 원하시면 중간 사이사이에 '-'을 넣..

화면을 만들다가 보면 iframe이 필요할때가 있을 때가 있는데 iframe을 넣었더니 길이가 들쭉날쭉하고 스크롤이 생겨버리고 꼴보기 싫다? 그럼 아래와 같은 jQuery를 써주시면 됩니다! function autoResizeIframe() { $('#iframe1').on('load', function() { if(this.contentDocument) { $(this).height(this.contentDocument.documentElement.scrollHeight); } else { $(this).height(this.contentWindow.document.body.scrollHeight); } }); } 이 function을 적용 시키면 이리저리 높이를 맞출 필요없이 적용이 되니 한번 써보시길!

• var, let, const ES6 이후의 환경에서 변수 선언 방식은 기존의 var를 사용하는 한 가지 방법에서 let과 const를 사용하는 두 가지 방식이 추가되어 var, let, const 세 가지 방식이 되었습니다. 처음 ES6를 접했을 때 각각의 선언 방식을 언제 어떻게 사용해야 하는지가 상당히 막연할 텐데 (실제로 실무에서 봐왔던 ES6이후의 환경을 처음 접해보는 개발자들은 대다수가 상수를 제외한 거의 모든 변수 선언에 let을 사용하고 있었습니다.) 아주 틀린 방법은 아니지만, 가장 좋은 방법은 아무래도 각각의 특징을 먼저 이해하고 사용 용도에 맞게 사용하는 것일 것입니다. 이 글에선 세 가지 변수 선언 방식의 동작 방식과 언제 어떻게 사용하는 것이 좋을 지에 대해 정리해보려고 합니다...

• Logical Assignment Logical Assignment는 ES2021 버전부터 추가된 문법으로 논리 연산과 변수 할당을 함께 수행합니다. 먼저 Logical And Assignment부터 살펴보자면 // Logical And Assignment x &&= y • x가 truthy일 때 y의 값이 x로 할당됩니다. ( 즉 x && (x = y), x = x && y 와 같은 의미입니다. ) Logical Assignment을 사용하지 않던 과거의 코드입니다. let x = 1; let y = 0; if (x) { x = 'Seoul Mayor'; console.log(x); // expected output : Seoul Mayor } if (y) { y = 'Seoul Mayor'; co..

이벤트 취소를 위한 방법으로는 대표적으로 Event.preventDefault(), Event.stopPropagation(), Event.stopImmediatePropagation()이 있습니다. 사실 Event.preventDefault() 외에는 사용빈도가 높지 않기 때문에 세 개의 방법을 알고 있긴 했어도, 모호하게 알고만 있는 정도였는데 프로젝트 수행 중에 이미 해당 영역에 걸린 이벤트를 공통 스크립트를 통해 제어할 방법이 필요하여 검색 중에 이 내용에 대해 확실하게 정리해두는 게 좋을 거란 생각이 들었습니다. 1. Event.preventDefault(); 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 해당 이벤트를 취소합니다. (event.cancelable을 사용하여 이벤트 ..

자바스크립트에서 키 입력 이벤트 시 사용되는 키코드를 정리해보았다. • 영문 a - Z KEY KeyCode ASCII KEY KeyCode ASCII a 65 97 A 65 65 b 66 98 B 66 67 c 67 99 C 67 67 d 68 100 D 68 68 e 69 101 E 69 69 f 70 102 F 70 70 g 71 103 G 71 71 h 72 104 H 72 72 i 73 105 I 73 73 j 74 106 J 74 74 k 75 107 K 75 75 l 76 108 L 76 76 m 77 109 M 77 77 n 78 110 N 78 78 o 79 111 O 79 79 p 80 112 P 80 80 q 81 113 Q 81 81 r 82 114 R 82 82 s 83 115 S..

▪ JavaScript Date객체 사용 시 주의할 점 자바스크립트 작성 시 날짜 생성, 비교 등으로 Date 객체는 자주 활용되지만, Date.parse() 메소드나 데이터 포맷을 사용한 생성자로 객체 생성 시 크로스 브라우징 이슈를 발생시킬 수 있어 주의해야 합니다. 아래 예시는 서비스 개발 시 대개 호환성을 맞춰야하는 브라우저인 Chrome, Safari, IE11에서 몇 가지 데이터 포맷을 사용한 생성자로 Date 객체를 생성 후 로그로 출력한 결과입니다. // yyyy-mm-dd var a = new Date("2021-07-06"); console.log(a); // CHROME - Tue Jul 06 2021 09:00:00 GMT+0900 (대한민국 표준시) // SAFARI - Tue J..

논리 연산자 && 와 ||를 사용한 효율적인 스크립트 작성 TIP 예시 1 - ||를 사용한 파라미터의 기본 값 설정 function setName(name) { if (!name) { name = "king pork"; } return name; } 매개변수 name이 false라면 'king pork'라는 문자열로 변경 후 반환하는 함수로 이 함수는 아래와 같이 수정할 수 있습니다. function setName(name) { return name || "king pork"; } 연산자 ||는 먼저 왼쪽의 표현식을 처리하며 매개변수가 truthy라면 오른쪽의 표현식을 처리하지 않고 해당 값을 즉시 반환합니다. 만약 매개변수가 falsy라면 오른쪽의 표현식을 처리합니다. 예시 2 - && 활용 func..

Javascript 에서는 변수 이외에도 property라는 형태로 객체정보를 생성하고 사용할 수 있다. 01. property 종류 1) 데이터 프로퍼티 (data property) - 키와 값으로 구성된 일반적인 프로퍼티 2) 접근자 프로퍼티 (accessor property) - 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때, 사용하는 접근자 함수로 구성된 프로퍼티 02. property 속성 property 속성 설명 공통 Enumerable 프로퍼티가 열거 가능여부 Configurable 해당 프로퍼티의 변경 가능여부 데이터 프로퍼티 Value 항목의 값을 저장 Writable 값의 변경 가능여부 접근자 프로퍼티 getter getter 메소드로서 사용되는 함수를 정..

입력란에 숫자 천 단위 표기하는 두 가지 방법이 있다. 1. 정규식 방법 1 2 3 $(".price").on("keyup", function(){ $(this).val($(this).val().replace(/\,/g, '').replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,')); }); 2. toLocaleString() 함수 1 2 3 $(".price").on("keyup", function(){ $(this).val($(this).val().toLocaleString("ko-KR")); }); toLocaleString() 함수를 이용하면 더 간편하게 사용할 수 있지만 각 나라별 금액 표시 방법이 다르기 때문에 해당 국가 코드로 설정을 해줘야 한다. 하지만 locale..