개발자.. 너란놈..

※Sass 사용

import './scss/style.scss';
이런식으로 바로 사용 할 수 있음. (--wacth를 안해도 됨)

import './scss/style.scss';

function App() {

	return (
		<div className='wrap'>
			<h1>TITLE1</h1>
			<h1>TITLE2</h1>
		</div>
	);
}

export default App;

.wrap {
	border: 1px solid red;
}

변수를 사용하여 선언 하거나 Style에 바로 입력

function App() {
	const fontStyle = {
		color: 'aqua',
		fontSize: 60,
		fontWeight: 'normal',
	};

	return (
		<div className='wrap'>
			{/* 미리 스타일 객체를 변수에 선언후 가상돔에 연결 */}
			<h1 style={fontStyle}>TITLE1</h1>
			{/* 가상돔에 직접 객체 리터럴 형식으로 스타일 적용 가능 */}
			<h1 style={{ color: 'orange', fontSize: 30 }}>TITLE2</h1>
		</div>
	);
}

export default App;

JSX 주석 처리

{//중괄호 안쪽에서 주석 처리를 해야됨}

※ JSX 연산 처리

{중괄호 안쪽에서 연산 처리}

import { Header, Footer, Section } from './Common';

const name = '김영희';
const class1 = 'box';

function App() {
	return (
		//일반 스크립트 주석 사용 가능
		<>
			{/* JSX 문법 안쪽에서는 주석을 중괄호 안쪽에서 처리 
				JSX 안쪽에서 연산이 필요한 부분은 중괄호 처리
			*/}
			<Header />
			<Section />
			<Footer />
			<p className={class1}>{name}님 안녕하세요.</p>
		</>
	);
}

- 함수명은 대문자로 시작 
- 해당함수는 JSX를 리턴해야함
- 해당 함수를 export 시켜야 됨. (export default 함수명)
- 하나의 컴포넌트 함수는 복수요소의 JSX를 리턴할 수 없음
- 복수개의 JSX를 리턴시에는 괄호로 감싸줌, 단수개 JSX 리턴시에는 괄호 생략 가능
- 복수개의 요소를 리턴하고 싶을때는 무조건 wrapping 태그로 감싸줘야 됨
★★- 중첩되는 태그없이 복수요소의 JSX를 리턴하고 싶으면 fragment활용 <></>
=> 이걸로 감싸면 부모쪽에서는 div로 감싸져서 나오지 않음.
★★- 클래스명을 입력할 시에는 class가 아닌 className으로 표기 해야됨 (class 객체지향시 활용하는 예약어이기 때문에 사용 불가)
- 화살표 함수 형태로도 제작 가능 const App = () => {}
- 화살표 함수 안쪽의 중괄호와 return 구문을 생략 가능

※ ES7 React/Redux/GraphQL/React-Natvie snippets 기능 : React할 때 컴포넌트 만들 때 자동으로 만들어짐
rfce - react functional component export
rafce - react arrow functional component export

jsx를 만들고 사용하는 방법 1 (한개만)

//rfce - react functional component export
//rafce - react arrow functional component export
function Header() {
	return (
		<header>
			<h1>Header</h1>
		</header>
	);
}

export default Header;

import Footer from './Footer.js';

function App() {
	return (
		<>
			<Header />
		</>
	);
}

export default App;

jsx를 만들고 사용하는 방법 2 (여러개 한번에)

//하나의 파일에서 여러개의 컴포넌트 함수를 export 가능 (default 키워드는 제거)
export function Header() {
	return (
		<header>
			<h1>Header</h1>
		</header>
	);
}

export function Footer() {
	return (
		<footer>
			<h1>footer</h1>
		</footer>
	);
}

export function Section() {
	return (
		<section>
			<h1>Layout</h1>
		</section>
	);
}

//하나의 파일에서 여러개의 컴포넌트 비구조할당으로 import 가능
import { Header, Footer, Section } from './Common';

function App() {
	return (
		<>
			<Header />
			<Section />
			<Footer />
		</>
	);
}

export default App;

※ RealDOM - 실제 돔

- HTML 태그를 이용해서 구조를 만들면 브라우저가 이를 해석해서 실제 DOM 형태로 객체를 만들고 화면에 렌더링하는 형태

※ VirtualDOM - 가상 돔

- 실제 브라우저에서 RealDOM으로 변환되기 전 메모리상에서 DOM구조를 가상으로 만들어서 기존의 DOM 구조와 차이점을 분석
- 기존 DOM과 변경되는 부분을 수정해서 최종적으로 RealDOM으로 출력하는 형태

※ JSX

- 리액트에서 자체적으로 가상 돔을 편하게 생성해주는 문법체계 (실제로는 JavaScript로 DOM을 만들지만 개발자의 사용성을 위해 HTML 표현 방식을 채택)

SSR - Server Side Rendering

페이지 이동시 마다 일일이 서버 쪽에 출력할 HTML 파일을 요청
장점) 
1. 초기로딩 속도 빠름
2. 검색엔진에 최적화 (SEO에 좋음)

