본문 바로가기
IT 배우기/JavaScript

JS(JavaScript) 되새김

by To올라운더 2023. 5. 6.
반응형

1. JS(JavaScript). 한번은 돌아볼 시간이 왔다.

파이썬 크롤링 작업을 진행하다보니,

알음알이로 알던 JS(JavaScript)를 다시 한번 돌아봐야겠다는 생각이 들었다.

 

코딩앙마님의 100분짜리 기초 강의를 들었는데,

2번으로 나눠보려던 생각을 잊을만큼 집중도가 높고

머릿속이 깔끔하게 정리되는 느낌이었다.

 

이제 내 기억을 믿지 못하는 이시기에 100분 동안 배운

중요 기반과 기능들에 대해서 기록을 남겨 보겠다.

반응형

 

 

2. JS는 뭔가요?

먼저 웹페이지를 만드는 3대장으로 HTML, CSS, JavaScript 가 있는데 

실제 사용자들은 이 3가지 요소가 결합된 형태를 웹페이지라는 이름으로 보게된다.

그래서 이 3가지 요소에 대해 각각 구별해서 볼 수 있어야 JS에 대해 대략적이나마 알 수 있다.

간략하게만 이야기 하면

 

 - HTML은 HyperText Markup Language 의 약자로 문서를 표준화한 언어이다.

  컴퓨터(웹)상에서 사용되고 이름에 언어라는 뜻의 Language가 있어 자칫 프로그래밍 언어라 생각하는 분도 있지만,

  프로그래밍 언어가 아닌 태그만을 사용한 Markup Language이다.

  그럼 이 두가지가 무슨 차이가 있는가를 살펴보면,

  HTML만으로는 특정 조건에 따른 상황별 웹페이지 구성이나 결과를 사용자에게 보여줄 수 없기 때문이다.

 

  그래서, HTML로는 뼈대를 이루는 내용을 작성하고,

  CSS와 JS를 통해 사용자에게 더 효과적인 내용 전달을 할 수 있도록 꾸미게 된다.

  (*HTML에도 디자인 요소를 포함할 수 있으나, 본연의 취지인 구조화된 문서의 형태를 벗어난

   디자인 문서가 되는 불상사를 해결 하기 위해 HTML에서 디자인적인 요소를 CSS로 분리하게된다.) 

 

 - CSS는 디자인적인 요소를 HTML에서 분리하여 전담하는 스타일 시트 언어이다.

   위에서 한번 언급된 것처럼 HTML에서 디자인적인 부분을 분리하였기 때문에

   HTML은 본연의 목적에 충실해질 수 있고, 

   웹페이지의 디자인은 일관성을 가지고 디자인이라는 분야가 전문화됨에 따라 

   디자이너와 프로그래머간의 협업이 용이해졌다.

   (*디자인적인 요소가 분리됨에 따라 CSS는 디자인적인 감각이 필요한 요소이며,

     해당 기능만을 다루는 사람들을 퍼블리셔라고 한다.)

 

 - JS(JavaScript) 는 이번에 전체적으로 다룰 내용으로

   웹페이지에서 특정 상황이나 조건 등을 반영하여 처리하거나

   반복된 동작 등을 처리할 수 있도록 프로그래밍적인 기능을 지원할 수 있는 언어이다.

 

 

 

  - 웹 페이지 3대장 간단 정리 

 - HTML : 뼈대. 단순 내용만 볼 수 있음

 - CSS : 피부 및 외관. 디자인 요소가 추가된 보기 좋은 형태의 웹페이지를 구성

 - JS : 신경. 특정 조건에 맞는 결과를 보여주거나 제어할 수 있음

 

 

3. JS 시작 전 셋팅

처음 내가 자바스크립트 알던 10여년 전에는

JS를 배우거나 테스트하기 위해 별도의 IDE를 설치하고 진행을 했었으나,

사실 JS는 특별한 설치가 없어도 대부분의 브라우저에서 테스트가 가능하다.

 

코딩앙마님이 영상에서 알려주시는 것처럼 웹 사이트(https://codepen.io) 에서 실행하는 방법도 있고,

단순히 크롬이나 엣지같은 브라우저에서 개발자 도구[F12] - 콘솔 창을 열기만 해도 

간단히 JS 기능을 수행할 수 있다.

(대신 IDE를 사용하면 오타나 Error를 사전에 거를 수 있어 업무시에는 자신에게 맞는 IDE를 사용하는게 좋다.)

 

* creator 변수 선언과 log 출력.

 

 

4. 전체 글 프리뷰

전체적인 내용만을 먼저 리뷰한다면,

 

당연한 이야기 일 수 있지만 다른 언어를 알고 있다면 JS는 그리 어려운 언어가 아니다.

특히 인터프리터 언어의 특성 때문일지 몰라도 파이썬과 굉장히 유사한 형태의 특성과 입력 형태가 많다.

(for 반복문은 C언어처럼 초기값, 조건, 값 증가 형태로 사용한다.)

 

다음 시간부터 간단히, 하지만 핵심은 놓치지 않고 내용을 정리해보도록 하겠다.

 

반응형

'IT 배우기 > JavaScript' 카테고리의 다른 글

JS 변수, 자료형  (1) 2023.05.22
IDE(Visual Studio Code) 이용하여 js 환경 구성하기  (0) 2023.05.08