공부하는개미

자바스크립트(JavaScript)란?

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.

자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.

스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다.

* 자바스크립트의 역사(위키백과)

2021년 02월 07일을 기준의 프로그래밍 언어 순위입니다.

자바스크립트는 10위 안에 들 정도로 높은 순위를 보이고 있습니다.

그 이유중 하나는 자바스크립트가 웹에 쓰이는 하나뿐인 프로그래밍 언어이기 때문입니다.

프론트엔드쪽을 희망한다면 반강제적으로 배워야 하는 언어입니다.

반대로 백엔드에서 사용 가능한 언어들은 다양하게 있습니다.

ex) Java, Python, 하스칼, Ruby 등등

자바스크립트의 장·단점

장점

• 하나의 프로그래밍 언어만 배우면 된다.(프레임워크, 라이브러리 X)
• 언어가 하나여서 그만큼 빠르게 발전 한다.
• 웹사이트에 참고자료들이 엄청나게 많다.
• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해줌

* 이 외에도 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능합니다.

단점

• 프로그래밍을 하는데 유연함이 적어진다.(하나의 언어만 사용)
• 자바스크립트에 갇힐 수 있다.

자바스크립트 엔진

자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.

자바스크립트 엔진 자세한 설명[링크로 이동]

자바스크립트 엔진의 작동 원리

엔진이 어떻게 동작하는지 이해하려면 상당한 시간을 쏟아부어야 합니다. 하지만 기본 원리는 다음과 같이 간단합니다.

1. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.

2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일).

3. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱).

엔진은 프로세스 각 단계마다 최적화를 진행합니다. 심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 합니다. 이런 과정을 거치면 스크립트 실행 속도는 더욱 더 빨라집니다.

브라우저에서 할 수 있는 일

• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
• 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
• 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

브라우저에서 할 수 없는 일

보안을 위해 자바스크립트 기능에 제약을 걸어둠.

* 악성 웹페이지가 개인 정보에 접근 혹은 사용자의 데이터 손상을 막기 위해.

• 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있습니다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문입니다.

  모던 브라우저를 사용하면 파일을 다룰 순 있습니다. 하지만 접근은 제한되어 있습니다. 사용자가 브라우저 창에 파일을 ‘끌어다 두거나’ <input> 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용합니다.

  카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 합니다. 자바스크립트가 활성화된 페이지라도 사용자 몰래 웹 카메라를 작동 시켜 수집한 정보를 국가안보국(NSA)과 같은 곳에 몰래 전송할 수 없습니다.

• 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없습니다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용됩니다. 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없습니다.

  이런 제약사항을 '동일 출처 정책(Same Origin Policy)'이라 부릅니다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 합니다. 자세한 사항은 추후 학습하도록 하겠습니다.

  다시 한번 강조하지만, 이런 제약사항은 사용자의 보안을 위해 만들어졌습니다. http://anysite.com에서 받아온 페이지가 http://gmail.com에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함입니다.

• 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있습니다. 하지만 타 사이트나 도메인에서 데이터를 받아오는 건 불가능합니다. 가능하다 할지라도 원격 서버에서 명확히 승인을 해줘야 합니다(HTTP 헤더 등을 이용). 이 역시 보안을 위해 만들어진 제약사항입니다.

자바스크립트가 할 수 없는 일은 반드시 숙지해야 한다고 생각합니다.

구현하려는 서비스가 자바스크립트를 사용해도 문제 없는지 대략 알 수 있기 때문입니다.

자바스크립트를 도와주는 언어들[링크로 이동]

(타입스크립트, 다트, 커피스크립트, 플로우)

위의 다른 언어들을 배우기 위해서 우선 자바스크립트(JavaScript)가 선행 되는걸 추천드립니다.

자바스크립트를 숙달하지 못한 상태에서 타입스크립트와 같은 언어를 배우신 분을 봤습니다.

결국에 고생을 하시다가 자바스크립트를 배우셨습니다.

참고자료 

초보자를 위한 바닐라 자바스크립트(노마드코더)

모던 JavaScript 튜토리얼

요즘 IT기업 취업을 위해 코딩 공부를 하고 있습니다.

