권현재

동적인 화면을 만들기 위해 리액트에서 조건부 렌더링을 사용할 수 있습니다.

동일한페이지에 하나의 글자나 효과만을 변경하기 위해서 새로운 페이지를 만드는 것은 비효율적입니다.

이럴때 조건부 렌더링을 사용할 수 있습니다.

아래는 컨테이너/프리젠테이셔널 패턴으로 폴더 구조를 체계화 하였을때,

조건을 설정하여 글자나 페이지의 일부를 변경하는 코드입니다.

두개의 index 모두 PortFolioCreateBoards 태그를 불러오고 있지만, 노란색은 isEdit={false}, 초록색은 isEdit={true} 입니다.

컨테이너/프리젠테이셔널 패턴의 값을 넘겨주기 위해 props를 사용하였고, 삼항 연산자를 사용하여 onClick 메서드와 LastBtn(버튼속성) 텍스트를 변경하게 하였습니다. 

isEdit가 false 일경우 "등록하기" 버튼과, onClickContents 함수가 실행됩니다.

isEdit가 true 일경우 "수정하기" 버튼과, onClickUpdateBoard 함수가 실행됩니다.

이렇게 조건부 렌더링을 활용하여 하나의 페이지에서 여러가지 페이지 및 동작을 실행시킬 수 있습니다.

우리는 JS에서 반복이 필요할때 보통 for 문을 사용하였다.

그러나 실제 프로젝트를 진행할때는 for문보다는 map, filter, every를 활용한다고 한다.

map, filter, every는 무엇일까?

map : 배열의 요소를 일괄적으로 출력 및 변형할 때 사용할 수 있습니다.

 * el은 사용자 임의로 변경가능하며 배열안 객체를 넣어서 사용할수도 있습니다.

js에서는 아래처럼 태그에도 사용이 가능합니다.

<div>
      {data?.fetchBoards.map((el) => (
        <div key={el.number}>
          <span>
            <input type="checkbox"></input>
          </span>
          <span style={{ margin: "10px" }}>{el.number}</span>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <span style={{ margin: "10px" }}>{el.writer}</span>
          <span>
            <button id={el.number} onClick={onClickDelete}>
              삭제
            </button>
          </span>
        </div>
      ))}
    </div>

filter : 배열중 원하는 항목만 필터하여 가져올 수 있습니다.

every : 배열안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.

every는 함수의 통과 여부를 확인할 수 있으므로 true 나 false를 반환합니다.

JavaScript는 변수를 할당한 후 이후에 다시 할당할 때, 타입을 상관하지 않는다

그러나 이렇게 작동하면 에러가 발생하지 않지만 실제 배포 후 페이지를 이용하게 될 때, 의도하지 않는 동작을 할 수 있다. 

TypeScript는 이러한 동작을 방지하기 위해 변수를 할당할 때 타입을 미리 지정하여, 배포전 에러를 미리 확인할 수 있게 도와준다.

타입스트립트 (TypeScript) : 자바스크립트의 타입을 강제 시키는 언어

//자바스크립트

let aaa = "안녕하세요"
aaa = 2

타입스크립트로 타입을 지정하는 방법에 대해 알아보자

  // 타입추론 : 처음에 들어온 값으로 타입을 추론, 지정합니다.
  
  let aaa = "안녕하세요";
  aaa = 3; //에러 발생

  // 타입명시 : 타입을 직접 명시합니다.
  
  let bbb: string = "반갑습니다.";
  let bbb = 10; //에러발생

  // 불린타입
  
  let eee: boolean = true;
  eee = false;
  eee = "false"; // ★문자열에 내용이 있으니 true로 동작합니다.★

  // 배열타입

  let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]; // Error: "안녕하세요" 
  let ggg: string[] = ["철수", "영희", "훈이", 10]; // Error: 10
  let hhh: (string | number)[] = ["철수", "영희", "훈이", 10]; // 에러 없음

  // 객체타입
  
  interface IProfile {
    name: string;
    age: number | string;
    school: string;
    hobby?: string; //? 는 있어도 되고 없어도 가능하다는것을 의미합니다.
  }

  const profile: IProfile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교",
  };
  profile.name = "훈이"; // 타입추론으로 이것만 가능
  profile.age = "8살"; // 타입추론으로 불가능
  profile.hobby = "수영"; // 타입추론으로 불가능

