웹 Front-End 개발 [HTML / CSS / JavaScript]

iOS 하이브리드 앱을 개발하면서 JavaScript와 통신을 하게 되었는데, JavaScript가 무엇인지, 웹 프론트에서는 앱과 어떻게 통신하고 작동이 되는지 궁금해져서 JavaScript에 대해 알아보게 되었다. 알면 알수록 굉장히 매력적이고 유망한? 언어인 것 같다. 아직 잘은 모르지만 이론적으로 보면 JavaScript만 알면 웹 프론트 개발에 Node.js 환경에서 서버까지 구축하고 React Native로 안드로이드, iOS 앱개발까지 다아 끝내버릴 수 있다는 것이 아닌가!! 🙊🙊🙊 신기하고만 ㅎㅎ 언젠가 시간이 된다면 JavaScript언어도 공부를 해보고 싶다. (말로만..😝)

 

웹 Front-End 개발?

: HTML, CSS, JavaScript 언어를 사용하여, 유저와 상호작용이 일어나는 인터페이스 전체를 개발하는 것이라 볼 수 있음. 

 

웹 구성요소	정의	웹페이지에서의 역할
HTML (HyperText Markup Language)	웹 컨텐츠의 제목, 단락, 목록 등의 구조와 의미를 나타내는 마크업 언어	웹사이트의 기본 구조, 몸체를 담당
CSS (Cascading Style Sheets)	레이아웃과 스타일 등을 정의하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어 마크업 언어가 실제 표시되는 방법을 기술	꾸미는 역할, 디자인을 담당
JavaScript	웹 브라우저 내에서 주로 사용되는 스크립트 프로그래밍 언어 Node.js와 같은 런타임 환경의 등장으로 서버 프로그래밍에도 사용되고 있어 백엔드 분야에서도 전망이 밝다.	웹페이지의 동작을 담당 동적으로 사용자 인터페이스 업데이트

* 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 표현하는 언어의 한 가지로, 일반적으로 데이터를 기술하는 정도로만 사용되기 때문에 프로그래밍 언어와는 구별됨. 

* 스크립트 언어 : 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어. 일반적으로 스크립트 언어는 매우 빠르게 배우고 작성하기 위해 고안되었으며, 짧은 소스 코드파일이나 REPL로 상호작용하는데 적합. 상대적으로 단순한 구문과 의미를 내포. 

 

자바스크립트 JavaScript 란?

동적으로 컨텐츠를 바꾸고, 멀티미디어와 움직이는 이미지를 다루는 등의 많은 일들을 할 수 있는 스크립트 언어. 

자바스크립트는 해석형 언어로, 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반환됨. 

(cf. 컴파일러형 언어. 컴퓨터에 의해 동작되기 전 다른 형식으로 변환하는 언어. C/C++ 같은 언어는 어셈블리어로 컴파일되어 동작함)

최근들어 웹 디자이너들에게도 교육이 되고 있는 만큼 진입 장벽이 타 언어에 비해 낮은 편으로 인식되고 있지만, 콜백과 비동기 처리 등 배우다 보면 벽에 막힐 수 있다. 

 

- 클라이언트측 코드 : 사용자의 컴퓨터에서 작동하여 브라우저에서 표시되는 코드. 

- 서버측 코드 : 서버에서 작동되고 그 결과가 사용자의 브라우저에 넘어가 표시됨. Java, PHP, Python, Ruby, ASP.NET 등이 서버측 웹 언어의 대표적 예로, Node.js 환경에서는 서버측에서도 자바스크립트 사용이 가능하다.  

 

과거 프론트엔드 언어로만 쓰이던 JavaScript는 현재 확장성이 매우 높은 언어. JavaScript만 알면 일반적인 사이트 개발부터 React.js 또는 Vue.js를 사용해 SPA(Single Page Application) 웹사이트 개발, iOS와 안드로이드 앱을 만들 수 있는 React Native, 웹서버나 다른 서버 사이드 어플리케이션에 Node.js, 데스크탑 앱은 리눅스, macOS, 윈도우, tvOS 등 플랫폼에서 가능한 Electron을 이용하거나 React Native for Windows를 사용해 Windows 10 SDK까지 접근할 수 있다. 

자바스크립트 에디터로는 VS Code(Visual Studio Code) 를 많이 사용. 

 

주요 라이브러리

jQuery : Deprecated

AngularJS : 구글에서 제작한 프론트엔드용 클라이언트 사이드 JavaScript 프레임워크. 백엔드, 프론트엔드를 동시에 작업할 수 있음. 

React : Facebook에서 만든 프론트엔드용 오픈소스 라이브러리. 

Vue.js : 사용자 인터페이스를 만들기 위한 프론트엔드용 프레임워크. 굉장히 자유롭고 유연하게 추가 기능들을 불러올 수 있지만 추가 기능들을 무분별하게 사용하는 경우 안정성을 떨어뜨릴 수 있음. 

Node.js : 브라우저 안에서만 작동하던 JavaScript를 브라우저 외의 환경에서 작동할 수 있게 만들어 준 런타임 환경

Express.js : Node.js를 위한 웹 애플리케이션 프레임워크. 주로 Node로 백엔드 개발할 때 사용된다.

 

Front-End에서 JavaScript 사용

자바스크립트는 CSS와 같은 방식으로 HTML 페이지에 적용됨. 

CSS는 외부의 스타일 시트를 적용하기 위해 link 요소를 사용하거나 내부의 스타일시트를 적용하기 위해 style 요소를 사용하는 반면, 자바스크립트는 HTML 상에서 오직 script 태그만으로 사용이 가능하다. 

HTML 내부에서의 자바스크립트 사용

</body> 태그 직전에 자바스크립트 코드를 <script></script> 사이에 넣어 페이지 상에서 동작이 가능하게끔 할 수 있다. 

<script>
    //JavaScript goes here
</script>

외부 자바스크립트 파일 적용

외부 파일로 자바스크립트를 넣어주고 싶다면 HTML 파일이 있는 디렉토리에 .js 확장자를 가지는 자바스크립트 파일을 만들고 HTML 코드에 파일 이름을 넣어주면 된다.  

<script src="JavaScript파일이름.js"></script>

 

 

 

 

참고 : 나무위키, mozilla