Lpla 개발 블로그

React

[React] 튜토리얼 자습하기 (2)

주요 개념 1. Hello World React에서 Hello Word를 출력하는 방법은 아래와 같다. ReactDOM.render( Hello, world!, document.getElementById('root') ); 2. JSX 소개 React는 마크업과 로직을 분리하지 않고 둘 다 포함하는 컴포넌트 단위로 이루어진다. a. JSX에 표현식 포함하기 중괄호에 변수를 감싸는 방법으로 JavaScript 표현식을 사용할 수 있다. const name = 'Ji Woon'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); b. JSX도 표현식이다. JSX 자체에 JavaScript 조건문..

React

[React] 튜토리얼 자습하기 (1)

설치하기 a. 웹사이트에 React 추가하기 (1) 1분 내로 React 추가하기 HTML 1분 내로 React 추가하기 javaScript 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return '좋아요를 클릭하셨습니다.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, '좋아요' ); } } const domContainer..

HTML&CSS

[CSS] Grid를 사용할 때 장점 하나

1. Grid를 사용하지 않을 때 어려운 레이아웃 웹퍼블리셔라면 grid를 사용할 줄 몰라도 한 번쯤 들어는 봤을 것이다. grid가 좋다고는 하는데 과연 어디에 좋은 것일까? grid를 왜 배워야하는지 의문이 드는 사람들을 위해 짧게 글을 쓴다. 디자이너의 시안에 따라 퍼블리싱을 할 때 다음과 같은 레이아웃이 있다고 하자. 시안 A 만약 이것을 코딩한다면 몇 가지 방법이 있겠지만 그중 아래처럼 코딩할 수 있다. See the Pen Gird Layout 없이 by lpla (@lpla) on CodePen. A, B, C, D는 모두 같은 box 클래스를 가지지만 우측에 있는 B, C, D는 wrapper 클래스로 한 번 더 감쌌다. A와 wrapper를 수평 정렬하기 위해서다. 따라서 부모 conta..

JavaScript/실전

[JavaScript] sketch.js로 마우스를 따라 다니는 파티클 효과 구현하기

sketch.js로 마우스를 따라 다니는 파티클 효과를 구현할 수 있다. 공식 사이트는 참고하면 좋고, 코드를 바로 사용하려면 아래 codepen에 있는 코드를 그대로 사용하면 된다. sketch.js 데모 사이트 sketch.js Parallax Mountains Excellent parallax effect from Jack Rugile, using the sketch.js 2d canvas soulwire.github.io 파티클 효과 데모 사이트 sketch.js » Basic Example soulwire.github.io See the Pen sketch.js Demo by lpla (@lpla) on CodePen. 실제 웹사이트에 적용할 때 sketch.js 스크립트를 추가하는 것은 필수다..

HTML&CSS

[CSS]마우스 오버시 글자 반전 효과

See the Pen Invert Text by lpla (@lpla) on CodePen. css의 mix-blend-mode 를 사용하여 반전 효과를 줄 수 있다. 익스플로러에서는 지원하지 않는다. 크로스 브라우징에 관한 자세한 내용은 여기서 확인할 수 있다. "mix-blend-mode" | Can I use... Support tables for HTML5, CSS3, etc Blending of HTML/SVG elements Allows blending between arbitrary SVG and HTML elements caniuse.com

JavaScript/실전

[GSAP] 숫자 카운트 (ScrollTrigger)

GSAP로 숫자 카운트 효과를 만들 수 있다. 1. 해당 요소에 스크롤시 숫자 카운트 See the Pen [GSAP] count - onUpdate by lpla (@lpla) on CodePen. 2. 해당 요소에 스크롤시 숫자 카운트 & 숫자 초기화 See the Pen [GSAP] count - onUpdate & toggleActions by lpla (@lpla) on CodePen. 3. 해당 요소에 스크롤시 숫자 카운트 & 스크롤에 따른 숫자 변화 See the Pen [GSAP] count - onUpdate & scrub by lpla (@lpla) on CodePen. ------- 21.08.28 추가 ------- 4. 소수 자리 표현 See the Pen [GSAP] count ..