JSX란 JavaScript에서는 함수가 HTML을 리턴하도록 만들수가 없다. JS에서 HTML을 리턴하도록 만들면 문법적인 오류로 판단하기 때문에 그래서 React에서는 JSX라는 확장된 자바스크립트 문법을 사용한다. JSX를 사용하면 const Main = () => { return ( main ) } 이런식으로 JavaScrip와 HTML을 혼용하여 사용할수 있다. const Main = () => { const number = 10; return ( main {number} ) } JSX에서는 이런식으로 변수에 데이터를 HTML에 박아넣을수 있다. const Main = () => { const number = 11; return ( main {number % 2 === 0 ? "짝수" : "홀수..

자식 컴포넌트와 부모 컴포넌트 const Header = () => { return ( header ); }; function App() { return ( 안녕 리액트! ); } 이런식으로 Return문 내부에 포함되는 컴포넌트를 자식 컴포넌트라 합니다. 반대로 컴포넌트를 품고있는 컴포넌트는 부모 컴포넌트라 합니다. 위의 코드는 Header 컴포넌트는 자식컴포넌트 App컴포넌트는 부모 컴포넌트가 됩니다. 계층형구조로 React의 모든컴포넌트 들은 화면에 랜더링 되기 위해서 App 컴포넌트의 자식 컴포넌트로 존재해야 한다. React의 모든 컴포넌트 들은 App컴포넌트를 최상위 컴포넌트로 갖는다. 그러므로 App컴포넌트를 Root 컴포넌트로 부른다. 최상위 컴포넌트를 바꾸는 방법 main.jsx 파일에 ..

React의 컴포넌트란? - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 각각의 구역을 정의 하여 영역 별로 관리하는것을 이야기 한다 - 컴퍼넌트는 데이터를 입력받아 state 상태에 따라 Dom Node를 출력하는 함수이다 예시 const MyComponent = () => { return ( Hello React! ); }; 리액트 에서는 특수한 변수를 저장할수 있는데 그것을 state의 값이 변함에 따라 각각 다른 UI를 화면에 랜더링을 할수가 있다(랜더링이란 UI 요소를 화면에 그려내는 것을 말한다.) Virtual DOM 리액트는 가상돔(virtual Dom) 이라는 것을 가지고 있다 가상돔은 실제 돔을 copy하여 만들어 둔것으로 실제 돔에 반영하기 전에 가상돔이 먼저 반영을 한후 한번에 ..

JSX 리액트 확장자는 jsx를 사용한다. js에서 리액트를 사용해도되나 Hook이라는 개념을 쓰지말라는 암묵적인 룰이 존재 그래서 jsx확장자를 사용한다는 내용 jsx에서는 const element = Hello, world 가 에러가 아니다. 자바스크립트 기반으로 동작하고 있기 때문에 {chktest.map((item, index) => ( {item} ))} 이러한 문법으로 루핑을 돌리게된다. JSX는 HTML보다는 JavaScript에 가깝다. JSX에서는 class는 className가 된다 class는 예약어 때문에 사용이 안되기 때문이다. function dd() { javascript return ( ) } 이런형태의 문법을 사용한다. 자바스크립트 es5, es6 차이 // 일반적인 자바스..

• 객체와 테이블 매핑: @Entity, @Table • 필드와 컬럼 매핑: @Column • 기본 키 매핑: @Id • 연관관계 매핑: @ManyToOne,@JoinColumn 객체와 테이블 매핑 @Entity • @Entity가 붙은 클래스는 JPA가 관리, 엔티티라 한다. • JPA를 사용해서 테이블과 매핑할 클래스는 @Entity 필수 • 주의 • 기본 생성자 필수(파라미터가 없는 public 또는 protected 생성자) • final 클래스, enum, interface, inner 클래스 사용X • 저장할 필드에 final 사용 X @Entity 속성 정리 • 속성: name • JPA에서 사용할 엔티티 이름을 지정한다. • 기본값: 클래스 이름을 그대로 사용(예: Member) • 같은 ..

노트북에서 작업하던 vue 프로젝트를 git에 올려 데스크탑으로 내려받았다. npm run serve 를 해보았는데 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다 요런게 뜨는것이 아닌가!!!! cannot find module 'vue-router' or its corresponding type declarations. cannot find type definition file for 'webpack-env'. the file is in the program because: entry point of type library 'webpack-env' specified in compileroptions 모듈을 찾을수 없다와 webpack-env에 대한 파일을 찾으수 없다고 뜬다..