rustandbone Developer

JavaScript_특강 유닉스 쉘, node.js

01 Jul 2023

자바스크립트 특강 1주차_서재원 강사님

서재원 강사님 강의 노트

  1. 자바스크립트 소개
  2. 자바스크립트를 실행하는 방법
  3. 자바스크립트 기초 문법을 배우기 전에 알아두면 좋은 지식
  4. 자바스크립트 기초 문법

현업 사용 기술 스택_서재원 강사님

Unix Shell

dos, powershell 말고 ‘리눅스’ 기반의 Unix Shell 사용할 것
window 사용자는 git bash 사용하면 됨

계층 관계 이루어 하드웨어 제어.
하드웨어 <- 커널 <- 셸 <- 사용자

셸
터미널 -> 셸 -> -> 명령어 -> 커널

docker

  • 유닉스 명령어
cd ~
cd ..
mkdir hello-shell
touch test.js

유닉스 명령의 매개변수 => 플래그라고 부름
-를 붙이면 플래그로 인식

ls -l //메타데이터 함께 표시(long)
ls -a //숨겨진 파일 모두 표시(all)
ls -la //플래그 그룹화

code ~/.bashrc //.bashrc 파일 vscode로 열고 명령어 저장
alias la="ls -la" //ls 명령어에 별명 붙이기
source ~/.bashrc //입력하면 저장된 명령어 불러옴 or 터미널 껐다 켜기
la //명령어 실행 여부 확인

vi ~/.bashrc //vim으로 파일 열기
//i 눌러서 insert 모드 진입
alias lx="ls -la"
//편집 완료 후 esc 버튼 누르고 :wq 입력해서 빠져나옴

rm //파일 한 개 삭제
rm -rf //파일 여러 개 삭제
//-r 디렉토리와 그 안의 것들 지움 -f 강제로 지움

echo //사용자 입력 반복
//명령어 사이에 && 넣어 자동으로 연속 실행 가능
echo hello && echo world

node.js

node는 16, 18, 20 같은 짝수 버전 설치하기(C++ 모듈 이슈)

package.json
=> 매니페스트 파일(앱의 설정 정보 넣어둔 파일)

mkdir hello-node
cd hello-node
npm init -y //-y는 설치 과정에 모두 yes로 응답

{
  "name": "hello-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "beforetest": "echo 테스트 준비중",
    "test": "echo 테스트 중",
    "aftertest": "echo 테스트 끝"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • 명령어 연속 실행하는 다양한 방법
//1.
//&&으로 명령 연속 실행
npm run beforetest && npm run test && npm run aftertest
//연속 실행 명령어 등록 => npm run runall로 실행
"runall": "npm run beforetest && npm run test && npm run aftertest"

//2.
//그런데 && 명령어는 유닉스 셸에서만 동작
//=> 대신 npm-run-all 패키지 사용
npm i npm-run-all -D //설치 명령어
//node_modules, package-lock.json 설치됨
"runall": "run-s beforetest test aftertest"

//3.
//npm 내장 기능 이용할 수 있음
//명령어 이름 수정 pretest, test, posttest
//test 명령어만 실행하면 순차적으로 pretest test posttest 실행됨
  "scripts": {
    "pretest": "echo 테스트 준비중",
    "test": "echo 테스트 중",
    "posttest": "echo 테스트 끝"
  },
npm run test //실행

자바스크립트

  • 자바스크립트 -> 자바스크립트 엔진 -> 웹 브라우저 -> 커널

자바스크립트 소개

장점

  • 고급 언어 중에 가장 쉬움
  • node.js 등장 이후 쓸모가 아주아주 많아짐(스마트폰 앱, 데스크탑 앱(Electron 사용), 머신러닝 모델(tensorflow), 하이브리드 앱 등)
    • vscode도 사실은 크롬…(Electron으로 만든 데스크탑 앱…)
    • vscode 메뉴 -> 도움말 -> 개발자 도구 설정/해제 클릭

자바스크립트를 실행하는 방법

vscode 터미널에서 node 입력 시 개발자 도구 console와 아주 유사하게 이용할 수 있음.
그런데 alert(); 입력하면 작동이 안됨.
=> node.js에는 document, window 객체가 없기 때문.
기능이 웹 브라우저에서 이용할 수 있는지, node.js에서만 사용할 수 있는지 구분할 수 있어야 함(node.js와 browser 차이점 링크 참조)
console.log는 사용 가능. 양쪽에 구현된 기능이기 때문.

자바스크립트 기초 문법을 배우기 전에 알아두면 좋은 지식

  • 자바스크립트로 웹 브라우저 능력 빌려올 수 있음
  • DOM이라는 약속 이용해 메모리 조작 가능
<script>document.getElementById('test').innerText = '야호';</script>
  • 변수 할당
    • const
      • 강사님 실무에선 const만 사용(react 불변성 참고)
    • let
    • var

debugger

<button id="test">어느 세월에 너와 내가 만나 점 하나를 찍을까</button>
<script>
  const 버튼 = document.getElementById("test");
  debugger;
  버튼.innerText = "야호";
</script>
  • vscode
    1. 실행 및 디버그(ctrl + shift + d)
    2. => launch.json 만들기
    3. => 웹앱(Chrome) 선택

자바스크립트 기초 문법

  • 문장: Statement
  • 표현식: Expression

표현식으로 자바스크립트 문장 조합

  • 함수
    • function 이름() {}으로 함수 만들고
    • 이름();으로 함수 선언해주어야 함수 실행됨
<button id="test">어느 세월에 너와 내가 만나 점 하나를 찍을까</button>
<script>
  function 라벨바꾸기(매개변수) {
    const 버튼 = document.getElementById("test");
    버튼.innerText = 매개변수;
  }
  라벨바꾸기("뿅");
</script>
  • 일반 함수 => 무거움(프로토타입 생성)
  • 화살표 함수 => 가벼움(메모리 적게 사용)

Related posts