본문 바로가기
학원수업/2월

02/09 자바스크립트 JSP React

by 코딩마스터^^ 2023. 2. 9.

자바스크립트에서 배열은 매우 중요하다.

자바보다 훨씬 더 중요

 

자바스크립트에서 instance of 로 타입을 체크해줘야된다. 왜냐하면 컴파일을 안한다.

내가 타입체크를 해야된다

 

Nullish문제

Nullish병합 연산자(??)를 이용하면 

(undefined ?? 2)

->2

 

세번째는 있으나 마나 하다.

첫번째가 널이면 다음꺼로 치환된다.

 

논리비교

==

===

세개짜리는 타입비교까지 한다.

===쓰는것이 더 안전하다.

!==

!===

 

객체는 데이터를 Property라는 인덱싱을 통해 구조적으로 묶어놓은 형태이다.

let car={

name: "깜찍"

age:(프로퍼티 인덱싱)

}

 

배열

추가하는 메소드 push

맨 뒤에 추가해준다.

 

자바스크립트에서는 객체나 함수를 생성할때 function사용

선언이 안되어있어도 선언한것과 동일하다.

 

function aaa(){

this.sum=0

this.count=0

}

여기서 this는 aaa가리킨다.

sum, count는 전역변수이다.

 

prototype

객체가 정의하는 함수를 만들때에 사용한다.

사용하면 내장함수가 된다.

내가만든 소나타라는 클래스의 api를 내가 만든다.

 

대입함수:

일급함수는 파라미터가 함수 

고차함수는 리턴값이 함수일때

 

배열의 내장함수 꼭 기억하기

join() : 구분자활용 문자령붙이기

push()

pop()

filter()

slice()

 

배열(Array)

구조분해할당과 관계있다.

매우 중요

 

const {cloor1, color2, color3}=colors;//리액트 빈번 사용

 

colors.filter

 

forEach문

반복문에서 쓰기

배열명.forEach(요소명 => {
실행문(요소명)
});

배열명.forEach(function(i){ console.log(i); });

배열명.forEach(i => { console.log(i); });

 

오늘의 학습목표

리액트 문서를 읽을수 있다!!!!

 

Babel은 자바스크립트 컴파일러이다.

https://babeljs.io/

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

yarn create react-app template2023

명령어로 다운받아준다.

리액트 프로젝트를 만들어 놓자>_<

 

리액트는 18버전으로 한다!

깃 연결하기

 

https://ko.reactjs.org/docs/getting-started.html

 

시작하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

 

다시 html0116으로 돌아와서

 

문제상황

 

목록을 10개까지 보여주는 페이지에서 다음페이지를 누르면 20~30을 보여주고싶다.

이전페이지를 누르면 이전으로 돌아가고싶다.

 

현재 페이지가 몇번째 페이지인지 알고 있어야 한다.

페이지의 특성은? 변한다.

 

상태를 관리하는 변수가 필요하다.

페이지의 값이 바뀌므로 let으로 선언한다.

그런것들을 정의할때 갹체가 필요하다.

 

1. 현재 페이지가 몇번째 페이지인지 알고 있어야 한다.

2. 현재 페이지가 몇번째 페이지인지 기억하는 변수가 필요하다.

store={

      currentPage:1,

}

페이지 처리는 목록페이지에서 필요하다.

30row

 

1~10  11~20   21~30

0~9     10~19  20~29

무조건 for문을 돌리는것이 아닌

각 페이지의 시작번호가 달라져야한다.(????????????)

 

이전 페이지일 경우 내가 현재 바라보는 페이지를 기준으로 -1한다

주의할점은 -1은 되지 않아야 한다.

삼항연산자를 이용해야한다.

조건 (삼항) 연산자

조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자입니다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if...else문의 대체재로 빈번히 사용됩니다.

store.currentPage>1?store.currentPage-1:1

 

for(let i=(store.currentPage-1)*10; i<store.currentPage*10;i++){

}

 

currentPage의 초기값은 1임 - 전변으로 선언함

왜냐면 상세보기화면으로 갔다가 다시 목록으로 돌아갈때

이전에 바라보던 페이지로 돌아가려면 이 값이 공유 되어야 함

따라서 전변으로 처리할것

 

내가 바라보는 페이지가 2번이면 

i=(2-1)*10 ->10

i<2*10 ->20

따라서 10 11 12 13 14 15 16 17 18 19

 

내가 바라보는 페이지가 3번이면

i=(3-1)*10 ->20

i<3*10 ->30

따라서 20 21 22 23 24 25 26 27 28 29

배열복습

Array.prototype.push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.->return값이 number

HTML은 절차지향인가 구조지향인가?

JAVA는 구조지향이다.

HTML은 절차지향이다.

C는 절차지향언어이다.

 

defer를 생각해보자.

순차적으로 돌아간다....

