1. 디버깅 콘솔 콘솔이란 무엇인가? 콘솔은 제어판 또는 계기판이다. 음악에 있어 믹싱 작업을 할 때, 콘솔로 조정을 한다. (미스트 트롯 할 때 뒤에서 믹싱하는 팀들을 보면 콘솔을 열심히 만지며 보컬의 목소리와 음향과 효과를 조절한다) 눈에 보이는 계기판(제어판)이 있어야 조정하기가 쉽기 때문이다 웹에서도 마찬가지다. 디버깅이란, 코딩 작업을 하는 중, 혹은 끝낸 후, 버그를 잡아내는 작업을 말하는데, 눈으로 봐야 잡아낼 수 있다. 벌레를 잡아내기 위한 코드 계기판이 콘솔인 것이다. 왜 벌레를 잡아내는가? 왜 프로그램에 문제아를 벌레(버그)라고 부르는가? 옛날에 컴퓨터 속 작은 부속판 틈 사이에 벌레가 많이 생겼고, 벌레가 많이 나왔기 때문이다. 그러므로 디버깅이란 벌레(코딩 오류) 잡는 과정이고 디버..

자바스크립트 객체 자바스크립트에서 객체란 '값 또는 기능을 가지고 있는 데이터'를 말한다. 웹에서 최초의 객체는 웹브라우저이다. 자바스크립트는 웹브라우저에게 의사 전달을 하는 언어이다. 웹브라우저에게 의사 전달(명령)을 하기 위해 자바스크립트는 다양한 객체들을 제공한다. 그것의 대표적인 것은 window라는 객체이다. 자바스크립트에서 window는 웹브라우저에 접근할 수 있게 해 준다. '값이나 기능을 보유하고 있는 데이터'가 객체이며 값이나 기능을 사용하기 위해서는 객체 뒤에 점을 찍어서 사용한다. 객체.데이터 객체가 보유하고 있는 데이터를 사용 가능(숫자 ,문자 등 다양한 데이터) 객체.기능() 객체의 기능을 사용할 수 있다(괄호가 있어야 한다) 객체의 기능 alert: (괄호) 안에 따옴표를 쓰고 ..

1. 시작 페이지 아래 화면은 시작 시 열린다. 안 열리면 아래 그림의 '시작시 시작페이지 표시'에 체크하면 시작시 아래 화면이 뜬다. 이 화면을 이용하여 새 파일, 최근 항목 등 빠른 실행이 가능하다. 2. 활동 표시줄(Activity Bar) 1. 탐색기(익스플로러): 단축키는 ctrl+shift+E 2. 검색: 단축키는 ctrl+shift+F 3. 소스 제어: 단축키는 ctrl+shift+G : 추후 버전 컨트롤 4. 실행 및 디버그: 단축키는 ctrl+shift+D : 문제 찾기, 코드 디버깅에 사용 5. 확장프로그램(Exetention): 단축키는 ctrl+shift+X : 추가 기능 설치 3. 설정 명령 팔레트: ctrl+ shift+P (맥은 cmd+shift+P): 비주얼 스튜디오 코드에서..

1. 자바스크립트의 역할 자바스크립트는 브라우저 화면에 랜더링 된 웹 콘텐츠를 조작하는 역할을 한다. 렌더링 된 페이지에 어떤 동작을 추가한다. html이 웹 페이지에 표시될 웹 콘텐츠들을 정의하는 역할을 하고, css가 콘텐츠들의 크기나 색상, 레이아웃 등을 정의한다면, 자바스크립트는 웹사이트의 동작과 상호작용을 정의한다. 동작에는 움직이는 시계나 이미지 슬라이더 등이 있고, 사용자가 버튼을 누르면 반응을 한다거나, 마우스를 올리면 메뉴가 펼쳐진다거나 하는 상호작용이 있다. 자바스크립트는 프로그래밍 언어이며, 여러 기능이 있지만 주로 웹 개발을 위해서 사용되는 언어이다. 1. HTML: 웹 페이지의 내용을 구조화 2. CSS: 웹 페이지의 레이아웃을 스타일화 3. JavaScript: 웹 페이지의 동작..

