국비 코딩 수업 17일차 & 그 이후: 자바스크립트 마스터하기, 정규표현식 & jQuery 활용법

국비 코딩 수업 17일차 & 그 이후: 자바스크립트 마스터하기, 정규표현식 & jQuery 활용법

17일차 국비 코딩 수업을 마치고, 자바스크립트의 핵심 개념부터 실전 활용까지 꼼꼼히 정리해 보는 시간을 가져볼까요? 로그인 창 제작부터 정규표현식, jQuery 활용까지, 웹 개발의 필수 요소들을 하나씩 알아보고, 실력 향상에 도움이 될 만한 팁들도 함께 나누도록 하겠습니다!

자바스크립트를 활용한 로그인 창 제작

자바스크립트로 다양한 로그인 창을 만들어보는 건 웹 개발에서 가장 기본적이면서도 중요한 부분이에요. 17일차 수업에서는 fieldset을 이용해서 아이디와 패스워드 입력 필드의 테두리를 깔끔하게 만들고, addEventListener와 focus 이벤트를 활용하여 입력 필드에 포커스가 맞춰졌을 때 시각적으로 표현을 강화하는 방법을 배웠어요.

예를 들어, 아이디 입력 필드에 포커스가 왔을 때 테두리 색상을 변경하거나, 입력 필드 주변에 애니메이션 효과를 추가하는 것도 가능해요. HTML의 <form> 태그에 class 속성을 부여하고, CSS와 JavaScript를 함께 사용하여 다양한 스타일을 적용할 수 있다는 점도 놓칠 수 없는 부분이죠. 그리고 파라미터 값에 input 함수를 연결하여, 사용자가 입력하는 순간마다 값을 실시간으로 반영하는 기능까지 구현할 수 있었답니다. 이를 통해 사용자 경험을 크게 향상시킬 수 있어요!

idInput.addEventListener(‘blur’, () => {
idInput.style.borderColor = ‘gray’;
});

JavaScript 모듈과 이벤트 디스패치

복잡한 자바스크립트 코드를 효율적으로 관리하기 위해서는 모듈화가 필수적이에요. export와 import 키워드를 사용하여 JavaScript 파일들 간에 데이터를 주고받는 방법을 학습했어요. <script type='module'> 태그를 사용하면 모듈을 쉽게 import/export 할 수 있답니다. 이 외에도 import() 함수를 활용하거나, 다른 다양한 방법들을 통해 모듈을 효율적으로 관리할 수 있죠. 이러한 모듈 시스템을 사용하면 코드의 가독성과 재사용성을 크게 향상시킬 수 있어요!

myFunction();

정규 표현식 (Regular Expression)의 마법

정규 표현식은 문자열에서 특정 패턴을 찾는 강력한 도구에요. 문자열 검색, 대체, 추출 등 다양한 작업에 활용할 수 있으며, 복잡한 문자열 처리 작업을 간결하게 해결하는데 큰 도움이 된답니다.

정규 표현식 기본 사용법

new RegExp('정규식', '플래그')를 사용하여 정규 표현식 객체를 생성할 수 있으며, g (global), i (ignore case), m (multiline) 등의 플래그를 사용하여 검색 옵션을 조정할 수 있어요.

주요 API 메서드

• RegExp.test(문자열): 일치 여부를 확인합니다.
• 문자열.match(정규 표현식): 일치하는 문자열의 배열을 반환합니다.
• 문자열.replace(정규 표현식, 대체 문자열): 일치하는 문자열을 다른 문자열로 대체합니다.

다양한 패턴 표현식

기호	설명	예시
^	문자열의 시작	^abc: “abc…”와 일치
$	문자열의 끝	abc$: “…abc”와 일치
.	임의의 한 문자	a.b: “aab”, “acb” 등과 일치
|	또는	`a	b`: “a” 또는 “b”와 일치
?	0회 또는 1회	ab?: “a” 또는 “ab”와 일치
{n}	n회 반복	a{3}: “aaa”와 일치
{n,}	n회 이상 반복	a{3.}: “aaa”, “aaaa” 등과 일치
{n,m}	n회 이상 m회 이하 반복	a{3.5}: “aaa”, “aaaa”, “aaaaa”와 일치
+	1회 이상 반복	a+: “a”, “aa” 등과 일치
*	0회 이상 반복	a*: “”, “a”, “aa” 등과 일치
[]	문자 집합	[abc]: “a”, “b”, “c” 중 하나와 일치
[^]	문자 집합을 제외한 문자	[^abc]: “a”, “b”, “c”를 제외한 문자와 일치
\w	알파벳, 숫자, 밑줄(_)
\W	\w를 제외한 문자
\d	숫자
\s	공백 문자
\S	공백 문자를 제외한 문자

정규 표현식은 코드의 가독성을 높이고, 복잡한 문자열 처리를 단순화하여 개발 시간을 절약하는 데 매우 효과적입니다.

jQuery: 웹 개발의 강력한 조력자

jQuery는 자바스크립트 라이브러리로, 웹 개발을 더욱 쉽고 간편하게 만들어주는 역할을 해요. 간결한 코드로 다양한 효과와 연출을 웹 페이지에 적용할 수 있다는 장점이 있죠. jQuery 라이브러리를 다운로드하여 HTML 파일에 포함시켜 사용할 수 있습니다.

jQuery 기본 사용법 예시

javascript
$(document).ready(function() {
// DOM이 로드된 후 실행되는 함수
$("#myButton").click(function() {
// 버튼 클릭 이벤트 처리
alert("버튼을 클릭했습니다!");
});
});


자바 기본기 (Java SE, Java ME, Java EE)

국비 코딩 수업 18~20일차에는 Java 기본기에 대해 학습하게 됩니다. Java는 크게 세 가지 에디션으로 나뉘는데, Java SE (Standard Edition), Java ME (Micro Edition), Java EE (Enterprise Edition)이 바로 그것이죠. Java SE는 기본적인 자바 프로그래밍을 담당하며 모든 자바의 기반이 되는 에디션이며, 응용프로그램 제작에 사용됩니다. Java ME는 주로 임베디드 시스템이나 사물 인터넷(IoT) 장치에서 사용되며, Java EE는 대규모 엔터프라이즈 애플리케이션 개발에 사용되는 에디션입니다.

결론: 웹 개발