defer는 앞에 있다. head안에 있다. 먼저 실행이 된다.

근데 defer로 지연을 시킨다. 

DOM구조 

document object model을 defer로 강제로 지연시킨다.

 

{ }객체

[ ]배열

typeOf ->타입체크하는애다.

타입체크하면 [ ] { } 둘다 Object타입이다.

 

자바에서는 StringTokenizer

자바스크립트에서 substring() 이 잘라주는 함수이다.

 

Array.prototype.join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

 

/*em,  rem은 최상위 폰트사이즈를 기준으로 비율로 산정함 */

div 마다 em은 같은 폰트사이즈를 줌

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>클론코딩-step2[mostPopular]</title>
    <script defer src="youtube.js"></script>
    <link rel="stylesheet" href="youtube.css" />
  </head>
  <body>
    <h3>유투브 클론코딩 실습 2</h3>
    <div id="root"></div>
  </body>
</html>
<!-- 실습제목 : 문자열을 배열로 바꾸어 처리하기
content='';
const videoList=[];
이 부분을 복습하세요.
defer 시점의 문제-->
/* 제일 인기있는 유투브25개 가져오기 */
const ajax = new XMLHttpRequest();
const videoList=[];//배열로 만들기. 원소가 늘어나는것이지 배열 이름이 바뀌지는 않는다. 그래서 const
const key = "비밀^^"
const MOST_URL = `https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&regionCode=US&key=${key}`;

ajax.open("GET", MOST_URL, false); //open은 요청을 초기화한다.
ajax.send();

console.log(ajax.response);
const most = JSON.parse(ajax.response);
const items = most.items;
videoList.push(`<ul class="videos">`)
for (let o = 0; o < items.length; o++) {
  // 25번 반복 -> 25개의 li
  videoList.push( `<li class="container">`)
  videoList.push( `<div class="video">`)
  videoList.push( `<img class="thumbnail" src="${items[o].snippet.thumbnails.medium.url}"/>`)
  videoList.push( `<div>`)
  videoList.push( `<p class="channelTitle">${items[o].snippet.channelTitle}</p>`)
  videoList.push( `</div>`)
  videoList.push( `</li>`)
}
videoList.push( "</ul>")
document.querySelector("#root").innerHTML = videoList.join(" ");

step3

검색하면 25개 로드되도록 함.

 

바벨을 사용해보기

1단계 수업은 react문서 읽기

2단계 react 사용

3단계 reduce사용

 

어디가서 리액트 쓴다고 말할 수 있으려면 3단계까지 알아야한다.

그래야 상태관리를 할 수 있다고 말하기 가능!!

 

서버사이드 랜더링

클라이엍

설치하기

 

리액트는 자바스크립트와 태그를 함께 쓸 수 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>바벨소개</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- min의 의미는 공백이 없다는 뜻. 데이터를 아끼자^^ -->
    <!-- unpkg 빠륵 로딩시간이 덜 걸린다네요...  -->
  </head>
  <body>
    <div id="root"></div>
    <style>
      .title {
        color: rgb(217, 20, 132);
        font-size: 58px;
      }
    </style>
    <!-- babel이 타입이어야 리액트 코드로 자바스크립트를 컵파일 해준다. -->
    <script type="text/babel">
      const rootElement = document.querySelector("#root");
      const subject="React";
      const 클래스이름="title";
      const element = <h1 className={클래스이름}>{subject}</h1>;
      ReactDOM.createRoot(rootElement).render(element);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>바벨소개</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- min의 의미는 공백이 없다는 뜻. 데이터를 아끼자^^ -->
    <!-- unpkg 빠륵 로딩시간이 덜 걸린다네요...  -->
  </head>
  <body>
    <div id="root"></div>
    <style>
      .title {
        color: rgb(217, 20, 132);
        font-size: 58px;
      }
    </style>
    <!-- babel이 타입이어야 리액트 코드로 자바스크립트를 컵파일 해준다. -->
    <script type="text/babel">
      const rootElement = document.querySelector("#root");
      const subject = "React";
      const 클래스이름 = "title";
      const props = { className: 클래스이름, children: subject };
      const 사용자정의태그 = (
        <h1 className={props.className} children={props.children}></h1>
      );
      ReactDOM.createRoot(rootElement).render(사용자정의태그);
    </script>
  </body>
</html>

'학원수업 > 2월' 카테고리의 다른 글

02/13 51회차 JavaScript 수업 노트 정리(동기 비동기)  (0) 2023.02.13
02/13 OpenWheather API/ KakaoMap API 사용하기  (0) 2023.02.13
Youtube API 사용하기  (0) 2023.02.09
02/08 jQuery  (0) 2023.02.08
02/07 48회차 Ajax, 비동기 통신  (0) 2023.02.07

관련글

댓글

티스토리툴바