// ★★함수타입★★

  function add(num1: number, num2: number, unit: string): string {
    return num1 + num2 + unit;
  }
  const result = add(1000, 2000, "원"); //결과의 리턴 타입도 예측 가능

  // 화살표 함수
  const add2 = (num1: number, num2: number, unit: string): string => {
    return num1 + num2 + unit;
  };
  const result2 = add(1000, 2000, "원"); //결과의 리턴 타입도 예측 가능

  // any타입
  let qqq: any = "철수"; //자바스크립트와 동일!
  qqq = 123;
  qqq = true;

  return <></>;
  //타입스크립트는 js 영역(컨테이너)이 typescript로 변경됩니다.
}

next/router에 포함된 useRouter, 그 안에 페이지를 이동시키는 push 기능을 알아보자

우리는 홈페이지에 접속하게 되면 수많은 버튼을 클릭하여 원하는 페이지로 이동한다.

HTML이나 CSS로 버튼을 만들거나 활성화 시킬 수 있지만 이동하기는 어렵다.

이때 JS로 useRouter의 push 기능을 두가지 방법으로 사용할 수 있다.

1. 정적 라우팅

함수 실행시 push한 링크로 페이지를 이동시킬 수 있다. 

const router = useRouter;

const onClickCreateMutation = () => {
     router.push("http://localhost:3000/page/number/1")

onClickCreateMutation 함수가 적용된 버튼을 클릭시 위 페이지로 이동하며 빨간색은 생략이 가능하다.

정적라우팅의 단점은 링크를 수정하려면 매번 코드를 직접 수정해야한다는 단점이 있다.

2. 동적 라우팅

정적라우팅과 사용 방법은 동일하지만, 링크에 변수를 적용할 수 있다.

const router = useRouter;

const onClickCreateMutation = () => {
     router.push(`http://localhost:3000/page/${router.query.파일명}`)

query는 useRouter의 변수는 router에 담긴 기능이며, 파일명은 []로 감싸서 사용할 수 있다.

파일명을 [ ] 로 감싸면 router.query에 해당 값이 자동으로 입력되며, 이 값은 변수로 나중에 다양하게 활용 가능하다. 

(API 를 불러오는 number값이나 ID값의 variables로 활용 가능)

CreateProduct 할때와 UpdateProduct할때 서로 다른 링크로 이동시킬 수 있다. 

이전에 useState에 대해 정리한적이 있다.

오늘은 useState를 사용할때 반드시 이해해야 할 부분을 확인하려고 한다.

useState :

기존에 useState를 사용해서 변수를 만들고 HTML이나 JS에 적용시킬 수 있었다.

useState를 아래와 같이 선언했다.

wirter와 title, contents의 input을 onChange로 이벤트가 발생할 때마다 값을 불러오고있다.

그럼 writer와 tilte contents가 한글자씩만 입력되어도 isActive가 반응하여

버튼의 색상을 yellow로 변경시켜야 하는데,

한글자씩만 입력되면 색상이 변하지않고 한번 더 입력해야 색상이 변경된다.

이것은 useState의 실행 방식때문이다.

1. 화면 다시 그리그

2. 임시저장공간을 활용한 값 변경

useState는 함수안에서 실행시 또 변경된 값이 있을 수 있으니, 임시저장공간에 저장한다.

함수가 끝날때까지 변경되지 않으면 임시저장공간에 있는 변경값을 화면에 다시 불러온다.

그래서 event를 감지하는 함수안에 writer의 값을 바로 적는것이 아닌 값이 추가되자마자 함수를 바로 실행시키기 위해 아래 처럼 변경해야 한다.

또한 여기서 props라는 값을 이용하여 button에 isActive를 실행시켰다.

props는 무엇일까?

"한마디로 정리하면 부모가 자식에게 줄 수있는 데이터" 이다.

리액트에서 하나의 .js 를 .container.js / .presenter.js / .queries.js / .styles.js 로 분리하여 import해서 진행하였다.

이때 

이때 props를 사용해서 부모의 함수를 자식에게 전달해 줄 수 있었다. 

props는 부모가 자식에게만 줄 수 있는 단방향이므로 주의해야한다.

하나의 파일에 너무 긴 코드가 작성되어있으면 유지보수 및 관리가 어려울 수 있다.

상대방이 코드를 어렵지 않게 해석하기 위해 기능별로 파일들을 정리할 필요가 있다.

1. 컨테이너 (js) / 프리젠테이셔널 패턴(html) 

-JS 부분 : container component

-HTML(JSX) 부분 : presentational component, 줄여서 presenter

2. 훅스 패턴 (함수) 

3. 아토믹 패턴 (파일하나에 기능하나씩)

컨테이너/프리젠테이셔널 방식보다는 훅스패턴 방식을 많이 사용하고 있지만,

아직 컨테이너 / 프리젠테이셔널 방식을 사용하는 회사가 있을 수 있으니 모두 익혀 놓는 것이 중요하다.

1. 컨테이너(js) / 프리젠테이셔널 패턴(html) 

이전에 제작한 포트폴리오 파일을 위 방식으로 나눠서 저장하였다.

1. index.js : return <불러올함수> 작성

2. 파일명.container.js : js와 html에 적용되는 함수 작성

3. 파일명.presenter.js : html 작성

4. 파일명.queries.js : gql 작성

5. 파일명.styled.js : css 작성

또한 import를 두가지 방식으로 정리했는데 차이를 알았다.

import { 변수 } from "경로" : 경로에 선언 가능한 함수가 여러가지일 때 {} 사용

import 변수 from "경로" : 경로에 선언 가능한 함수가 한가지일 때 {} 미사용

파일을 옮길때 헷갈린것은 파일명.container.js 위치의 html 부분이였다.

import를 한다고 내부에 있는 데이터까지 연결되는 것이 아니였다.

그래서 두 컴포넌트 간 데이터를 연결하려면, props를 사용해야 했다.

( 단방향 : 부모에서 자식으로만 전달 가능합니다) -자식에게 작성 

해당 파일에는 prestenter의 함수를 가져와 사용하지만 HTML에서 함수가 사용된다면

container 파일에서 미리 선언해줘야 사용할 수 있다.

이때는 props를 사용할 수 있다. (이름 변경가능)

이때 가장 큰 차이점은 저장된 데이터를 불러오는 query의 경우

useQuery가 할당되어있는 const {data}가 있으므로,

container에서는 한번만 선언해주고 presenter에서 동일한 이름으로 사용할 수 있다는 점이다.

(같은곳에 정보가 저장되어있기때문에 이렇게 쓸 수 있는 것 같다)

Mutation에서는 함수의 기능이 모두 다르므로 (input 별로) 하나씩 변경해줘야한다.

오늘은 어제 학습한 API의 종류인 rest와 grapql를 연습 프로그램이 아닌 vscode에서 직접 실행 하였다.

API vscode에 적용하기

1. rest 사용하기

rest는 axios를 사용하기때문에 axios import가 필요하다.

rest는 모든 자료를 불러오기때문에 비교적 간단하게 해결 할 수 있었다.

2. graphql 사용하기

mutation을 사용한 graphql 은 내가 원하는 값들만 사용하기 때문인지 rest와 다르게 조금 복잡하다.

나는 우선 아래 순서대로 작성했다.

0) _app.js 수정

1) HTML 작성

