전체 글
[ESLint/Prettier] 프로젝트에 EsLint와 Prettier 적용하기
EsLint 코드를 정적분석해서 JS를 실행시키지 않더라도, 안티패턴들(호이스팅 , Closer 등등)을 미리 감지하여 문법적인 "오류"를 수정하는 Linter입니다. 추가적으로 Formatting 기능을 제공합니다. Prettier 프리티어는 코드 컨벤션을 위한 Formatter입니다. 사람들의 코딩하는 스타일이 다 다르기 때문에, 코드의 가독성과 코드간의 통일성을 위해서 적용합니다. * 코드 컨벤션이란 프로그래머들이 코드를 작성할 때, "~~게 작성하자"라고 약속하는겁니다. ESLint & Prettier 설치하기 // ESLint npm i -D eslint // Prettier npm install --save-dev --save-exact prettier Prettier은 Formatter이기 ..
[JS/Basic/배열/Array] 자바스크립트의 배열
자바스크립트에는 "key - value"쌍을 이루는 강력한 객체리터럴이 있습니다. 하지만, 개발을 하다보면 첫 번째, 두 번째, 세 번째 등 "순서"가 중요한 순간이 있습니다. 그리고, 정렬을 위해서도 순서는 중요하게 됩니다. 순서가 있는 데이터들의 집합을 다룰 때, 객체를 이용하면 손해입니다. 왜냐하면, 객체는 순서를 보장하지 않고 순서와 관련된 메서드가 보장되어있지 않습니다. 그리고, 배열은 프로그래밍 언어라면 무조건 갖고있다고 생각해도 무방합니다. 배열 (Array) 배열은 선언방법은 기본적으로 2가지 입니다. new 연산자를 이용하는 방법 대괄호를 이용하는 방법 const arr = []; const arr1 = new Array(); 배열의 접근방법 배열은 "인덱스"를 통해서 , 접근이 가능합니..
[JS/Event/Pattern] 자바스크립트 이벤트 버블링(Event Bubbling)과 이벤트 위임(Event Delegation)
자바스크립트의 이벤트 자바스크립트는 사용자와의 "상호작용"을 이벤트로 정의하여 가지고 있습니다. 대표적으로 "마우스 이벤트" , "키 이벤트", "폼 이벤트", "스크롤 이벤트" 등등 이 있습니다. 대표적인 이벤트들은 아래 예제코드로 간단하게 작성해봤습니다. // 마우스 이벤트 중 ,하나인 클릭 $root.addEventListener("click",() =>{}); // 키보드 이벤트 중 하나인, 키다운 $keyBoard.addEventListener("keydown",()=>{}); //폼 이벤트 중 하나인 submit $loginButton.addEventListener("sumbit",()=>{}); //폼 이벤트 중 하나인 , change $result.addEventListener("chang..
[FE/Webpack/config] Webpack 설정하기
Webpack이 왜 필요한지 알게되었다. Webpack은 수많은 JS,CSS를 Bundling해서 최적화와 변수가 겹치는 문제를 해결해준 친구였다. 그럼 이제, Webpack을 한번 설치해보고, 다뤄보도록하자. Node.js 설치하기 https://nodejs.org/ko/ Google에 Node.js를 검색하고, LTS를 다운로드 받아도되고, 최신버전을 다운로드 받아도된다. 자신의 운영체제에 맞게 Node를 다운로드 받아주자. Webpack은 Node Module로 등록되어 사용되어지기 때문에, Node(구동환경)이 필요하게 된다. Webpack 설치하기 VsCode를 기준으로 설명하겠습니다. 우선, Terminal을 열어주고, 아래의 명령어를 입력해줍니다. npm init -y package.json..
[FE/Web/Module] Webpack이란 무엇일까?
Webpack(웹 팩), FE 공부를 하다보면 한 번은 꼭 듣는 단어이다. 하지만, 웹 팩을 다루어 보거나 실제로 Webpack을 사용해본적은 없고, 필요성을 느끼지도 못했다. 왜그런지 생각을 해보았다. 정확한 개념을 모른다. Webpack을 쓰면 편하다라고 하지만, 왜 편한지 ,왜 써야하는지 모른다. Webpack이 없더라도 충분히 훌륭한 WebApplication을 만들 수 있다. React에서는 친절하게도 Webpack을 create-react-app을하면 자동으로 설정(app.js,index.html...)해준다. Webpack은 한번은 짚고가야하는 과정이기 때문에, 위의 이유들을 하나씩 스스로에게 납득시키며 Webpack에 대해서 스스로 공부를 한번 해보려고 한다. WebPack Bundle y..
[JS/연습/객체/OOP] Text RPG 구현 -3
배틀 페이지화면 구현하기 View(HTML,CSS구현) See the Pen Untitled by Doge (@DogeIsFree) on CodePen. DOM객체 선언 화면 DOM const $adventurePage=document.querySelector("#adventurePage"); 버튼 DOM //buttonTag const $btn_bt_attack = document.querySelector(".ad_attack"); const $btn_bt_heal = document.querySelector(".ad_heal"); const $btn_bt_run = document.querySelector(".ad_run"); Monster DOM //monsterTag const $monster_n..
[JS/연습/객체/OOP] Text RPG 구현 -2
메인 페이지화면 구현하기 View(HTML,CSS)구현 See the Pen TextRPG_view(2) by Doge (@DogeIsFree) on CodePen. DOM 객체선언하기 JS로 HTML을 컨트롤 해야하므로 , 필요한 DOM객체들을 선언해주도록 하자. 화면태그 DOM // ScreenTag (view) const $startPage = document.querySelector("#startpage"); const $mainPage= document.querySelector("#mainpage"); 버튼태그DOM //buttonTag const $btn_adventure = document.querySelector(".adventure"); const $btn_rest = document.q..
[JS/연습/객체/OOP] Text RPG 구현하기 -1
캐릭터 생성화면 구현하기 View(HTML,CSS)구현 See the Pen TextRPG by Doge (@DogeIsFree) on CodePen. 캐릭터 생성과정 구현하기 input으로 받은 정보를 닉네임으로 생성한다. 고민해야할 것 Player의 정보를 어떻게 나타낼까 Player의 정보는 "객체"로 나타내보자. {name,level,hp,maxHp,exp,atk} 6개의 정보를 갖고있는 객체이다. 공격하기, heal하기 2가지 method를 가진다. class Player{ constructor(name){ this.name=name; this.level=1; this.maxHp=500; this.hp=500; this.exp=0; this.atk=50; } attack(target){ targ..