그런데 공부를 하면서 정말 뼈져리게 느끼는게 있습니다.

하나의 기능을 구현 할 때 예전에 해결한 문제가 아니라면 수 많은 참고자료를 읽고 해석해야 한다는 것입니다.

하지만 여기서 큰 문제가 생기게 됩니다.

그것은 바로 문해력입니다.

문해력은 코딩 뿐만 아니라 모든 영역에서 필요하다는 것을 느꼈습니다.

왜냐하면 대부분의 정보들이 글로 남겨져 있기 때문입니다.

정보들을 이해하고 해석하는 능력이 정말 필요합니다.

이런 능력을 그나마 쉽고 적은 비용으로 늘리는게 바로 '독서'입니다.

심지어는 돈이 없어도 책을 읽을 수 있습니다.

도서관에 수 많은 책들이 있기 때문입니다.

* 내가 원하는 책이 없으면 도서관에 신청도 가능합니다.

그러므로 독서는 공부의 기초가 되는 것이라고 생각합니다.

book.naver.com/bookdb/book_detail.nhn?bid=11433426

완벽한 공부법 이라는 책에 위의 내용이 자세하게 나와 있습니다.

저자는 우선 '다독'으로 시작하는 것을 추천하고 있습니다.

장르 구분없이 내가 접하기 쉬운 책부터 시작을 하라고 합니다.

소설, 만화책 상관없이 우선 습관을 만드는 것입니다.

그 다음에 가지가 뻗어나가듯 영역을 확장해 나가는 것입니다.

여기서 주의할 점은 바로 편향된 방향으로 나가지 않는 것입니다.

한 장르의 책만 읽으면 나의 사고도 동일하게 편향되게 됩니다.

저자가 추천하는 독서 습관을 만드는 7가지 방법

1. 스마트폰과 멀어지기

  - 스마트폰은 사람들과 제일 가깝게 지냅니다.

  그런데 이런 스마트폰이 사람들의 집중을 방해합니다.

  적어도 30분 정도 스마트폰을 멀리두고 독서를 하는게 중요합니다.

2. 특정 장소

  - 카페, 도서관 등 최적의 장소를 찾는 것입니다.

  작가는 지하철을 독서의 공간으로 만들면서 시간을 활용했다고 합니다.

3. 인지부조화 이용하기

- 새로운 정보를 접할 때 스트레스와 불편함을 느끼게 됩니다.

  그럼에도 불구하고 그냥 책을 읽는 것입니다.

  분명히 독서를 하다보면 딴짓을 하고 싶어질 것입니다.

  하지만 욕구를 그냥 인지하고 독서를 꾸준히 하면 그런 마음은 대부분 사라집니다.

4. 책을 한꺼번에 많이 사기

  - 가장 위험하지만 효과적인 방법입니다.

  그만큼 돈을 투자해서 책을 구매해 최대한 잘 보이는곳에 책을 배치하는 것입니다.

  하지만 너무 어려운 책을 사서 배치하면 오히려 스트레스가 됩니다.

5. 독서 모임

  - 가장 좋은 방법이라고 생각합니다.

  독서를 하는 사람들이 모인 환경에 있다보면 독서습관을 만들기 편합니다.

  그리고 주변 사람들에게 자극을 받고 꾸준히 이어 나갈 수 있게 됩니다.

6. 동시에 3 ~ 4권씩 책 읽기

  - 한 권의 책만 읽으면 지루함을 느낄 수 있습니다.

  그런것을 방지하기 위해 여러권을 동시에 읽는 것입니다.

7. 다독가를 주변에 두기

  - 어떻게보면 독서모임과도 겹치는 내용입니다.

  하지만 이 방법은 다독가를 온라인 상에서 찾을 수도 있습니다.

  다독가의 블로그, 인스타그램 등을 자주 방문 하는 것도 방법 중 하나입니다.

css를 작성하면서 box-shadow라는 기능이 있어요.

developer.mozilla.org/ko/docs/Web/CSS/box-shadow

* Mdn사이트에서 CSS box-shadow에 대해 자세히 알 수 있어요.

