02/02 JavaScript (forEach, filter)

Node.js

 

V8은?

오픈소스 자바스크립트 엔진이다.

구글이 만들었다.

 

 

버블링과 캡쳐링

 

부모한테 이벤트가 발동되는것 : 버블링

자식한테 이벤트가 타고 내려오는것  : 캡쳐링

 

<ul>태그-순서가 없다.

 

<ul>

<li></li>

</ul>

 

 

비상태

Query String 쿼리스트링이란?

사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. query parameters( 물음표 뒤에 = 로 연결된 key value pair 부분)을 url 뒤에 덧붙여서 추가적인 정보를 서버 측에 전달하는 것이다. 클라이언트가 어떤 특정 리소스에 접근하고 싶어하는지 정보를 담는다

 

물음표 뒷부분이 쿼리 스트링이다.

get방식으로 가져온다.

Restful API를 사용해서 가져오는것이다.

 

 Object

JSON.stringify()->문자열로 변경해준

 

const datas = JSON.stringify(Object->{"key":"raghga"})

 

문자열을 배열로 바꾸어 구조분해하는 함수 지원

 

const jsonDog=JSON.parse(datas)

 

Express

Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

많은 유명한 프레임워크들이 Express를 기반으로 하고 있습니다.

 

라이브러리와 프레임워크의 차이

 

🚗 프레임워크

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미합니다.

애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발합니다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래서, 메서드들을 구현하면 됩니다.

🔎 예시

• Java 서버 개발에 사용되는 Spring
• Python 서버 개발에 사용되는 Django, Flask
• 안드로이드 앱 개발에 사용되는 Android
• 아이폰 앱 개발에 사용되는 Cocoa Touch
• 웹 개발에 사용되는 Angular, Vue.js 등
• 자바 기반의 JSP를 위한 프레임 워크 Struts
• 루비로 작성된 MVC패턴을 이용하는 Ruby on Rails

 

📚 라이브러리

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미합니다.

🔎 예시

• Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup 등등)
• C++의 표준 템플릿 라이브러리 (STL)
• Node.js에서 npm으로 설치한 모듈
• HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
• 웹에서 사용자 인터페이스 개발(ui개발)에 사용되는 React.js

출처 : https://cocoon1787.tistory.com/745

[개발상식] 프레임워크(Framework) 와 라이브러리(Library)의 차이

 

라이브러리 없이도 서비스 할 수 있다.

라이브러리는 강제성이 있다.

 

프레임워크와 라이브러리의 차이점은 "제어 흐름"의 권한이 어디에 있는가입니다.

라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 합니다.
개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야 합니다. 

반면 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용됩니다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 됩니다.

 

여기서 제어의 역전(IoC, Inversion of Control)이란,
어떠한 일을 하도록 만들어진 Framework에 Control 권한을 위임하는 것을 의미하는데, 
간단히 말해 프로그램의 제어 흐름 구조가 뒤바뀐 것을 뜻합니다.

라이브러리의 경우 애플리케이션의 흐름을 사용자가 직접 제어해야 하지만 프레임워크의 경우 코드를 연결할 수 있는 위치를 제공하고 필요에 따라 사용자가 연결한 코드를 호출하는 제어 흐름 권한을 가지고 있습니다.

 

HTTP 구조

HTTP 헤더와 본문으로 구성되어 있다. HTTP 본문에는 실제로 통신과정에서 주고 받을 컨텐츠가 담겨져 있다. 

 

HTTP헤더는 HTTP메시지(요청/응답)와 본문에 대한 정보를 말해주고 있다. 이에 대해서 이해하는 것이 실제로 중요하다. 해당 메시지가 제공하는 기능에 대한 최소한의 정보가 정리된 요약본이라고 할 수 있기 때문이다. 헤더에 그 프로토콜에 불필요한 내용을 담으면 네트워크로 전송되는 데이터의 크기가 커져서 빠른 전송이 불가능하기 때문에 프로토콜을 설계할 때부터 꼭 필요한 내용만 담아야 하고, 모든 기능이 표현되어야 한다.

이에 대해 HTTP 헤더는 크게 세가지로 구성되어 있다.

 

 

/* 
REST API
우리가 하고싶은 작업에 따라 다른 메소드로 요청을 하는 방법을 제공

HTTP 메소드 수단으로 이용
GET-데이터 조회
POST-데이터 등록 및 전송
PUT-데이터 수정
DELETE-데이터 삭제
*/

 

Fetch API

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.

 

자바스크립트에서 함수는 객체다
자바와 다른 부분이 많다. 

함수

-자주쓰는 실행코드를 블록 단위로 묶어놓은것
-기능단위로 재사용하기 위해서
-선언하기는 function키워드 사용하거나 arrow funtion처리
-호출:정의되어 있는 함수는 호출해야 비로서 기능이 실행됨

함수의 종류
1. 선언적 함수 : 이름을 붙여서 정의한 함수
-자바스크립트를 읽을때 우선적으로 읽어줌
-호출위치가 자유롭다

