coding-heesong86 최신 클라이언트 측 라우팅: 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. 이전 1 2 3 4 5 6 ··· 22 다음