Mdn도 좋지만 이쁘게 디자인된 예시를 골라서 쓸 수 있다면 정말 좋겠죠?

마치 베스킨라빈36 처럼요.

그런 사이트가 실제로 있습니다.

getcssscan.com/css-box-shadow-examples

위 사이트가 그 사이트인데 정말 괜찮은 box-shadow가 86개가 있어요.

원하는 box-shadow를 클릭하면 저절로 복사가 됩니다.

그리고 기능을 추가 할 곧에 붙여넣기만 하면 끝입니다.

단순히 복사 붙여넣기가 아니라 수정을 해서 사용해도 정말 좋아요.

저도 복붙이 아닌 조금씩 수정하면서 사용하고 있어요.

기초적인 자바스크립트인 퓨어 혹은 바닐라 자바스크립트는 웹 개발자에게 필요한 능력입니다.

특히 프론트엔드 쪽 취업을 희망하신다면 꼭 알아야 하는 것입니다.

그래서 많은 분들이 자바스크립트 관련 책을 구매하십니다.

제가 소개해드릴 잘 정리되어 있는 모던 자바스크립트(JavaScript) 튜토리얼 이라는 사이트입니다.

ko.javascript.info/

이 사이트의 장점은 

• 목차와 순서가 잘 정리되어 있습니다.
• 튜토리얼 검색으로 원하는 내용 검색 기능.
• 단순히 이론(텍스트)가 아닌 예시가 전부 담겨있습니다.
• 예시를 보고 실습하면서 배울 수 있습니다.

모던 JavaScript 튜토리얼 사이트는 2021년에도 꾸준히 업데이트가 되어가고 있습니다.

개발자 분들은 아직 사용하고 있는 내용을 배우는게 중요하다고 생각합니다.

열심히 배웠는데 실직적으로는 필요가 없다고 하면 투자한 시간이 아깝기 때문입니다.

위 사이트가 아니여도 영상 혹은 텍스트로 작성된 강의가 많이 있습니다.

꿀같은 사이트를 찾으면 저도 공부를 하고 블로그에 정보를 올릴 예정입니다.

책을 읽으려고 하는데 항상 고민되는 것이 있습니다.

바로 무슨 책을 읽을지에 대한 것입니다.

저는 이런 고민이 들 때 보통 현재 잘 판매되고 있는 책들을 구매했습니다.

이 외에도 "서울대생이 가장 많이 빌린 책"과 같은 것들을 참고했습니다.

하지만 위의 방법은 한계가 상당히 많았습니다.

남이 많이 사거나 읽었다고 해서 흥미를 가지기 쉽지 않다는 것입니다.

구매 후 아예 읽지 않게 되는 책도 상당히 많게 되었습니다.

특히 서울대생이 가장 많이 빌린 책들은 수준이 높은 책들도 상당히 많았습니다.

그렇다면 어떻게 해야 효율적으로 책을 고를 수 있을까요?

그것은 바로 요즘 가장 핫한 유튜브를 활용하는 것입니다.

유튜브에는 책을 추천해주거나 리뷰하는 영상들이 상당히 많습니다.

리뷰를 듣고 한번 생각해보고 구매를 하면 됩니다.

위의 방법은 우리가 좋은 책을 찾는 시간까지 절약하게 해 줍니다.

직접 서점을 가거나 인터넷에서 리뷰를 읽는 시간이 줄어들게 되는 것입니다.

바쁜 직장인들에게는 정말 추천하는 방법입니다.

이 방법을 실천하면서 하나 알아야 할 것이 있습니다.

책리뷰 유튜버들도 유료 광고를 받는 다는 것입니다.

이런 경우에는 한번 더 생각을 해보고 구매를 하는 것이 중요합니다.

그 영상의 댓글에서 사람들의 의견을 보는 것도 좋은 방법입니다.

제가 추천 하는 유튜버들은 아래와 같습니다.

www.youtube.com/c/%EC%B2%B4%EC%9D%B8%EC%A7%80%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C/videos

www.youtube.com/watch?v=ySAzKeZgXZc&list=PLel7USje9_dacN7F4eg4R2ov43xTV4L_l

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.

