[CSS/JS] 클릭했을때 Keyframe 을 통한 Bounce 효과

See the Pen CSS Keyframe Bounce onClick by velopert (@velopert) on CodePen. 애니메이션 부분은 CSS 로만 구현되었으며, 클릭했을때 애니메이션이 시작하게끔 하는건 JavaScript로 설정되어있다. JavaScript 없이도 클릭 했을때 애니메이션이 시작하게 할 수는 있지만 그렇게 하면 너무 코드가 난잡해지는것같다.…

[React.JS] Tip: Webpack css-loader 를 통하여 .css 파일을 import 하여 사용하기

기본적으로는, React.js 컴포넌트의 스타일을 설정 할 땐, Inline Styles 를 사용합니다. style 을 JavaScript 객체형으로 만들어서 사용하는 것이죠 물론, 이 외의 방법으로는 HTML 파일에서 따로 CSS 를 불러오거나, rendering 부분에 <style> 태그를 삽입하여 className 을 입력하는 방법도 있습니다. 위 방법들은…

[Link] React.JS 와 함께 사용하면 좋은 도구 목록

https://github.com/facebook/react/wiki/Complementary-Tools React.JS 와 함께 사용하면 유용한 도구들의 목록이다. 쓸만한 AJAX 도구들이 axios 외에도 뭐가 있나 알아보다가 찾게 됐다. 디버깅도구, 라우팅도구, UI 컴포넌트, 스타터 킷 등등등 유용한 도구들이 많이 있다 언젠간 나도 쓸만한 도구를 만들어서 저기에 올려야지 😀…

[React.JS] 강좌 11편 Express.js 서버 + 개발 서버 Hot Module Replacement 사용하기

지금까지, React.js 에 대한 기본적인 공부는 어느정도 마쳤습니다. 이제, REST API 를 만들어서 서버와의 통신에 손을 뻗을 차례입니다! 지금까지는 webpack-dev-server 에만 의존해왔습니다. 이걸로는 서버 작업을 전혀 할 수가 없었죠. 이번 강좌에서는 React.js 를 Node.js 환경의 인기있는 웹프레임워크 중 하나인 Express.js…

[Node.js] 12.2 편: GULP – 응용하기 (babel, webpack, nodemon, browser-sync)

이 강좌는 12.1편 강좌와 이어지는 Gulp 강좌 입니다. GULP에 대한 이해가 부족하신 분들은 전 강좌를 읽고와주세요. 오늘 배워 볼 내용은 백엔드와 프론트엔드에서 ES6 를 사용하는 방법, 클라이언트 코드가 수정 됐을 때, 브라우저를 자동으로 새로고침하고, 서버 코드가 수정 됐을 때, 서버를…

[Node.js] 12.1 편: GULP – JavaScript 빌드 자동화툴 알아보기 + ES6 문법으로 사용해보기

이번 강좌에서는 JavaScript 빌드 자동화 툴인 gulp.js 에 대하여 알아보고, ES6 문법으로 gulp.js 를 사용하는 방법을 알아보겠습니다. # 소개 Node.js 환경에서 웹 어플리케이션을 만들다보면, 일일히 수작업으로 하기에 귀찮은 작업들이 존재합니다.. 예를들어서, ____.min.js, ____.min.css 이런 파일, 익숙하신가요? whitespace, newline 과 같이…

[Node.js] TIP: Node.js 와 NPM 최신버전으로 업그레이드 하기

이번 포스트는 기존에 node.js 가 설치 되어있는 상태에서 Node.js 와 NPM 을 최신버전으로 업그레이드 하는 방법에 대한 팁 입니다. 주의: 일부 모듈에선 v6.0.0 을 지원하지 않습니다. # Node.js 업그레이드 다음 절차에 따라서 업데이트를 진행하세요. 현재 NodeJs 버전 확인하기 $ node…

[React.JS] 강좌 10-2편 Redux: 예제를 통해 사용해보기

이번 포스트는 React.js 에서 Redux를 실제로 이용해보는 강좌입니다. Redux에 대한 이해가 부족하신분은 이전 강좌를 참조해주세요. # 프로젝트 시작하기 강좌 2.1편을 참조하여 React.js 프로젝트를 생성하세요. (NPM 을 통하여 환경설정을 하시길 바랍니다) 이 프로젝트에선 webpack.config.js 에서 entry 를 index.js 로 설정하겠습니다. module.exports…