불타는 코딩🔥

ES6가 원활히 돌아가기 위해서 최신 브라우저가 필요하다.

하지만 모두가 최신 브라우저를 쓰지않기때문에 오래된 문법을 작성할 수 밖에 없는데

Babel은 최신 문법을 사용성이 넓은 범위의 문법으로 변환시켜주기 때문에

실험정신이 있는 개발자에게 필수 플러그인이다.

[1] html 코드삽입으로 바벨사용하기

<div id="result"></div>

/* support IE9+ */
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
//babel 을 불러온다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
// babel 실행에 필요한 기능을 불러온다.

<script type="text/babel" data-presets="es2015,stage-2">
// type="text/babel" data=presets="es2015, stage-2"
// babel을 사용할 것이고, es2015를 사용할 것이고, stage-2 는 Babel 플러그인의 안정적인 버전이다.

    const hello = (data) => {
        document.querySelector('#result').innerText = data
    }
    
    hello("hello");
</script>

참고: https://babeljs.io/docs/en/

Object(객체) 다루기

Object(객체) 란 무엇인가?

1. key: value 쌍을 가지는 자료구조입니다.

2. value 에 문자, 숫자, 배열, 객체, 함수를 할당할 수 있습니다.

1. 오브젝트 데이터 생성

const objPersons = {
  persons: [
    {name: "kim", age: 20, gender: "man"}, 
    {name: "vicky", age: 22, gender: "women"},
    {name: "gloria", age: 42, gender: "women"},
    {name: "gom", age: 27, gender: "man"},
  ]
};

Object 안에 Array 가 있고, 그 Array 안에 다시 Object가 배치되어있습니다.

objPersons는 현재 { key: [ {key: value}, {key: value}, {key: value}, {key: value} ] } 이러한 형식과 동일합니다.

2. 오브젝트 데이터 가공하기

const {persons} = objPersons
// ES5: const persons = Object.assign([], objPersons.persons)와 동일
const mapPersons = Object.values(persons).map(v => Object.keys(v).map(v2 => v[v2]))
const filteredPersonsAge = persons.filter( v => v.age > 25 )

작업 순서대로 나열해 보겠습니다.

1. objProject 에서 persons 만 빼와서 블록상수로 참조합니다.

2. persons의 value들을 돌며 key와 일치하는 값들을 mapPersons에 새로운 배열을 반환합니다.

3. persons의 value들을 돌며 일치한 값만 filteredPersonsAge에 새로운 배열을 반환합니다. 

3. 값 확인하기

console.log(persons)
>>> [ 
  { name: 'kim', age: 20, gender: 'man' },
  { name: 'vicky', age: 22, gender: 'women' },
  { name: 'gloria', age: 42, gender: 'women' },
  { name: 'gom', age: 27, gender: 'man' } 
]

console.log(mapPersons)
>>> [
  [ 'kim', 20, 'man' ],
  [ 'vicky', 22, 'women' ],
  [ 'gloria', 42, 'women' ],
  [ 'gom', 27, 'man' ] 
]

console.log(filteredPersonsAge)
>>> [
  { name: 'gloria', age: 42, gender: 'women' },
  { name: 'gom', age: 27, gender: 'man' } 
]

input 과 textArea 바인딩하기

1. jQuery

See the Pen zbOdQd by Choidaeboem (@choidaeboem) on CodePen.

2. javascript

See the Pen jsBinding by Choidaeboem (@choidaeboem) on CodePen.

3. vue (양방향바인딩)

See the Pen vue binding by Choidaeboem (@choidaeboem) on CodePen.

지극히 개인적으로 잊지말자  

쇼핑몰 재직 중 만든 썸네일에 영상띄우기 pc버전

필요한 부분만 구성한 약식 UI로 만들어봤다.

실사용하려면 콘텐츠를 생산해야하니 촬영팀 부담이 크다... 

ps. 영상은 존경하는 김포프님 영상입니다.  

#설명 

1. productNumber에 상품번호, productMedia 에 매치시킬 영상링크 두 가지를 설정한다.

2. 해당 상품번호가 페이지내 상품목록에 있을 경우, [영상보기] 버튼을 노출 시킴.

3. [영상보기] 버튼 클릭 시 모달창과 영상이 띄어진다.

4. 띄어진 모달창엔 클릭한 상품의 상품명, 상품링크가 새겨진다.

5. [닫기] 혹은 모달창 외부를 클릭할 경우 닫힌다.

끝

#ex

상품번호가 127464 일 경우, https://www.youtube.com/embed/6eSyE9cXQ-U 영상이 출력된다.

productInfo = [

    {

        "productNumber": "127464",

        "productMedia": "https://www.youtube.com/embed/6eSyE9cXQ-U"

        }, {

        "productNumber": "127434",

        "productMedia": "https://www.youtube.com/embed/YrweCYauK6o"

        }

          ];

[ 0.5× ] 보기로 확인하시면 편리합니다.

펄스처럼 파형을 가진 것 같은 시선강탈 버튼입니다.

CSS3의 강력함과 표현력이 빛을 발휘합니다.

hover시엔 pulse를 멈추고 out시엔 pulse가 실행됩니다.

200px 밑으로 내려가면 보입니다!

ps.구 브라우저에선 펄스가 안보이니 당황하지마세요.

See the Pen pulse 파형 버튼만들기 by Choidaeboem (@choidaeboem) on CodePen.

DOMSubtreeModified

많은 브라우저에서 사용 중지되었으며, 무한루프를 유발할 수 있습니다.

따라서 반드시 이벤트 제어가 가능한 상태에서 호환성을 위해서만 사용되어야합니다. 

셀럭터의 하위 오브젝트 변화를 감지합니다.

만약 변화가 있는 곳에 DOMSubtreeModified 를 사용했다면, 무한루프를 유발하여

브라우저가 교착상태가 일어나는 큰 위험이 있으니 주의하시길 바랍니다.

jQuery 라이브러리를 이용하여, 

jQuery(selector).one('DOMSubtreeModified ', function(){}) 을 써보는 것이 바람직하다고 생각합니다. 

See the Pen DOMSubtreeModified by Choidaeboem (@choidaeboem) on CodePen.

JSON은 데이터 보관형식 중 한 방법으로

간단하지만 엄격한 구조를 가지고 있습니다.

본인이 읽고, 이해하기 쉽도록 편집해보았습니다.

IE 브라우저는 멍청한건지 엄격한건지 모르겠지만, 심심한 오류를 안내고,

모든 브라우저에서 json 오류를 없애려면 하단의 필수사항을 참고하는 것이 좋습니다.

[1] 필수사항

1. 문자열은 쌍따옴표로 감쌀 것 {"key":"value"}

2. 숫자열는 쌍따옴표 없이 기입

[2] 오류의 근원들

1.  ; <- 세미콜론

2.  , <- 쉼표 

3.  ' <- 작은 따옴표

[3] 사례

1. dataType 을 json 설정하고 실행 후 readySatus: 4 와 Status code: 200ok 를 리턴받고, ajax는 실패로 뜨는 경우

2. dataType 을 text 설정하고 실행 후 readySatus: 4 와 Status code: 200ok 를 리턴받고, 성공으로 했으나 response가 문자열이므로, 데이터로 쓰질 못함

JSON 데이터구조의 정확한 문서 → https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON 유효성 검사 → https://jsonlint.com/

See the Pen json 구조 by Choidaeboem (@choidaeboem) on CodePen.

직접 만들어본 스크롤 네비게이션

다음엔 퓨어 자바스크립트로 해야겠다.

See the Pen GPYGRO by Choidaeboem (@choidaeboem) on CodePen.