본문 바로가기

분류 전체보기245

image 사용하기 8. image 사용하기 - 반드시 src 폴더에 저장하고 import 해서 사용권장. - 실습 가. src/assets 폴더 생성 나. 이미지 저장     import logo from './logo.svg';     import './App.css';     import google from './assets/google.png'     function App() {     return (                                );     }     export default App; # App.jsimport logo from './logo.svg';import './App.css';import google from './assets/google.png'function App() .. 2024. 7. 3.
JSX(JavaScript XML) 7. JSX 1> 개요 - JSX(JavaScript XML) - 웹브라우저에 랜더링되기전에 html 로 변환된다. ( babel 도구 이용 )   즉, JSX 는 웹브라우저에 직접 사용이 불가능한 비표준문법임. 2> 특징 - 반드시 root 태그가 있어야 된다. - 반드시 종료태그가 있어야 된다. ex>      - JSX 에서 JS 의 변수값등을 출력할 때는 {변수값} 사용한다. - {변수값}는 산술연산자, 비교연산자, 논리연산자, 3항연산자 사용 가능. - 논리값(true/false) 와 null, undefined는 {변수값} 사용시 출력이 안됨.   + && 결합해서 조건부 랜더링을 사용할 수 있음.   ex> { true &&  } - css 적용하는 방법     가. html 의 class .. 2024. 7. 3.
컴포넌트(component) 6. 컴포넌트(component) 1> 개념 - 웹 화면에서 보여지는 개별적인 블럭 의미. (JSP 의 top.jsp, menu.jsp, bottom.jsp 와 비슷하다.) - 일반적으로 *.js 파일로 구현됨. - *.js 당 *.css 형태로 구현됨.   사용방법은 import './App.css' 형식을 사용함. - 일반적으로  중첩된 형태로 구현됨. 2> 컴포넌트 종류 2가지 가. 함수형 컴포넌트 - 현재 거의 개발할때 사용빈도가 높다. ex>     // 함수선언식(이름이 있는 함수)     function fun() {     }     // 함수표현식(익명함수)     const fun = function(){};     // arrow 표현식     java: () -> {}     js:.. 2024. 7. 3.
개요 1. 개요 - facebook 제공 - 프론트엔드 프레임워크 (3대 프레임워크: React.js-facebook, Vue.js-중국계미국인, Angular-google) ==> JS 기반 - MVC 패턴에서 V(View) 담당 - 가상 DOM 이용해서 빠른 DOM 처리가 가능. - 개발방법 2가지   가. 함수형       - 현재 개발 방법.       - 일반함수 가능         arrow 함수 가능       - 클래스 컴포넌트에서만 사용가능한 문법들이 있었음.         버전업이 되면서 함수형 컴포넌트에서도 사용가능하도록 문법지원.         (hooks 지원)   나. 클래스       - 과거에 주로 사용됨. 2. React.js 종류 3가지 1> CSR (Client Side Re.. 2024. 7. 3.

티스토리툴바