20240327 java script

<오늘의 수업 내용>

 

Practice > ch09_node.js

01.전역변수.js

console.log(__filename);
console.log(__dirname);

console.log(process.env.JAVA_HOME);

for (let i = 0; i < 10; i++) {
  if (i == 5)
    process.exit();
  else
    console.log(i);
}

 

02.osModule.js

const { log } = require('console');
const os = require('os');
//const url = require('url');

console.log(os.hostname(), os.platform(), os.type());

const url = new URL('https://www.hanbit.co.kr/store/books/look.php?p_code=B2955421742');
console.log(url.href);
console.log(url.protocol);
console.log(url.pathname);
console.log(url.search);
console.log(url.searchParams);

 

03.fs.js

const fs = require('fs');
// 1) 동기식으로 읽기 - 권장 X
// const file01 = fs.readFileSync('./01.전역변수.js');    // 전역변수 읽음
// console.log(file01.toString());
// console.log('========================================');
// const file02 = fs.readFileSync('./02.osModule.js');
// console.log(file02.toString());
// console.log('========================================');


// 1) 비동기식으로 읽기 - 권장 X
fs.readFile('./01.전역변수.js',(err, data) => {
  console.log(data.toString());
});

console.log('========================================');
fs.readFile('./02.osModule.js',(err, data) => {
  console.log(data.toString());
});
console.log('========================================');

// 3) 올바른 비동기식 읽기 - 권장
fs.readFile('./01.전역변수.js',(err, data) => {
  console.log(data.toString());
  console.log('======================================');
  fs.readFile('./02.osModule.js',(err, data) => {
    console.log(data.toString());
    console.log('======================================');
  });
});

 

Practice

ch02.js

let s = `She said, "I am happy."`; // templete literal
console.log(s);
let year = new Date().getFullYear();
console.log(`올해는 ${year}년 입니다.`);

let toggle = true; // on/off 반복
for (let i = 0; i < 4; i++) {
  toggle = !toggle;
  console.log(!toggle,);
}

console.log(`2 == '2' is ${2 == '2'}`);   // true, 값은 같음
console.log(`2 === '2' is ${2 === '2'}`); // false, 값은 같으나 자료형이 다름

 

03_조건문.js

let date = new Date().getDate();
console.log(date);
console.log(`오늘의 날짜는 ${date % 2 == 0 ? '짝수' : '홀수'}입니다.`);

let test ;    // null, undefined, '', 0, {}, []만 false, 나머지는 true (값이 있으면)
test = test ? test : '초기값';
console.log(test);

 

04_반복문.js

let fruits = ['사과', '배', '감'];

for (let i=0; i < fruits.length; i++)
  console.log(fruits[i]);

  for (let fruit of fruits)
    console.log(fruit);

    var x = 4;    // var는 재선언이 가능, 코드의 양이 길어지면 어디서 어떻게 선언되는지 파악하기가 어려움
    var x = 6;    // 가급적 사용하지 말 것
    let y = 4;    // let은 재선언이 안됨
    // let y = 6;

 

05_함수.js

const anony = function() {  // anony or fn
  console.log('익명 함수');
}
function named() {
  console.log('선언적 함수');
}

anony(); named();    // anony(); or fn(); named();

const arrow = () => {
  console.log('화살표 함수, 람다 함수');
}
arrow();
// 파라메터가 1개 있으면 ()를 생략할 수 있음
const param1 = x => {
  console.log('x=' + x);
}
param1(5);
// 함수내부의 실행문이 return 한개밖에 없으면 { } return을 생략 할 수 있음
const add = (a, b) => a +b;
console.log(`add(3, 4) = ${add(3, 4)}`);

const fn = (name, count) => {
  // if (count== undefinedd)    // level 1
  // count = 0;
  // count = count ? count : 0; // level 2
  count = count || 0;           // level 3
  console.log(`${name}: ${count}`);
}
fn('apple', 10);
fn('banana');

function call3Times(callback) {
  for (let i=0; i<3; i++)   // callback 3번 호출
  callback();   
}
// call3Times(anony);
// call3Times(named);
//call3Times(function() {
//  console.log('콜백 함수로 직접 익명함수를 생성');
//});
call3Times(function() {
  console.log('콜백 함수로 직접 익명함수를 생성');
});

setTimeout(() => {
  console.log('1000ms 이후에 실행됩니다.');
}, 1000);   // 1000ms =1초
const si = setInterval(() => {
  console.log('0.5초마다 실행됩니다.');
}, 500);
setTimeout(() => {    // 3초 후에 반복실행되는 코드를 없앰
  clearInterval(si);
  console.log('3.1초 후에 반복실행되는 코드를 없앴습니다.');
}, 3000);

 

06.객체.js

const obj = {name:'james', age:25, job:'programmer'}
let age = 'age';
console.log(obj.name, obj[age], obj['job']);   // [] = key 값
for (let key in obj)
  console.log(obj[key]);