2) API를 요청하는 동작 함수 작성 및 useMatation을 불러올 변수 생성 (사진에서는 result)

3) useMatation 함수 작성

4) "나의함수"에 담을 API 자료의 단위와 생성시 응답받을 자료 작성 (playground에 있는 자료와 단위가 동일해야합니다)

5) mutation 할 자료 정보 입력 (사진은 input으로 입력 예정)

6) input을 넣을 수 있게 함수 작성

여러번 반복했지만 아직은 API를 VSCODE 에 사용하기 쉽지 않은 것 같다. 

진행하면서 대부분 $를 잘못 입력하거나, {}, ()를 잘못사용해서 에러가 발생했다.

작성했던 코드를 여러번 다시 작성하면서 useMutation 을 사용하다보면 적응할 수 있을 것 같다.

동기와 비동기

동기 : 요청을 보내고 응답을 받을때 까지 기다린 후 수행

비동기 : 응답을 받을때 까지 기다리지 말고 실행

위에 rest와 graphql을 vscode에 적용하고, useMutatian 을 사용하면서 새롭게 추가된 것이 있다.

API 응답을 가져올때 불러올 자료(함수)에 aysync와 await를 사용해야 한다는 것이다.

API를 사용할때 함수는 화살표 함수를 많이 사용하는데,

