[JS] 노마드 코더 : 바닐라 자바스크립트 챌린지 후기

 

 

 

목차

 

1. 챌린지 후기

2. 강의소개

3. 챌린지소개

4. 유익했던 기능

 

 

 

 

 

 

 

 

 

1. 챌린지 후기

 

자바스크립트 챌린지가 끝났다...!!!!!

챌린지 두 번째 날 노마드 코더 챌린지가 있었던걸 까먹어서 하루를 빼먹었다 <아니 어떻게 이럴 수가 그럴 수 있더라🤷‍♂️

 

그래도 끝까지 완주했다.

이전에도 신청한 적이 있었는데 계속 실패했다😏

게으름뱅이 인팁은 머리만 굴리고 움직이지 않았다 (엠비티아이 탓하지 말라)

 

 

니코샘이 설명해주는 강의는 재밌다.

사람이 여유롭고 몸에 유머가 배어있다.

영어로 강의해서 그런가 자유로운 느낌, 프로그래머 된 느낌. <? 🤷‍♂️

 

반복해서 알려주는데 이 부분도 좋았다.

강의 들을 때는 고개 끄덕이다가 뒤돌아서면 까먹는 게 일이니.

마지막에 다시 한번 정리해주는 시간은 개념을 정리하고

새로 배운 것을 재소화 시키는 즐거운 소가 되었다🐂

(소는 한번 소화시키려고 되새김질 4번 한다고 하니

소처럼 공부하다 보면 니코 샘처럼 여유로워지겠지)

 

거기다 영어 듣기 공부도 나름 됐다고 생각한다..!

다른 거 공부하다가 챌린지 시간이 되면 마음이 급해져서

배속으로 하거나 자막을 제대로 못 보고 귀로 그냥 들을 때가 제법 있기 때문이다.

나름 일석이조의 효과를 얻을 수 있다 👍

 

 

나중에 보니까 우수졸업자로 선정되어있었다.

허허허... 부끄럽지만 기분은 좋다.

 

 

 

 

2. 챌린지 소개

 

바닐라JS 챌린지 – 노마드 코더 Nomad Coders

바닐라 JS챌린지 - 노마드 코더(Nomad Coders)

✏️ 기간 : 2주

✏️ 모집일 : 월 1회

 

 

챌린지를 성공하면 위에 나와있는 챌린지 수료증과 함께 10% 할인쿠폰을 증정한다.

자세한 사항은 위에 링크를 들어가 보면 알 수 있다.

 

HTML, CSS의 기초적인 지식이 있으면 좋다.

강의 소개란에서도 미리 익혀두고 오기를 권하고 있다.

자바스크립트 기능을 중심으로 알려주기 때문에 스타일적인 부분은 스스로 구현해야 한다.

그래서 능동적인 학습이 가능하다.

원하는 스타일에 기능을 추가하기 위해 열심히 머리를 쓰게 된다.

 

 

 

 

 

3. 유익했던 기능

 

1) event.preventDefault()

 

브라우저내에서 일어나는 기본적인 이벤트 처리를 실행하지 않도록 지정하는 메서드

 

Event.preventDefault() - Web API | MDN

See the Pen 예제1 by hong (@hong99cone) on CodePen.

 

 

 

기본적으로 input에 checkbox는 브라우저 안에서 비어있던 네모 박스를 클릭하면 체크되는 기능을 가지고 있다.

자바스크립트에서 체크박스가 클릭됐을 때에 eventDeafault()를 쓰게 되면

기본적인 이벤트 동작이 실행이 되지 않음을 위에 예제를 통해 알 수 있다.

체크박스를 클릭하면 박스에 체크표시가 나타나지 않는다.

 

 

투두 리스트에서는 input에 들어가 있는 value를 submit 하게 되면

브라우저가 새로고침 되는 기본적인 이벤트가 발생했다.

localStroage를 이용하기 전 새로고침이 일어나 입력된 값들이 전부 사라졌다.

 

따라서 이벤트 방지를 위해 eventDefault()를 사용했다.

사람이 만들었다 보니까 뭐든 기본적으로 세팅되어 있는 게 당연하다.

컴퓨터는 유도리있게 기능을 풀어주지 않는다. 알려줘야 한다.

 

 

 

 

2) localStorage

document의 Storage 객체에 접근

 

Storage : WEB API의 인터페이스로 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로 데이터를 추가, 수정, 삭제할 수 있다.