// 반복문 쓸 때 이와같이 쓴다

 

07.표준내장객체.js

let str = 'c:/Temp/ss/prpfile/james.jpg'
// 파일의 타입
let index = str.lastIndexOf('.');
console.log(str.substring(index+1));   // end를 생략하면 끝까지
// 파일이 있는 제일 마지막 디렉토리명
let arr = str.split('/');   // profile을 끄집어내고 싶을 때 : 우선 array로 만듦
console.log(arr[arr.length-2]);

const fruits = ['apple', 'banana', 'cherry'];
fruits.push('melon');
console.log(fruits.join(',')); 

const numbers = [4, 7, 10, 9, 15, 6];
console.log(numbers.sort((x,y) => x-y));    // 오름차순 정렬 - 자기파괴적 Method : 배열 자체가 변화됨
console.log(numbers);

fruits.forEach(value => {
  console.log(value);
});

fruits.forEach((value, index) => {
  console.log(value, index);
});

fruits.forEach((value, index, arr) => {   // arr 는 잘 사용안함
  console.log(value, index, arr);
});

let power = numbers.map(val => val * val);    // 제곱을 하기위해 value 만 필요
console.log(power);

let even = numbers.filter(val => val % 2 == 0);
console.log(even);
console.log(fruits.filter((val => val.length >= 6)));

let sum = numbers.reduce((prev, curr) => prev + curr, 0)   // 초기값 0
console.log(sum);   // 51, [4, 7, 10, 9, 15, 6] 의 합
console.log(numbers.reduce((prev, curr) => prev * curr, 1));

const complex = [
  {name:'pad', price:150000}, {name:'no-line mouse', price:80000}, {name:'electric pen', price:30000}
];
const jsonComplex = JSON.stringify(complex);    // 문자열로 만듦
console.log(jsonComplex);
const parseComplex = JSON.parse(jsonComplex)    // 문자열을 특별한 구조체로 만듦
console.log(parseComplex);

 

es6추가.js

// Destructuring
let person = {name: 'James', age:25, job:'Programmer'};
const {name, age} = person;
console.log(name, age);

// 구조체 분할은 아님
person = {name, age, job:'Traveller'};    // {name:name, age:age, job:'Traveller'}; 의 형태를 생략
console.log(person);

let fruits = ['apple', 'banana', 'cherry'];
const [a, b, c] = fruits;
console.log(a, b, c);   // apple banana cherry
const [x,y] = fruits;
console.log(x, y);      // apple banana

// Rest Operator
const [l, ...m] = fruits;
console.log(l, m);      // aple [ 'banana', 'cherry' ]

// Spread Operator
let newFruits = [...fruits, 'melon'];
console.log(newFruits); // [ 'apple', 'banana', 'cherry', 'melon' ]
console.log([fruits, 'melon']); // [ [ 'apple', 'banana', 'cherry' ], 'melon' ] - array 안에 array 가 들어가 있는 모습

let str = 'Java';
console.log(...str);    // J a v a

let newPerson = {...person, gender:'male'};
console.log(newPerson);

 

<수업 정리>

react 를 하기 위해서 javascript 연습을 함

jQuery 에서 사용하는 방법

react 도 역시 java code

라이브러리와 자바가 섞인 react

react 는 클라이언트 사이드에서 랜더링을 해주는 것

싱글 페이지 어플리케이션임

 

웹 페이지 인터넷 서핑 하다 보면

페이지 넘어가는 것이 부드러운 것들이 있을 텐데

그런것이 react 로 많이 구현해 놓은 사이트 입니다.

 

좋아요 하면 그 모양하나만 바뀌는 것 react 

리액트를 쓰기 위해서는 자바스크립트를 잘 해야하고

jsx 문법을 쓰는 것을 배워서 처리할 수 있어야 합니다.

 

자바스크립트의 jsx 문법은 함수형태로 쓰게 되는 것이고

그것드링 여러 모듈로 나눠지고 있는 것입니다.

 

연습 해야 할 것은

웹 페이지를 볼 때 박스를 봐야합니다.

박스로 쪼개서 보는 습관을 기르세요.

박스react componant 가 되니 그 것을 하나씩 구현해나가면 됩니다.

 

Html 할 때 UI 하기위해 부트스트랩

리액트에선 부트스트랩이 아닌 머테리얼 UI를 사용합니다.

부트스트랩과는 달라지고 디자인 패턴이 달라집니다.

안드로이드나 아이폰 form 을 통해 볼 수가 있게 됩니다.

 

폰에서 보는 것 까지가 프로젝트의 목표입니다.

 

one source multi use

대형을 소형으로 축소했을 때, 소형모양에서 깨지지 않을 정도로 디자인 되어있으면

그것을 앱으로 바꾸는 소프트웨어는 많이 있기 때문입니다.