클래스 문법으로 React 코딩하는 것을 한번 보여준다.
클래스 문법은 진짜 복잡하다.
그래서 JSX가 생김.

class 문법으로 코딩하기 (너무 복잡함)

return e('button', {onClick: () => this.setState({liked: true})}, 'Like');

그래서 JSX가 생김 (좀 더 인간 친화적으로 바뀜)

jsx : javascript + xml

return (
<button onClick={()=>this.setState({liked:true})}>
	Like
</button>
);

Babel

하지만 js에서 < 이런 태그 같은거 해석하지 못해서 babel 이라는 라이브러리를 사용해야한다. babel이 <button> 이러한

jsx 태그를 React.createElement 같은 것으로 바꿔준다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

바벨을 사용하는 가장 쉬운 방법은 위의 코드를 붙여넣기하고, 바벨이 바꿔주길 원하는 부분의 <script>를

<script type="text/babel">로 바꿔놓으면 된다.

React 규칙

1. 컴포넌트는 대문자로 시작

2. jsx에서 자바스크립트 코드를 사용하기 위해서는 { } 사용 (jsx에서 객체를 생성하려면 {{a:'b', b:'c'}} 이런식으로 해야한다.)

3. jsx에서 html 태그를 사용하기 위해서는 소문자로 사용 (닫는 태그 필수)

4. jsx에서는 if와 for를 사용하지 못한다. if 대신에 삼항연산자, for 대신에 Array.map 을 사용한다.

5. jsx의 return() 에서 최상위 태그는 1개만 존재해야한다. (<> ~ </> Fragment라는 태그를 많이 사용함.)

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)

Maven이나 Gradle에 DB Connector 을 추가해두면 datasource.url과 관련 정보들을 써야 하는데.. 아직 확정 되지 않은 정보들이라면 위의 사진처럼 exclude를 추가하면 해결!

React 리액트 기초부터 쇼핑몰 프로젝트까지!

react 공부를 하고싶어서 유료 강의를 사서 보았다.

코딩애플 아저씨 예전부터 유튜브로도 보고 ES6 유료 강의도 봤었는데.. 후기를 리스트 형식으로 간단하게 적어보려고 한다!!

1. 설명 이해가 쏙쏙되게 말을 찰지게 하심
2. 응용이 되게 원리를 설명해주실 때가 많음 → 하지만 막 엄청 깊숙히 설명 해주시지는 않고 딱 간결하게? 오히려 이게 더 좋은거 같기도 하다.
3. 왜 써야하는지 이유를 설명해주시니 2번과 같이 응용할 때 많은 도움이 된다.
4. 중요한 것들은 계속 자막으로 반복해서 띄워주셔서 머릿속에 강제로 주입시켜야하는 느낌 (이런것들은 진짜 외워야 원할히 진행가능 할 때 많음..)
5. 과제를 내줘서 혼자 정리하고 생각할 시간을 주심 → 정답도 있어서 코드 비교 가능★
6. 5번과 비슷한데 과제를 내주는데 정답에 뭔가 빡치는 문장 써놔서 정답 안보고 풀게 해놓으심..

써놓고 보니 대부분 장점인데.. 그만큼 괜찮은 강의였다.  부가 설명을 하자면

1번 장점은 인상깊은 설명이 props를 설명해주실 때 불륜, 패륜이다.

6번 장점은 예를 들면 아래와 같은것들..

누군가에게는 기분이 나쁠수도 있지만 저는 오히려 좋아♥

물론 6번은 평소에는 동기부여가 되는 문장을 써주신다.

이상입니다아아