바닐라 js로 크롬 앱 만들기

HeeDong-log·2023년 5월 1일
0

거의 모든 브라우저에서 js를 사용 할 수 있다. 브라우저에 기본적으로 내장되어있기 때문이다.

안드로이드, 윈도우, 맥, 리눅스 다 포함.

프론트엔드는 js 한가지만 알면 된다.

백엔드는 루비, 파이썬, 고, 자바 등 선택 할 수 있다.

Framework.

프레임워크는 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다.

라이브러리와의 차이점
라이브러리와 프레임워크를 헷갈리는 경우도 있는데, 보통 프레임워크라고 하면 여러 기능을 가진 클래스와 라이브러리가 '특정 결과물을 구현하고자' 합쳐진 형태라고 볼 수 있다. 즉 라이브러리보다 상위의 그룹이며, 대부분의 프레임워크들은 다양한 기능들을 지원하기 위해 많은 라이브러리들을 가지고 있다.

메소드 및 클래스화, 즉 모듈화를 하는 이유 중 하나가 재사용성인데, 프레임워크는 이 재사용성을 큰 그룹 단위로 묶어주었다고 보면 된다. 재사용 가능한 수많은 클래스들과 라이브러리들을 융합한 채로 처음부터 제공해 주기 때문에, 여러 개의 표준을 만들지 않아도 돼서 개발자의 피곤함을 덜어준다.

예를 들어, 웹 프레임워크는 '웹 서버'를 구현하기 위한 목적으로 만들어진 프레임워크다. 웹 서버를 구현하기 위해선 페이지 구현, DB 관리, 유저 인증, API 서버, 라우팅, 사이트맵, 세션 관리 등 여러 기능이 들어있어야할 것이다. 각 기능을 보유한 라이브러리들을 한데 묶어 담은 것이 바로 프레임워크라고 보면 된다.

제일 큰 차이점은, 라이브러리는 프로그래머가 호출하며, 프레임워크는 프레임워크 자신이 프로그래머의 코드를 호출한다는 것이다.

html, css, js로만 만들어진 것. (일렉트론으로 만들 수 있는 것)

vs code, 페이스북 메신저, 트위치, 슬랙, 피그마 등

브라우저에서 html 파일을 열면, html 파일이 css와 js를 가져온다.

브라우저는 HTML을 열고 HTML은 css, js 를 가져온다.

const -> 절대 변하지 않는 상수

let → 변할 수 있는 상수

항상 const, 가끔 let, 네버 var !!!

null : 아무것도 존재하지 않는다. 절대로 자연적으로 발생하지 않는다.

undefined : 존재하지만 값은 정의되어 있지 않는 것.

array.push() : 제일 뒤에 배열의 요소를 추가 하는 것.

object이름이 player이라 하면, player.name과 player[”name”]은 같다.

let과 const의 차이는 let은 업데이트를 할 수 있다는 것이다. let을 업데이트 할 땐 다시 let을 붙이지 않아도 됨.

ex) 기존 변수의 값을 업뎃하고 싶은 경우

let a = 5; // 기존의 값이 5인 상태

a = 10; // let을 생략하고 10으로 업데이트했음.

코드를 읽으면서 의미를 부여하기 위해 항상 const, 가끔 let ,사용하지 말아야할 var.

boolean은 딱 두 가지 옵션만 있다. ture, false.

null은 아예 '비어있음을 정의'해버리는것, undefinde는 변수에 값을 부여하지 않은 상태.

array 만들기

ex)

const days = [1, 2, "안녕하세요" , 'abc' , false , null]

호출시에는 ? console.log(days[2]) // 인덱스 2번인 "안녕하세요"가 로그에 출력될 예정

array에 무언갈 업데이트 하고 싶을 때에 직접 변경하기.

ex)

days[2] = "water" // 데이라는 변수의 오브젝트 인덱스 2번인 "안녕하세요"를 "water"로 교체한다는 뜻.

.push() 로는 추가를 할 수 있음.

ex)

days.push('생선') // days라는 변수에 '생선'이라는 string 값을 추가해준것.

const의 object 값을 변경하는 행위는 const 자체를 변경하는 것이 아니고 objects값을 변경하는 것이기 때문에 재할당 오류와 관계없다.

const calculator = {
  add: function (a, b) {
    console.log(a + b);
  },
  minus: function (a, b) {
    console.log(a - b);
  },
  multi: function (a, b) {
    console.log(a * b);
  },
  div: function (a, b) {
    console.log(a / b);
  },
  power: function (a, b) {
    console.log(a ** b);
  },
};

console창 깨끗히 하기 : console.clear()을 실행한다.

prompt : 브라우저에 메시지 창을 띄운다. 하지만 요즘은 잘 쓰지 않는 추세다. 메시지창에 css를 적용 할 수 없고, prompt가 동작하는 동안에 js가 동작을 멈추기 때문이다.

isNaN = 어떤 문자가 숫자인지 아닌지를 판단하는 함수. 숫자라면 false가 뜨고, 숫자가 아니라면 true가 뜬다.

profile
포기하지 않는 코딩 생활-!

0개의 댓글