분류 전체보기
-
JavaScript 입문 : JSON.parse( ) 메소드 이해컴퓨터 알아가기/JavaScript 2022. 8. 30. 20:30
자바스크립트를 하면서 심심치 않게 보는 메소드 중 하나인 JSON.parse( ) 메소드에 대해 이해를 하고 가도록 하겠습니다. JSON.parse( ) 메소드는 문자열의 구문을 먼저 분석하고 나서 결과값으로 자바스크립트 값이나 객체를 생성하는 메소드입니다. 예제를 보면서 이해를 하도록 하겠습니다. Parsing이라는 뜻은 각 문장의 문법적인 구성 또는 구문을 분석하는 과정으로 분석후 각 언어에 맞게 구문 분석 트리로 나타내는 과정이라고 합니다. 1. 기본 구조 이해 JSON.parse( ) 메소드 구문에 대해 기본 구조를 보겠습니다. 객체, 배열, Boolean, null 등을 감쌀때는 가장 밖에 작은 따옴표(' ')로 감싸줍니다. 이미 배웠듯이 객체나 배열안에 문자열은 큰 따옴표(" ")입니다. 다음..
-
JavaScript 입문 : JSON.stringify( ) 메소드 이해컴퓨터 알아가기/JavaScript 2022. 8. 30. 19:30
자바스크립트를 공부하면서 낯이 익은 듯 안 익은 듯한 단어가 등장합니다. 바로 JSON인데요. JSON을 본격적으로 공부하기 전에 가금 사용하는 JSON.stringify( ) 메소드에 대해 이해를 하고 가고자 합니다. 1. 정의 JSON.stringify( ) 메소드는 기본적으로 자바스크립트 값이나 객체를 문자열로 변환하는 메소드입니다. 이러한 개념으로 다양한 예제를 보면서 익혀 보도록 하겠습니다. 2. 기본적 예 key값인 변수명을 문자열로 변환하고 함수는 null 문자열로 Boolean값은 그대로 Boolean값을 표현합니다. 3. 함수 예 함수를 사용하여 객체에서 value를 뽑아 문자열로 나타낼 수 있습니다. 같은 예에서 배열로 값을 나타내고자 하면 다음과 같이 활용할 수 있습니다.
-
JavaScript 입문 : JSON이란 도대체 무엇인가? (기본 개념)컴퓨터 알아가기/JavaScript 2022. 8. 29. 19:30
자바스크립트를 알아가면 갈수록 재미 있기도 하지만 괜히 공부를 시작했나 하는 마음도 있습니다. 하나의 학문이란 정말 무궁무진 합니다. 년말에 내가 만들고 싶은 프로젝트가 있는데 이렇게 짬짬이 한다면 과연 이루어 낼 수 있을지도 모르겠습니다. 또한 중간중간 분명히 바쁜일이 생길텐데요... 공부를 하다보니 JSON이라는 단어를 접하게 되었습니다. 해서 이 기회에 기본적인 내용은 정리를 하고 가는게 좋을 듯 해서 정리를 하고자 합니다. 1. JSON이 도대체 무엇인가? JSON은 JavaScript Object Notation의 약자입니다. 쉽게 말해 '자바스크립트 객체 표기법' 정도로 해석이 되네요. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용하는 문자기반의 표준 포맷입니다. 자바스크립트 객체표기..
-
JavaScript 입문: 틱택토 게임 - 컴퓨터와 게임 (무작위 순서 이용)컴퓨터 알아가기/JavaScript 2022. 8. 28. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이차원배열을 일차원배열로 바꿔 코딩을 단순화 했으니 형식적으로라도 사람과 컴퓨터가 게임을 하는듯한 프로그램을 공부해 보고자 합니다. 즉 turn이 사람과 컴퓨터 순으로 바꾸면 될 듯 합니다. 컴퓨터가 turn을 하기 위해서는 순서도상 다음 부분에서 추가를 해주어여 될 듯 합니다. 여기서 확인할 수 있는 것은 지금까지 만든 코딩은 사람이 먼저 'O'를 입력하면 또 다른 사람이 'X'를 입력하는 방식이었습니다. 그 가운데 승부여부와 무승부에 대한 원리를 알아보았구요. 이제는 컴퓨터가 'X'를 입력할 수 있도록 턴을 변경해 주면서 승부판단을 해야 합니다. 1. 컴퓨터 턴 만들기 지난번 만든 것과 같은 컴퓨터의 턴을 이번에도 만들어 보겠습니다...
-
JavaScript 입문: 틱택토 게임 - 코딩 단순화 (이차원배열을 일차원배열로)컴퓨터 알아가기/JavaScript 2022. 8. 27. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 틱택토 게임은 현재까지 정리한 바에 따르면 구성되는 코딩은 완료가 되었고 다른 사이트에서 참조하여 컴퓨터가 turn되는 코딩은 만들어 보았습니다. 코딩에는 왕도가 없어서 일단 프로그램이 돌아가면 성공이라고 보면 되고 얼마나 깔끔하게 정리하느냐가 실력이라고는 합니다만 프로그램이 돌아가기만 하면 기분은 좋네요. 오늘은 기존 코딩(이차원배열)을 일차원배열로 바꾸는 연습과 현 코딩을 가지고 역시 컴퓨터가 무작위로 'X'를 표시하여 마치 게임하는 듯한 모습을 공부하도록 합니다. 1. 이차원 배열을 일차원 배열로 3 by 3 테이블을 만들때 row를 먼저 반복하고 다음 column (cell)을 반복하는 이차원 배열을 다음과 같이 만들어 보았습니다..
-
티스토리 코드 블록(Code Block) 삽입 방법 : Code Highlighting컴퓨터 알아가기/알아두면 편한 팁 2022. 8. 26. 19:30
자바스크립트를 공부하면서 티스토리에 기록을 해 두는데 코드에 대한 전체를 삽입하고 실질적으로 실행되는 내용을 기록을 해보고자 합니다. 이전까지는 코드를 기록할 때 VS Code 화면캡쳐를 통하여 기록하였는데 이는 사진과 같은 기능이라 향후 복사를 하는 등 사용할 경우에는 불편합니다. 따라서 티스토리 코드블럭 기능을 이용하여 기록을 하고자 합니다. 1. 코드입력 (플러그인 활성화) 다음과 같은 간단한 코드를 티스토리에 붙혀 넣고자 합니다. 새로운 글쓰기에서 코드블럭으로 들어가 붙혀넣기 합니다. 삽입후 확인을 합니다. 확인 후 내 에디터에서는 다음과 같이 코드가 색별로 분리되서 이해하기가 쉽게 보입니다. 하지만 이는 내 에디터에서만 보이고 실질적인 블로그에서는 전부 흑백으로 보입니다. 이를 위해서 플러그인의..
-
티스토리 블로그에 코드 실행결과 적용 (Codepen 이용)컴퓨터 알아가기/알아두면 편한 팁 2022. 8. 25. 19:30
이제 티스토리 블로그에 단순한 코드를 붙혀 넣는 것보다 실행 결과도 같이 볼 수 있으면 좋을 듯 합니다. 직접적으로 블로그에 코딩을 하거나 다른 방법을 이용하여 만들어 볼 수는 있지만 손쉽게 할 수 있는 Codepen을 이용하여 간단히 확인할 수 있는 방법이 있어 정리해 보고자 합니다. 우선 코드펜(Codepen)은 워낙 유명한 사이트라 별도로 다루지는 않지만 간단히 말해 클라우드상 다양한 컴퓨터 언어를 지원하여 쉽게 작업하고 저장하고 실행할 수 있으며 좋은 자료들은 공유도 하는 사이트입니다. 기본적인 회원가입이 필요는 하겠죠. 우선 간단한 HTML CSS JavaScript 를 이용해 보고 이 내용을 티스토리 블로그에 삽입하는 방법을 주제로 글을 정리하도록 하겠습니다. 1. 코드펜(Code Pen)에 ..
-
JavaScript 입문 : 컴퓨터와 함께하는 틱택토 게임 (TicTacToe)컴퓨터 알아가기/JavaScript 2022. 8. 25. 19:30
지난시간까지 만들어 본 틱택토 게임은 두사람이 하나의 화면에서 직접 입력하면서 승부를 가리는 방법을 공부해 봤는데요.. 아직 실력은 미천하나 다른 강좌의 도움을 받아 인간과 컴퓨터의 단순 틱택토 게임을 공부해 보았습니다. 관련 과정은 freeCodeCamp.org에서 참조 하였습니다. 결과물은 다음과 같이 나오더군요. 과정은 지난 틱택토에서 많이 이야기를 하였기 때문에 HTML과 CSS 그리고 JS에 필요 내용들을 주석 처리했습니다. 특이한 점은 여러가지 방법으로 9칸에 대한 인덱스 처리를 하고 이차원 배열을 이용하지 않고도 할 수 있는 내용을 볼 수 있었습니다. 1. HTML HTML에서는 자바스크립트에서 메소드로 만들지 않고 직접 3 by 3 테이블을 지정하도록 합니다. 이는 CSS에서 좀 더 틱택토..