[Web] 웹 개발할 때 쓰이는 javascript 기본 사용법 정리

감사하게도 우아한테크캠프 2차 코딩테스트를 볼 수 있게 되었다! 🥺❤️

그런데 뭔가,, 2차 코테는 알고리즘 문제를 푸는게 아니라 웹페이지를 구성하는 과제를 내줄 것 같은 느낌적인 느낌이 든다,,

 

 

웹 개발을 몇번 해보긴 했지만,, 익숙하진 않다 😭

일단 남은 시간동안이라도 간단한 플젝을 해보고 강의를 빠르게 들으면서 이미 알고있던 내용은 다시 한번 정리하고, 몰랐던 것은 기록해 두는 용으로 포스팅을 작성하려고 한다!

 

 

 

1. DOM(Document Object Model)으로 만들기

html에서 class나 id값을 지정해주고 js 파일에서 document를 통해 접근한다.

그리고 만들어진 DOM으로 html을 조종할 수 있다.

const title = document.querySelector("#title");

title.innerHTML = "Hi! From JS";
title.style.color 'red';

 

 

2. 이벤트 핸들링하기

javascript로 여러가지 이벤트들을 핸들링 할 수 있다. 형태는 아래와 같다.

function handleClick(){
	title.style.color = 'blue';
}

// title 클릭 이벤트에 대한 처리
title.addEventListener("click", handleClick);

 

👉EventListener의 2번째 인자로 함수를 넘길때는 ()를 붙이지 않아야한다. ()를 붙이면 바로 함수 호출을 하게 됨!

function handleResize(){
	console.log("I have been resized");
}

// window를 resize하면 I have been resized 출력
window.addEventListener("resize", handleResize);

// window를 resize하지 않아도 바로 I have been resized 출력
window.addEventListener("resize", handleResize());

 

더 많은 이벤트를 보려면 구글창에 javascript dom event mdn을 검색해보자.

 

 

3. className과 classList

style과 관련된 일들은 css가 이벤트 핸들링과 관련된 일들은 javascript가 처리하는 것이 좋다.

그래서 우리는 id나 classname을 설정해서 요소에 style등을 지정해줄 수 있다. 하지만 여러개의 classname을 사용할 때 생길 수 있는 문제 점이 있다.

 

아래와 같은 html과 css파일이 있다고 가정하자.

<h1 id="title" class="btn">This works!</h1>

.btn{
	cursor: pointer;
}

.clicked {
	color: 'red';
}

classname이 btn이면 커서가 포인터 모양이 되고, clicked이면 글씨 색이 red가 된다.

이때 아래의 javscript를 적용하면 어떻게 될까?

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    const currentClass = title.className;
    if(currentClass !== CLICKED_CLASS){
    	title.className = CLICKED_CLASS;
    }else{
    	title.className = "";
    }
}

function init(){
	title.addEventListener("click", handleClick);
}

init();

처음 className btn이므로 if 문에 걸린다 그래서 className은 clicked로 바뀌어지고 글씨의 색은 빨간색으로 바뀐다.

하지만 이전 클라스를 존중하지 않기 때문에 className에 btn은 더이상 남아있지 않는다. 이런일은 어떻게 처리해야할까?

 

하나의 요소는 여러개의 class를 가질 수 있으므로 이들을 관리할 땐 아래와 같이 classList를 써주자!

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if(!hasClass){
    	title.classList.add(CLICKED_CLASS);
    }else{
    	title.classList.remove(CLICKED_CLASS);
    }
}

function init(){
	title.addEventListener("click", handleClick);
}

init();

👉위 코드는 toggle 함수로 간단히 쓰일 수 있다. 정확히 같은 일을 한다.

toggle 함수에 전해지는 값이 title.classList에 없으면 add, 있으면 remove~

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
   title.classList.toggle(CLICKED_CLASS);
}

function init(){
	title.addEventListener("click", handleClick);
}

init();

 

 

 

4. 요소 추가하기

첫번째 예제에서는 querySelector로 html에 있는 요소를 가져오는 방법을 익혔다.

그런데 javascript로 요소를 추가하려면 어떻게 해야할까?

createElement 함수를 사용하면 된다!

 

아래 코드는 input에 글자를 입력하고 submit을하면 createElement로 todo list를 만드는 예제 이다. 

 

<index.html>

<form class ="js-toDoForm">
	<input type="text" placeholder="Write a to do"/>
</form>
<ul class="js-toDoList">
</ul>

<script src="src/todo.js"></script>

 

<todo.js>

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = 'toDos';

function paintToDo(text){
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerText = "❌";
    const span = document.createElement("span");
    span.innerText = text;

    li.appendChild(span);
    li.appendChild(delBtn);

    toDoList.appendChild(li);

}

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue)
    toDoInput.value = "";
}

function loadToDos() {
    const toDos = localStorage.getItem(TODOS_LS);
    if(toDos !== null){

    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);
}

init();

 

위 소스 코드에서 paintToDo 함수에서는 createElement 함수로 li, button, span을 만들었다.

그 다음에 li에 appendChild를 해주는데, appendChild는 li안에 자식요소로 span과 delBtn을 추가하는 일을 한다.

즉, li에 삭제 버튼과 span을 넣고 그 뒤에 li를 ul 타입의 toDoList 안에 넣음으로써 리스트 형태로 todo를 볼 수 있다.

 

input에 hello와 this is me를 쓰고 submit을 하면,

 

짜잔~ 이렇게 동적으로 요소들이 추가된다!

 

 

 

 

 

웹 개발에서 쓰이는 아주아주 기본적인 javascript 사용법을 살펴보았다.

이 글은 노마드 코더의 '바닐라 JS로 크롬 앱 만들기' 강좌를 보고 정리한 글이다.

이번에 새로 알게된 사이트 인데 니콜라스 님이 엄청나게 자세히, 친절하게 그리고 재밌게 js를 알려주신다.

 

web에서쓰이는 js를 처음 시작하는 사람이라면 적극 추천! 한다. ㅎㅎ

 

사이트 링크 👇

https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr

바닐라 JS로 크롬 앱 만들기

 

 

우아한 테크 2차,, 붙을 수 있을까 ㅎ

인턴 되는게 정말정말 힘들고 바늘구멍만하다는 것은 알고있었는데,, 이 정도인줄은 몰랐다. 😭

준비하느라 웹 개발을 오랜만에 다시 공부했는데,, 왤케 재밌지? 웹으로 전향해야하나,, ㅎ

여튼 꼭 하고 싶다 우테캠. 화이팅