Skip to content

Latest commit

 

History

History
80 lines (63 loc) · 5.9 KB

js_1.md

File metadata and controls

80 lines (63 loc) · 5.9 KB

프로그래밍이란 무엇인가 feat.JavaScript

JavaScript(이하 JS)는 웹 브라우저라는 소프트웨어(이하, SW)를 프로그래밍적으로 제어하기 위한 언어이다. 사용자의 조작에 맞추어 어떤 기능이 작동되게 하고 싶다면, 반드시 JS를 학습하여 활용해야 한다. 이런 작업은 JS만 가능하다

프로그래밍적 이라는 말의 의미는?

코드를 통해서 기능을 제어할 수 있다

JS 활용 범위의 확장 : 탈ㅇㅇ

탈 웹브라우저

  • JS는 더이상 웹브라우저만 제어하는 용도로 사용되지 않는다. 활용 범위가 더 확장되었다.
  • 그러므로, JS가 동작하는 환경을 JS와 분리해서 생각해야 할 필요가 있다.
    • 예를 들어, 기존에는 웹서버에 php, java, python 등이 활용되었는데, JS가 웹 서버에서도 사용되고 있다. 가장 대표적인 것이 Node.js이다.

    Node.js를 학습하면, 웹브라우저 제어하기 위한 기술로서 JS & 웹 서버 제어하기 위한 JS를 활용하여, 브라우저와 서버를 모두 제어할 수 있게 되는 것이다. 참고로, Node.js는 JS문법을 따른다. 파일 확장자도 .js로 동일하다.

탈 웹

  • 웹 밖에서도 JS가 사용되고 있다. JS가 웹 브라우저 제어 도구로 끝나는 게 아니라, 여러 분야에서 활용되고 있다.
  • 대표적 예시로는 구글 apps Script

언어란?

의사소통을 위한 약속.

  • 프로그래밍 언어를 익힌다는 것은, 그 약속을 배우고 익힌다는 것이다.

환경이란?

환경 === 언어를 사용하는 대상. 한국어 예시

  • 의사에게 개발해주세요라고 하거나, 변호사에게 치료해주세요 한다면?
  • 요청 받는 주체는 해당 부탁을 제대로 수행하지 못하고, 부탁하는 주체도 목적을 달성하지 못하는 문제가 발생한다.
  • 즉, (요청자는) 각 주체가 하는 역할을 숙지하고 있어야 목적을 달성할 수 있다.

프로그래밍 모델

  • 웹브라우저, 노드, 스프레드시트 === 환경

  • JS라는 언어적 공통분모를 가지고 각각 다른 환경을 제어할 수 있는데, 환경에 따라 할 수 있는 일이 다르다.

  • 또한, 환경에 따라 (유사한 일을 수행하는)명령어도 다르다

    • 예를 들어, 웹 브라우저에서 alert/ Node.js에선 write/ 스프레드시트에선 msgBox

  • 개발자는 코드를 통해 브라우저 등의 제품을 제어한다. 또한, 사용자에게 UI를 제공하여, 사용자들이 시스템들을 제어할 수 있게 한다.

실습 환경과 도구

JS는 사용(가능한) 환경 범위가 넓다. 여기에서는 간단히 텍스트에디터, 브라우저상의 콘솔, 그리고 IDE를 간단히 살펴본다.

기본 텍스트 에디터

  • 브라우저 위에서 JS를 활용할 목적이라면, 기본 내장된 에디터도 충분히 쓸만하다
    • 메모장 등 텍스트를 편집할 수 있게 하는 에디터.
  • 그러나, 더 좋은 툴을 탐색하고, 찾아다 써버릇 하는 것이 바람직하다. 생산성, 효율성 면에 있어서 차이가 크기 때문.
  • 브라우저 위에서 활용되는 JS는 HTML 안에서 작동한다.
    • 따라서, HTML의 <script> </script>태그 사이에 JS문법에 따라 코드를 작성한다.

브라우저 상의 콘솔

  • 파일을 일일이 작성조차 하기 귀찮을 때 (ㅋㅋㅋㅋㅋ) 사용하면 아주아주 편리하다.
    • 참고로, 짧은 코드는 콘솔에서 / 긴 코드는 따로 파일로 작성해서 진행하는 것이 편하다.
  • 웹브라우저(본인은 크롬을 쓴다. egoing님도 크롬을 쓰신다고 한다.)에서 F12를 누르면 개발자도구가 뜬다. 이때, 콘솔을 띄우려면, esc버튼을 누르면 된다. 콘솔 창을 켰다 껐다 할 수 있다.
    • 이 '콘솔'란에 html태그 필요 없이 순수하게 JS코드만 작성하면 된다.
  • 콘솔에서 자판의 위쪽 방향키를 누르면, 이전에 작성했던 코드들을 쭉쭉 다시 찾아다가 갖다 쓸 수도 있다.
  • 입력한 코드가 출력시키는 내용을 확인하는 방법은 여러가지 있는데, 주로 쓰이는 것으로는 alert();와 console.log();가 있다.
    • alert는 경고창을 띄워주므로, 불편할 때가 있다. console.log가 작업내용을 빠르게 확인하기에는 더 편리하다. 개발자도구 콘솔 부분에 작업한 내용이 출력되는데, 아무래도 경고창보다 보기 편리하다.

IDE

Integrated Development Environment. 통합개발도구: 코드 작성하는데 도움되는 기능을 다 갖고 있는 도구. 나는 현재(2021.5.3) VSC를 쓰고 있다.

  • 기능이 많다고 해서 무조건 좋은 것은 아니다.
    • 기능 파악에 많은 시간이 소요되고, 비용이나 메모리가 무거울 수 있기 때문이다.
    • 따라서, 적절하게 자기 상황에 맞는 IDE 선택해서 활용하는 것이 중요!
  • 개발도구는 본인이 신경써서 챙겨야 한다. 좋은 개발도구를 찾아 쓰는 것은 코드 작성하는 것만큼이나 중요하다.
    • 비슷한 예: IDE의 생산성 차이는 포크레인vs삽보다 생산성면에서 더 큰 차이가 난다!

참고사항(여담)

이 수업은 프로그래밍 언어의 문법에 집중하는 코스이다. 따라서, 언어를 통해 환경을 제어하는 방법은 브라우저 제어 by JS / Node.js 제어 by JS 등의 강의를 통해 정밀 학습 가능하다!

와... egoing님은 다 게획이 있구나..? 이런 구조적인 강의 얼마나 멋진가! ㅜㅜ Thx!