2. 익명함수 : 이름없이 정의한 함수
-자체로 호출 불가
-변수에 익명함수를 대입하거나 특정 이벤트 객체에 대입해서 호출

3.대입형 함수 : 변수에 익명함수가 대입된 형태

4. 즉시 실행 함수 :  함수가 자기자신을 정의하자마자 바로 자신을 호출함

일급 함수

함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수(파라미터)로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다.

https://developer.mozilla.org/ko/docs/Glossary/First-class_Function

일급 함수 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

  Arrow Function?

  : 기존의 익명함수를 더 쓰기 쉽게 축약한 형태임
  : 내부로 전달되는 파라미터가 하나면 괄호는 생략 가능함

  자바 스크립트는 같은 이름의 함수를 중복 정의 못한다.
  왜냐면 메소드 오버로딩이 없으니까
  결론 : 함수의 이름은 무조건 다르게 써야한다.

 

call-by-value (값에 의한 호출)

• 함수가 호출될 때, 메모리 공간 안에서는 함수를 위한 별도의 임시 공간이 생성된다. (c++의 경우 stack frame) 함수가 종료되면 해당 공간은 사라진다.
• 스택 프레임(Stack Frame) : 함수 호출시 할당되는 메모리 블록(지역변수의 선언으로 인해 할당되는 메모리 블록)
• call-by-value 값에 의한 호출방식은 함수 호출시 전달되는 변수의 값을 복사하여 함수의 인자로 전달한다.
• 복사된 인자는 함수 안에서 지역적으로 사용되는 local value의 특성을 가진다.
• 따라서 함수 안에서 인자의 값이 변경되어도, 외부의 변수의 값은 변경되지 않는다.
• Java의 경우 함수에 전달되는 인자의 데이터 타입에 따라서 (원시자료형 / 참조자료형) 함수 호출 방식이 달라진다.

출처:https://wayhome25.github.io/cs/2017/04/11/cs-13/

MIME 타입

MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록, 서버가 정확히 설정하는 것이 중요합니다. 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용합니다.

위치 : chat221228/com.util/member

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="MemberMapper">

 

<!-- !DOCTYPE은 주석이 아니다.

mapper : 루트태그이름, 반드시 이 태그 안에 작성할것-자바, 스프링, xml(MVC패턴, spring boot, spring, maven, gradle, 코틀린)환경

spring boot에서는 annotation 프레임워크를 지원한다. 

javascript, reat.js는 json이 이러한 역할을 한다.

JSON을 몰라서는 환경변수 설정이 어렵다.

 

public- 공공의

//mybatis.org//DTD Mapper 3.0-버전정보

"http://mybatis.org/dtd/mybatis-3-mapper.dtd" -xml

mime타입이 브라우저가 해독할 수 없는 문서인 경우에 다운로드로 바뀐다.

 

번들러

html, css, ES5 ... 만으로 페이지를 구현 하는것은 비 효율적이다.

그래서 번들러가 등장함.

 

vue.js, ES6, 7 ,typescript,sass(css의 전처리기이다.) , postcss,svelt등을 이용해서 페이지를 구현하게 되었다.

https://ko.parceljs.org/

기존의 html, css, ES5로 바꿔주는것이다.

 

sass 그대로 브라우저 실행이 불가하다.

이것을 css로 변경해주는것이 번들러이다.

최신 문법(ES7, vue.js)

 

번들러(Bundler)의 탄생 배경

인터넷이 등장하고 처음에는 웹 페이지와 서비스들의 규모가 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고 해당 서비스를 유지하는데 큰 무리가 없었다.

하지만 인터넷이 발달하면서, 적게는 수십만 줄에서 많게는 수백만 줄의 코드로 이루어진 대규모 웹 서비스들이 생겨나기 시작했다. 하나의 웹 서비스에서 수십 수백개의 자바스크립트 파일을 다루면서 하나 둘씩 발생되는 문제들에 여기저기서 곡소리(?)가 나오기 시작했다.

 

번들러(Bundler) 

위의 문제들을 해결하기 위해 여러개의 파일을 하나의 파일로 묶어주는 번들러(Bundler)가 등장했다.
번들러는 대표적으로 Webpack, Parcel, Rollup, Browserify등이 있다.

번들러의 기능

자바스크립트의 번들러로 파셀을 사용하기위해 다운

출처 : https://blog.leehov.in/24

[JavaScript] 번들러(Bundler)란?

 

Parcel번들러 환경 설정하기

프로젝트 명 정하기

물리적 폴더 생성

 

1. npm init -y 엔터 하여 package.json을 생성해줌
2. npm i -D parcel 엔터하여 번들러 설치
npm 설치 옵션
-D 패키지를 설치하고 프로젝트의 devDependencies 목록에 추가한다.
—save-dev 패키지를 설치하고 프로젝트의 devDependencies 목록에 추가한다.
-g 패키지를 프로젝트가 아닌 시스템의 node_modules 폴더에 설치한다.
설치 후 반드시 package.json열어서 devDependencies목록에 parcel 번들러 추가 확인 할것
3. index.html파일 생성
4. package.json에 실행 명령문 등록 및 배포 (빌드포함) 명령문 등록하기
5. npm run dev - 실행 명령
6. npm run build - 배포 버전 만들 때 사용할것
: main:index.js 삭제해야 에러없이 배포버전이 생성
: 배포버전이 만들어지면 dist폴더가 생성됨

 

