분류 전체보기
-
VS code에서 JavaScript 실행하기 : Node.js 및 Code Runner컴퓨터 알아가기/JavaScript 2022. 8. 24. 19:30
자바스크립트를 배우면서 VS code 편집기를 사용하는데 기본적으로 자바스크립트는 웹에서 그 결과를 확인할 수가 있어서 웹이 기반인 HTML과 같이 사용할 수 밖에 없었습니다. 혹은 웹에서 개발자도구(F12)를 통하여 확인할 수 있었는데 VS Code에서도 확인할 수 있게 필요 소프트웨어를 설치하도록 하겠습니다. 이를 위해서는 Node.js를 설치해야 합니다. 구글에서 Node.js를 검색하면 설치할 수 있는 홈페이지로 연결됩니다. 기본적으로 VS code 포함 소프트웨어들은 영어버전으로 다루는게 많은 도움이 됩니다. 1. Node.js 설치 보통 안정적인 LTS (Long Term Support)보다 현재버전을 설치해도 문제는 없더라구요. 다운로드 후 설치합니다. 이후 동의하고 계속 Next를 누르시면..
-
JavaScript 입문 : .filter( ) 및 .map( ) 복습컴퓨터 알아가기/JavaScript 2022. 8. 23. 19:30
자바스크립트에서 많이 사용되는 함수 메소드가 map( ), reduce( ), filter( )라고 합니다. 예제가 나올때 마다 정리하고 기록하고 기억해야 할 메소드라고 보여지네요. 1. filter( ) 메소드 말 그대로 필터링해서 주어진 함수 조건을 만족시키는 새로운 배열을 만들어 내는 메소드라고 보면됩니다. 다른 예를 들어 좀 더 이해하도록 하겠습니다. filter( ) 메소드의 콜백함수의 기본구성은 다음과 같습니다. array.filter( (value, index, array) => {return } ); 같은 형태의 콜백함수를 가지는 함수메소드는 every( ) 메소드가 있습니다. 2. map( ) 메소드 복습 map( ) 메소드는 한번 정리한 적이 있습니다. 다시한번 복습의 개념을 잡은 이유..
-
JavaScript 입문 : .entries( ), .next( ), .every( ), .some( )컴퓨터 알아가기/JavaScript 2022. 8. 22. 19:30
.entries( ) 메소드는 배열에서 index값과 value값을 받고자 할때 많이 사용되는 메소드입니다. 기본 구문부터 보도록 하겠습니다. 1. 배열에서 Index와 Value를 받을때 for... of와 같이 사용하여 배열을 반복할 수 있습니다. 2. .next( ) 메소드와 같이 사용하여 다음으로 이동 단계적으로 값을 찾을때 사용할 수 있습니다. 결국 .entries( ) 메소드는 반복자를 소환하기에 다음 과정을 넘기기 위해서는 .next( ) 메소드와 같이 사용합니다. 3. every( ) 메소드 every( ) 메소드는 배열안의 모든요소가 주어진 판별 함수를 만족하는지 확인하는 메소드로서 Boolean값을 반환합니다. 모든 조건을 만족하면 true가 반환됩니다. ※ every( ) 심화 : 초..
-
JavaScript 입문 : concat( ) 메소드컴퓨터 알아가기/JavaScript 2022. 8. 21. 19:30
자바스크립트 메소드중 cancat( ) 메소드에 대해 알아보도록 하겠습니다. caoncat( ) 메소드는 배열뒤에 배열을 연결시켜 새로운 배열을 만드는 메소드입니다. concat( )은 'concatenate : 연결시키다'라는 단어를 줄인말입니다. 이제 활용예를 보도록 하겠습니다. ▒ 배열 연결 숫자형이 들어있는 두개의 배열을 연결시킵니다. 문자열도 가능합니다. N개 이상의 배열도 붙혀집니다. 4개의 배열을 붙혀보겠습니다. 배열은 언제나 순서를 중요시해야 합니다. 새로운 배열을 만들기때문에 원본에 영향을 미치지 않으며 중복배열도 가능합니다.
-
JavaScript 입문 : 키(key)와 값(value) - 객체와 배열컴퓨터 알아가기/JavaScript 2022. 8. 20. 19:30
자바스크립트 객체에서 key값과 value값을 배열로 나타내는 방법을 공부해봅니다. 우선 다음과 같은 객체가 있다고 보면 key와 value를 각각 배열로 얻도록 하겠습니다. key를 배열로 얻는 방법은 다음과 같습니다. value를 배열로 얻는 방법은 다음과 같습니다. 반복문으로 각 구성하는 값을 얻을 수 있습니다. 배열은 순서를 지키는 점을 명심하기 바랍니다. 배열의 인덱스는 key입니다. 객체 (Object)이기 때문에 문자열로 나타납니다. 다음 배열 예제에서 배열로 key값을 얻어 보겠습니다. keys( ) 메소드는 베열의 각 인덱스를 key값으로 가지는 새로운 Array Iterator { } 객체를 나타냅니다. Array Iterator의 뜻은 배열 반복기라는 뜻으로 인덱스 값을 추출하기 위하..
-
JavaScript 입문 : Array.from( )컴퓨터 알아가기/JavaScript 2022. 8. 20. 19:30
자바스크립트에서 Array.from( ) 메소드는 유사배열객체 (array-like object)나 반복가능한 객체(iterable object)를 from( ) 괄호 안에서 복사해 Array로 반영한 새로운 배열을 만듭니다. 예제를 가지고 이해를 하는편이 빠를듯 합니다. from( )안에 수식을 사용할 수도 있습니다. Array.from( ) 메소드가 배열로 결과값을 내는 원리를 착안하여 배열에서만 사용할 수 있는 메소드 등을 사용할 수 있게합니다. 예를 들어 forEach( ) 메소드 같은 경우입니다. HTML에서 부모와 자식간의 간단한 예인 테이블을 가지고 예를 들어 보겠습니다. 다음과 같은 3 by 3 테이블은 바로 밑에 childrenNode가 입니다. 콘솔에서 보면 다음과 같이 나옵니다. 3개..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 무승부 결과표시 및 전체코드 정리컴퓨터 알아가기/JavaScript 2022. 8. 19. 19:30
이 글은 제로초TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 틱택토 게임의 승부판단에서 마지막으로 무승부에 대한 코딩이 남아 있습니다. 강좌에서 알려준 2가지 방법이 있는데요. 조금 더 생각해 보면 더 있을수 있어서 한가지를 더 추가해 보았습니다. 1. 무승부 표시 위치 무승부 코드가 들어가는 위치는 승부판단 다음에 들어가는게 맞을 듯 하고 승부판단의 함수가 길어 외부로 빼주어서 헷갈릴 수 있는데 잘 생각해 보면 위치를 파악할 수 있을겁니다. 2. 무승부 코딩 ① Case I 이는 9칸이 전부차면 무승부 표시를 한다는 논리입니다. 다음과 같이 나타나겠죠. 이러한 경우 각 칸별로 1을 부여해서 9칸이 차면 합계가 9인 경우를 만들면 됩니다. 다음을 참조하세요. ② Case II 두번째로 생각할 수 있..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 승부 판단 및 결과 표시컴퓨터 알아가기/JavaScript 2022. 8. 18. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지금까지 틱택토 게임에서 기본적인 구성에 대한 부분을 전부 고려하였습니다. 이제는 게임을 진행하면서 승부에 대한 결과를 판단하는 함수를 만들어 줄 예정인데 위치는 addEventListner( ) 메소드 안 클릭이벤트가 진행이 될 때 승부를 판단해야 합니다. 역시 이 함수가 길기때문에 외부로 배치하여 만들어 주는 과정이 좋습니다. 함수 이름은 알맞게 지어서 하면 됩니다. ▒ 승부 판단 승부 판단의 위치는 다음쯤 위치가 될 것 같군요. 승부 판단 함수 decisionWinner ( )를 외부에 지정하도록 하겠습니다. 승부를 판단한다는 이야기는 다음과 같이 생각해야 합니다. ① 반복문을 통하여 각 칸에 있는 위치 지정 이는 forEach문을..