주로 웹 브라우저 내에서 사용되지만 요즘은 다른 용도로도 많이 사용하고 있다.

* 자바(Java)와 자바스크립트(JavaScript)는 전혀 다른 언어이다.

자바스크립트에 대해 자세히 알아보기(클릭 시 링크로 이동)

자바스크립트를 공부하는 방법

우선 자바스크립트의 라이브러리인 jQuery, React, Vue와 같은 것들을 먼저 배우지 않는다.

순수 자바스크립트를 먼저 배워보는 방식으로 접근을 한다.

자바스크립트를 알아야 나머지 라이브러리를 배우는데 수월하다.

그리고 취업이 목표라면 그 회사에서 사용하는 라이브러리를 공부 하는게 효율적이다.

현업 개발자들이 만든 무료 강의 영상들

유튜브 채널 드림코딩by엘리(클릭시 링크로 이동)

여러 개념들을 영상속 이미지를 통해 정말 쉽게 이해하게 만들은게 장점입니다.

강의를 보면서 재미있게 공부 할 수 있게 도와줍니다.

유튜브 채널 ZeroChoTV(클릭시 링크로 이동)

정말 다양한 예시를 강의에서 보여줍니다.

강의를 하시는 개발자분이 자바스크립트 문법 책을 썼던 분입니다.

그래서 강의 커리큘럼도 단계별로 잘 구성되어 있습니다.

시간이 가용하시다면 두 채널 강의를 전부다 보시는걸 추천드립니다.

자바스크립트에 대한 정의는 드림코딩by엘리 님의 채널 첫번째 자바스크립트 강의 영상에 잘 나와있습니다.

"Dev C++"은 교육기관에서 C언어를 가르칠 때 많이 사용하는 것 입니다.

Dev C++의 장점

1.  파일이 무겁지 않아 설치가 빠르다.
2.  무료지만 많은 것들을 지원하는 강력한 툴이다.
3.  설치가 간단하고 다른 도구에 비해 사용하기 편하다.
4.  비전공자도 쉽게 다운로드 받아 사용 할 수 있다.

단점

1.  디자인이 투박하다.
2.  도구의 개발이 중단되었다

디자인이 투박한 것 외에는 공부를 위해 사용하기에는 문제가 없다고 생각됩니다.

특히 Visual Studio나 Visual studio Code와 같은 도구는 설치 하는데도 강의를 들어야 하는 경우가 많습니다.

하지만 Dev C++은 바로 다운로드 받고 사용 할 수 있습니다.

Dev C++ 다운로드 받으러 가기(클릭 시 링크로 이동)

GET과 POST의 차이에 대해 잘 나와있는 영상을 아래 글에 추천합니다.

그리고 그 내용을 토대로 정리한 내용을 맨 마지막에 적었습니다.

www.youtube.com/watch?v=ts3eGy0-SOo

위 영상은 이고잉님이 무료로 올리신 강의입니다.

높은 퀄리티의 영상으로 많은 분들이 영상을 시청한 검증된 것입니다.

출처: opentutorials.org/course/1

GET의 특징

• 어떠한 정보를 서버로 전달할 때 URL뒤에 '?'를 붙이고, 그 안에 데이터를 적어 서버 쪽에 전송
• URL상에 서버로 전달하는 데이터가 포함되어 있다.
• 전송할 수 있는 정보의 길이가 제한되어 있다(브라우저마다 제한이 있다).
• 퍼머링크로 사용될 수 있다.

* 퍼머링크(permalink): 인터넷에서 특정 페이지에 영구적으로 할당된 URL 주소를 뜻한다. (출처: 위키백과)

POST의 특징

• URL에 데이터를 적지 않고 서버쪽으로 데이터 전송
• 전송할 수 잇는 데이터의 길이 제한이 없다.
• GET에 비해 보안상 약간의 우위에 있다.(사실상 동일)
• 퍼머링크로 사용할 수 없다.
• 서버 쪽에 어떤 작업을 명령할 때 사용한다. (데이터 기록, 삭제 수정 등)

위의 강의는 HTML 폼(form) 태그를 예시로 해서 설명한 영상입니다.

좀 더 심화된 내용은

