[2023.11.06] 개발자 교육 31일 차 : 강의-JavaScript with Firebase [구디 아카데미]

오늘 정리

JavaScript와 Java의 자료형의 차이? js에는 undefined가 있고, 함수 또한 객체로 구분된다.

java는 전역변수를 선언, 초기화하여 사용하지만? javascript는 전역변수 선언 없이 바로 사용 가능하다

복습

• 증감연산자

  • 후위 : b++ -> 먼저 출력 나중에 증가

  • 전위 : ++b -> 계산 먼저 나중에 출력

    let b = 2;
    console.log(b++);  //2
    console.log(b);    //3
    console.log(--b);  //2
    console.log(b);    //2

• 백킥 : 문자열과 변수 함께 사용할 때 사용 ${}

강의 내용

• 자바스크립트

  • 프로젝트 생성(JavaScript)

    D:\vscode_web\dev_js231106
    $ npm init -y
    Wrote to D:\vscode_web\dev_js231106\package.json:

    {
    "name": "dev_js231106",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
    }

    D:\vscode_web\dev_js231106 (dev_js231106@1.0.0)
    $ ls -al
    total 1
    drwxr-xr-x 1 GD 197121 0 11월 6 09:38 ./
    drwxr-xr-x 1 GD 197121 0 11월 6 09:38 ../
    -rw-r--r-- 1 GD 197121 226 11월 6 09:38 package.json

    D:\vscode_web\dev_js231106 (dev_js231106@1.0.0)
    $ code .

  • 자료형 타입(Java와 유사-다른 부분을 우선적으로 공부)

    • 원시형(privative type) - 특정값이 메모리에 바로 저장(값만)

      • 문자(String)
      • 숫자(Number) : 정수를 정수로 나눈 값이 실수로 나와도 바로 1.5로 나옴
      • 논리형(boolean)
      • undefined : 변수를 선언하고 그 값을 할당하지 않으면 undefined가 대신 저장됨(에러), 없는 속성을 출력하려면 undefined가 출력됨 → NullPointException(디버깅 할 수 있어야 함)

    • 참조형(reference type) - 값이 위치하고 있는 참조 주소 값만 메모리에 저장 → 관련 내장 함수 참조(prototype)

    • Null(Object 급) - 명시적으로 특정 변수의 값을 비워줌.

    • array(Object 급) - 연관된 값을 그룹으로 묶어서 관리하는 형태

    • 객체(Object 급) - Object 데이터를 key라는 인덱싱을 통해 자료를 구조적으로 묶어놓은 상태, 함수도 객체다
      - 함수

      ```jsx
      const hello = () => {
        console.log("Hello😜");
        return "hello";
      };
      //hello, hello() 다른가?? -> hello는 함수, hello는 함수로 호출된 값
      console.log(typeof hello);     //function
      console.log(typeof hello());   //string 
      ```
      
      ```jsx
      const a = () => {
        console.log("A");
      };
      console.log(a); //[function : a]
      console.log(a()); //undefined
      
      const b = (c) => {
        console.log(c); //function a
        c(); 
      };
      
      b(a);
      ```

      → array, 객체, JSON을 오가면서 사용하는 것 연습 필요(array를 JSON으로, JSON을 array로/목록처리 시 필수템)

  • false(거짓)로 나오는 6가지!📒

    1. false
    2. 0
    3. null
    4. undefined
    5. NaN(Not a Number)
    6. “”

  • 부정(!)

    //false로 나오는 것 !으로 true로 만들기 
    console.log(!false);
    console.log(!0);
    console.log(!null);
    console.log(!undefined);
    console.log(!NaN);
    console.log(!"");

  • 외부 재사용 시 반드시

    • package.json 수정 (추후 json으로 내보내기 가능해짐)
    • 내보낼 곳엔 export, 받을 곳엔 import
    • java는 전변을 선언하고 초기화를 해야 하는데 javascript는 전변 선언 없이 바로 사용 가능

  • 자바스크립트는 기본적으로 동기 처리

    • 만일, 비동기적 처리가 필요할 때, setTimeout 함수 사용
    • atnc와 await은 함께 사용됨
    • 사용 예
      • front : ReactJS, UI솔루션 - client 사이드
      • back : Java - 서버사이드(지연발생, 출처 다름)

---

실습[myBook with express module]

