[Momentum] Clone Coding -01

노마드 코더를 보고

클론코딩부터 해서

js 를 완벽히!

해보려고 한다.

 

기존엔 주먹구구로 필요한거 찾아다 쓰다 보니

실행되는 파일까진 완성했지만

 

코드가 아주 지저분하고

 

백엔드까지는 js 에서 구현하지를 못했다..

그래서 클론코딩을 하면서 js 에 대해 꼼꼼히 공부를 하고,

기존 플젝을 완성시켜 보려 한다.

 

웹을 구현할때 가장 필요로 하는 것은

js ! 

html, css 이다.

 

javascript 는 이미 구현이 완료된 상태이다. 파이썬과 달리 별도로 설치하지 않아도 컴퓨터에서 이미 실행이 된다.

 

모멘텀에서 검사 -  console - js 코드 입력

을 해주면, 우리가 원하는 형태를 바로 브라우저에서 확인이 가능하다.

 

하지만 콘솔창은 짧은 코드를 위한 것이기 때문에,

길게 코드를 작성하고 보기가 어렵다.

 

그래서 vs code를 켜고

js, css, html 파일을 모두 만들어 주었다.

 

js 에 팝업창을 띄우는 코드를 작성하고,

alert("hi");

css 파일에 배경에 대한 설정을 주었다.

body{
	background-color : beige;
}

이 js 파일과 css 파일을 이어주는 것이 바로 html 이다.

css 나 js 파일은 브라우저에서 실행하는 파일이 아니다. 브라우저에서 실행 가능한 파일은 html!

 

html 에서 이제 두 파일을 연동시켜 준다.

 

이렇게 link 를 통해서 html 파일에서 css 파일을 연결시켜 준다.

그리고 open live server 를 해보면?

베이지색 배경이 적용된다.

 

이제 그럼 js 파일도 연결시켜 보자

 

자바스크립트는 일반적으로 먼저 불러오지 않는다.

이렇게 마지막에 불러와주면 된다.

끝!

 

이렇게 html ,css, js 를 모두 연결시켰다.!

 

이렇게 페이지를 열어볼 수 있다.

 

브라우저에서 콘솔창을 다시 열어보면 아무 알림이 안뜬다.

하지만 만약 제대로 된 코드를 작성하지 않아 오류가 생기면 콘솔 창에서

어느 부분이 실행되지 않는 지 확인할 수 있기 때문에, 항상 콘솔창을 열어두기로 하자!

 

reference: 노마드코더

https://nomadcoders.co/roadmap

Roadmap – Nomad Coders