프론트엔드 개발자 클론 프로젝트 후기...2

 

sosatang.tistory.com/40

프론트엔드 개발자 클론 프로젝트 후기...1

 

저번 시간에는 개발환경 세팅까지 했다.

 

이번에는 자바 스크립트에 대해 알아보려고 한다 

 

자바스크립트란

 

HTML 과 CSS는 정적인 언어이다

즉 이것들이 브라우저를 통해서 웹페이지를 화면에 그려주면 이 화면을 변경할 수 있는 방법이 없다는 의미이다.

 

Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어이다. 

 

더욱 자세한 설명은 

** 출처 : 생활코딩

opentutorials.org/course/48

JavaScript - 생활코딩

 자바스크립트란 참으로 쉬우면서도 어려운 존재인 거 같다 

이 자바 스크립트를 깊게 배울수록 할 수 있는 것들이 너무 무궁무진하다 

예를 들어 나는 HTML CSS JavaScript 이렇게 3가지를 잘 다루는 프론트엔드 개발자이다.

 

프론트엔드 개발자로서 자바스크립트를 더욱더 공부하다 보니 Node.js 란걸 알게 되었고 

express.js (자바스크립트 런타임)을 사용해보니 흔히 말하는 백엔드 ( 자바 스프링 , 파이썬 장고 ) 등을 사용하지 않고

내가 직접 백엔드 개발이 가능해졌다.

 

이쁜 만인가 

기존 DOM형식을 가지고 있던 HTML 대신 React.js를 통해 보다 부드러운 뷰 화면을 보여주게 되고

어플을 개발하려면 안드로이드 , ios 개발자가 따로 필요했지만

React Native를 이용하면 크로스 플랫폼으로 안드로이드 ios를 한 번에 개발해낼 수 있는 생산력을 보유할 수 있다.

 

이 모든 걸 할 수 있는 첫 시작은 Java Script이다.

이 하나만 제대로 배워도 나를 만능 풀 스택 개발자로 만들어 주는 녀석이다.

 

얼마나 아름 다 운가

 

찬양은 여기쯤 하고 프론트엔드 프로젝트에 대해 다시 알아보자

 

 

출처 : 패스트 캠퍼스

main.js 파일을 만들고 html 파일에서 연결시켜준다.

연결은 간단하다  

 

<script src="자바스크립트 파일 주소"></script> 

물론 html 파일 안에서 <script> 자바스크립트 내용 </script>

해서 작성해도 되지만 

파일을 따로 만들어서 연결하는 게 html 로딩 속도에 더 도움이 된다.

 

출처 : 패스트 캠퍼스 

위를 보면 document.querySelector로 box라는 클래스를 찾고 boxEL에 넣어준다

그리고 boxEl에 class ('active')란 애를 추가해주고  콘솔로 결과를 찍어본다 그러면 active가 추가되어있을 테니 참이 뜰 것이고

 

밑에서는 지우고 콘솔을 찍으니 거짓이 뜰 것이다.

 

이 수업의 장점은 하나하나 원리를 알고 가게 해준다는 거다 

 

 

출처 : 패스트 캠퍼스 

방금 찾는 방법과 추가하는 걸 알았으니 이 위에 있는 사진은 다른 속성들 응용 버전이다.

 

이곳에서 보면 똑같이 클래스 혹은 태그를 이용해 원하는 것을 찾고 

 

클릭 이벤트를 만들고 input에 focus를 두게 해 놨다.

 

그리고 주의 깊게 봐야 할 부분이 하나 더 있다. 

 

setAttribute이다  

 

Attribute :  속성

 

속성을 집어넣겠다는 건데 input에 placeholder의 값을 넣고 지운다. 

 

여기까지 자바스크립트 활용하는 방법을 맛보기로 보았다.

 

자바스크립트도 중요하지만

html과 css를 이해하고 있어서 자바스크립트의 활용도가 높아지니 특히 CSS 

 

하나 전 글에서도 말했듯이 혼자 독학하면 원리를 이해하기가 어렵다

출처 : 패스트 캠퍼스

이 수업은 정말 아무것도 몰라도 완전 기초 적인 지식까지 하나하나 풀어서 설명해주니 

후에 자바스크립트를 만질 때 이해도가 올라간다. 

 

출처 : 패스트 캠퍼스

정말 하나부터 열까지

같이하는 선생님이자 동반자가 있다 

 

 

3D 애니메이션 

출처 : 패스트 캠퍼스

 

검색 , 드롭다운 메뉴 , 애니 메이션 , 슬라이드, 유튜브 영상 배경 , 3D 애니메이션

 

 

 

 

프론트엔드 개발자가 되려면 공부도 중요하지만

혼자서라도 자그마한 프로젝트를 만드는 게 중요하다고 여기는 사람으로서

 

이 수업에서 스타벅스 클론 사이트 만들어 보길 추천한다. 

더 나은 프런트엔드 개발자가 되기 위해!

 

솔직하게 수업이 너무 많은 것을 알려주고 있어서 이 블로그에 담기에는

너무 방대한 양이라 압축하고 왜, 어디가 괜찮았는지 적어 봤지만 

 

다시 기초를 다지는 입장으로써 좋은 프론트엔드 프로젝트였다. 

 

20,000

 

http://abit.ly/5lc7dz9

한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. | 패스트캠퍼스