이렇게 프로젝트를 생성하면 하위버전의 컴터, 브라우저에서도 동작할 수 있다.

원시적인 코드 만들어 준다.

환경변수 설정 파일은 package.json이다.

JSON 형식에 대한 역할, 이해가 필요하다.

 

css를 배포하고있다.

 

Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

거르고 나서 남은 새 배열을 만든다.

 

전개 구문

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

  myFunction(...iterableObj);

 

도전문제

<!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>도전문제-[구조분해, spread연산]</title>
  </head>
  <body>
    <script type="text/javascript">
      //리액트->태그와 자바스크립트코드 같이 쓴다.

      //items는 배열이다-배열 안에 객체가 있다.
      //데이터 베이스 연동 없이 입력 수정 삭제 조회를 반복해서 연습
      let items = [
        { id: 1, name: "벤치프레스", count: 10 },
        { id: 2, name: "랫풀다운", count: 12 },
        { id: 3, name: "스쿼트", count: 30 },
      ];

      /*추가하기-전개연산자*/
      //배열만 있을때
      //객체만 있을때
      //배열안에 객체가 있을때

      const items2 = [...items, { id: 4, name: "러시안트위스트", count: 50 }];

      // items2.forEach((i) => {
      //   document.write(`${i.id}${i.name}${i.count}`);
      //   document.write("<br>");
      // });

      document.write("<div>");
      document.write("<table border='1' borderColor='red'>");
      items.forEach((workout) => {
        document.write("<tr>");
        document.write(`<td>${workout.id}</td>`);
        document.write(`<td>${workout.name}</td>`);
        document.write(`<td>${workout.count}</td>`);
        document.write("</tr>");
        document.write("<br>");
      });
      document.write("</table>");
      document.write("</div>");

      /* 삭제하기-filter함수-3번 */
      //prompt로 받으면 반환열이 문자열이다.-주의(===,!== 사용시 타입도 따지니까...)
      let result = window.prompt("삭제하고자 하는 id를 입력하세요"); //메세지 뜨면서 입력 창 나온다
      alert("사용자가 선택한 아이디는 " + result + "입니다.");

      //arr.filter(callback(element[, index[, array]])[, thisArg])
      //callback은 약간 올드하다. 에로우펑션으로 가자.
      //새로운 배열->대입 연산자
      //row해당하는것은 지금 객체이다.{}. []는 배열
      let newitems = items.filter(
        (row) => row.id !== parseInt(result) //조건에 맞는 객체를 남겨서 배열 만든다.
      ); //end of filter
      document.write("<br>");
      document.write("<div>");
      document.write("<table border='1' borderColor='red'>");
      newitems.forEach((workout) => {
        document.write("<tr>");
        document.write(`<td>${workout.id}</td>`);
        document.write(`<td>${workout.name}</td>`);
        document.write(`<td>${workout.count}</td>`);
        document.write("</tr>");
      });
      document.write("</table>");
      document.write("</div>");

      // let result2 = items.filter((del) => del.count > 20);
      // document.write(result2);
      // document.write("<br>");

      //수정하기-추가하기와 동일하게 처리-4번(삭제하고 추가하기)
      let x = [...items];
      result = window.prompt("수정 id 입력");
      items.forEach((item) => {
        if (item.id === parseInt(result)) {
          x = items.filter((item) => item.id !== parseInt(result));
          x = [
            ...x,
            { id: `${parseInt(result)}`, name: "덤벨프레스", count: 15 },
          ]; //거른 후 뉴배열에 값넣기
        }
      });
      document.write("<br>");
      document.write("<div>");
      document.write("<table border='1' borderColor='red'>");
      x.forEach((workout) => {
        document.write("<tr>");
        document.write(`<td>${workout.id}</td>`);
        document.write(`<td>${workout.name}</td>`);
        document.write(`<td>${workout.count}</td>`);
        document.write("</tr>");
      });
      document.write("</table>");
      document.write("</div>");

      /* 조회하기-forEach-1번 */

      //더블쿼테이션과 싱글 쿼테이션
      //문제는 같이 사용할 경우 바깥쪽은 더블 안쪽은 싱글
      document.write("<div>");
      document.write("<table border='1' borderColor='red'>");
      items.forEach((workout) => {
        document.write("<tr>");
        document.write(`<td>${workout.id}</td>`);
        document.write(`<td>${workout.name}</td>`);
        document.write(`<td>${workout.count}</td>`);
        document.write("</tr>");
        document.write("<br>");
      });
      document.write("</table>");
    </script>
  </body>
</html>