async는 소괄호() 앞에 await는 불러올 함수 앞에 입력하면 된다. 

이것은 대부분의 도구들이 비동기가 기본값으로 설정되어있어,

API자료를 불러오기 전에 실행되어 버리면서 언젠간 출력해주겠다는 Promise가 출력되는 것이다.

(async와 await를 사용하면 자료가 응답 올 때까지 기다린다)

개발자와 에러

개발을 하다보면 수많은 에러를 만나게된다고 된다.

이때, 에러를 얼마나 빠르게 해결하는지가 개발자의 능력을 결정한다고 한다.

에러를 만나면 꼭 아래 순서로 진행하여 해결하는 능력을 기르자 😃

1) 직접 찾기

<HTML / CSS 에러 > : 개발자도구 Elements 확인

-> 디버깅(수정) 작업은 개발자 도구에서 수정 후 실제 코드를 수정후 코드 적용

<JS 관련 에러> : 개발자도구 Console 확인

-> 에러 발생시 코드 중간중간에 console.log()로 계속해서 확인

<API 관련 에러>: 개발자도구 Network 확인​

2) 검색

3) 질문

 1. if 조건문 간단하게 정리하기

지난번에 작성한 게시물에서 두가지를 보완해야 할 것 같다.

우선 1번 if 조건문 간단하게 정리해야한다

아래 사진은 작성자, 비밀번호, 제목, 내용에 빈칸이 있을경우 경고문으로 알려주는 코드이다.

말 한마디로 설명할 수 있는 부분을 거의 50줄 가까이 작성하면서 '이게 맞나...' 싶었는데 역시 아니였다.

하나의 if 문으로 작성하려고 하다보니 이렇게 길어졌다.

물론 안에서 경우의 수에 따라 경고문이 나오지 않는 것도 발견했다......

위 코드는 8줄로 끝낼 수 있었다...😂

함수 안에 if 문을 중복해서 사용 할 수 있다는 것을 잘 활용하면 좋을 것 같다.

또한 여기서 if (조건문) {} 에서 "조건문"은 true이면 해당 코드를 실행한다. 

if가 인식하는 false 는

-1, "", false, null, undefined, NaN 이며, 나머지는 모두 true를 활용하면 코드 길이를 줄일 수 있을 것 같다.

코드가 잘렸지만 !name 은 name에 아무런 값도 입력 되지 않을때 true를 반환한다.

2. onChange 활용

이전에 onChange는 even 함수로 value값을 불러와 name을 수정해주는 일만 했었다.

때문에 버튼을 한번 클릭하면 에러 메세지가 지워지지 않았다.

그래서  if 문을 추가했다. 

이렇게 작성하면 버튼을 눌러 경고문이 나왔을때, 

input 내용을 추가하면 버튼을 누르지 않아도 경고문이 사라지는 것을 볼 수 있다.

3. 통신과 API

기본적으로 통신은 요청과 요청에 대한 응답이며,

우리가 주로 사용하는 통신자료는 HTTP(텍스트/하이퍼텍스트)이다.

이론적인 부분은 아래 이미지로 쉽게 정리 되었다.

API 종류는 두가지(REST, GRAPHQL)이 있으며,

GRAPHQL이 최신 기능으로 원하는 것만 "골라서" 받을 수 있다는 점이 특별하다.

