개발자의 개발 블로그

파일을 (컴포넌트를) 생성할때, import를 일일이  선언하고

클래스 컴포넌트를 만들때 클래스 틀을

함수 컴포넌트를 만들때 함수 틀을 전부 수기로 입력하는 것은 개발할 때 매우 비효율적이다.

아니면 

파일 또는 코드 복붙하는 방법도 있지만...

해당 클래스명(함수명)을 수정하고 필요없는 부분을 없애줘야한다. 

그래서 이 React Snippet이 필요하다. 유용하다.

이것을 설치하면 매우 편하다.

물론 외워야하지만... 금방 외울 수 있을 것이다.

설명이 아래 존재하므로 읽으면서 해보면 된다.

리액트에는 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)를 하게되면 이미지는 계속 바뀐다.

이상.

하지만, 구글에서는 독도는 표시가 안 되고, 심지어 동해가 일본해로 표기된다.

아 일본 열받네!

구글에 찾아보니,

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

뒤에다가 &region=KR을 붙이면 된다고 했다.

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&region=KR"></script>

이렇게?

그런데...변화가 없다.

혹시나해서 글...작성 년도를 보니까 2014년 ~ 2016년 글들이다.

아마 업데이트 되었을 것 같았다.

그래서, 구글 맵 플랫폼에 들어가 영어울렁증이 있음에도 불구하고  코드를 찾아본 결과...

위 선언문이 없어졌다! 안 쓰인다.

대신 

<script src="https://maps.google.com/maps/api/js?sensor=true&key=구글 맵 API Key 값&region=KR"></script>

과 같이,

구글 API 키 적는 선언문 뒤에 붙여주면 된다고 하는 것 같았다.

해결!

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

찾아보니까, 기본적으로 미국 구글 본사에서 제공하는 지도가 보여지기 때문에 위와 같은 헤프닝이 일어날 수 있다.

즉, 현재 진행형인 '분쟁' 중인 지역은 위와 같이 보기 싫은 형태로 나올 수 있다.

하지만, 동해는 일본해로, 독도는 리앙크루 암초로 표기되어 있다니...

한국 사람으로써 일본해... 리앙크루 암초... 라는 걸 쓸 수는 없다! 한다면,

구글 맵 호출 script 태그 뒤에 지역을 붙여주면 된다.

생각해보니 열받네

그럼 비공식적으로 불리는 동해의 명칭도 일본해라는 건가?!

1. VS Code 설정에 들어간다.

2. settings.json 파일로 접속한다. 오른쪽 상단에 동그라미 부분 

3. 아래와 같이 입력한다

JSX에서는 HTML snippet이 적용이 안 되서, 

하나하나 직접 작성해야하나?

너무 비효율적인데... 에러 많이 날텐데

하고 구글하다가 찾은 방법이다.

ㅇ ㅑ호 

일단, 인라인 element과 블록 element가 존재한다.

블록 엘리먼트는 컨텐츠의 너비와 무관하게 전체를 차지하기 때문에, 수평으로 다른 엘리먼트를 같이 사용할 수 없다.

1. display:block;

위와 같이 div 3개를 만들고, display를 block으로 한다면, width가 150px임에도 불구하고 모두 세로로 정렬된다.

블록은 페이지 전체 너비를 혼자 사용한다고 볼 수 있다.

2. display: inline-block;

이 경우, 블록은 유지되지만, 인라인 형태로 보여지게 된다.

즉, 너비를 해당 엘리먼트의 너비만큼만 사용하고 나머지 공간을 다른 엘리먼트들과 나눠쓰게 된다.

따라서, 다음과 같은 모습이 나온다.

3. display: inline;

이렇게하면, 블록 속성이 전부 무효화된다. 즉, 내부 요소 텍스트만큼만 차지하게 된다.

블록에서 width와 height를 선언했지만, 이것들은 모두 무시된다.

따라서, 다음과 같은 모습이 나온다.

 그리고, 아래와 같이 divbox 속성에 경고가 표시된다.

내용은 위 설명한 것과 같다.

display를 inline으로 하면서, 블록이 아닌게 되어버렸기 때문이다.

태그를 직접 입력하면, 시간도 오래 걸리고 오타 확률이 늘어난다.

자동으로 태그를 생성하는 방법은 다음과 같다.

1. 가장 간단히, div 입력 후, 자동완성을 이용해서 태그를 선택한다.(HTML Snippets 이 깔려있어야 한다)

2. 태그와 함께 id나 class 바로 만들기

p.className를 입력하면, p 태그에 className이라는 class 속성이 들어간채로 생성된다.

a.uniqueValue를 입력하면, a 태그에 uniqueValue라는 id 속성이  들어간채로 생성된다.

3. div 만들기 

태그를 입력하지 않고 하면, 기본적으로 div 태그가 만들어진다.

.name 입력한 뒤, 엔터를 입력(아래와 같이 하단에 Emmet Abbreviation) 이 나와야 함.

결과

<div class="name"></div>

#name 입력한 뒤, 엔터를 입력.

결과

<div id="name"></div>

id와 class를 여러개 만들고 싶다면?

.className#idName

결과

<div class="className" id="idName"></div>

.className#idName.dekek.ekek

결과

<div class="className dekek ekek" id="idName"></div>

하지만, id는 한개만 생성할 수 있으므로,

.className#idName.dekek.ekek#lastID

결과

<div class="className dekek ekek" id="lastID"></div>

와 같이 마지막 #값이 id 값이된다.

이것이 html 생성하면 나오는 기본 구조인가보다.

1. 먼저, <!DOCTYPE html> 는 해당 html 파일이 HTML5 형식으로 작성된다는 것을 명시하는 선언이다.

2. html파일은 모두 <html> 태그 안에 작성해야하며, <head>와 <body> 둘로 구성된다.

3. <head> 안에는 직접적으로 눈에 보이지 않는, 숨겨진 HTML 관련 정보들이 들어간다. 종류는 아래와 같다.

<title>

<meta>

<link>

<style>

<script>

4. <body> 안에는 직접적으로 눈에  보이는, 실제 화면을 구성하는 HTML 태그들이 들어간다.

물론, html 파일이 있는 디렉토리로 이동해서 더블클릭해서 브라우저로 확인할 수 있다.

그럴경우, 주소창에는 

file:///Users/jangseongho/Documents/htmlTest/index.html

이런식으로 나오게 된다.

하지만, vs code를 사용한다면 라이브 서버를 설치하여 바로 띄울 수도 있고, 코드 수정 시 리로드없이 적용이 가능하다.

아래 패키지를 설치하면 된다.

주소창에서는

http://127.0.0.1:5500/01_basic_layout.html

이렇게 바뀐다.

참고로, 127.0.0.1는 자기 자신의 로컬호스트이다.

즉, 로컬로 서버를 띄우고, 포트를 5500으로 지정된 것이다.(자동으로)

그리고, 접속을 안 할시, 금방 서버가 종료되므로 다시 접속해서 사용해야한다.