nextjs67 [공식문서] JavaScript에서 React로 #3 React로 시작하기 프로젝트에서 React를 사용하려면, react와 react-dom 두 개의 React 스크립트를 외부 웹사이트인 unpkg.com에서 불러올 수 있습니다. react는 핵심 React 라이브러리입니다. react-dom은 DOM과 관련된 메서드를 제공하여 DOM과 함께 React를 사용할 수 있게 해줍니다. 순수 JavaScript로 DOM을 직접 조작하는 대신에, react-dom에서 ReactDOM.render() 메서드를 사용하여 타이틀을 #app 요소 내에 렌더링하도록 React에 알릴 수 있습니다. 그러나 이 코드를 브라우저에서 실행하려고 하면 구문 오류가 발생합니다. 이는 ...이 유효한 자바스크립트가 아니라는 것을 의미합니다. 이 코드 조각은 JSX입니다. JSX란 무.. 2023. 8. 11. [공식문서] JavaScript에서 React로 #2 자바스크립트와 DOM 메서드를 사용하여 UI 업데이트하기 이제 어떻게 JavaScript와 DOM 메서드를 사용하여 프로젝트에 h1 태그를 추가할 수 있는지 살펴보겠습니다. 코드 편집기를 열고 새로운 index.html 파일을 생성하세요. HTML 파일 내부에 다음 코드를 추가하세요. 그런 다음 div에 고유한 id를 지정하여 나중에 대상으로 선택할 수 있게 만드세요. HTML 파일 내부에서 JavaScript를 작성하려면 script 태그를 추가하세요. 이제 script 태그 내부에서 DOM 메서드인 getElementById()를 사용하여 id로 요소를 선택할 수 있습니다. DOM 메서드를 계속 사용하여 새로운 요소를 생성할 수 있습니다. 모든 것이 제대로 작동하는지 확인하려면 HTML 파일을 원하는.. 2023. 8. 10. [공식문서] JavaScript에서 React로 Rendering User Interfaces React의 작동 방식을 이해하려면, 먼저 브라우저가 코드를 해석하여 상호 작용 가능한 사용자 인터페이스(UI)를 생성하는 기본 개념을 이해해야 합니다. 사용자가 웹 페이지를 방문하면 서버는 브라우저에 HTML 파일을 반환합니다. 이 HTML 파일은 다음과 같을 수 있습니다. 그런 다음 브라우저는 HTML을 읽고 문서 객체 모델(DOM)을 구성합니다. DOM이란 무엇인가요? DOM은 HTML 요소의 객체 표현입니다. 이것은 코드와 사용자 인터페이스 간의 다리 역할을 하며 부모 및 자식 관계를 가진 트리 구조로 이루어져 있습니다. DOM 메서드와 JavaScript와 같은 프로그래밍 언어를 사용하여 사용자 이벤트를 수신하고 DOM을 선택하고 추가하며 업데이트하.. 2023. 8. 10. [공식문서] Next.js 란 무엇인가? Next.js는 빠른 웹 애플리케이션을 생성하기 위한 구성 요소를 제공하는 유연한 React 프레임워크입니다. 하지만 정확히 무엇을 의미하는 걸까요? React와 Next.js가 무엇이며 어떻게 도움이 될 수 있는지에 대해 약간의 시간을 할애해 알아보겠습니다. 웹 애플리케이션의 구성 요소 현대적인 애플리케이션을 구축할 때 고려해야 할 몇 가지 사항이 있습니다. 다음과 같은 내용들이 있습니다. User Interface (사용자 인터페이스) : 사용자가 애플리케이션을 어떻게 소비하고 상호작용하는지. Routing (라우팅) : 사용자가 애플리케이션의 다른 부분 간에 어떻게 이동하는지. Data Fetching (데이터 가져오기) : 데이터가 어디에 있으며 어떻게 가져올지. Rendering (렌더링) : .. 2023. 8. 10. 이전 1 ··· 5 6 7 8 다음
