JS 클론코딩 정리. with 노마진코더

웹 프론트엔드 분야에 관심이 크게 생겨 JS 와 친해지기 위해 모두의 선생님인 니코쌤의 바닐라 JS 챌린지에 참여하게 됫다.

 

이해가 잘 되도록 하는 양질의 강의임에도 불구하고 지속적인 업데이트와, 내용 구성이 너무 좋아서 이래서 니코쌤 니코쌤 한다는걸 다시한번 느꼇다. I love nico쌤~!

 

강의 내용중 언제든지 복기 할 수있는 내용들을 정리해보려 한다, 단! 무료강의지만 챌린지의 내용은 블로그 공유가 불가한 점 참고하여 공통되는 기술적인 파트의 대한 내용을 정리하려한다.

---

Part.1 JavaScript, Html, CSS 그게 뭔데?

본인도 어렴풋이 뭐 웹 언어하면 JavaScript, Html, CSS 이런거 쓰겠지~ 라고 생각만 하고 있었고 정확히 어떤식으로 동작이 이루어지는지 누가 물어본다면 " 브라우저 엔진이 알아서 하는거지~ " 라고 둘러댓던거같다. 이번 기회에 알게된 내용으로 정리하자면

• 브라우저 (크롬, 사파리, 파이어폭스, IE는 제외하고싶다) 가 해석할 수 있는 언어는 HTML, CSS, JavaScript 뿐이다.
• HTML 은 웹 문서 그 자체를 의미하며, css는 style, javascripts는 각종 모션, 동작, 인터렉티브(상호작용)한 기능들을 담당한다.
• javascript 는 프론트엔드단에서 사용하는 언어지만 node.js 통한 백엔드 및 인공지능, 심지어 머신러닝과 게임개발도 가능하다 (물론 타 언어에 비해 실용성 차이는 있을것으로 예상)
• javascript 는 별도 설치할 필요가 없다. 브라우저 내 내장되어있음으로 "브라우저 사용 = javascript 사용가능" 으로 이해할 수 있다.

애용하는 IDE vscode 또한 js 기반으로 제작되었다고 하니 바닐라 js 자체를 공부할 맛이 날거같다 싶다.

 

Part.2 JavaScript 의 Value, Datatype, array, object, function

// 변수
const valueName = data //상수 선언 (값이 변하지 않음.)
let valueName = data // 변수 선언 (값이 변할 수 있음.)
    valueName = data_1 // let 재입력이 아닌 변수명에 데이터 자체를 변경할 수 있음.
var valueNema = data // 예전에 변수 선언방식 (거의 사용 안함)

// 데이터 타입
1,2,3 // int 숫자
"text", 'text' // string 문자
true, false // booleans 참, 거짓
null // 값이 존재하지 않음. 
undefined // 값이 정의되지 않음.
NaN // Not a Number 연산과정 내 계산할 수 없음.

// 객체
const objectName = {name:park, old:secret} // 오브잭트 생성 key:value 형태

//function
function(argument) {code code}

 

 

Part.3 JavaScript, HTML 문서 내 요소 가져오기

두가지 방법을 활용해서 HTML 내 요소를 가져올 수 있다.

document.getElementById("idName") : 문자열과 일치하는 id 속성을 가진 요소를 가져온다.
document.querySelector("tag name") : 해당 셀렉터와 일치하는 문서 내 첫번째 요소를 가져온다.