코딩정비소 코딩정비소

목표 JS 클래스 추가/삭제를 알아야하는 이유 JS 클래스 추가/삭제 하는 방법 JS 클래스 추가/삭제를 알아야하는 이유 실무에서는 UI 개발자가 UI를 class 형식으로 전달하여 사용하기 때문 특정 상황에 class를 추가, 삭제하여 UI를 변경 해야하기 때문 JS 클래스 추가 - 클래스 추가시에 사용 // 클래스 추가 div.classList.add('good', 'love'); JS 클래스 삭제 - 클래스 삭제시에 사용 // 클래스 삭제 div.classList.remove('love'); JS 클래스 덮어쓰기 - 기존에 있는 클래스를 다지우고 새로 등록시에 사용 // 클래스 덮어쓰기 div.className = 'good'; JS 특정 클래스 변경 - on/off로 클래스 변경시에 많이사용 //..

오늘은 간단한 key event에 대해 이해해보는 시간을 가져보고자 합니다. key event는 지금 제가 타이핑하고 있는 이 순간에도 일어나고 있습니다. ㅎㅎ 즉 타이핑을 할때마다 key event가 발생하게 됩니다. 총 keydown, keyup, keypress 이렇게 총 3개의 이벤트가 발생하게 되는데요. 각각의 이벤트가 언제 발생하는지 알아봅시다. 첫째로 keydwon key + down : keyboard가 down 되었을 때. 즉 키보드가 눌렀을 때 실행되는 이벤트입니다. 둘째로 keypress key + press : key가 press 되었을때, 즉 글자가 눌렀을 때 실행되는 이벤트입니다. keydown이벤트와 동일하게 키보드가 눌렀을때 실행되지만, 큰 차이점이 있습니다. keydown이..

요즘 단순 자바스크립트와 jqeury를 사용하여 개발하던 중 멘토에게 한 소리를 들었다. ES6는 하위 브라우저에서 호환이 되지 않는다. 하위 브라우저에서도 작동하게 끔 해야한다고 했다. 하~ ㅠ 거의 2주동안 ES6로 개발한 내용을 어떻게 바꾸란 말인가? ㅠㅠ 이런 고민속에서 오늘도 nomad coder 강의를 들었다. 오늘은 gulp를 추가하는 작업을 했다. gulp는 sass를 사용할 수 있도록 빌드하여 css로 변경한다. sass에 대해 필요성을 그다지 크게 느끼지 못했지만, gulp는 webpack에 비해 훨씬 이해하기 쉬웠다. 문득 sass를 css로 바꿔주는 gulp를 보다가 최신 js를 구버전 js로 바꿔주지 않을까? 생각을 했다. 내일 한번 회사에서 해봐야지 ㅋㅋ

목표 GraphQL의 정의를 알아본다. GraphQL의 특징을 알아본다. GraphQL과 Rest API를 비교한다. GraphQL 정의? 페이스북에서 만든 API를 위한 쿼리 언어 GraphQL을 왜 쓰는가? 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오기 위함 기존에 사용하는 Rest API 보다 훨씬 빠름 엄청난 호환성 FETCH, AXIOS 사용할 필요가 없음 FLEX 구조의 리덕스를 대체 가능 GraphQL의 특징 GraphQL은 클라이언트에서 데이터를 서버로 효율적으로 가져온다 GraphQL은 클라이언트 시스템에서 작성하고 호출한다. GraphQL은 특정 데이터베이스나 플랫폼에 종속적이지 않다. GraphQL과 Rest API의 차이 Rest API는 다양한 Endpoint 존재, Gr..

목표 display 속성중 하나인 inline 속성에 대해 이해한다. inline속성과 block 속성의 차이를 이해한다. display 속성이란? display는 화면에 보여주다는 의미한다. display 속성은 어떻게 화면에 보여줄지를 결정한다. display 속성중 none은 화면에 보여주지 않는다. display inline 속성이란? display의 속성은 inline, block, none, inline-block 등 여러가지 존재 inline 속성은 display의 default 값 ( display을 지정하지 않으면 inline 값을 가진다. ) inline 속성을 가진 tag로는 , , inline 속성은 줄 속에 넣는 요소. 즉 줄바꿈되지 않는다. 한줄에 여러개가 배치 가능하다. inl..