Dev.log | VELOPERT.LOG

React.js Codelab 2016 – 진행을 위한 사전 작업환경 설정하기

2016년 7월 13일2016년 8월 23일 velopert8 Comments

React.js 코드랩 세션을 시작하시기전에 설치해야 할 것들은 4 가지가 있습니다. GIT NPM / NODE MONGODB EDITOR (Atom, Bracket, Sublime, Editplus, Vim …) 위 프로그램들을 설치하는 방법을 알아보도록 하겠습니다. 1. GIT 개발자라면 한번쯤은 들어봤을 Git 은 버전관리 시스템입니다. 다운로드: …

[React.js] Tip: string 형태의 html을 렌더링하기, newline(\n) 을 BR 태그로 변환하기

2016년 7월 4일2016년 7월 4일 velopert8 Comments

React 매뉴얼의 “Dangerously Set innerHTML” 페이지에 따르면, React에서는 cross-site scripting (XSS) 공격을 막기 위하여, 렌더링 메소드 내부에서 html 태그가 담겨있는 string 형태를 렌더링하면, 태그가 안 먹히고 문자열 그대로 렌더링되게 됩니다: See the Pen React.js CodeLab by velopert (@velopert) on CodePen.…

[JS] JQuery 를 사용한 무한 스크롤 (Infinite Scroll) 예제

2016년 7월 4일2016년 7월 5일 velopert3 Comments

Link: CodePen 생각보다 많이 간단하다 var page = 1; $(window).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()) { console.log(++page); $("#enters").append("<h1>Page " + page + "</h1> So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~ So MANY BRS YEAHHH~"); } }); 이런식으로 윈도우의 스크롤을 감지해서 맨 아래에 닿는다면 html 을 append 하는 방식이다. 만약…

Sass 강좌 – 한 눈에 보기

2016년 6월 6일2017년 7월 29일 velopert18 Comments

이전부터 Sass 의 존재를 알고있었고,배우고싶었는데, 미뤄오셨나요? 그렇다면 잘 오셨습니다. 이 포스트에서는 Sass 의 특징에 대하여 알아보고, Sass 로 할 수 있는 멋진 것들을 알아볼테니까요. Sass 가 뭐죠? Sass (Syntactically Awesome Style Sheets : 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor…

[React.JS] 강좌 12편 axios 모듈을 통한 웹서버와의 통신 (AJAX) 알아보기

2016년 6월 2일2016년 8월 11일 velopert26 Comments

이 강좌는 outdated 되었습니다. 더 좋은 내용을 다루는 강좌를 준비하도록 하겠습니다. 이 강좌는 참고용으로만 읽어주세요. 이번 포스트에서는 Express 프레임워크를 사용한 Node 웹서버에서 간단한 REST API 를 구현하고, React.js 어플리케이션에서 axios 라이브러리를 통하여 AJAX 를 통하여 통신하는 방법에 대하여 알아보겠습니다. 추가적으로,…

[LINK] Github Corners

2016년 6월 2일2016년 6월 2일 velopertNo Comments

오픈소스 웹 프로젝트에 GitHub 링크를 걸 때 Github Ribbon 이 식상하다면? Github Corners! http://tholman.com/github-corners/ 필요에 따라 커스터마이징 할 수 있다. 왼쪽 모서리 에 넣을지 오른쪽 모서리에 넣을지 정할 수 도 있다. 마우스 갖다대면 꼬리가 움직인다 ㅎㅎ 귀엽..…

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

2016년 5월 28일2016년 5월 28일 velopertNo Comments

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

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

2016년 5월 24일2017년 7월 30일 velopert8 Comments

이 포스트는 살짝 outdated 되었습니다. 새로 작성된, 리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components 포스트를 읽는것을 권고합니다. 기본적으로는, React.js 컴포넌트의 스타일을 설정 할 땐, Inline Styles 를 사용합니다. style 을 JavaScript 객체형으로 만들어서 사용하는 것이죠 물론,…

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

2016년 5월 18일2016년 5월 24일 velopertNo Comments

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

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

2016년 5월 18일2016년 11월 29일 velopert42 Comments

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

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

2016년 5월 14일2016년 7월 13일 velopert9 Comments

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

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

2016년 5월 8일2016년 5월 12일 velopert5 Comments

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