[React.JS] 강좌: React 컴포넌트 구성 & AJAX 비동기 작업 처리하기 & CSS 애니메이션 처리
이 포스트에서는 React 프로젝트에서 Ajax 와 같은 비동기 작업을 효율적으로 처리하는 방법을 다뤄보겠습니다. Ajax 처리 외에도, 컴포넌트 구성 및 응용, 애니메이션 처리도 다루니, React 입문자들은 한번 따라서 진행해보시면 많은 도움이 될거에요. 만약에 이해가지 않는 부분이 있거나 틀린 부분이 있다면 언제든지…
Tag: css
[JS] JQuery 를 사용한 무한 스크롤 (Infinite Scroll) 예제
Link: CodePen
생각보다 많이 간단하다
var page = 1;
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
console.log(++page);
$("#enters").append("<h1>Page " + page + "</h1><BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~");
}
});
이런식으로 윈도우의 스크롤을 감지해서 맨 아래에 닿는다면 html 을 append 하는 방식이다.
만약…
Sass 강좌 – 한 눈에 보기
이전부터 Sass 의 존재를 알고있었고,배우고싶었는데, 미뤄오셨나요? 그렇다면 잘 오셨습니다.
이 포스트에서는 Sass 의 특징에 대하여 알아보고, Sass 로 할 수 있는 멋진 것들을 알아볼테니까요.
Sass 가 뭐죠?
Sass (Syntactically Awesome Style Sheets : 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor…
[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 하여 사용하기
이 포스트는 살짝 outdated 되었습니다. 새로 작성된, 리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components 포스트를 읽는것을 권고합니다.
기본적으로는, React.js 컴포넌트의 스타일을 설정 할 땐, Inline Styles 를 사용합니다. style 을 JavaScript 객체형으로 만들어서 사용하는 것이죠
물론,…