단점)
1. 페이지 이동 시 마다 서버 쪽 요청을 해야 되기 때문에 깜빡거리면서 로딩이 되는 사용성이 안좋은 점이 있음.

CSR - Client Side Rendering (SPA - Single page Application)

초기에 빈 HTML 파일을 가져오고 화면에 출력 될 모든 정보데이터를 Chunk단위로 구성된 JavaScript 파일을 모두 가져옴
장점)
1. 같은 페이지 안에서 서로 다른 컨텐츠를 실시간으로 변경 하면서 출력 하므로 동적인 컨텐츠 화면 변경이 자유롭고 페이지간 로딩이 없음 (사용성좋음)

단점)
1. 한번에 모든 데이터를 불러와야 되기 때문에 초기 로딩속도가 SSR 방식에 비해선 느림, 검색엔진에 비 최적화

아래 EmailJs를 통하여 이메일을 JavaScript를 가지고 이메일을 보낼 수 있다.

https://www.emailjs.com/

※ 회원가입을 하기전의 이메일 아이디로 이메일이 가기 때문에 이메일을 받고 싶은 이메일로 하는 것이 좋다.

회원가입을 하고 나면 Email Service를 진행한다.

여러 플랫폼으로 사용 할 수 있는데 필자는 Gmail을 사용하였다. 

아래와 같이 Name과 Service_ID를 입력 하는데 필요한 정보니 입력을 해준다.

이제 메일 서비스를 하기위한 기본적인 세팅이 끝났고, 이메일을 받을 때 어떤 형식으로 받을지 세팅을 아래에서 해줄 수 있다.

아래의 이메일 형식으로 데이터를 받아서 유동적으로 보내 줄 수가 있고, {{}}는 변수명으로 나중에 직접 작업하는 HomePage에 변수명을 일치 시키면 그대로 적혀서 들어온다.

여기까지 EmailJS의 세팅은 완료가 되었고 이제 아래 사이트에서 기본적인 EmailJs를 Script에 어떻게 넣는지 알수있는 사이트이다. 

EmailJS을 어떻게 사용하는지 알려주는 사이트이다.

Getting Started | EmailJS

아래 링크는 Form을 어떻게 입력하는지 알려주는 사이트 링크이다.

Creating a contact form | EmailJS

아래의 Head 쪽에 Script을 입력해줍니다.

위쪽의 빨간 박스는 나의 public key를 입력하는 란 입니다.

아래쪽의 빨간 박스는 기능을 동작하는 EmailJS의 함수들 입니다. 

public key는 아래에서 볼 수 있습니다.

Form 요소는 Script를 가져온 링크 조금 아래에 있습니다.

name은 Email Templates에서 입력한 {{}} 여기의 변수명이라고 생각하시고 작업을 해주시면 됩니다.

Send(Submit) 버튼을 클릭 하게 되면 이메일을 보낼 수 있고 제대로 보내지면 Console창에 Success! 라고 뜹니다.

1. 구글맵스에서 원하는 위치값을 찍어서 좌표값 복사
2. 카카오맵의 클릭한 위치 마커찍기 샘플예제의 직접해보기 섹션에 해당 위치값을 붙여넣기
3. 해당 테스트화면의 정밀하게 원하는 지점을 찍고 해당 코드값을 활용

https://apis.map.kakao.com/web/sample/addMapClickEventWithMarker/