본문 바로가기

전체 글86

최신 클라이언트 측 라우팅: Navigation API 단일 페이지 애플리케이션 구축을 점검하는 새로운 API를 통해 클라이언트 측 라우팅을 표준화한다. SPA에서 많이 사용하는 History API는 SPA가 많이 사용되기 전에 개발되어서 잘 어울리지 않음. 이를 개선한 Navigation API는 현재 Draft 상태이지만, 크롬 102 버전부터 미리 적용된 상태. 글로벌 navigation 객체에 navigate 리스너를 붙여서 동작 사용자 또는 프로그램적으로 네비게이션( 클릭, 서브밋, 백/포워드)할 때 무조건 호출되어 중앙집중식 처리 가능 transitionWhile()또는 preventDefault()로 인터셉트 가능 navigation 항목 `navigation.currentEntry`현재 항목에 대한 액세스를 제공합니다. 이것은 사용자가 현재 .. 2022. 6. 9.
자식요소에 padding 속성이 적용되지 않는 경우 부모에 `display: flex`를 사용해서 레이아웃을 구성할 경우, 자식요소에 padding, margin 속성이 적용되지 않을 경우가 있다. 그럴 때 전체 선택자 요소에 box-sizing: border-box; 속성을 부여하면 자식요소에도 padding, margin이 동작한다. * { box-sizing: border-box; } 2022. 5. 24.
Next.js 기초편: UI Component 구축하기 사용자 인터페이스는 구성 요소라고 하는 더 작은 빌딩 블록으로 나눌 수 있습니다. 컴포넌트를 사용하면 재사용가능한 코드 조각을 만들 수 있다. 컴포넌트를 레고 블럭으로 생각한다면 이러한 개별 브릭을 결합해 더 큰 구조물을 만들 수 있습니다. UI의 일부를 업데이트해야하는 경우 특정 컴포넌트 또는 브릭을 업데이트 할 수 있습니다. 이 모듈성은 애플리케이션의 나머지 부분을 건드리지 않고도 컴포넌트를 쉽게 추가, 삭제, 업데이트할 수 있기 때문에 코드가 성장함에 따라 유지 관리가 더 쉬워집니다. 리액트 컴포넌트에 대한 좋은 점은 자바스크립트라는 점입니다. 자바스크립트 관점에서 리액트 컴포넌트를 작성하는 방법을 살펴보겠습니다.: 컴포넌트 만들기 리액트에서 컴포넌트는 함수입니다. 스크립트 태그 안에 header라.. 2022. 5. 22.
Next.js 기초편: 리액트를 위한 필수 자바스크립트 JavaScript와 React를 동시에 배울 수 있지만 JavaScript에 익숙해지면 React를 배우는 과정이 더 쉬워집니다. 다음 섹션에서는 JavaScript 관점에서 React의 몇가지 핵심 개념을 소개합니다. 다음은 언급할 JavaScript의 주제에 대한 요약입니다. Function 그리고 화살표 함수 Objects 배열 그리고 배열 함수 구조화 ( Destructuring ) 템플릿 리터럴 삼항 연산자 ES 모듈 및 Import / Export Syntax 이 과정에서는 JavaScript에 대해 자세히 다루지 않지만 최신 버전의 자바스크립트를 사용하는 것이 좋습니다. 그러나 아직 자바스크립트에 능숙하지 않다고 느끼더라도 리액트로 빌드를 시작하는데 방해가 되지 않도록 하세요! React의.. 2022. 5. 22.
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.

티스토리툴바