자바스크립트에서 스크립트 태그 추가 4가지 방법 가장 효율적인 방법은 무엇인가? 스크립트 태그를 head 안에 사용하는 것은 좋은 방법이 아니다. 그래서 쓰는 방법이 body 닫는 태그 위에 사용하는데 역시 단점이 있다. async 속성과 defer 속성을 사용하는 방법도 있다. 결론은 어떤 방법이 가장 좋을까 목차 스크립트를 head에 포함하는 방법 스크립트를 body에 포함하는 방법 async 속성 defer 속성 결론 1. 스크립트를 head에 포함하는 방법 사용자가 html 파일을 다운로드할 때 브라우저는 한 줄 한 줄 분석(parse)한다 그렇게 분석한 것을 css와 병합해서 돔 요소로 변환한다. html을 분석하는 과정에서 스크립트 태그를 만나게 되면 html 분석하는 것을 멈추고 js파일(s..

비주얼 스튜디오 코드(Visual Studio Code) 설치 및 사용 방법 목차 Visual Studio Code(비주얼 스튜디오) 코드 설치 방법 비주얼 스튜디오 코드 인터페이스 비주얼 스튜디오 코드 확장 프로그램 설치 Visual Studio Code 사용 방법 1. 비주얼 스튜디오 코드 설치 방법 비주얼 스튜디오 코드는 무료 코드 편집기이다. windows , MacOS, Linux 모두 지원된다. 1) 비주얼 스튜디오 코드(Visual Studio Code) 접속 및 다운로드 비주얼 스튜디오 코드, Visual Studio Code 공식 홈페이지(이곳)에서 다운로드하면 된다. 아래 그림처럼 윈도우의 경우 Download for Windows를 선택한다. 두 번째 그림처럼 MacOS, Linux도..

Node.js 설치, Node.js 다운로드 및 설치 방법 1. Node.js 사이트(https://nodejs.org/)에 접속한다. 2. Node.js 설치 2-1. 윈도우의 경우 LTS, 64bit를 선택한다.(혹은 선택의 자유) LTS 버전에는 '안정적, 신뢰도 높음'(stable and reliable)이라고 적혀 있다. 현재(Current) 버전에서는 '최신 기능'(Latest Features)이라고 적혀 있다. LTS 버전은 Long Term Support의 약자이다. 긴 기간 지원이 가능하다는 말이며, '지원'이란, 패치를 의미하며 '기간'은 2년이다. 현재 버전은 개발이 진행 중인 버전이다. 해당 버전의 기능이 개선되거나 변경될 가능성이 있는 버전이다. 두 버전 중 선택은 자유이다. 2-..

크롬을 계산기로 사용하기 책상 위에 계산기를 놔 둘 이유가 없다. 계산기를 가져 다닐 필요가 없다. 크롬 창에서 자바 스크립트 문법을 활용하여 계산하는 방법. 매우 쉬움 주의. 10+2를 계산하는 방법 먼저 구글 크롬 브라우저에서 F12를 눌러 콘솔 창을 연다 아래 그림 1의 콘솔이 선택된 상태에서 아래 줄처럼 입력 alert(10+2); (위 마지막 기호는 콜론이 아닌 세미콜론임) 위 입력 후 엔터 키를 친다. 그러면 아래와 같이 경고창이 뜨면서 결과 값이 나온다. +- 는 더하기, 빼기 *는 곱하기(중요: 프로그래밍에서 곱하기는 ×가 아니라 *를 쓴다) 나누기를 할 때는 /(슬래쉬, slash)를 사용한다. (키보드의 오른쪽 shift 키 왼쪽에 위치) 자바스크립트에서는 사칙연산보다 더 나아가 매우 ..

1. 웹페이지를 만드는데 꼭 필요한 3요소 HTM CSS JavaScript 2. 이 셋의 공통점과 차이점 (1) 위 3가지의 공통점 : 언어(Language) 대화의 당사자 = 인간 : 컴퓨터 (그래서, Code이기도 하다 - 정치인이든, 스파이든 지들끼리 숙덕거리는 부호= code) (이 code를 끄적거리는 일이 =cording) (2) 위 3가지의 차이점: 서로 문법이 다르다. 역할이 다르다 3. 각각의 역할 1) HTML 웹사이트의 뼈대이다. 즉, 웹 페이지의 구조를 담당한다. HTML은 제목과 문단을 만들고 이미지와 링크와 목록과 테이블을 만든다. 인라인 태그로 콘텐츠에 장식을 줄 수 있지만 가급적 스타일은 CSS에 외주를 주는 것이 현명하다. 왜냐하면 인라인으로 장식을 하다 보면 뼈대보다도 ..