728x90
반응형
목차
어렴풋하게만 알고 있었던
Front-end(HTML, CSS, Javascript, react 등)
손에 좀 익히면서
구동 원리도 자세히 알고자 하여
강의의 miniproject도 수행하고
개발 환경을 구축!
[Frontend] 개념
- 개념
- HTML - 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어, 예를 들어 페이지의 어디가 문단이고, 헤딩이고, 데이터 표와 외부 이미지/비디오인지 정의
- CSS - HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어
- Javascript - 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립팅 언어
- 즉 웹 페이지는 웹 콘텐츠의 구조를 가진 HTML이 CSS 파일을 참조함으로써 스타일(색, 위치 등)을 표현하고,
HTML이 Javascript를 참고함으로써 동적인 동작을 추가할 수 있다.
① node.js 설치
다운로드 | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
- Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.(공식 홈 정의)
- Javascript를 (웹브라우저가 아닌 환경에서 실행할 수있게 해주는) 구동할 수 있도록 환경을 만들기 위해 설치한다.
② 설치된 vs code 열기
③ 미리 보기를 위한 Live Server Extension 설치
- vs code 좌측 Extension에서 Live server 검색
- install 눌러 설치
- 설치 후 하단 파란 메뉴의 'Go Live 클릭
④ 설치 후, 미리 보기 하면서 개발
- 설치 후 하단 파란 메뉴의 'Go Live 클릭
- 혹은 단축키 ALT + O
혹시 HTML만 보이고 js, css가 동작안해서 오잉?하는 사람이 있다면?
- header에 reference를 잘해주었는지 체크해보자
- 예시
<header>
<script src="todolist.js";> </script>
<link rel='stylesheet' type='text/css' href='../todolist.css'>
</header>
댓글