(4주차-1)정보통신산업진흥원 AI 웹개발 취업캠프|Javascript 배열|객체 리터럴|삼항연산자|Node.js

Javascript 배열 

배열만들기

방법1. 배열 리터럴로 생성하기 
ex) const arr = [1,2,3,4]
방법2. 생성자로 생성하기
ex) const arr = new Array(1,2,3,4) 

새로운 배열을 만드는 배열 메소드

map 
배열의 각각의 요소에 대해 콜백을 호출한 결과를 모아 새로운 배열을 반환
filter
배열의 각각의 요소에 대해 콜백을 호출한 결과 true를 반환하는 모든 요소를 모아 새로운 배열 반

1. 콜백함수를 인수로 전달받는다.

콜백함수: 함수의 인수로 전달되어지는 함수

2. 배열의 멤버를 기반으로 새로운 배열을 생성한다

 

forEach 

배열의 요소 수만큼 콜백함수를 호출한다. 단, 호출할때마다 요소를 차례대로 전달한다.
콜백함수는 별도의 데이터를 반환하지 않는다.

const crops = ["토마토", "고추", "가지", "고구마", "들깨"]

   

    crops.forEach(function(crop){

      const p = document.createElement("p")

      p.textContent = `맛 좋은 ${crop}`

      document.getElementById("container").append(p)

    })

토마토~들깨까지 모두 호출하는 함수 실행

document.createElement : 주어진 요소를 생성한다

p.textContent: '맛좋은' + crop

 

map

콜백함수는 별도의 데이터를 반환하지 않지만 map은 별도의 데이터를 반환한다.

    let  result = crops.map(function(crop){

      const h2 = document.createElement("h2")

      h2.textContent = `맛 좋은 ${crop}`

      document.getElementById("container").append(h2)

      return h2

    })

return h2 : h2는 배열의 요소 수만큼 반환된다

 

filter

배열의 요소 수만큼 콜백함수를 호출한다. (인수를 요소로 받으면서)
true를 반환하는 경우에만 결과 배열에 포함시킨다.

    result = crops.filter(function(crop){

      return crop.length === 3

    })

crop.length ===3 : 문자열의 길이가 3인경우만 반환 

-> 토마토, 고구마 반환

 

삼항연산자

조건 ? 결과1 (true일경우) : 결과2 (False일경우)
짧은 문장으로 조건식을 표현할 수 있어 if-else문의 대체재로 빈번히 사용

<script>

    const form = document.getElementById("form")

    const p = document.getElementById("p")

    form.addEventListener("submit", function(e){

      e.preventDefault()

      const result = e.target.answer.value === "트와이스" || e.target.answer.value === "twice" ?

      "역시 트와이스죠!" : "잘못 생각하고 계시군요.."

      p.textContent = result

    })

  </script>

form과 p 선택

preventDefault(): 기존 기능 차단

form에서 submit 일어나면 서버와의 통신 -> 페이지 새로고침 발생 지금은 서버와 통신하고 있지 않기 때문에 기존 기능 차단

e.target.answer.value ==="트와이스" 라면 역시 트와이스죠! 아니라면 잘못생각하고 계시군요 

p.textContent = result 에 저장후 출력 

 

객체 리터럴 

객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체리터럴'을 이용하면 객체를 생성할 수 있다.
속성의 밸류로 함수가 주어지면, 이 속성은 메소드가 된다.
키는 중복될 수 없다. 그러나 밸류는 같은 것이 될 수 있다. 
객체 안의 속성값을 참조할 때는 . 또는 [] 연산자를 사용할 수 있다. 

 

스프레드 연산자 

 

객체 리터러에서 스프레드 연산자

배열에서 스프레드 연산자

배열에서 스프레드 연산자는 [ ] 를 벗기고 출력한다. 

 

구조 분해 할당 destructuring 

구조 분해란 배열이나 객체의 속성을 해체 하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

JSON 형식으로 변환

JSON은 자바스크립트 객체 표기법을 뜻한다. 이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.
자바스크립트에서만 사용할 수 있는 객체 타입을 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용한다.

 

객체 리터럴 데이터를 문자열 형태로 바꿔서 호환성을 높인다. 

JSON에서는 key, value모두 "로 묶인다. 

 

JSON 내장 객체 메소드 활용하기