결국은 백엔드 개발자가 만든 API에 요청을 보내고,

내가 갖고싶은 자료를 불러오거나 수정하는 것으로 이해하면 좋을 것 같다.

API 요청 연습

mutation (추가, 수정, 삭제)

빨간색 : 조회( query)인지 추가,변경,삭제(mutation) 인지 확인

초록색 : 무엇을 어떻게 할 것인지 

파란색 : 추가, 변경, 삭제 할 내용

주황색 : 조회 값

* query도 동일한 방식으로 "조회" 할 수 있다.

결국 graphql도 만들어진 이름을 보고 무슨 행동을 할지 파악할 수 있고,

가독성이 좋지 않아 이해가 안되는 것은 백엔드 개발자에게 수정을 요청 할 수도 있다고 한다.

또 작성할때 주의해야 할것은 () 인지 {}인지,

키 값이 String인지 Int인지 확인 해야하며 필수 항목도 확인해야한다.

괄호까지 넣었는데 무엇이 있는지 확인하기 번거로울때는 

단축키 shift + space 를 누르면 리스트와 value 타입도 확인 할 수 있다.

react 시작

한달간에 HTML, CSS, JavaScript의 기본지식을 공부하고.

이제 본격적인 프론트엔드 강의를 시작했다.

가장 먼저 시작한 새로운 언어는 react 이다.

react(리액트)는 컴포넌트(component)라고 불리는 작은 부품으로 복잡한 UI를 구성할 수 있었다.

.html이나 .css 파일이 아니라 .js 안에서 모두 해결할 수 있으니 쉬워 보였지만 역시 처음 보는 것은 매우 어색했다.

우선 기본 셋팅을 진행했는데 각 폴더 및 파일들을 간단하게 정리했다.

1. node_modules : 불러온 기능들
2. pages :프론트엔드 화면 및 웹뷰 - HTML 파일과 JS 파일이 JS로 합쳐짐
3. _app.js : 모든 페이지의 공통설정들을 여기서 진행합니다.
4. public : 사진,아이콘 등을 저장해놓음(폴더명은 마음대로 변경 불가)
5. styles : css 파일
6. .gitignore : git 업로드시 제외할 파일
7. package.json (기본 매뉴얼) - 프로그램을 실행시키는 설명서
8. README.md 상세 설명서 : 내가 만드는 메뉴얼
9. yarn.lock : 버전 잠금 파일 (버전 기록)

작성했지만 아직 모든 파일을 직접 뜯어보진 못했다.

모두 필요한 파일이지만 gitignore에 들어있는 파일은 git 업로드에서 제외된다는 점은 기억해둬야할 것 같다.

react 로 페이지 만들기

처음으로 리액트로 만든 게시글 등록 페이지이다. 

Go Live가 아니라 package.json에 있는 dev로 페이지를 열어야하므로 터미널에 package.json이 있는 곳으로 이동해야한다.

1. 터미널에서 cd 파일명/ or cd .. 등 으로 이동

2. package.json이 있는 폴더에서 yarn dev 입력 

이후 localhost:3000에서 pages에 저장해놓은 폴더로 이동하면 페이지를 열 수 있다

나는 pages/num1/20230109 안에 index.js를 저장해놓았다 (HTML 자료)

HTML 과 CSS에 적용

리액트는 HTML과 달리 내가 직접 태그를 만들어 사용 할 수 있다. 

1. 태그명을 정한다.

2. import에 태그명을 넣고 css 파일에 추가한다.

3. 태그를 사용한다.

내가 CSS를 적용한 태그들이 무수히 많이 나올 수 있다. 

 

기본 셋팅 방법은 아래를 참고 할 수 있다.

pages 내부의 HTML,JS 파일 

 

import { 새로만든태그명1, 새로만든태그명2 } from "css 파일경로" 

import { useState } from "react";

 

export default function EmotionPage() {

// 여기는 자바스크립트 쓰는 곳

     return (

// 여기는 HTML 쓰는 곳

 

);

}

styles 내부의 CSS 파일 

