본문 바로가기

자바스크립트

node.js - 값의 종류와 변수 대입 준비중인 node.js 책자의 일부입니다. 이번 챕터는 쉬운 부분과 어려운 부분이 섞여 있습니다. 학습을 다짐하신 분께는 이해 가능한 부분은 이해하려 노력하시되 어려운 부분은 어느 정도 개념이 쌓여야 되므로 당장 이해가 안되도 추후 필요한 시점에 다시 들여다 보실 것을 권합니다. 방문을 위해 가볍게 오신 분들은 전혀 부담 갖지 마세요 :) 이제 개발자 도구로 자바스크립트를 테스트하는 부분은 충분히 설명드렸으니, 이 후로는 설명을 보고 한번씩 시도해 보시길 바랍니다. 그냥 눈으로 읽으신 것과 직접 타이핑해서 시도해보신 것은 차이가 매우 큽니다. 앞에서 다룬 변수에는 어떤 값을 대입할 수 있을까요? 대표적인 것이 숫자, 문자열, 논리값, 오브젝트, 그리고 배열입니다. 함수를 대입할 수도 있긴 한데 이건 함수.. 더보기
node.js - 여러줄의 코드 입력과 코드 히스토리 자, 다시 실습입니다. 앞의 게시글에서 보셨던 것처럼 여러줄의 연속된 코드라도 개발자 도구에서 테스트 가능합니다. 다만 여러줄을 입력시에는 enter 키 대신 shift+enter 키를 입력해주시면 됩니다. 개발자도구 콘솔에서 let a=1; 입력 후, Enter 키 대신 Shift+Enter 키를 입력해 주세요. (shift 키를 누른 채로 놓지 말고 Enter 키를 누르는 것을 의미합니다 ) 그러면 깜박이는 커서가 아랫줄로 내려가는데요. 아직 이 코드는 실행되지 않은 상태입니다. 그 상태에서 중괄호 기호 { 입력 후 shift + Enter let a=2; 입력 후 shift + Enter 중괄호 기호 닫고 } shift + Enter 마지막으로 console.log(a); Enter 를 입력해주시면.. 더보기
node.js - 04.변수선언 - 실습 이제 개발자 도구를 가지고 몇가지 실습을 해볼텐데요. 바로 바로 결과를 보도록 하겠습니다. F12 키를 눌러 개발자 도구 창을 띄우고 1) 콘솔 탭을 선택, 2) 그리고 그 아래 커서가 깜박이는 입력란을 클릭하세요. 다음으로 아래 내용을 타이핑하시면 됩니다. ( 숫자 8은 안 들어가요! ) let A=12345679; 콘솔창에는 이와 같이 알록달록한 텍스트가 표시될겁니다. 모두 입력하신 다음 Enter 키를 눌러 주세요. 콘솔창에서 Enter 키는 입력한 명령을 실행해!라는 의미입니다. undefined 라고 표시될텐데요 신경쓰지 않으셔도 됩니다. 이제 변수A라는 상자에 12345679 라는 값이 입력되었습니다. 정말로 그런가 확인해볼까요? console.log 라는 명령어로 확인할 수가 있는데요. 아래.. 더보기
node.js - 02. 비장의 기술 개발자 도구! 준비중인 Node.js 책자 일부입니다. node.js 는 자바스크립트로 작동하는 언어라 자바스크립트를 잘 알면 이해가 수월한데요. 자바스크립트를 연습하기 위한 준비물이 그리 거창하지 않습니다. 2가지 방법이 있습니다. 첫째는 크롬 웹브라우저 개발자 도구에서 테스트하는 방법(엣지브라우저도 가능) 둘째는 AWS 서버 터미널 창에서 테스트하는 방법 크롬 웹브라우저에서 테스트하는 방법이 더 이점이 있습니다. 변수값을 직접 보면서 테스트하는 기능이 있거든요. 필자는 크롬브라우저가 더 친숙하기 때문에 크롬브라우저로 진행하겠습니다. 크롬브라우저를 여신 다음 F12키를 눌러 보세요. 그러면 무슨 창이 뜰텐데요. 이걸 개발자 도구라고 부릅니다. 처음에 이 창은 브라우저 하단에 붙어서 나오는데요. 자바스크립트 연습을 위.. 더보기
node.js express | 템플릿쪽지함 #8. 기다려! await! 지난 스토리에서는 mysql2 모듈을 사용할 때 프로미스에 대해서 알아보았는데요. https://itadventure.tistory.com/444 node.js express | #7. mysql2 프로미스 지난 스토리에서 다루었던 쪽지 템플릿에는 MYSQL 이라는 저장하는 부분을 비롯하여 클래스라는 부분까지 여러 요소가 추가되었는데요. node.js의 프로미스라는 특징적 부분까지 다루어야 해서 예 itadventure.tistory.com 프로미스란 일종의 약속 덩어리이기 때문에 콜백(callback) 라는 프로그래밍 개념과는 다른 의미이며 mysql 에서는 보통 아래와 같이 사용된다고 살펴보았습니다. db.query( "SELECT x, y, r, memo FROM memolist" ).then((r.. 더보기
캔버스와 함께하는 자바스크립트, 13번째 시간 - 3D세계의 창조 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 더보기
자바스크립트와 캔버스 12, 테트리스를 만들어봐-Final 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 더보기
자바스크립트와 캔버스 11, 테트리스를 만들어봐-7 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 더보기