많은 사람들이 FrontEnd의 기초는 HTML,CSS 그리고 JavaScript를 이야기합니다.
해당 포스팅에서는 HTML과 CSS를 어느정도 배운 사람이 JavaScript에 대해 입문하려는 경우 도움이 될 내용을 작성했습니다.
JavaScript란?
간단하게 JavaScript는 HTML과 CSS에 행동을 부여해주는 역할을 합니다.
HTML을 통해 뼈대를 만들고, CSS를 통해 뼈대를 꾸민 뒤, JavaScript에서 움직일 수 있게 처리해주는 것 입니다.
자, 그러면 본격적으로 JavaScript를 사용하기 전에 먼저 개발환경을 설치해주겠습니다.
해당 포스팅에서는 VsCode를 기준으로 진행하였습니다.
개발환경 설치
먼저 해당 링크에서 본인의 운영체제에 맞게 VsCode를 설치해준 뒤, 본인이 작업할 폴더를 바탕화면에 생성합니다.
이후 File > Open Folder를 통해 작업을 진행할 폴더를 열겠습니다.
그리고 해당 폴더에서 ‘이름’.html 파일을 생성한 뒤 작업을 진행하면 됩니다.
이때 작업 중 현재 상황을 실시간으로 보고 싶다면 아래와 같은 확장 프로그램을 사용하면 됩니다.
이름은, Live Server이며 왼편에 있는 확장 프로그램 아이콘이나 Window 기준 (Ctrl + Shift + x) 단축키를 통해 검색 후 설치 할 수 있습니다.
이후 실시간으로 보고 싶은 html 파일을 우클릭 후 Open with Live Server을 클릭하거나 오른편 아래 Go Live를 클릭하여 프로젝트 진행을 확인 할 수 있습니다. ( 저장 시 반영됩니다. )
JS(JavaScript)를 작성하는 기본적인 방법
먼저 기존에 존재하는 HTML을 가져와 수정해보겠습니다. 단, JS를 작성하기 전 내가 작성해야 되는 내용을 상세하게 작성 후 진행하는 것이 좋습니다.
아래는 예시입니다.
작성해야 되는 내용: html 문서에서 id값이 text인 요소를 가져와 안의 내용(html)을 “Hello World!”로 변환한다.
이를 따라 작성한 코드
1
2
3
4
5
<p id="text">안녕하세요</p>
<script>
document.getElementById("text").innerHTML = "Hello World!";
</script>
눈치 빠르신 분들은 눈치 채셨겠지만, Script안의 내용은 단순히 위의 작성해야 되는 내용을 영어로 JS 문법에 맞추어 작성한 것입니다.
‘document’ 는 html 문서라는 뜻이고, ‘.’은 ~에서 또는 ~은/는 의미합니다. ‘getElementById(‘id값’)’는 직역하자면 가져오다 + 요소를 + ~를 통해서 + Id이고, 자연스럽게 해석하면 요소를 ID를 통해 가져온다 입니다.
따라서, id가 괄호안의 내용인 요소를 가져오게 됩니다. 그리고 ‘innerHTML’은 내부 HTML을 뜻하고, ‘=’ 는 오른쪽에 있는 내용을 왼쪽에 대입하라는 뜻입니다.
결국 정리하면 html문서에서 id 값이 text인 요소를 가져와 안의 html을 “Hello World”로 변경하라는 의미입니다.
이 내용은 저희가 위에서 작성해둔 ‘작성해야 되는 내용’과 동일하죠.
아래는 비슷한 형식의 같은 문법들인데, 한번 보시고 해석해 보세요.
1
2
3
4
5
6
7
8
// id가 id 값인 요소의 src를 image1.jpg로 지정
document.getElementById("id값").src = "image1.jpg";
// id가 id 값인 요소의 sytle의 color 속성을 blue로 지정
document.getElementById("id값").style.color = "blue";
// id가 id 값인 요소의 sytle의 font-size(- 대신 뒷 글자를 대문자로 작성) 속성을 16px로 지정
document.getElementById("id값").style.fontSize = "16px";
이런 식으로 특정 요소를 가져와 변환하는 방법에는 글자색, 글자크기, 가로크기 등 수백가지가 존재합니다.
그렇다고해서 이러한 수백가지 방법을 모두 외울 필요는 없습니다.
앞서 진행했던 것처럼 기본적으로 코드를 읽고 작성하는 방법을 배웠으니, 필요한 나머지 부분은 그때 그때 검색해서 찾아보면 됩니다.
정리
결국 코딩이란 문제 해결을 위한 도구 입니다.
이를 올바르게 사용하기 위해서는 정확하게 문제를 파악하고 해결 방법을 생각하면 됩니다.
앞서 포스팅에서 진행한 내용은, 문제 상황이 특정 html 요소의 내용을 수정하는 것이었고,
이를 해결하기 위해 해결 방법으로 ‘문서에서 특정 요소를 가져와 요소의 내부 html을 다음과 같이 변경해라’라고 컴퓨터에게 명령을 내린것 뿐입니다.
즉 한문장으로 정리하자면 JS는 컴퓨터에게 3살 아이도 이해하도록 해결방법을 작성해주는 것 입니다.
JS 기본 예제
간단한 예제를 통해 JS 기본 문법을 익혀보겠습니다.
팝업창 생성 & 삭제
특정 버튼을 누르면 나타나고 X를 누르면 사라지는 팝업창을 생성해보겠습니다.
이를 위해서 다음과 같은 단계가 필요합니다.
- HTML/CSS를 이용해 팝업창과 표시 버튼을 만든다.
- CSS를 이용해 팝업창을 숨긴다. (display: none)
- 표시 버튼을 누르면 숨겨진 팝업창이 표시된다.
- 팝업창의 X버튼을 누르면 팝업창을 숨긴다.
*해당 포스팅에서는 JS관련된 부분인 3번과 4번만 설명하겠습니다.
1
2
3
4
<!-- 3. 표시 버튼을 누르면 숨겨진 팝업창이 표시된다. -->
<!-- 버튼이 눌렸을 때 자바스크립트는 다음과 같이 실행 할 수 있습니다. -->
<button onclick="실행될 자바스크립트 내용">버튼</button>
이제, ‘표시 버튼을 누르면’까지 진행하였고 ‘숨겨진 팝업창이 표시된다’를 진행하면 됩니다. 그러면 컴퓨터한테 아래와 같이 명령을 내리면 숨겨진 팝업창을 표시 할 수 있지 않을까요?
html 문서에서 숨겨진 팝업창을 가져와 숨겨진 팝업창의 style의 display 속성을 ‘block’으로 설정한다.
1
2
3
4
5
<div id="pop-up">팝업창 내용 . .</div>
<button onclick="document.getElementById('pop-up').style.display = 'block';">
팝업창 표시 버튼
</button>
그렇다면 이제 4번도 구현할 수 있지 않을까요?
3번과 마찬가지로 4번도 아래와 같이 명령을 내리면 됩니다.
html 문서에서 표시된 팝업창을 가져와 표시된 팝업창의 style의 display 속성을 ‘none’으로 설정한다.
1
2
3
4
5
6
7
8
9
10
<div id="pop-up">
팝업창 내용 . .
<button onclick="document.getElementById('pop-up').style.display = 'none';">
X
</button>
</div>
<button onclick="document.getElementById('pop-up').style.display = 'block';">
팝업창 표시 버튼
</button>
함수(function)를 이용해 코드 재사용을 해보자
위에서 작성한 코드를 살펴보면 button의 onclick에서 실행되는 JS가 매우 유사한 것을 확인 할 수 있습니다. 그렇다면, 우리는 해당 코드를 귀찮게 두번 적지 말고 한번만 작성하여 사용할 수 있지 않을까요?
이러한 코드 재사용을 위해 아래와 같이 function을 이용할 수 있습니다.
1
2
3
4
5
6
<button onclick="functionName()"></button>
<script>
function functionName(){
재사용 하고 싶은 자바 스크립트 코드 ~~
}
</script>
단, 이때 함수, 변수 이름과 같은 변수 선언을 할 때 camelCase를 사용합니다.
camelCase란 function name과 같이 띄어쓰기된 경우 functionName와 같이 붙인 뒤, 붙인 문자의 첫 글자를 대문자로 작성하는 것 입니다.
이와 마찬가지로 font-size나, background-color와 같은 속성도 js에서 fontSize, backgroundColro와 같이 사용합니다.
다시 돌아와서 코드 재사용을 위해 function에 넣을 자바 스크립트에서 1가지 차이점을 발견 할 수 있습니다.
바로, 설정하는 값이 ‘none’ 그리고 ‘block’으로 차이가 있다는 점이죠.
이러한 경우 functionName()에 있는 ()를 이용해서 function으로 전달해 줄 수 있습니다.
아래는 button을 클릭한 경우, id가 text인 요소의 innerHTML이 전달받은 값으로 변경되는 코드입니다.
1
2
3
4
5
6
7
8
<p id="text">변하지 않은 값</p>
<button onclick="changeText('전달내용')">텍스트 변경하기</button>
<script>
function changeText(value) {
document.getElementById("text").innerHTML = value;
}
</script>
즉 function이란 것은 함수 입니다.
학창시절에 수학시간에 배웠던 함수와 같이 특정한 값을 내보내는 함수입니다.
1
2
3
4
5
6
7
8
9
f(x) = x + 1;
f(3) = 4; -> f(3) = 3 + 1 = 4
마찬가지로 자바스크립트에서도 사용됩니다.
function name(value) {
출력하기(value)
}
name("안녕하세요") -> "안녕하세요" 출력.
그럼 다시 돌아와서, 기존에 작성한 팝업창을 function을 이용해 다시 작성 해보겠습니다.
아래 코드를 보기전에 먼저 스스로 작성해보는 것을 추천드립니다.
1
2
3
4
5
6
7
8
9
10
11
12
<div id="pop-up">
팝업창 내용 . .
<button onclick="setDisplay('none')">X</button>
</div>
<button onclick="setDisplay('block')">팝업창 표시 버튼</button>
<script>
function setDisplay(value) {
document.getElementById("pop-up").style.display = value;
}
</script>
물론 지금은 1줄의 코드를 2번 재사용 하는것이지만, 나중에 만약 수백줄의 코드를 여러번 불러다 써야 되는 경우 function을 활용하게 된다면 코드가 굉장히 줄어들겠죠.
쿼리 셀렉터(queryselector)와 이벤트 리스너(eventListener)
쿼리 셀렉터와 이벤트 리스너는 위에서 작성한 내용을 좀 더 효율적으로 작성 할 수 있게 해주는 속성입니다.
쿼리 셀렉터(queryselector)
먼저 쿼리(query)는 쉽게 말해서 특정 조건에 해당하는 자료를 조회하는 용도입니다.
그렇다면 쿼리 셀렉터는 특정 조건에 맞는 css 셀렉터를 찾는 방법이라고 해석이 됩니다.
기존에 getElementById(‘‘)를 통해서 (‘‘)안의 id에 해당하는 값을 가져왔다면, queryselector(‘‘)를 통해서 selector 문법을 이용해 요소를 가져올 수 있습니다.
예를 들어서, queryselector(‘.text p’)와 같은 경우 class=’text’의 자손인 <p> 요소 중 첫번째 요소를 가져오게 됩니다. 즉, ()안의 조건에 해당하는 자료를 조회하는 문법인거죠.
그렇다면 이전에 작성한 내용을 다음과 같이 바꿀 수 있겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
<div id="pop-up">
팝업창 내용 . .
<button onclick="setDisplay('none')">X</button>
</div>
<button onclick="setDisplay('block')">팝업창 표시 버튼</button>
<script>
function setDisplay(value) {
document.querySelector("#pop-up").style.display = value;
}
</script>
이벤트 리스너(eventListener)
eventListener의 경우 특정 이벤트의 입력을 기다리고 있는 메소드 입니다.
특정 이벤트는 클릭, 마우스 오버, 키 입력, 스크롤 등 다양하게 존재합니다.
마찬가지로 필요한 이벤트가 있으면 검색해서 사용하면 됩니다.
eventListener은 다음과 같이 아래처럼 특정 요소에 추가하여 사용하게 됩니다.
1
요소.addEventListener("특정 이벤트", function () {});
위의 코드는 요소에 특정 이벤트가 실행되었을 때 뒤의 function을 실행하라는 코드입니다. 간단하게 해석해봐도 요소에 특정 이벤트 입력을 기다리는 메소드를 추가한 뒤, 특정 이벤트가 입력되었을 때 뒤의 function을 실행하라고 해석이 될 것 같습니다.
그렇다면 이제 우리는 onclick대신 button 요소를 가져와서 이벤트 리스너를 추가해주면 특정 스크립트를 실행하는 코드를 작성 할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="pop-up">
팝업창 내용 . .
<button class="exit-btn">X</button>
</div>
<button class="display-btn">팝업창 표시 버튼</button>
<script>
document.querySelector(".exit-btn").addEventListener("click", function () {
setDisplay("none");
});
document.querySelector(".display-btn").addEventListener("click", function () {
setDisplay("block");
});
function setDisplay(value) {
document.querySelector("#pop-up").style.display = value;
}
</script>
이런식으로 코드를 작성하게되면 script 부분이 조금 더 길어지긴 하지만 html과 js의 분리를 통해 유지보수가 쉬워진다는 장점이 있습니다.
class
이번에는 html의 class를 이용해서 css 속성을 적용하는 방법에 대해서 알아보겠습니다.
위의 포스팅에서는 직접적으로 display 속성을 변화시켜 모달창을 출력 및 삭제 처리를 진행하였습니다.
이와 마찬가지로 display 속성값이 있는 class를 부여하여 동일한 효과를 낼 수 있습니다.
이러한 방법을 진행하려면 먼저 css에서 display 속성이 있는 클래스를 생성 후 js를 통해 해당 클래스를 탈부착 처리해야 합니다. js에서 class를 탈부착하는 방법은 다음과 같습니다.
1
2
3
4
5
html요소.classList.add("클래스 이름");
// html요소에 class에 '클래스 이름'을 추가해라.
html요소.classList.remove("클래스 이름");
// html요소에 class에 '클래스 이름'을 삭제해라.
아래는 기본적으로 보이지 않는 pop-up 요소에 show라는 class를 부여하여 보이게 만들고, X 버튼을 클릭 시 show 클래스를 제거하여 다시 보이지 않게 만드는 코드입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="pop-up">
팝업창 내용 . .
<button class="exit-btn">X</button>
</div>
<button class="display-btn">팝업창 표시 버튼</button>
<style>
.pop-up {
display: none;
}
.show {
display: block;
}
</style>
<script>
document.querySelector(".exit-btn").addEventListener("click", function () {
document.querySelector(".pop-up").classList.remove("show");
});
document.querySelector(".display-btn").addEventListener("click", function () {
document.querySelector(".pop-up").classList.add("show");
});
</script>
조금 더 간단하게 작성하자면, 요소.classList.toggle(‘클래스 이름’)를 이용해 ‘클래스 이름’ 클래스가 부여된 상태면 제거하고 클래스가 부여되지 않은 상태면 부여하게 작성 할 수도 있습니다.
- 이렇게 작성한 내용은 css 우선순위에 따라 덮어씌워지는 코드이므로 우선순위가 낮은 클래스가 적용된 상황에서는 적용되지 않습니다.
class를 이용해 애니메이션 부여하기
다시 돌아와서, 이를 응용하면 코드에 애니메이션을 손쉽게 부여 할 수 있습니다.
.pop-up에 시작 스타일과 .show에 최종 스타일을 부여한 뒤 변하게 되는 시작 타이밍을 부여하면 됩니다.
좀 더 자세한 내용은 해당 CSS 포스팅을 참고해주세요.
위의 코드에서 간단한 에니메이션을 적용한 css 코드입니다.
1
2
3
4
5
6
7
8
9
.pop-up {
/* display: none; */
opacity: 0;
transition: all 1s;
}
.show {
/* display: block; */
opacity: 1;
}
opacity는 투명도 속성이며 1은 불투명 상태를, 0은 투명 상태를 의미합니다.
이를 transition 속성을 이용하여 1초에 걸쳐 변화시켜줍니다.