본문 바로가기

Language

 (58)
[ES6]Array Method 오랜만에 배열 메소드를 볼려니 헷갈려서 이번 기회에 확실하게 정리하자 1. push pop shift unshift배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기 2. concat배열의 끝에 여러 요소 추가하여 사본 반환하기(arr는 바뀌지 않음) 3. slice배열 일부 가져오기 첫번째 매개변수는 시작점두번째 매개변수는 끝점 음수는 뒤에서 세고 양수일때 end는 인덱스 전까지음수일때는 start가 인덱스 전까지선택됨4. splice임의의 위치에 요소 추가하거나 제거하기 첫번째 매개변수는 시작점두번째 매개변수는 시작점에서 몇개나 지워나갈지세번째 매개변수부터는 추가해나갈 아이템들4. copyWithin배열 안에서 요소 교체하기 첫번째 매개변수는 복사한 요소를 붙혀넣을 위치두번째는 복사를 시작할 시작..
[Javascript]Map(iterator) 이전부터 map메소드를 사용하긴 했는데, 이런 식으로 어떤 내용을 반복해서 불러오는 방법을 iterator(반복자)라고 하는가 보다. 예시로 위의 코드를 살펴보자 array.map을 하게 되면 function map이 리턴되어진다 맵은 펑션을 받나보다. 다음과 같이 리턴하게 되면 값을 출력하게 되고 함수의 첫번째 파람비터는 array의 모든 값들 인가보다. 자 이를 이용해서 비디오 리액트 리스트를 추가해 보자 import React from "react";import VideoListItem from "./video_list_item"; const VideoList = (props) => { const VideoItems = props.videos.map((video) => { return }) retu..
[Javascript] Modern Javascript Tooling ES6가 어떤 순서로 실행되는지이다. Our project파일에서 ES6로 여러가지의 컴포넌트를 생성하고 그것을 webpack과 babel을 이용하여 ES5(혹은 웹이 이해할 수 있은 문법)로 전환 한 후에 하나의 자바스크립트로 만든다(ex. applicaiton.js) 이것을 index에서 불러오고 실행하는 순서이다.
[JavaScript] JSON(2) 자 그럼 JSON을 왜 사용하는가에 대해서 느껴보자. 위의 코드를 살펴보면 timezones이라는 객체에 행렬을 담았다. 첫번째 값은 Asia/Seoul 두번째 값은 America/New_York 그리고 이 값을 출력하는데 이때 implode메소드를 이용하여 각 행렬 사이에 ,를 추가 시켰다. 결과 적으로 Asia/Seoul,America/New_York가 문자열로 리턴된다. 다음 html코드는time.php를 리턴받는데 if문 이하부터 살펴보면 tzs객체에 xhr에 php가 echo로 출력하는 값을 리턴받는다.그리고 그 값을 split메소드로 ,를 기준으로 행렬로 만든다. 그리고 빈 문자열을 _str에 담고 반복문을 통하여 행렬들을 _str에 하나씩 담고 마지막에 ul태그도 담아서 Aisa/SeoulA..
[JavaScript] JSON(1) JSON(Javascript Object Notation)의 약자로 자바스크립트에서 객체를 만들 때 사용하는 표현식. 다음은 그 예시인데 일단 첫번째 단락은 info라는 자바스크립트 객체를 만드는 것이다. 그런데 이것은 제이슨 객체로 만드는게 적합하지 않다. 그래서 두번째 단락 처럼 저것들을 문자열로 바꾼다. 이때 역슬래쉬들은 단락을 나누는(엔터를 인식)것을 인식하기 위함이다. 이후에 JSON이라는 자바스크립트 객체의 메소드 parese라는 것을 이용하면 자바스크립트 객체 infoobj에 제이슨 형식의 객체로 만들어진다. 이후에 값들을 불러 오거나 할 수 있다. 그리고 맨 마지막 단락의 stringify를 이용하면 객체화 되어있는 문법들이 문자열로 출력이 된다. 이것이 필요한 이유는 ajax와 함께 사용..
[Javascript]Ajax Asynchronous JavaScript and XML 비동기적 자바스크립트 비동기적 - 따로따로 일한다? 웹 페이지에 필요할 때만 로드 되는 부분들을 그냥 두었다가 로드가 필요할 때 불러낼 수 있게 하여 문서를 불러올 때의 부담을 줄여줌. 위의 코드는 사용 예시이다. 변수xhr httprequest객체를 넣고 그 객체를 open메소드를 이용해서 여는데 첫번 째 파라미터는 방식 두번째 파라미터는 여는 대상이다. 이는 각각 form의 method와 action과 같은 역할을 한다. 그러고 나면 onreadystatechange를 이용하여 함수를 열고 readyState === 4(준비를 완료했는가?) 와 xhr.status ===200(성공적으로 수행했는가?, 실패는 404)가 만족하면 xhr객체의 내용..
[Javascript] 마우스 이벤트 이벤트 타입웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.click 클릭했을 때 발생하는 이벤트. dblclick 더블클릭을 했을 때 발생하는 이벤트mousedown 마우스를 누를 때 발생mouseup 마우스버튼을 땔 때 발생mousemove 마우스를 움직일 때mouseover 마우스가 엘리먼트에 진입할 때 발생mouseout 마우스가 엘리먼트에서 빠져나갈 때 발생contextmenu 컨텍스트 메뉴가 실행될 때 발생키보드 조합마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.event.shiftKeyevent.altKeyevent.ctrlKey마우스 포인터 위치마우스 ..
[Javascript]문서 로딩 위 코드의 콘솔 결과값은 NULL이다. 그 이유는 태그가 나오기도 이전에 엘리먼트 값을 얻으려고 하기 때문이다.즉 순서의 문제이다. 이 경우에 보통에는 바디태그 아래 혹은 모든 엘리먼트들이 다 입력 된 후 마지막에 script를 입력하면 된다. 하지만 onload메소드를 이용하면 이 문제를 위치 변경 없이 해결 할 수 있다. 다음과 같이 window객체의 속성인 onload를 이용하여 엘리먼트를 불러 들였다. 다음은 이벤트 리스너 방식 위의 두 예시의 문제점은 onload , load는 모든 HTML문서의 작업이 끝나고 나서야 실행된다는 것인데, 이는 이미지 다운로드와 같은 오래 걸리는 동작까지 기다려야 한다는 점이다. 그럴 때 DOMContentLoaded를 이용하면 쉽게 문제를 해결 할 수 있다. 이..

티스토리툴바