- 정부가 MSA로 바꾸는 추세이다
- 환경구축하기
- aws
- 우리의 마인드
- 환경구축하기
- component programming
- 코딩 실력은 시간이 흐르면 어차피 비슷해지기 때문에 요새는 문서화와 커뮤니케이션 능력의 중요성이 커지고 있다.
- web의 3가지 스펙
- HTML
- URL
- HTTP
React 함수 사용해보기
js03.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var name = '가';
let name1 = 'A';
console.log(name, name1);
console.log(this.name, this.name1);
console.log(window.name, window.name1);
function test() {
var name = '나';
console.log(name);
console.log(this.name);
}
test();
window.test();
let obj = {
name: '다',
test: function() {
console.log(name);
console.log(this.name);
console.log(window.name);
}.bind(this)
}
obj.test();
</script>
</body>
</html>
- PL은 규칙을 정해야한다.
ex) JS 오브젝트에 접근할 때는 this를 사용하자 등
js04.html - 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function count() {
var cnt = 0;
return ++cnt;
}
console.log(count());
console.log(count());
var cnt = 0;
function count() {
return ++cnt;
}
console.log(count());
console.log(count());
</script>
</body>
</html>
-> 호이스팅에 따라 위 값이 nan으로 뜬다.
-> 함수형 사용을 지양하는 것이 좋다.
js04.html - 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function count() {
var cnt = 0;
return ++cnt;
}
console.log(count());
console.log(count());
var cnt = 0;
function count1() {
return ++cnt;
}
cnt = 100;
console.log(count1());
console.log(count1());
// 클로저(Closure) D.P.
function count2() {
var count = 0;
return function() {
return ++count;
}
}
let cl = count2(); // cl은 함수이다.
console.log(cl());
cpmsole.log(cl());
let cl2 = count2(); // cl은 함수이다.
console.log(cl2());
cpmsole.log(cl2());
// 커링(currying) D.P.
function add(x, y) {
return x + y;
}
function add2(x){
return function(y) {
return x + y;
}
}
console.log(add(1, 2));
console.log(add2(1)(2));
function curry(fn) {
return function(x) {
return x.map(fn);
}
}
console.log(curry((x) => x*x)([1, 2, 3, 4, 5]));
// Momoization D.P.
let cnt = 0;
function fib(n) {
cnt++;
if (n < 2) return n;
return fib(n-2) + fib(n-1);
}
let r = fib(5);
console.log(cnt, r);
let result = [];
cnt1 = 0;
function fib2(n) {
cnt1++;
if (n < 2) return result[n] = n;
if (result[n] == undefined) {
result[n] = fib2(n-2) + fib2(n-1);
}
return result[n];
}
r = fib2(5);
console.log(cnt1, r, result);
</script>
</body>
</html>
-> 지역변수를 사용하여 문제를 해결해볼 수 있다.
js05.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT35Qfaw==" crossorigin="anonymous"></script>
</head>
<body>
<script>
let result="";
$.get('msg.json', function(data) {
result = data;
console.log(result);
});
console.log(result);
</script>
<!-- 자바 스크립트는 순서를 보장하지 않는다. = 비동기식 -->
</body>
</html>ReactJS
개요
리액트
- 페이스북 주도로 개발되어 2011년부터 제공되는 JS UI 오픈 소스 경량 라이브러리이다.
- UI 요소 중 자주 사용되는 부분을 컴포넌트화하여 재활용성을 확보하여 UI 유연성, 확장성을 확보할 수 있다.
- UI 요소들의 표준화 및 구조화 설계가 가능하여 다수의 인원이 참여하는 대규모 프로젝트에 적용할 수 있다.
- 최근 유행하는 SPA개발이 편리하다.
- 리액트 네이티브를 이용하면 안드로이드, IOS와 같은 모바일 앱 개발이 가능하다.
- UI에 관련되지 않은 기능들은 외부 라이브러리(Axios, Redux등)를 이용해야 한다.
특징
- 컴포넌트 기반으로 코드의 재활용성을 높일 수 있다.
- 가상돔을 제공하여 효율적인 DOM관리와 화면 처리를 지원한다.
- JSX를 이용하여 DOM Tree를 생성한다.
- 모델과 뷰 사이에 단방향 데이터 바인딩을 제공한다.
단점
- 브라우저의 제한이 있다.
- JS에 대한 기본 지식이 있어야 한다.
- 브라우저에 의해 처리되는 JS기반의 View 기술로 Tag기반의 HTML보다 무겁고, 처리속도가 느리다.
- 컴포넌트 기반으로 다양하고 복잡한 구성의 화면의 경우 생산성이 떨어질 수 있다.
- 복잡한 상태 관리가 불편하다.
개발환경
- 리액트는 라이브러리이기 때문에 애플리케이션을 개발 및 배포를 하기 위해서는 다양한 기능의 프로그램을 이용하여 개발환경을 구축하여야 한다.
주요 프로그램
- node.js, 바벨, 웹팩, Visual Studio Code 등이 사용된다.
node.js
- JS 애플리케이션의 실행환경
- libuv 라이브러리를 이용하여 이벤트기반, 논블로킹 I/O (비동기) 방식 환경을 제공한다.
- npm를 제공하여 다양한 JS패키지의 의존성 관리 및 설치 및 관리를 할 수 있다.
바벨
- Node.js기반으로 실행되며, 일반적으로 Webpack등 다른 애플리케이션과 함께 많이 사용된다.
- ES6, JSX같은 최신 버전의 코드를 ES5 이하 또는 특정 버전으로 변환해 주는 컴파일러/트랜스파일러이다.
- 자바스크립트의 브라우저 호환성 확보를 위해 사용된다.
웹팩
- Node.js기반으로 실행된다.
- 애플리케이션 제작에 이용되는 서로 의존성을 가지고 있는 자원(js, css, 이미지 등의 모듈)들을 분류하고 정리하여 하나로 묶어 정적자원으로 만들어 배포 및 실행을 편리하게 한다.
- 다양한 플로그인을 제공하여 개발에 사용되는 다양한 모듈을 처리할 수 있다.
Visual Studio Code
- MS에서 제공하는 Electron 프레임워크와 TS기반의 무료 통합 개발 환경(IDE)이다.
- 애플리케이션 제작에 필요한 환경 설정, 모듈 관리, 코딩, 디버깅, 테스트, 배포 등 전반적인 과정을 할 수 있는 프로그램이다.
- 다양한 확장을 이용하여 개발 환경을 구성한다.
리액트 생태계
- 리액트는 UI 중심의 자유도가 높은 라이브러리이다. 기본 기능 외 기능은 다른 라이브러리 또는 프레임워크를 이용하거나 통합될 수 있다.
개발환경 구축
리액트 애플리케이션 생성(create-react-app)
npm install -g npm
npx create-react-app react-app
cd react-app
npm startReact 기본
https://legacy.reactjs.org/docs/cdn-links.html
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
개발 기록장