• 모듈이란? 프로그래밍에 필요한 함수들의 집합
• express 모듈은?
  • 웹 서버 생성과 관련된 기능을 담당하는 프레임워크로 각종 메소드, 미들웨어가 내장(자동으로 생성), 각각의 요청을 처리하는 함수를 분리시켜 더 직관적 코드작성 가능
  • http 모듈을 사용했다면? 조건문으로 라우팅을 처리(번거로움)
  • express 모듈 설치방법 [설치 전제조건] - node.js설치 완료 [프로젝트 생성]
    express -e [프로젝트명=mybook] [express 모듈 설치] 프로젝트 폴더에서 Cmder창에서 npm install express-generator -g 엔터 ※npm install [모듈명] -g (g : 전역적 설치, 전체 프로젝트 공통 사용 가능) [package.json 생성 및 모듈 추가] npm install express
    (현재 작업 중인 프로젝트에 모듈을 설치할 때 사용하는 방식)
    옵션으로 현재 플젝의 package.json에 모듈이름과 버전을 추가함. 💡 **에러발생시?** npm install 엔터 → 의존성 관계에 있는 외부라이브러리 재설치

결과물

• 프로젝트 구성

  폴더	구성	내용
  bin	www	express 사용 관련 함수
  public-javascripts	firebase.js	구글firebase 연결 관련
  public-styleshteets	style.css	페이지 구성관련
  routes	index.js	페이지전환 설계
  routes	users.js	라우터 설정
  views	error.ejs	html 랜더링(브라우저에 표시)
  views	footer.ejs	footer 구성
  views	header.ejs	header구성(whit 부트스트랩)
  views	home.ejs	홈페이지 글
  views	index.ejs	HTML 문서의 구조와 외부 리소스를 로드
  views-auth	login.ejs	웹 애플리케이션의 기본 설정
  -	app.js	(모듈로딩, 앱 생성, 미들웨어 생성, 라우트설정, 에러 핸들러, 앱 내보내기 등)

  • ejs? 템플릿 엔진을 사용하여 동적으로 html 생성 가능(html 내 javascript 코드 삽입)
• index.js(🗂️routes) → 루트관련
  • 라우터 → 페이지 전환 관련 API
  • express 모듈 → 웹 서비스를 제공할 수 있게 해 줌(서블릿, JSP)
• app.js(🗂️views)

  • 웹 애플리케이션 위한 기본적 설정, 모듈 로딩, 템플릿 엔진 및 라우터 설정

  • 상단(사용할 모듈 로딩하는 코드)

  • 외부 모듈을 해당 파일에서 사용하려면 require() 함수 호출해야 함.

    // 로딩한 라우트 함수를 지정된 변수로 사용할 수 있게 됨. 
    var indexRouter = require('./routes/index');
    var usersRouter = require('./routes/users');

  • view engin setup

    • 익스프레스에서 사용할 템플릿 엔진 설정 코드
    • __dirname은 없는 이름 설정 및 사용 위해 언더바 두 개 사용
    • use() → 파라미터 실행 함수, 각 모듈 사용하도록 설정
• index.ejs(🗂️views)
  • REST : 여러 서버를 두어 분산 설정
• login.ejs(🗂️views)
  • button 생성 시
    • input 형식 : 전송 일어나지 x
    • submit : 전송 일어남 o
      • submit 이슈 : submit이벤트 처리 시 캡처링으로 인한 이벤트 전이 발생 → 하위에 계속 전달됨(방어 : e.preventDefault();)

---

• 와이어프레임
  • 웹 사이트 또는 애플리케이션의 디자인 단계에서 사용되는 시각적인 도구(구조 설계의 과정)
  • 유사개념 차이
    • 와이어프레임 : UI/UX 디자인 단계에서 사용되는 시각적인 도구, 디자인의 초안(예 : 앱 화면 구성, 사이트 레이아웃 구성 등)
    • UI : 시각적인 측면을 중심으로 사용자 경험을 향상시키는 것을 목표(예 : 앱버튼, 화면 레이아웃)
    • UX : 사용자의 행동, 감정, 인지적 요소 등을 고려하여 제품 또는 서비스의 전반적인 경험을 디자인(예 : 쇼핑 검색기능, 시각적인 예약현황 등)

---

• ECMA스크립트
  • 자바스크립트를 표준화하기 위해 만들어짐.
  • ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
  • 사용자 측에서 많이 사용, Node.js 사용 서버에서도 사용 증

강의 마무리

• firebase, bootstrap, w3school 등 여러 API를 활용하여 사이트 구성하는 실습을 진행함.