정리를 시작하며
웹에서 기본 언어가 되는 Javscript를 정리할 필요가 있다고 생각했다.
선임께 여쭤봐 몇몇 서적과 공부하기 좋은 웹사이트를 여쭤보았는데 https://ko.javascript.info/ 이 사이트가 정리가 잘 되어있는 것 같았다.
그래서 해당 사이트 내용을 요약해서 정리해보려고 한다.
1.1 Javascript 란?
Javascript 정의
웹페이지에 생동감을 넣기 위해 만들어진 프로그래밍 언어로 Javascript 엔진 위에서 동작한다.
엔진 종류 예시
- V8: Chrome, Opera에서 사용
- SpiderMonkey: Firefox에서 사용
- Trident, Chakra: IE에서 사용
엔진 동작 방법
- 엔진이 스크립트를 읽음(파싱)
- 읽은 스크립트를 기계어로 전환(컴파일)
- 기계어로 전환된 코드 실행
브라우저에서 할 수 있는 일
Javascript는 안전한 프로그래밍 언어로 메모리, CPU 영역의 조작은 허용하지 않는다.
- 페이지에 HTML, CSS를 추가, 수정
- 마우스 클릭, 포인터 움직임, 키보드 키 눌림과 같은 사용자 행동에 반응하기
- 네트워크 통신, 파일 업로드 및 다운로드(AJAX, COMET)
- 쿠키 가져오거나 설정하기, 사용자에게 질문 혹은 메시지 보내기
- 클라이언트 데이터 저장하기(localStorage)
브라우저에서 할 수 없는 일
브라우저 보안을 위해 javscript 기능에 제약이 있다.
- 디스크의 파일을 사용할 때 제약이 있음
- 카메라, 마이크 등 디바이스를 사용할 때 명시적 허가가 필요
- 브라우저 내 탭, 창 사이에 대게 서로 정보를 알 수 없음
- but 부모 페이지에서 열린 자식 페이지에 대해서는 예외적으로 알 수 있음(동일 출처 정책 Same Origin Policy)
- 개발중에 CORS(Cross Origin Resource Sharing) 에러가 나거나,
window.opener를 참고하지 못하는 상황들이 있었는데 이러한 이유 때문이었다.
- 타 사이트, 도메인에서 데이터 받아오는 것은 기본적으로 불가능함
- 원격 서버에서 명확히 승인 시 가능
1.2 매뉴얼과 명세서
- 매뉴얼
- Mozilla에서 운영하는 MDN Javscript Reference(함수 구글링 하다보면 자주 나온다.)
- 호환성 표
- 특정 브라우저나 엔진이 사용할 기능 지원하는지 확인할 때 참고
- https://caniuse.com/ 에서 브라우저가 특정 기능 지원하는지 확인 가능
- https://kangax.github.io/compat-table/es6/ 는 javascript 기능 목록, 지원 엔진 확인 가능
1.3 Editor
- Visual Studio Code
- WebStorm
- Atom
- Sublime Text
- Notepad++
- Vim
많은 에디터, IDE가 있는데 나는 Visual Studio Code를 사용중이다. 개인에게 맞는 IDE를 사용하면 된다고 하는데 가장 많이 사용하는 vscode를 쓰는게 무난한 것 같다. 추후 vscode extension 셋팅 내용도 포스팅하겠다.
1.4 개발자 console
Javascript 에러나 로그 정보를 확인하는 부분으로 Chrome과 Firefox가 가장 잘 제공된다.
console뿐만 아니라 Elements, Network 등 Dev tool(개발자 도구)를 전반적으로 잘 사용해야 하는 것 같고 현재도 공부중에 있다.
이후 개발자 도구에 대해서도 더 공부 후 정리해야겠다.
신입 개발자입니다~