coding-heesong86 Next.js 기초편: 리액트 시작하기 프로젝트에서 React를 사용하려면 unpkg.com 이라는 외부 웹사이트에서 2개의 React 스크립트를 로드하면 됩니다. react 는 핵심 React 라이브러리입니다. react-dom 은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다. 일반 JavsScript로 DOM을 직접 조작하는 대신 react-dom의 ReactDOM.render() 메소드를 사용해서 React에 #app 요소 내에서 태그를 렌더링 하도록 지시할 수 있다. 하지만 해당 코드로 실행하면 이런 에러를 만난다. JSX가 뭔가요? JSX는 친숙한 HTML과 유사한 구문으로 UI를 설명할 수 있는 자바스크립트용 구문 확장이다. JSX의 좋은 점은 다음 세 가지 규칙을 제외하고는 HTML 및 Jav.. 2022. 5. 22. NEXT.JS 기초편: 명령형 VS 선언적 프로그래밍 위의 코드는 사용자 인터페이스를 업데이트 하는 방법에 대한 단계를 작성한 명령형 프로그래밍의 좋은 예이다. 그러나 사용자 인터페이스를 구축할 때 개발 프로세스의 속도를 높일 수 있기 때문에 선언적 접근 방식이 선호되는 경우가 많다. DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용을 선언할 수 있게하면 더 좋을 것이다. (어떻게?) 야 컴퓨터. 나 뭐 해줘! 즉, 명령형 프로그래밍은 요리사에게 피자를 만드는 방법에 대한 단계별 지침을 제공하는 것과 같다. 선언적 프로그래밍은 피자를 만드는 필요한 단계를 고려하지 않고 피자를 주문하는 것과 같다. 개발자가 사용자 인터페이스를 빌드하는데 도움이 되는 널리 사용되는 선언적 라이브러리는 리액트다. React: 선언적 UI 라이브러리 개발자는 사용자 인터페이.. 2022. 5. 22. NEXT.JS 기초편: HTML vs the DOM 브라우저 개발자 도구 내부의 DOM 요소를 보면 DOM에 요소가 포함되어 있음을 알 수 있다. 페이지의 DOM은 소스 코드로 사용자가 만든 원본 HTML 파일과 다르다는 것을 알 수 있다. HTML은 초기 페이지 콘텐츠를 나타내는 반면 DOM은 작성한 JavaScript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타내기 때문이다. 일반 JavaScript로 DOM을 업데이트하는 것은 매우 강력하지만 장황할 수 있다. 일부 텍스트와 함께 요소를 추가하기 위해 이 모든 코드를 작성했으니 말이다. 앱이나 팀의 규모가 커지면 이런식으로 구축한다는 것은 점점 더 어려워질 수 있다. 이런 접근 방식을 사용하면 개발자는 컴퓨터가 작업을 수행하는 방법을 코드로 알려주는 것에 더 많은 시간은 할애한다. 그렇다면 우.. 2022. 5. 22. 버튼 애니메이션 1 with styled-component See the Pen Submit button animation by Tom (@yeptony) on CodePen. import React from 'react'; import { View, Display, Text } from '@pip/theme'; import DefaultLayout from '../../layouts/Default'; import styled, { css, keyframes } from 'styled-components'; const Payment = () => { const [ani, setAni] = React.useState({ click: false, circle: false }); const handleClick = () => { setAni({ ...ani, clic.. 2022. 5. 20. 이전 1 2 3 4 5 6 7 ··· 22 다음
