자바스크립트
[TIL] JS 제이쿼리 기본 문법
✍ Today I Learned 제이쿼리(jQuery)란? 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다. “write less, do more!” 자바스크립트의 코드를 간결하게 표현할 수 있어 굉장히 많이 사용되던 라이브러리지만 수행 속도 등의 문제로 현재는 걷어내는 추세이다. 제이쿼리를 적용하는 방법에는 2가지이다. CDN(Content Delivery Network)을 이용하는 방법 직접 다운받는 방법 Production version - 압축되어 있는 웹사이트용 Development version - 테스트 및 개발용 Slim version - 가볍지만 ajax 기능 없음 주로 head 태그 안쪽에 작성하거나, body 태그 안쪽 script..
[TIL] JS 숫자 야구 게임 with 서버
✍ Today I Learned 브라우저에서만 저장되던 숫자 야구 게임을 fetch 함수로 비동기 서버 통신을 이용해 데이터베이스에 저장해보았다. 이전에는 Map 객체를 이용하여 유저의 데이터를 저장하였는데 접근성을 생각하며 Array + Object 조합으로 변경하였다. 서버에 전달할 유저의 객체 데이터는 다음과 같이 가공하였다. userObj = { name: 닉네임, description: 등급, price: 기록, category_id: 시도횟수, created: 게임종료시간 }; 닉네임은 게임 시작 전 사용자에게 입력받는다. 등급은 시도 횟수를 기준으로 1회 - S등급, 2~3회 - A등급, 4~5회 - B등급, 6~7회 C등급, 이후는 D등급으로 나누었다. 기록을 받는 price의 타입이 in..
[TIL] JS fetch 비동기 통신을 이용한 CRUD
✍ Today I Learned [Read] 서버와 통신하여 가져오는 데이터의 개수를 알 수 없기 때문에 html의 item card를 미리 만들어 놓는 것이 아니라 1개의 card를 데이터 개수만큼 찍어내야 한다. 대략적인 흐름 [클라이언트가 서버에 데이터 요청 -> 서버가 데이터베이스에서 요청된 데이터를 받아옴 -> 그걸 string으로 클라이언트에게 보냄 -> 프론트에서 데이터의 개수만큼 html을 생성 -> 화면단에 출력] button 타입이 submit 일 경우 자동으로 페이지 이동이 되기 때문에 preventDefault() 메서드를 이용해 기본 속성을 막아주어야 한다. [Read - Detail] 비표준 속성(Non-Standard Attribute)이란? html 태그의 속성이 제한적이므로..
[TIL] JS 콜백, 비동기, Promise, fetch, 서버 세팅
✍ Today I Learned 콜백 함수(Callback function)란? 다른 함수에 인수로 전달되는 함수이다. 콜백 함수는 다른 함수가 완료된 이후에 실행된다. (이때 괄호는 사용하지 않는다.) 외부 리소스를 로드하는 함수를 생성하면 완전히 로드되기 전까지는 그 콘텐츠를 사용할 수 없다. 이럴 때 콜백 함수를 사용한다. Promise 객체란? 실행에 시간이 걸리는 코드와 결과를 기다려야 하는 코드를 연결해주는 객체이다. 데이터 통신에 사용된다. let myPromise = new Promise(function(myResolve, myReject) { // "Producing Code" (May take some time) myResolve(); // when successful myReject(..
[TIL] JS DOM 이벤트, 이벤트 리스너, 노드, Easy PHP
✍ Today I Learned [Travel] 다시 만들어보기 이벤트가 발생하는 대상과, 바뀌어야 하는 대상, 이벤트 시점을 잘 생각하자. 변경해야 하는 css가 많은 경우 미리 class를 만들어 놓고 상황에 맞게 add(), remove() 메서드를 사용한다. 뭔가 찝찝하다 싶으면 항상 더 좋은 코드가 무엇인지 고민하기. HTMLCollection은 forEach() 메서드를 지원하지 않기 때문에 getElementByClassName()으로 불러온 값은 forEach() 메서드를 사용할 수 없다. (querySelectorAll()은 가능) [로그인 유효성 검사] onkeydown - 버튼이 눌렸을 때(input 요소에 글씨가 나타나기 전) onkeyup - 버튼이 올라왔을 때(input 요소에 ..
[TIL] JS HTML DOM
✍ Today I Learned DOM(Document Object Model)이란? XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. W3C 표준 객체모델이고, 다음과 같은 계층구조로 표현된다. W3C DOM 표준은 3가지 모델로 구분된다 1) Core DOM 2) HTML DOM 3) XML DOM 자바스크립트는 Document 객체를 이용하여 HTML, CSS 대부분의 요소에 접근, 변경할 수 있다. document.getElementById("id")는 무엇을 return 하는가? 주소 값, 엘리먼트, 객체, 태그 (전부 비슷한 의미) getElementById - 단일 Element를 return / getElementsByTagName - 복수 Elements를 return(HT..
[TIL] JS 함수, 클로저, call(), apply(), bind(), 구조분해할당
✍ Today I Learned [함수 Functions] 익명 함수란? 말 그대로 이름이 없는 함수. 예를 들면 함수 표현식에서 사용되는 함수는 변수를 통해 호출하기 때문에 함수 이름이 필요하지 않다. const x = function (a, b) {return a * b}; let z = x(4, 3); 함수를 만들어내는 자바스크립트 내장 함수 Function() 생성자를 사용하여 함수를 만들 수도 있다. 그러나 위의 익명 함수 코드와 동일하게 작동하기 때문에 굳이 사용할 필요는 없다. const myFunction = new Function("a", "b", "return a * b"); let x = myFunction(4, 3); 자바스크립트는 초기화가 아닌 선언만 호이스팅 되기 때문에 변수 선..
[JavaScript] 자바스크립트의 클래스(Class)
클래스란? 클래스(Class)란 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. ES6에 도입되었으며, JavaScript 객체용 템플릿이라고 볼 수 있다. 클래스 생성 class ClassName { constructor() { ... } } class 키워드를 사용한다. 생성자 메서드 constructor()를 사용한다. name과 year 속성을 가진 'Car'라는 클래스를 만들어보자. class Car { constructor(name, year) { this.name = name; this.year = year; } } // 객체 생성 let myCar1 = new Car("Ford",..