export const Container = styled.div`

 // 여기는 CSS 쓰는 곳

`;

 

추가로 게시물을 만들면서 알게된 css 속성이 있다.

맨 하단에 메인 설정에 유튜브 / 사진을 input radio로 만들었는데 해당 태그에 accent-color를 사용하여 선택했을때 색깔을 변경할 수 있다.

 

export const ContentInp = styled.input`

accent-color: #ffd600;

`;

 

 

 

JavaScript에 적용

HTML과 CSS를 리액트 컴포넌트로 활용 하였고, 이제 JavaScript를 활용해보자

js로 html을 제어하기 위해서는 

document.getElementByID("").innerText = "~~" 등으로 사용 해야했는데 

리액트에서 짧게 줄일 수 있었다.

 

import { useState } from "react";

위에 작성한 useState 기능을 불러왔기 때문이다.

리액트의 Hooks 를 사용하면

변수 선언방식이 달라지지만 활용하면 코드의 길이를 많이 줄일 수 있다.

 

* Hooks 란?
: use로 시작하는 애들 (useState, useEffect, ... 등)
useState 란?
: State를 만들어주는 아이 / 리액트를 다운받아야 사용 가능합니다
State 란?
: Component(컴포넌트) 전용 변수(let, const 같은 변수)

 

 

변수 만드는 방법 비교
기존 방법 :

let const = 0  혹은 const count = 0

State 사용 방법 : 

const [count(변수명),setCount(변수바꾸기)] = (변수만들기)useState(0[초기값])

변수 바꾸는 방법 비교
기존 방법 : 

let count = 0 --변경--> count = 5; / const count = 0; --변경--> 변경 불가

 

State 사용 방법 :

const[count,setCount] = useState(0) --변경--> setCount(5)

설명을 보면 헷갈리지만 실제 코드를 보면 훨씬 간단하게 만들 수 있다.
 

기존 js에서는 태그에 id값을 주어 변환하였지만, State 방법은 내용에 변수명을 입력하여 사용한다.

 

그래서 초기값부터 재할당되는 값까지 쉽게 바꿀 수 있다.

 

js 적용 

 

 

<button onClick = {함수명}>

<input onChange = {함수명} / > : HTML 요소의 값이 변경 될 때 마다 발생한다.

 *함수명은 보통 앞에 이벤트이름+기능 을 넣는다 

 

onClick은 버튼 누를때마다 발생하는 함수로 비교적 바로 함수에 적용 할 수 있다.

이번에 사용한 onChange는 input에 요소를 입력할 때 마다 변경되는 값을 파악하기 위해서 아래 작업이 필요하다.

 

function onChangeName(event) {

   setName(event.target.value);

}

//name이라는 변수에 event.target.value를 재할당하고있는 onChangeName 함수

 

이것은 email에 @가 있는지 없는지 구분할때 사용하거나, pw1와 pw2가 같은지 구분할때도 사용할 수 있다.

 

       <div>

            이메일 : <input type="email" onChange={onChangeEmail} />

       </div>

       <Error>{emailError}</Error>

1) Number("123") // output : 123;

2)String(123) // output :"123"; 

2-1) 숫자타입.toString()

3)getDate() : '일' 을 출력합니다.

let a = new Date(2016.05.01)

let b = a.getDate() // output: 1

let c = new Date(2016.month.0)

console.log(c.getDate()) // output : 2016년도 month 의 '일'수 

4) 변수명.includes('문자') : 변수에 문자를 포함하면 true를 반환합니다.

5) 배열이름.push('값') :배열에 값을 추가합니다.

6) 배열.join(' ') :배열의 값을 하나의 문자열로 합칩니다.

7) 문자열변수.substring(5, 10) : 5번인덱스부터 10번 인덱스까지만 출력합니다.  

7) 변수.slice(length, num) : length번째 부터 num 번째까지만 값으로 출력합니다. (배열이 아닐때)

8) 변수.substr(num): 변수를 num번째 까지 삭제하고 나머지를 값으로 출력합니다. (배열이 아닐때) 

9) 변수.toLowerCase() : 변수 값의 대문자를 모두 소문자로 변환합니다.

