[Javascript] [이론 및 실습][yarn][npm][node.js][vsc]

Dev_Honey·2022년 7월 19일
0

Javascript

목록 보기
2/4
post-thumbnail

JavaScript ?

1. node.js vscode 설치

  • 설치
  • 환경변수 설정
  • window
    - powershell 을 관리자 권한으로 실행 후
    Set-ExecutionPolicy RemoteSigned를 입력해서 바꿔주고
    ExecutionPolicy입력해서 Restricted가 바꼈는지 확인해보자! 바꼈으면 vscode에서 보안에 걸리지않고 ! 명령어가 잘 실행될 것이다.

실습

1. HTML에서 script tag로 Javascript 작성하기

  • 자료형
  • 숫자의 연산, 문자의 합치기
  • debugger
  • 배열(arr)
  • obj
  • 비교 연산자
  • 조건문 만들기
  • 반복문 for문 만들기
  • 반복문 while문 만들기
  • 함수 만들기
<!--html:5입력해서 기본 양식 작성 또는 !-->
<!--자동정렬은 mac shif + option + f-->
<!--아래 console이 pop안되면 esc누르면 된다.-->
<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <div>
        <h1> Title</h1>
        <h2> Title 2</h2>
        <p> dodododododo</p>
        <h1> Title</h1>
        <h2> Title 2</h2>
    </div>
    <!-- <script>
        // 자료형 : 문자, 숫자, boolean
        var title = '타이틀'
        var num = 1
        var bool = false
        var bool2 = true
        // 변수 만들기, 세미콜론은 script에서 자동으로 넣는다.
        // console에 log 출력 !
        let maninTitle = '메인'
        const subTitle = '서브 타이틀'
        console.log(maninTitle,subTitle)
        console.log(title, num)
        console.log(bool, bool2)
        // 디버거로 console.log()를 사용 !
        // 주석처리는 command + /
    </script> -->
    <!-- <script>
        // 자료형 : 문자, 숫자, boolean
        // var title = '타이틀' //var는 전역변수
        // 변수 만들기, 세미콜론은 script에서 자동으로 넣는다.
        // console에 log 출력 !
        let mainTitle = '메인' //let은 변경 가능한 변수 선언
        let mainTitle2 = 'main2'
        let num = 123
        let num2 = 123
        // 숫자는 숫자끼리 숫자 연산이 일어나고, 문자는 합쳐져서 문자열이된다.
        const SUBTITLE = '서브 타이틀' //const는 불변의 상수. 보통 const 변수는 대문자로 많이 사용한다.
        //SUBTITLE = 'sub title'
        // maninTitle = 'main'
        // let maninTitle = 'main' 이렇게 또 사용하면 이미 선언된 변수이기때문에 다시 못쓴다.
        var title = 123 //전역 변수이기때문에 아래에서 이렇게 변수 재선언가능... 그래서 수업때 많이 안쓴다고 하심
        console.log(mainTitle,SUBTITLE)
        console.log(title)
        console.log(mainTitle+mainTitle2)
        console.log(num+num2)
        // 디버거로 console.log()를 사용 !
        // 주석처리는 command + /
        // 배열 만들어보기 !!!
        let arr = ['a','b','c',1,false]
        console.log(arr)
        console.log(arr[0],arr[1],arr[2],arr.length)
        // 여기까지 list 자료형, arr.length처럼 .length를 사용하면 리스트 내의 갯수를 확인 할 수 있다.
        let obj = {
            cat: '고양이',
            'age' : 12,
            'dead' : false
        }
        console.log(obj,obj.cat)
        // dictionary 자료형 ! obj라 한다.
        obj.age = 13
        obj.cat = 'dog'
        obj.action = 'act'
        console.log(arr)
        console.log(length)
        console.log(obj)
        alert('alert')
        // 경고 팝업 띄우기
        // confirm('acc')
        // confirm 은 boolean을 리턴한다.
        let conf = confirm('acc')
        let prom = prompt('입력해주세요')
        let arg1 = 'a'
        let arg2 = 'a'
        result = arg1 == arg2
        console.log(arg1 == arg2)
        // 조건문 만들기 if(조건문) {true일 떄} else {false일 때}
        // let fal = !true >>> !는 not의 의미 !
        if(result == true) { //true
        console.log('참')
        }
        else{ //false 
        console.log('거짓')
        }
        
    </script> -->
<script>
    // 비교 연산자!!
    let a  = 1
    let b = 2
    // let result = a > b
    let result = a < b
    // let result = a >= b
    // let result = a <= b
    console.log(result)
    let arr = ['a','b','c','d']
    // 반복문 만들기 for 문
    // for(let i=0; i<arr.length; i++){
    //     console.log(arr[i])
    // }
    //   초기값    조건      1을 증가시키는 문법(i++)
    for(let i=0; i<arr.length; i++){
        // debugger 를 넣으면 for문에서 break로 작동한다.
        console.log(arr[i])

    }
    //while(조건) 조건에 따라서 무한 반복하는 while문
    // while(){

    // }
    // let x=0
    // while(x<10) {
    //     console.log(x)
    //     x++
    // }

// 함수의 사용
// function
// 함수 함수명   매개변수
function hello () {
    console.log('hello brother')

}
// 함수 호출
hello()


function bye (name,age) { 
    console.log(name)
    console.log(age)
}

bye('qwerqwer', 33)
bye('dragon', 23)
bye('monkey', 10)

const greet = function(arg){
    arg.name = 'none'
    return arg
}

const obj = {
    name : 'JH',
    age : 50,
}

const results = greet(obj)
console.log(results)


</script>
</body>
</html>

2. HTML에서 script tag로 Javascript 작성하기 - 2

  • selector로 tag 접근하기
  • id로 접근하기
  • class name으로 접근하기
  • jspath로 접근하기
<div id = "div1">
    <h1 class="h-el">title</h1>
    <h2 class="h-el">title</h2>
</div>
<script>
    // id 찾을 때는 #을 붙이고 id입력(즉, id값으로 div 태그 안의 내용을 가져 올 수 있다.)
const mainDiv = document.querySelector('#div1')
console.log(mainDiv)
</script>

MacBook 실습

1) 먼저, document에 class라는 폴더를 만든다.
terminal)
cd ~/Documents하고
mkdir class
cd class
이렇게 접근 해도 된다.

2) terminal을 키고, cd /Users/honey/Documents/class를 입력해서 이동합니다.
3) yarn 입력
4) yarn init 입력
5) yarn으로 되지않아 다 지우고 , npm init을 한 후 , npm install을 하였다.
6) npm, yarn >> package 관리자 >> 라이브러리를 관리하기 위해서 이와 같은 설정을 하였다.
7)

설치가 완료되면 위와 같이 3개의 파일이 생성된 것을 확인 할 수 있다.
8) 구글에 puppeteer core 라고 친 후
npm i puppeteer-core를 shell에 입력하는데, 디렉토리는 class 그대로!
나는 yarn이 되지않아 npm으로 설치를 하였다.

  • 그럼 puppeteer-core가 설치가 완료된다.

  • 보면 dependency가 생겨있는데 package를 의존하겠다는 말이다.
  • license 아래에 "type":"module",을 입력하십시오..

다음 장에서...

  • puppeteer를 사용해서 crawlling code를 Javascript로 짜볼 것이다.
profile
자습서 같은 공부 블로그 만들기!

0개의 댓글