opentutorials.org/course/62/5125

위 링크를 통해서 얻으 실 수 있습니다.

MDN mozilla는 현직 개발자들이 주로 정보를 얻는 사이트라고 해요.

저는 이 웹사이트에서 HTML, CSS, 자바스크립트(JavaScript)를 주로 참고하고 있어요.

MDN사이트를 몰랐을 때는 다른 사이트에서 정보를 얻고 있었어요.

하지만 MDN을 사용하고 나서부터는 이 사이트만 이용하게 되네요.

현직 개발자들이 주로 사용하는 이유가 있다는 걸 느꼈어요.

코드가 직접 작동하는 예시를 보여줍니다.

정말 가장 큰 이점이에요.

예시가 없어 기능을 사용하면 어떻게 보일지 모르는 경우가 많았어요.

예시를 보면 "아 이렇게 작동하는구나"라고 알 수 있어요.

그러면 내가 만드는 것에 어울릴지 쉽게 알게되죠.

다른 사이트도 많이 봤지만 이 정도로 상세하게 나와있는 곳은 못 봤어요.

사용하지 않는 기능들을 알려준다.

점점 발전을 하면서 도태되어 사용하지 않는 기능들이 있어요.

그런 기능들을 이 사이트는 친절하게 알려줘요.

곧 사라지는 기능이 있는데 그것을 사용하면 나중에 유지보수를 해야 하는 번거로움이 생겨요.

그런 수고를 덜어주는 정말 좋은 정보라고 생각해요.

한국어 지원

100%는 아니지만 일부분 한국어를 지원합니다.

설령 영어로 되어있어도 예시가 있어서 이해하는데 큰 문제는 없다고 생각되네요.

그런데 정말 많이 사용하는 기능들은 대부분 한국어 변역이 되어있어요.

이 외에도 다양한 이점들이 있어요.

코딩을 할 때 한번 참고해보면 왜 사용하지는 알게되는 사이트에요.

계속 방문하게 되죠.

프로그래밍 관련 공부를 하다가 엄청난 난관에 봉착을 했어요.

그것은 바로 '리눅스'라는 것인데요.

친절한 윈도 운영체제에 익숙해서 더욱 적응하기 힘들었어요.

제가 공부하면서 듣는 강의에서는 거의 대부분 리눅스를 사용하고 있었어요.

그래서 강의를 들으면서 막히는 부분이 꽤 많았죠.

아예 리눅스를 따로 공부하는 게 좋겠다고 생각하다 좋은 강좌를 발견했어요.

www.youtube.com/watch?v=tPWBF13JIVk

유튜브 채널 얄팍한 코딩 사전(얄코)에 있는 강의예요.

정말 마음에 드는 것은 비개발자도 이해하기 쉽게 전문용어들을 풀어 알려주는 거예요.

우리가 쉽게 접할 수 있는 것들을 예시로 풀어서 알려주는 강의예요.

www.yalco.kr/35_linux/

리눅스 관련 명령어들도 얀코 사이트에 잘 정리되어 나와있어요.

아래 글은 제가 영상을 보고 중요하다고 생각하는 내용만 정리한 글이에요.

GUI(Graphic User Interface)

• 모든 요소들이 화면에 그림으로 나타남
• 일반인(개발자가 아닌) end-user를 대상으로 만든 운영체제
• 개발자가 만들어 놓은 기능을 사용만 하면 되도록 환경 제공
• 해당 운영체제 윈도, Mac OS, 안드로이드, ios

CLI(Command Line Interface)

Linux 같은 운영체제

리눅스(Linux)

• 오픈소스 운영체제로 공짜이다.
• 설계도 코드도 마음껏 볼 수 있다(개조도 가능).

대표적인 예로 안드로이드가 있다.

리눅스를 일반인 스마트폰 사용자들이 편리하게 사용할 수 있는 모바일 OS로 개조했다.

개발자들이 맥을 선호하는 이유 중 하나

• 맥이 리눅스와 호완성이 좋다.
• 둘 다 UNIX라는 운영체제에서 파생되었고 공통점이 많다.

*명령어 사용법 및 설치법은 얄코 채널 영상 참고