본문 바로가기

자바스크립트46

바빌론JS - 땅위에 집 만들기 ( 자바스크립트로 ) 오늘은 공식 튜토리얼의 집 짓기(영문)편을 크레이가 소화한 내용을 재구성한 집 만들기편을 진행하겠습니다.비주얼 스튜디오 코드로 진행할텐데요. 지난 게시글의 아래 코드를 참조해 주세요.지난 게시글 : https://itadventure.tistory.com/686 바빌론JS 를 vscode 에서 쉽게 - 코드스니펫 목록비주얼 스튜디오에서 바빌론JS의 플레이 그라운드처럼 코드 자동 완성 기능이 있으면 좋을텐데..생각해 보셨나요? 있더라구요 :)바빌론JS 코드 익스텐션 설치비주얼 스튜디오의 extension 확장 프itadventure.tistory.com가상공간에 그림같은 집을 짓고 거기서 걱정없이 살 수 있다면 좋겠지만,세상은 그렇게 우리를 여유롭게 내버려 두지는 않지요 :)그냥 상상의 나래를 펼쳐 잠깐 .. 2024. 7. 13.
크레이의 IT탐구 개발글 링크 모음 이 게시글은 크레이가 취미로 다루었던 개발 관련 게시글 링크 모음입니다. ( 참고로 크레이 전문 분야는 PHP / DB 백앤드 파트입니다. ) 필요하신 분들에게도 도움이 되시길, 크레이도 참고하려 정리하였습니다. 글이 여기 저기 분산되어 찾아 보기 어려워 틈틈히 게시글들을 한군데 정리하기로 하였습니다! Node.js, 자바스크립트와 캔버스, 가상세계 산사VR(세컨드라이프2), 코드이그나이터4, 라라벨프레임워크 도전기, 네이버API 연동, 유니티3D 게시글이 정리되어 있습니다. # PHP8, 윈도우에서 해보기 리눅스가 낮설어 가까이 하기 어려운 PHP 인가요? 내 컴퓨터 윈도우에서 PHP8을 작동해 보세요. 윈도우에 PHP 8 설치 + MYSQL 연결 예제 ( APM 설치 - 2023. 9. 1기준) ht.. 2023. 1. 28.
철창속에 갇힌 가여운 고양이의 운명은? ( 자바스크립트 캔버스 ) 화면 아무 곳이나 클릭해 주세요. 좀 더 기능을 붙여서 소스 공개 예정입니다 :) HTML 삽입 미리보기할 수 없는 소스 아무것도 안보이시면 여쪽으로 => http://dreamplan7.cafe24.com/canvas7/canvas3.htm 방문해주시는 모든 분들께 늘 감사드립니다. 재미있으셨다면 공감 한방, 댓글은 굿잡! 감사합니다~ 2022. 3. 31.
강아지는 어딜 보는 걸까요? ( 자바스크립트 캔바스 ) 시작 후 화면 아무 곳이나 클릭해 주세요 :) 이 스크립트도 공개 예정입니다~ HTML 삽입 미리보기할 수 없는 소스 아무것도 안보이시면 여쪽으로 => http://dreamplan7.cafe24.com/canvas7/canvas2.htm 방문해주시는 모든 분들께 늘 감사드립니다. 재미있으셨다면 공감 한방, 댓글은 굿잡! 감사합니다~ 2022. 3. 30.
node.js/자바스크립트 - 21. 클래스(Class) 클래스(class)는 자바(Java), C++. C# 등 객체지향형 프로그래밍 언어에서 사용되는 방식입니다. 자바스크립트도 클래스 사용이 가능한데요. 정통 클래스에는 미치지 못하나 클래스를 표방한 개념을 사용하는 사례가 많습니다. ( node.js, react 프레임워크 등 ) 클래스란 무엇일까요?개념은 간단합니다. 설계도입니다. 하지만 능숙히 사용하려면 어느정도 숙련된 기술을 필요로 합니다. 예를 들어 컴퓨터를 만들 수 있는 설계도가 있다고 칩시다. 이 설계도가 바로 클래스입니다. 그리고 설계도를 이용해 만들어낸 컴퓨터는 오브젝트가 됩니다. 컴퓨터의 설계도는 1개지만 그로 인해 컴퓨터 오브젝트는 무한으로 만들어낼 수 있습니다. 클래스는 2단계로 나뉘어 선언을 하는데요. 첫번째는 설계도에 해당하는 클래스.. 2022. 2. 15.
node.js/자바스크립트 - 20. 디스(THIS)? '이것'? 오브젝트의 this 오브젝트 변수에는 편리한 내장변수가 this가 있습니다. this 내장변수 활용법을 알아보겠습니다. 오브젝트 변수를 앞으로 오브젝트라고 지칭하겠습니다. 오브젝트 내에 선언된 함수는 오브젝트 자신을 가리키기 위해 this 라는 내장변수를 사용할 수 있습니다. 만약 달러를 한화로 환전해서 계산해주는 환율 오브젝트를 하나 만들어보겠습니다. 환율 오브젝트는 환율을 나타내는 exchange 속성과 달러를 원화로 바꿔주는 함수 doller2won(), 그리고 원화를 달러로 바꿔주는 함수 won2doller() 으로 구성됩니다. 환율은 1달러가 1,200원 이라고 가정합니다. 기능을 제외한 코드를 살펴보면 아래와 같습니다. let ex={ exchange: 1200, doller2won(dollor){ }, won2.. 2022. 2. 14.
node.js/자바스크립트 - 19. 오브젝트 속성에 함수를 넣는다고? 7장에서 오브젝트 변수는 중괄호 기호로 데이터를 묶어 여러 값을 대입할 수 있다고 다룬 바가 있었는데요. 아래와 같이 정의할 경우, let objA={ title: "고요의 하늘", author: 'Newflex', episode: 8, playing: true }; 변수objA 에 들어 있는 title 의 값을 사용하려면 아래와 같이 써야 한다고 살펴보았습니다. objA.title 오브젝트에는 다양한 종류의 변수를 담을 수 있습니다. 정수, 문자열, 참/거짓에 해당하는 논리값, 오브젝트 안에 오브젝트도 담을 수 있고 배열도 담을 수 있었지요. 더 나아가 오브젝트 내에는 함수도 담을 수 있습니다. 먼저 아래 코드를 보실까요?total 이라는 키 값에 함수 1개를 통째로 넣었습니다. let objA={ t.. 2022. 2. 13.
node.js/자바스크립트 - 18. 명령어를 만들어 볼까요? 함수 정의하기 자바스크립트에서는 함수(function) 기능으로 직접 명령어를 만들어 쓸 수 있는데요. 함수란 마치 초등학교 산수 시간의 X값을 넣어 Y라는 결과를 얻는 요술상자와 같습니다. 아래 요술상자는 X에 10을 넣으면 5가 나오고, X에 32를 넣으면 16이 나오지요. 1부터 100까지 더하는 코드를 앞장에서 잠시 살펴봤었는데요. 만약 total 이라는 함수가 있어서 아래와 같이 합계를 쉽게 구할 수 있다면 어떨까요? 매우 편리하지 않을까요? let sum = total(1, 100); // 1부터 100까지 더해서 변수 sum 에 대입해! 게다가 1부터 1000을 더하든, 1부터 10000을 더하든 쉽게 사용할 수가 있습니다. let sum2 = total(1, 1000); let sum3 = total(1.. 2022. 2. 12.
node.js/자바스크립트 - 17. 이런 케이스는 이렇게 해! while 문의 진보 형태로 for 문이 있듯이, if문의 진보 형태로 switch ~ case 문이 있습니다. switch – case 문의 사용 형태를 정리하면 아래와 같은데요. switch(변수) { case "값1": 값1에 매칭될 때 실행할 코드; break; case "값2": 값1에 매칭될 때 실행할 코드; break; : : default: 앞에서 모든 값에 매칭이 안될 경우 실행할 코드 } 아래 알고리즘을 통해 예제를 살펴보겠습니다. 1) 사용자에게 아래 문구를 보여주며 변수choice값를 입력 받습니다. “좋아하는 언어는? 1)Node.js, 2)C++, 3)PHP, 4)파이썬” 2) 변수choice값에 따라 아래 내용을 출력합니다. “1” : "Node.js! 훌륭한 선택!" “2” .. 2022. 2. 11.
node.js/ 자바스크립트 - 16. 반복문 FOR 앞장의 WHILE 문으로 1~100까지 합을 구하는 코드를 살펴보도록 할까요? 코딩을 처음 접하신다면, 아래와 같은 말로 표현된 알고리즘을 생각하시면 좋습니다. 1) 변수sum ← 0 대입 2) 변수 i ← 1 대입 3) i값이 100 을 초과했다면 7)번으로 간다 4) 변수sum 에 변수i값을 더해준다 5) i값을 1을 더해준다 6) 3)번으로 간다 7) 변수sum 을 출력한다. 위 내용을 코드로 옮기면 아래와 같은데요. let sum=0; // 1) let i=1; // 2) while(i 2022. 2. 10.
node.js/자바스크립트 - 15. 반복문 while 돌고 도는 것은 인생인가요? 노우노우! 돈이라고 합니다 :) 알파고라는 인공지능이 바둑분야에서 인간의 최고실력자를 이겨낸 지도 몇 년이 지났지요. 지금은 너무나 초고수가 되어 사람으로서는 도저히 이길 수 없는 존재가 되었다고 합니다. 인공지능이 그렇게 된 것은 반복학습의 힘이 큰데요. 사람이 일생동안 과연 몇 대국이나 둘 수 있을까요? 알파고는 무한대국, 무한복기, 마치 몇만년동안의 학습과 같은 효과로 인해 그렇게 된 것이 아닐까 생각됩니다. 인공지능과는 이야기가 다르지만 자바스크립트에도 반복이 있습니다. 어떤 일을 100번을 반복할 수도 있고, 1000번, 10000번을 반복할 수도 있지요. 또한 무한 반복할 수도 있습니다. 컴퓨터는 단순 반복 노동에 쉽게 지치지 않기 때문이지요. 자바스크립트에는 wh.. 2022. 2. 9.
node.js/자바스크립트. 14 조건문 3형식 조건문 3형식 : if(조건식1){ … } else if(조건식2) {…} else … 컴퓨터가 조건식을 연속으로 판단해 조건에 맞는 코드블럭을 실행합니다. 예시) career=5; if(career>=8){ console.log("고급기술자"); } else if(career>=5){ console.log("중급기술자"); } else { console.log("초급기술자"); } 기술자 제도가 폐지되었다가 언제인가 다시 제정되었습니다. 기술자 제도는 자격증, 학력, 경력에 따라 기술자 등급을 매기는 제도인데요. 과거에는 초급, 중급, 고급, 특급, 기술사 5단계였으나, 개정된 등급은 초급, 중급, 고급, 특급 4단계입니다. 자세한 정보는 아래 페이지를 참조해 주세요. ( 2022. 2. 5 기준 ) .. 2022. 2. 9.

티스토리툴바