웹개발50 [공식문서] JavaScript에서 React로 #4 React를 위한 필수적인 JavaScript JavaScript와 React를 동시에 학습할 수 있지만, JavaScript에 익숙하다면 React를 학습하는 과정이 더욱 수월해질 수 있습니다. 다음 섹션에서는 JavaScript 관점에서 React의 핵심 개념을 소개합니다. 다음은 언급될 JavaScript 주제의 요약입니다. 함수(Functions)와 화살표 함수(Arrow Functions) 객체(Objects) 배열(Arrays)과 배열 메서드(Array methods) 구조 분해 할당(Destructuring) 템플릿 리터럴(Template literals) 삼항 연산자(Ternary Operators) ES 모듈과 Import / Export 구문 이 강좌는 JavaScript에 대해 자세히.. 2023. 8. 11. [공식문서] 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 ··· 3 4 5 6 다음