9-1) 변수.toUpperCase() : 변수 값의 소문자를 모두 대문자로 변환합니다.

10) 배열.indexOf('값') : 변수 안에 '값'의 존재 유무 확인 (있으면 index 순서를, 없으면 -1 출력)

11) Math.abs(num) : num의 절대값 반환

12) 문자열.split("") : 문자열을 하나씩 쪼개서 배열로 넣어줍니다. 

ex) "a234" --->> ['a', '2', '3', 4'']

13. 배열.filter( (el) => { return 조건식  }  ) : 전체 배열에서 조건식에 해당하는 요소만 다시 배열합니다.  

14. const arr = new Array(숫자) : arr에 숫자 만큼의 요소를 할당받을 수 있는 배열을 만들어줍니다. (아직 빈배열 : [<숫자> empty items> ] )

15. 배열.fill(요소) : 요소를 배열의 숫자만큼 가득 채워줍니다.

16. 배열.reduce( (acc(누적값입니다.), cur(현재값입니다.), i ) =>{  }, 초기값 ) :

배열.reduce ( (acc, cur)) => {}, 초기값)  

17.  배열.forEach( )

18. 배열.sort() : 배열을 내림차순으로 정렬합니다.

그냥 사용하면 1,2,3 순으로 정렬되어 1,19, 2, 30 식으로 나옴

내림차순 : 배열.sort((a,b) => a-b);

오름차순 : 배열.sort((a,b) => b-a);

19. 배열.reverse() : 배열의 순서를 뒤집습니다.

20. new Set() : 배열 역할을 해주는 객체 : 배열에서 중복되는 데이터를 자동으로 제거해줍니다.

21. Array.isArray( [ ] )

22. Array.from() : 배열로 변경하겠다.

23. Math.min(...[2,3,4]) // 2

24. arr1.concat(arr2) // [arr1, arr2]

25. arr.spice( n, m, x, y ) :

x와 y는 필수값이 아닙니다.

n의 index부터 m만큼 삭제합니다. 삭제한자리에 x,y,z,a,d,b,d, 등을 추가할 수 있습니다.

To Do 리스트

<script src="" defer>

1) <input onkeydown="함수()"> : input에 값을 넣어줄때마다 함수가 실행됩니다.

2) (window.event.keyCode === 13)

console.log(event) : 무엇이 실행되고있는지 확인 가능합니다.

KeyCode : 특정 버튼 및 동작

3) const 변수명 : document.createElement('태그') : 함수가 실행될 경우 새로운 태그가 생성됩니다.

4) 변수1.appendChild(변수2) : 변수 1에 변수 2를 자식태그로 추가합니다.

5) 변수명.addEventListener(' 원하는 행동 ex)click, dblclick ' , 익명 함수(화살표 함수)  ) : 원하는 행동이 실행될때 익명함수가 실행됩니다.

6) 변수명.classList.toggle(클래스명) : 변수에 새로운 클래스명을 지정합니다. (toggle : 버튼이 누르면 실행, 다시 누르면 종료)

7) 변수명.remove() : 변수를 삭제합니다. (addEventListenter의 익명함수에 들어갈 수 있습니다)

8) document.querySelectorAll('태그') : 태그의 모든 것을 가져옵니다. (li 입력시 모든 li를 배열 형태로가져옴)

9) 변수명.children[i].classList.contains('complete') : 변수안에 i번째 children이 complete라는 이름의 클래스가 존재하는지  확인(불린값으로 결과반환)

10) 스코프 (scope) : 변수 참조의 유효 범위

-전역 스코프 

-지역 스코프 (함수 레벨 스코프 / 블록 레벨 스코프)

11) JSON.stringify(변수명) :  객체와 배열자체를 문자열로 변환합니다.  

      JSON.parse(변수명) : 문자열로 변환된 데이터를 원본형태로 다시 변환합니다.

12) localstorage.변수명('key 이름 ', 문자열타입의 변수) : 문자열 타입의 변수를 localstorage에 저장합니다.

13) 호이스팅(hoisting) :  인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것이라고 함