JSON 표기를 도와주는 내장 객체 메소드를 사용하여 객체를 JSON 형식으로, JSON을 객체 형식으로 변환가능

stringify : 객체 -> JSON 
* undifiend, 함수 등은 생략되거나 null 변환
parse : JSON -> 객체 
* 작은 따옴표, 후행 쉼표는 파싱 불가

    const gookhee = {

      ...cat,

      name: "국희",

      age: 4,

      favorite: ["끈", "창틀" , "햇살"]

    }

    const gookheeStr = JSON.stringify(gookhee)

    console.log(gookheeStr)

    console.log(typeof gookheeStr)

    console.log(JSON.parse(gookheeStr))

파이썬과 호환하기 위해 stringify 사용

결과

 

    const { favorite: things } = JSON.parse(gookheeStr)

    console.log(things)

구조분해할당 

JSON.parse(gookheeStr): 변환된 객체에서

favorite:things : favorite 배열만 구조분해해서 저장하고, things라는 이름으로 변경 

배열 구조분해할당

배열에는 할당된 키가 없기 때문에 이름 지정 해주고 구조분해가능 

 

Node.js 

node.js 는 V8 자바스크립트 엔진으로 빌드된 이벤트 기반 자바스크립트 런타임이다. 
(-> 자바스크립트 실행 도구이다!) 자바스크립트를 애플리케이션 개발에 활용할 수 있게 된다.
노드는 대화형 콘솔을 제공하기도 하고, 스크립트 실행 환경을 제공하기도 한다.

 

노드에서 모듈화 

모듈화란 코드를 기능이나 규모에 따라 분할하는 것을 의미한다.
모듈이란 하나의 자바스크립트 파일을 의미한다. 노드에서는 모듈 내보내기/불러오기를 위해 두 가지를 사용할 수 있다. 
require(모듈) : 모듈에서 내보낸 대상을 반환한다.
module.exports: 현재 모듈에서 대상을 참조한다. 

세 개의 파일로 하나의 프로그램 구성

 <mod1.js>

module.exports = helloWorld

mod1.js에서 helloWorld 함수저장하고 exports로 내보내기

 

<mod2.js>

module.exports = {

  sayGoodbye, sayNice

}

mod2에서 sayGoodbye, sayNice 함수 저장하고 exports -> {}로 묶어서 한번에 가능

 

<main.js>

const helloWorld = require("./mod1")

const { sayGoodbye, sayNice } = require("./mod2")

1. mod1에서  helloWorld에 가져오고 저장하기

2. mod2에서 sayGoodbye, say Nice 구조분해로 가져오고 저장하기

 

NPM(Node Package Manager)

노드 기반의 자바스크립트 프로그램을 등록할 수 있는 공개 커뮤니티. 누구나 npm으로부터 코드를 내려받아 자신의 코드에 반영할 수 있다.
 명령어: npm -v

package.json

노드기반 프로젝트의 관리자 파일. 프로젝트 폴더에 설치된 모듈을 비롯한 프로젝트 관련 사항들을 관리하기 위해 노드 프로젝트 폴더 안에 파일 생성

<순서>

1. npm init : 이 폴더를 노드 프로젝트 폴더로 초기화할 것이다. 라는 명령

*npm init -y: 선택사항 생략하고 실행

2. npm install 모듈이름  or npm i 모듈이름

3. index.js : 노드 기반의 서버 실행 

//노드 기반의 서버를 생성하자!

// http 기반의 데이터 송수신을 진행하는 서버

const http = require('http'); //http모듈로부터 http를 반환 받기

const hostname = '127.0.0.1'; //서버 주소 "로컬호스트"

const port = 3000; //데이터가 송수신되는 통로

//화살표함수: 함수의 표현 방법을 간결하게 만든 것.

//function 지우고 매게변수 뒤에 화살표 추가

const server = http.createServer((req, res) => {

//콜백 함수에 req, res 전달. req: 요청, res: 응답

  res.statusCode = 200;

  res.setHeader('Content-Type', 'text/plain');

  res.end('Hello World');

});

//listen: 서버가 구동 중인 상태 (3000번 포트에서 로컬호스로)

server.listen(port, hostname, () => {

  console.log(`Server running at http://${hostname}:${port}/`);

});

터미널에 node index.js -> 서버 연결 -> ctrl+c 서버 연결 끊기