지난 주 까지는 static한 데이터를 핸들링하는 방법을 배웠다.
이번 주에는 react를 시작으로 가변데이터를 핸들링하는 방법을 배워본다.
Json
Axios
Javascript 환경에서 HTTP 요청을 보내고 응답을 처리하는 데 사용되는 Promise 기반의 HTTP 클라이언트 라이브러리.
요청 데이터를 JSON으로 직렬화하거나, 응답 데이터를 JSON으로 자동 파싱
간단한 사용법과 강력한 기능을 제공하여 RESTful API와의 상호작용에 널리 활용
- POST 요청 => BODY를 통해 서버로 정보를 전달
- 요청 인터셉터 => request, response가 이루어지기전에 응답을 가로채서 작업을 수행함.
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer My_access_token`;
return config
}, error =>{
return Promise.reject(error);
})axios.interceptors.response.use(response => {
console.log("Interceptor response data", response.data)
return Promise.resolve(response)
}, error =>{
return Promise.reject(error);
})모듈
소프트웨어를 구성하는 하나의 독립적인 단위, 특정 기능을 캡슐화하여 다른 코드와 분리한 코드의 집합
모듈을 사용하면 코드 재사용성을 높이고, 관리와 유지보수를 쉽게 하며, 복잡한 시스템을 더 작은 단위로 나누어 개발하는 것이 가능
모듈 생성 및 사용
math.js(모듈 파일)
export const add = (a,b) => a+b;
export const substract (a,b) => a-bmain.js(모듈을 사용하는 파일)
import { add, substract } from './math.js';기본(default) 내보내기
math.js
export default function multiply(a,b) {
return a*b;
}main.js
import multiply from './math.js';리액트
정의
The library for web and native user interfaces
라이브러리 란?
자주 사용되는 기능을 정해 모아 놓은 것
- 대표적인 js UI 라이브러리: angular, react, vue
- 프레임워크 vs 라이브러리
- 프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있는 반면, 라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태
SPA 를 쉽고 빠르게 만들수 있도록 해 주는 도구
장점
1. 빠른 업데이트와 렌더링 속도
2. 컴포넌트 기반 구조
3. 높은 재사용성
4. 메타(페이스북) 지원
5. 활발한 지식 공유와 커뮤니티
6. 모바일 앱 개발
단점
1. 방대한 학습량
2. 높은 상태(state) 관리 복잡도
리액트 앱 개발
일반 웹 페이지에 react.js 파일을 추가해서 기능을 구현
JSX = Javascript + XML = 자바스크립트 확장 문법
CRA(create-react-app), CNA(create-next-app)
리액트 기반 웹 애플리케이션 개발에 필요한 모든 설정 상태의 프로젝트를 만들어 주는 도구
XSS
공격자가 전달한 스크립트 코드가 사용자 브라우저를 통해서 실행되는 공격 기법
희생자 브라우저에서 공격자가 전달한 스크립트 코드가 실행되면, 희생자 브라우저 또는 PC에 저장된 정보를 탈취 => Cookie
가짜 페이지를 만들어 사용자 입력을 유도해서 입력한 정보를 탈취
해당 PC의 제어권을 탈취해서 원격에서 제어 => Beef와 공격 프레임워크를 활용해서 공격
방어기법-CSP
스크립트 코드가 실행되지 않도록 안전한 형태로 변경해서 저장하거나, 응답
Content-Secure-Policy 응답 헤더를 통해 설정
JSX 사용법
1. 반드시 부모 요소 하나로 감싸기
<Fragment>를 사용하면 불필요한 태그를 화면에 노출시키지 않을 수 있음.- 빈태그
<> </>로 감싸기 - div태그로 감싸기
2. JSX안에서는 자바스크립트 표현식을 {}로 감싸서 작성
3. JSX에서는 IF구문사용불가 -> 삼항연산자 이용
<h2>{ name === "홍길동" ? "환영합니다." : null</h2>4. 조건을 만족할 때만 내용을 보여주는 경우 => 조건부 렌더링
방법 1. 삼항 연산자를 이용하는 방법
<h2>{ name === "홍길동" ? "환영합니다." : null</h2>방법 2. &&연산을 이용
&&, ||: 단락 연산자(short circuiting operator) 앞부분에서 false(true)가 나오면 이후 과정을 생략함 (
<h2>{ name === "홍길동" && "환영합니다." : null</h2>5. 인라인 스타일
태그 내에서 style 속성을 이용해서 스타일을 지정하는 방법
DOM 요소에 스타일을 지정할 때는 객체 형태로 적용해야 하며, 스타일 이름은 카멜 표현식을 사용하고, 숫자 타입의 경우 단위를 생략하면 기본값으로 px를 사용(단위를 포함할 때는 문자열로 표현)
<Fragment>
<- 표현식을 의미하는 괄호
<- 객체를 의미하는 괄호
<h1 style={{backgroundColor: "black", color: "yello", fontSize: 28}}>안녕, {name}</h1>
<h2>{age + 2}</h2>
<MyButton />
</Fragment>인라인 스타일을 별도의 객체로로 선언해서 사용
const name = "홍길동";
const age = 23;
const myStyle = { backgroundColor: "black", color: "yellow", fontSize: 28, padding: '16px' };
return (
<>
<h1 style={myStyle}>{`안녕, ${name}`}</h1>
<h1>안녕, {name}</h1>
<h2>${age + 2}</h2>
<h2>{name === "홍길동" && "환영합니다."}</h2>
</>
);6. 함수가 undefinded를 반환하지 않도록 기본값을 설정
function Name() {
let name;
return name || "아무개";
}
function App() {
return (
<>
안녕, <Name />!
</>
);
}
export default App;7. css 클래스를 사용할 때 class가 아닌 className으로 설정
why? class사용은 js에서 예약어로 사용하고 있어서 className을 사용
App.css 파일에 아래의 스타일을 추가
8. 모든 태그는 반드시 닫는 태그가 필요
내용이 없는 태그의 경우에는 self-closing 태그를 사용
input, img, hr, br, ... 같은 경우는 처럼 닫기
9. 주석(comment)
영역에 따라서 쓸수있는 주석이 달라짐
요소 외부는 js주석(//, /**/) 주석을 사용
요소 내부에서는 html 주석(<!-- -->) 주석을 사용
단, 태그시작 이전에는 그대로 js 주석 사용이 가능함
{} 태그를 사용하면 /**/ 주석 사용가능 하지만, 인라인 주석을 사용할 경우 다음 줄에서 태그를 닫아줘야함
1. {/*주석*/}
2. {//주석
}10. 컴포넌트
클래스형 컴포넌트와 함수형 컴포넌트 구조
클래스형 컴포넌트
import { Component } from 'react';
class MyApp extends Component {
render(){ // render라는 함수를 재정의. return의 역할과 동일한건가?
}
}
export default MyApp함수형 컴포넌트
function MyApp() {
return (
<> </>
);
}
export default MyApp;