개발/Javascript

    [1편] Vanila Javascript 퀴즈게임 만들기
    개발/Javascript

    [1편] Vanila Javascript 퀴즈게임 만들기

    안녕하세요. 제가 Javascript를 공부하면서 제일 좋았던 방법으로 만들면서 습득하기를 첫번째로 퀴즈게임 만들기를 선택해 보았습니다. 해당 프로젝트를 통해서 습득할것들은 typescript, 이벤트 리스너, ES6 Class, Dom Selector, 비동기, Timer, 함수등 자바스크립트의 종합적인 문법들을 사용할꺼같습니다. (typescript 사용여부는 추가 프로젝트 셋팅준비후 수정하도록 하겠습니다) 자바스크립트 퀴즈게임 기능명세 처음화면 Start버튼, 클릭시 시작 Your Time (hh:mm:ss) 형태의 스톱워치 작동 단어가 나오며 해당 단어를 따라서 타이핑친다. 엔터를 치면 정답 제출 틀린 글자가 있다면 input에 validation 붉은색 out-line표시 각 문제를 통과하면 점..

    yarn 명령어 정리
    개발/Javascript

    yarn 명령어 정리

    yarn yarn 은 javascirpt 의 package manager 이다. npm 의 drop-in substitute 로 사용할 수 있는 점이 초기 도입에도 큰 장점이다. 패키지 설치 속도가 더 빠르고, 패키지 설치과정에서 패키지가 code를 running 하지 않도록 하여 더 보안상 안전하다. 또한, 같은 package.json 에 의존하는 두개의 서로 다른 환경이 서로 다른 버전의 패키지 의존성을 가지는 것을 방지하기 위해, 버전의 range 가 아닌, 정확한 버전을 명시한 yarn.lock 파일을 사용한다. 주요 # npm install yarn install 또는 yarn # npm i --save yarn add # npm i --save-dev yarn add --dev : --dev ..

    [기초] 자바스크립트 DOM선택자 정리
    개발/Javascript

    [기초] 자바스크립트 DOM선택자 정리

    Javascript로 현대 모던 자바스크립트 환경에서는 할수 있는것들이 많이 있다. (서버를 만들다던지 데스크탑 앱을 만든다던지 머신러닝을 한다던지 참으로 많다) Dom 조작을 하기위해 Javascript로 Dom을 선택해서 바꿀수있는 Dom Selector에 대해서 정리해보았다 1. getElementById 가장 많이 쓰는 Dom Selector 메소드 인데, HTML의 id 값을 선택하는 선택자 입니다. See the Pen by kimchunyong (@kimchunyong) on CodePen. 2. getElementsByName html tag의 name=""의 name명을 선택하는 선택자입니다. See the Pen by kimchunyong (@kimchunyong) on CodePen...

    모던 자바스크립트는 언제부터일까?
    개발/Javascript

    모던 자바스크립트는 언제부터일까?

    ES6? ES2015? 자바스크립트는 많은 변천사를 겪어왔고, ES6를 거치면서 모던 자바스크립트가 시작되었다. 자바스크립트는 일년에 한번씩 버전을 출시한다. 자바스크립트도 프로그래밍 언어인 만큼 매년 업데이트가 되는 것이다. 여기서 말하는 자바스크립트의 버전을 나타내는 것이 바로 ES+버전 번호 or 연도 인 것이다. 즉 ES2015는 2015년에 나온 자바스크립트 업그레이드 버전을 뜻하며 ES6라고도 한다. ES는 자바스크립트 표준을 이야기하며, 자바스크립트는 이것을 구현한 것이다. 그렇다면 ES6에서는 뭐가 업그레이드 되었나? const, let ES6에서는 기존의 자바스크립트 변수 선언 방식인 var대신, const와 let이라는 새로운 변수 선언 방식을 내놓았다. const, let은 var와 ..

    [기초] javascript 구성요소
    개발/Javascript

    [기초] javascript 구성요소

    모든 프로그래밍언어는 돌아가는 패더라임이 비슷하지만 각 언어의 특징이 있다. 각 나라의 언어를 예로 들면 각 나라의 언어도 그 나라의 문화가 깃들어 있는 특징이 있다. 우선 이 특징들을 알아가기 전에 자바스크립트가 어떻게 구성되어있는지를 알아보면 좋을꺼같다. 1. LEXICAL GRAMMAR CONTROL CHARACTER - 제어문자 WHITE SPACE - 공백문자 LINE TERMINATORS - 개행문자 COMMENTS - 주석 KEYWORD - 예약어 LITERALS - 리터럴 2. LANGUAGE ELEMENT STATEMENTS - 문 공문, 식문, 제어문, 선언문, 단문, 중문 EXPRESSION - 식 값식, 연산식, 호출식 IDENTIFIER - 식별자 기본형, 참조형(변수,상수) a ..

    [기초] javascript Scope
    개발/Javascript

    [기초] javascript Scope

    변수선언 규칙 const를 기본으로 사용한다. 변경이 될 수 있는 변수는 let을 사용한다. var는 사용하지 않는다. let block 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화 할 수도 있다. let 은 var 키워드와는 다르게 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언될수 없다. //var function varTest(){ var x = 1; if(true) { var x = 2; //상위 블록과 같은 변수! console.log(x); //2 } console.log(x); //2 } //let function letTest(){ let x = 1; if(true) { let x = 2; //상위 블록과 다른 변수 console.log(x); //..

    티스토리툴바