분류 전체보기 (104) 썸네일형 리스트형 [React Exam 07] HTML로 시작해보는 React 엘리먼트 렌더링 DOM에 엘리먼트 렌더링하기엘리먼트는 React 앱의 가장 작은 단위로서 화면에 표시할 내용을 기술합니다.브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다.React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 합니다. 렌더링 된 엘리먼트 업데이트하기React 엘리먼트는불변객체입니다.엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다.지금까지 .. [React Exam 06] HTML로 시작해보는 React JSX Style 사용하기 JSX에서 style 적용 시에는 class가 아닌 className입니다. className="greeting"> style 속성을 이용하여 스타일을 지정할 때는 중괄호 2개를 사용합니다. style={{ color: 'skyblue',fontSize:"15pt",fontWeight:"bold" }}> 스타일 속성의 이름은 JavaScript 문법이기 째문에 카멜 표기법(Camel Case)을 이용하여 지정합니다."font-size"가 아니라 "fontSize" 입니다. "-"를 제거하고 단어의 첫 글자를 대문자로 변경하시면 됩니다. 다음은 완성된 전체 코드 입니다.1234567891011121314151617181920212223242526272829303132333435363738394041424.. [React Exam 05] HTML로 시작해보는 React JSX 속성 표현식 사용하기 JSX에 속성 지정따옴표를 사용하여 문자열 리터럴을 속성으로 지정할 수 있습니다. href="https://reactjs.org/docs/introducing-jsx.html">JSX 튜토리알로 가기속성에 JavaScript 표현식을 포함하기 위해 중괄호를 사용할 수도 있습니다.const image_url3 = "https://choongang202407.github.io/images/penguin3.jpg";const img_element1 = src={image_url1} width="80" height="80" />;중괄호 앞뒤로 따옴표를 지정하면 문자열로 인식하므로 주의하시기 바랍니다. 다음은 완성된 전체 코드 입니다. 123456789101112131415161718192021222324252.. [React Exam 04] HTML로 시작해보는 React JSX 함수 표현식 사용 JSX도 표현입니다. 컴파일 후 JSX 표현식은 일반 JavaScript 함수 호출이 되어 JavaScript 객체로 평가됩니다.if, for 즉 명령문 및 루프 내에서 JSX를 사용하고, 변수에 할당하고, 매개 변수로 받고, 함수에서 반환할 수 있습니다. function formatUser(user) { return user.name + "(" + user.age + "세, " + (user.gender ? "남" : "여") + ")"; } function Hello(user) { let element = 데이터가 없습니다. if (user) { .. [React Exam 03] HTML로 시작해보는 React JSX JavaScript 표현식 포함하기 JSX에 표현식 포함하기name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였습니다.여러줄로 표현할 때는 ()안에 기술하면 됩니다.JSX내에서 주석은 {/* 과 */} 사이에 기술하면 됩니다.JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다. 2+2와 같은 연산은 물론 함수의 호출도 가능합니다. const name = '한사람'; const age = 18; // 변수를 선언한 다음 호출된 요소에서 중괄호로 묶어 JSX 내에서 사용합니다. const element1 = {name}님 반갑습니다.; // 여러 줄로 입력할 경우에는 ()안에 기술하면 됩니다. .. [React Exam 02] HTML로 시작해보는 React JSX(JavaScript를 확장한 문법) JSX란?아래 변수 선언을 살펴보겠습니다.const element = Hello World!!! 위의 문법은 문자열도 HTML도 아닙니다.JSX라고 하며 JavaScript를 확장한 문법입니다.XML(eXtensible Markup Language) 문법을 따르기 때문에 다음의 규칙을 따릅니다.root태그가 반드시 있어야 합니다.모든 태그들은 내포되어 중첩되어야 합니다.그리고 반드시 닫는 태그가 존재해야 합니다. 태그 이름은 html 태그를 쓰면 그대로 인식하며 어떤 태그를 사용해도 됩니다.사용자가 만들어 사용해도 됩니다. JSX는 필수가 아닌 선택사항이지만 사람들은 UI코드를 짤 때 JSX를 쓰는 것이 더 편리하다고 생각합니다. 기존 프로젝트에서 JSX 태그를 써보는 제일 빠른 방법은 이제 전체 코.. [React Exam 01] HTML로 시작해보는 React Application 간단하게 HTML문서 만으로 React Application을 만들어 볼 수 있습니다. 1단계 : HTML문서를 만듭니다.2단계 : 다음의 스크립트 태그를 원하는 곳에 추가 합니다. 태그 태그 어디에 넣어도 됩니다. 저는 태그 뒤에 넣었습니다. 위 버전은 개발 용도로만 사용해야하며, 프로덕션에는 적절하지 않습니다. React의 최적화된 프로덕션 버전은 다음과 같이 사용할 수 있습니다. react 나 react-dom 의 특정 버전을 불러오고 싶다면, 18을 원하는 버전의 숫자로 바꾸면 됩니다. 만약 Bower를 사용한다면, React는 react 패키지를 통해 사용할 수 있습니다. 만약 React를 CDN으로 제공한다면, crossorigin 속성을 주는 걸 권장합니다. 3단.. JDK (Java Development Kit) 설치하기 1. JDK (Java Development Kit) 다운로드https://www.oracle.com/kr/java/technologies/downloads/ 접속Windows탭의 x64 Installer 다운로드2. JDK (Java Development Kit) 설치다운로드한 JDK (Java Development Kit) 설치파일 실행Next 클릭Next 클릭Close 클릭3. Java 환경 변수 설정환경 변수 설정 창 열기시스템 변수탭의 새로 만들기 클릭변수 이름에는 JAVA_HOME을, 변수 값에는 설치한 JDK의 경로를 입력한 후 확인 클릭시스템 변수탭의 변수 Path 선택 후 편집 클릭새로 만들기 클릭 후 %JAVA_HOME%\bin 입력 후 확인 클릭4. Java 설치 확인 (cmd)명령 .. 이전 1 ··· 10 11 12 13 다음