Window.localStorage - Web API | MDN

 

// Storage 객체에 접근해 항목을 추가할때
localStorage.setItem('todos' , 'go to the gym')


// Storage 객체에 접근해 항목을 읽을때
localStorage.getItem('todos')


// Sotrage 객체에 접근해 항목을 삭제할때
localStorage.removeItem('todos')


// 항목 전체 제거
localStorage.clear();

 

항목을 추가하면 다음과 같이 브라우저 안에서 확인할 수 있다.

(사용한 브라우저는 firefox🦊입니다)

작은 DB라고 생각하면 더 이해하기 쉬워진다.

 

브라우저를 완전히 종료하지 않는 이상 새로고침을 해도 데이터가 사라지지 않는다.

localStorage를 이용해서 로그인을 한 username과 추가한 todos 내용을 저장했다.

 

 

 

 

3) 반복사용 string값 변수선언

 

코드를 쓰다 보면 string으로 반복해서 사용되는 값들이 있었다.

localStroage에 접근해서 항목을  추가하거나 읽을 때였다.

 

// Storage 객체에 접근해 항목을 추가할때
localStorage.setItem('todos' , 'go to the gym')

오타가나지 않는다는 전제하에 위에 코드처럼 'todos'인 string값을 써도 상관없다.

 

const TODOS_KEY = 'todos';

// Storage 객체에 접근해 항목을 추가할때
localStorage.setItem(TODOS_KEY , 'go to the gym')

 

하지만! string 값 에 오타가 있다면 어떤 오류없이 기능이 작동되지 않는 늪에 빠져버리는 일이 일어난다.

그러므로 string값을 변수로 선언한다면 오타가 생길 시 error를 통해 쉽게 디버깅이 가능해진다.

 

string값을 변수로 선언할 때는 변수를 대문자로 한다.

이유는 없다. 그렇게 약속되어있다고 한다

다른 변수와 구분하기 위해서라고 추축 해본다.

 

 

 

 

 

4) JSON

외국인 이름 같이 친근한 JSON이다.

데이터를 주고받을 때 사용하는 가장 간단한 포맷이다.

 

JSON - JavaScript | MDN

 

localSotrage에 입력받은 값을 string 저장하고 다시 배열로 꺼내올 때 사용했다.

// 배열에 저장되어 있는값을 localStorage에 저장할때

let toDos = ['go to the gym', 'eat breakfast'];

localStorage.setItem('toDos', JSON.stringfy(toDos));


// localStorage에 저장되어 있는 string값을 배열로 꺼내올때
JSON.parse(localStorage.getItem('toDos'));

 

JSON은 아직 사용이 미숙하다.

데이터를 주고받을 때 사용한다는 점과 string으로 값을 변환하고

key와 value로 값을 변환할 수 있다는 점을 중점적으로 기억하고 사용했다.

 

 

 

 

++++ 더하고싶은 말)

 

챌린지를 하다 보면 이런 순간들이 꽤 많았다.

뭐지.. 이거 어떻게 하는 거야....

 

 

 

그럴 때면 아주 유용하게 도움이 되는 커뮤니티가 있다!

 

 

바로 슬랙!!!!

노마드 코더 슬랙에 가입해 어려움을 공유하면

친절한 챌린저들이 알려준다.

적극 활용하자.

모르면 빨리 물어보는 게 제일이다.

슬랙 사용법은 아래 링크를 통해 확인하자

 

FAQ › 노마드 슬랙 – 노마드 코더 Nomad Coders

 

 

 

 

 

챌린지를 다 끝나고 났을 때의 내 상황

그래서 후기를 적어보았다...😏

다시 코드를 보면서 이게 왜 작동되는지

나는 왜 이렇게 코드를 썼는지

어떤 기능들이 유용했는지 다시 돌아보는 시간을 가져봤다.

 

 

혹시나 챌린지에 참여할까 고민 중이시라면

주저 없이 참여해보라고 권하고 싶다.

미루고 미룬 데다 몇 번 실패도 해봤던 나도 성공했다.

지금 이 후기를 찾아볼 정도로 부지런한 당신은

성공확률이 5000%이다!

 

 

 

 

마지막으로 챌린지를 통해 만들었던 투두리스트 사이트와 코드를 공유해본다.

 

➡️ todolist site is here!

➡️ code is here!