개발자의 개발 블로그

리액트에는 JSX라는 문법이 있다.

완전히 HTML과 동일한데(완전히는 아니지만... 거의..) 이것은 실제 자바스크립트에 해당된다고 한다.

어쨋거나...

JSX를 작성하다보면 당황스럽다...

.html 파일에서는 태그명만 입력하면 입력한 문자와 관련된 태그가 뜨고, 엔터만 치면 HTML 태그가 생성됐었는데.

JSX에서는 < 부터  /> 까지 전부 입력해줘야하는건가?

당황스럽다. 말도안되.  찾아봤다.

3초만에 해결하였다.

https://medium.com/@afulsamet/vs-code-react-js-tools-d61122dfb923

1. Settings에 들어간다.

2. settings를 입력하고, 쭉쭉 내리다보면 이미지와 같이 JSON을 볼 수 있다.

그리고, 그 아래 Edit in settings.json을 클립해서 들어간다.

맨 아래 닫히는 중괄호 위에 }

,  를 입력하고

"emmet.includeLanguages": {
"javascript": "javascriptreact"
}

을 추가해준 뒤, 저장하고 나온다.

해결되었다.

h1 입력하면 화면에 나온다. 엔터를 치면 자동으로 태그가 생성되는 것을 볼 수 있다.

고민 해결!

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

이것을 사용하면 된다.

코드를 복붙하거나...

파일을 복붙하거나...

하면 수정해야 할 부분이 많다...

그냥 위에 패키지를 설치한 뒤,

클래스 기본이나 함수 기본 또는 자주쓰는 react-dom이나 redux와 같은 것을 한꺼번에 생성할 수 있어서 좋다.

App.js 파일 생성후에, rcc 를 입력하면?

import React, { Component } from "react";

class App extends Component {

render() {

return <div> </div>;

}

}

export default App;

이 틀이 그냥 생성된다!

rsc를 입력하면?

import React from 'react';

const App = () => {

return (

<div> </div>

);

};

export default App;

이와같이 함수 컴포넌트가 생성된다. 

대박~

faker라는 npm이다.

페이커 프로게이머 페이커말고...

https://www.npmjs.com/package/faker

npm install -s faker

입력하면 설치가 된다.

사용 방법은 다음과 같다.

1. import를 해준다.

import faker from "faker";

2. 이미지에 src에서 faker를 불러주면 끝!

<img src={faker.image.avatar()} alt="random test image" />

이렇게하면 img에 이미지가 나오게 된다.

avatar()대신 사용할 수 있는 목록은 위 링크에 있으니 필요한 것을 적용하면 된다.

웹에서 갖고 오는 것이므로, 리프레시(F5)를 하게되면 이미지는 계속 바뀐다.

이상.