JavaScript 01

김선심·2023년 1월 10일

javascript basic 자바스크립트_기초

JavaScript

목록 보기

3/20

JavaScript 01

###2023.01.07

오늘 배운 study 수업내용에서 가장 핵심

-JavaScript를 사용하기 전 왜 필요로 하는지
-언어를 배우는데 있어서 가장 basic 부분들에 대해 이해하기

참고 - http://www.tcpschool.com/javascript/js_intro_basic
https://ko.javascript.info/
https://poiemaweb.com/js-scope

자바스크립트를 문법을 알기 위해서는
에디터를 vs(Visual Studio code)를 사용하고, 크롬으로 개발자도구 F12키 확인하면서 수업을 진행하였다.

JavaScript란?

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어로 HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
1. 자바스크립트는 객체 기반의 스크립트 언어
2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

HTML로 브라우저의 한정 명령어로 alert창을 만들어서 시작해보자.

<!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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> -->여기에cdn 값을 넣어준곳
  <script src="/js/common.js"></script>
</head>

<body>
  <button class="alert_btn">alert</button>
  <button class="alert_btn">alert</button>
  <button class="alert_btn">alert</button>
  <button class="alert_btn">alert</button>
</body>

</html>

JQuery란? :

HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것이다.
-Javascript로 길고 복잡하게 써야 하는 것을
JQuery로 보다 짧고 직관적으로 쓸 수 있다.

JQuery 사용을 위해 import 하기

제이쿼리 임포트 하기위해서, 위의 w3schools 링크에서, Google CDN 값을<head> </head>사이에 넣어준다.
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
```

예

javascript

// var count = 0;
// window.onload = function () {
//   var btn = document.getElementsByClassName("alert_btn");
//   for (var i = 0; i < btn.length; i++) {
//     btn[i].addEventListener("click", function (e) {
//       count++;
//       alert(count + "번째 버튼입니다.");
//     });
//   }
// };

jquery

$(document).ready(function () {
  var btn = $(".alert_btn");
  btn.each(function (i) {
    var _this = $(this);
    _this.on("click", function () {
      alert(i + "번째 버튼입니다.");
    });
  });
});

~~직관적으로도 코드가 간결하면서 잘 보인다.!~~

alert창을 만들기 위해 버튼 4개를 만들었는데 버튼을 눌렀을 때 alert창이 0번째 1번째 순서대로 나오게 하기

javacript 알아가야 할 용어들!! (★★★★★)

★ 주석 :

- 고차원 수준 아키텍처
- 함수 용례
- 당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명

이래도 뭐라는지 모르겠다 그냥 주석처리하면 되지? 이런 생각갖고 하면 혼자일해라~!! 같은 팀워크로 했을 땐 그래도 아주 기본적인건 설명해주고 해야 서로 혼돈하지않지~!!

// 
경계로 이루어진 주석으로 문단으로 끊어서 사용
/* 내용들 */
문제점이나 해결못한 것은 임시주석 사용 /* ... */

/** 
클래스 설명 주석으로
-import 다음에 기술
-블록주석을 사용
-각 라인은 *로 시작
-해당 클래스에 대한 기능과 용도 기술
-<pre>...</pre> 내용은 수정하지 않음

/**
 * name : test
 * function: 매개변수 2개를 받아서 2개를 합친값이 숫자면 true 아니면 false
 * @param a {any} 매개변수 a
 * @param b {any} 매개변수 b
 */
 
 예) 
	var test = function (a, b) {
  		var t = a + b;
  		return typeof t === Number ? true : false;
};

이렇게 변수를 선언하기 전 참조해서 사용할 수 있는 강점!!꼭 알고 가자!!!

★ 변수 선언 : var, let, const

var : 변수 선언, 수정o, 재선언o, 호이스팅o
let : 변수 선언, 수정o, 재선언x, 호이스팅x
const : 변수 선언, 수정x, 재선언x, 호이스팅x

var의 문제점은..?

변수의 중복 선언이 가능하다.

var는 a라는 이름의 변수가 있음에도 불구하고 또 그 아래에서 a라는 이름의 변수를 선언할 수 있다.
이처럼 이미 선언했던 변수명을 모르고 또 사용할 경우, 기존에 있던 변수는 전혀 다른 값을 가지게 됩다. 그 경우, 그 변수를 사용하는 다양한 로직들에 치명적인 문제가 생긴다. ~~~문제생기면 찾기도 드릅게 어렵다는거~~~
for문에서의 문제점

var는 Function-scoped이기 때문에 for문에서 for문의 순회를 위해 i라는 변수를 var로 선언한 경우, 이 변수는 for문이 종료되어도 접근이 가능하게 된다.
또한, 만약 for문의 함수 내부가 아닌, 함수 외부에 전역적으로 돌아갈 경우 for문에서 사용한 var 변수들은 전역 변수로서 역할을 하므로, 전역 변수가 남발될 수 있다.

이러한 var 문제점을 보안하기 const, let

★ const란?

const는 constant(상수)를 뜻으로 '항상 같은 수'를 상수이기 때문에 const 키워드로 선언하면 변치 않는 값을 갖는 변수를 생성한다. const로 선언한 변수는 값을 재할당할 수 없음
~~그래서 나에게 주어진 민증번호같은거~~~

★ let란?

let은 const와 다르게 다른 값이 재할당될 수 있음.
값이 참조 타입(Array, Object, Function)일 때 const를 사용하는 걸 추천
＊참조형(Complex type): Array, Object, Function
＊원시형(Primitives type): String, Number, Boolean, null, undefined

★ 호이스팅(Hoisting) ★

변수를 가장 맨 위에 작성하도록 권장
변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는데 변수가 함수 내에서 정의된 경우는 선언이 함수의 최상위로, 함수 바깥에서 정의된 경우는 선언이 전역 컨텍스트의 최상위로 변경된다.

예를 들어서 글을 쓰는데 주제를 위에다가 쓰는 이유? 목차가 왜 가장 앞에 있는 이유!를 생각하면 조금더 이해하기 쉽지 않을까? 난 이과가 아니고 문과라....이러한 설명을 풀이하고 이해하려면 이런식으로 접근해야 조금 더 이해하기 쉽다구

★ 스코프(Scope) ★

Scope란, 프로그램 내에서 변수가 어디까지 접근할 수 있는지를 나타낸 것 {스코프-범위블럭 }
여기에서도 콘솔로 var로 변수를 했을 때 스코프가 어디까지 접근하는지와 let으로 했을 때 스코프가 어디까지 접근하는지 확인해보았다.!!

블록 레벨 스코프란 코드 블록({…})내에서 유효한 스코프를 의미한다. 여기서 “유효하다”라는 것은 “참조(접근)할 수 있다”라는 뜻이다. 대부분의 C-family language는 블록 레벨 스코프(block-level scope)를 따른다.

★ 백틱(backtick)

템플릿 문법 종류로 JS ES6 이후에 추가된 기능

일반적인 문자열
console.log("저는 " + city + " 에 살고 있구요, 이름은 " + name + ", 나이는 " + age + " 살 입니다.");

템플릿 리터럴
console.log(저는 ${city} 에 살고 있구요, 이름은 ${name}, 나이는 ${age} 살 입니다.);

자바스크립트 메모리할당

변수를 복사하는 방식 깊은 복사, 얕은 복사

★ 얕은 복사 Shllow Copy

얕은 복사란 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

const a = [1, 2, 3, 4];
const b = a;
b[3] = 5;
console.log(a); // [1,2,3,5]
console.log(b); // [1,2,3,5]

const a = [
  {
    id: 1,
    name: 'moon'
  },
  {
    id: 2,
    name: 'sim'
  },
    {
        id: 3,
    name: 'yean'
  }
];
const b = [...a]
console.log(a === b) // false
console.log(a[0] === b[0]) // true

★ 깊은 복사 Deep Copy

깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 참조를 끊어내고 새로운 데이터를 복사한다.

JSON.stringify()는 객체를 json 문자열로 변환하는데 이과정에서 원본 객체와의 참조가 모두 끊어진다. 객체를 json 문자열로 변환후 JSON.parse()를 이용해 다시 자바스크립트 객체로 만들어주면 깊은 복사가 된다. 하지만 이방법은 사용하기는 쉽지만 다른 방법에비해 아주 느리다고 알려져있다.
lodash 라이브러리를 사용하면 깊은 복사를 더 쉽게 할 수 있다. lodash clodeDeep()

const a = [1,2,3,4];
const b = [
  ...a
]
b[3] = 5;
console.log(a) // [1,2,3,4]
console.log(b) // [1,2,3,5]

const a = [
  {
    id: 1,
    name: 'moon'
  },
  {
    id: 2,
    name: 'sim'
  },
    {
    id: 3,
    name: 'yean'
  }
];
const b = JSON.parse(JSON.stringify(a)) -->JSON.stringify()
console.log(a === b) // false
console.log(a[0] === b[0]) // false

lodash clodeDeep()

온라인에서 lodash를 사용해보기 위해서
https://codesandbox.io/s/lodash-tester-forked-5bezx1?file=/index.js
~~콘솔로 아무리 해도 답이 안나와서 다시 수업들었던 것들 회상하는데 아! 온라인 lodash 코딩하는곳에서 해야된는걸 알게 되었음..~~

lodash clodeDeep()
import _ from 'lodash';

const a = [
  {
    id: 1,
    name: 'moon'
  },
  {
    id: 2,
    name: 'sim'
  },
    {
    id: 3,
    name: 'yaen'
  }
];
const b = _.cloneDeep(a)
console.log(a === b) // false
console.log(a[0] === b[0]) // false

정리한 후...
간단히 내 생각을 정리하자면 basic한 내용이지만 아직 알아야할 용어들도 많고, 익숙하지 않는 코드들 때문에 정리하는데도 3일 정도 걸렸지만..다시 보고 복습하면 보다 더 추가할 거 같다..~~(스터디한건 07월 토요일 3시간 수업을.. 현실은 일,월,화 걸쳐서 정리하고 있는중... ing 계속~)~~
실무에서 경험이 있는 사람들은 익숙한 단어들이지만, 나는 실무경험도 없고 여기저기서 조금씩 겉핥기식으로만 알았기 때문에 여기저기 찾아보면서 다시 이해하고 정리하는데 더 오랜시간이 걸린거 같다. 앞으로 javascript 익숙해지기 위해서 더 부단히 노력해야겠고, 용어들이랑 친숙해져야겠다. 나는 할 수 있다. i can do it

김선심

i can do it

이전 포스트

JavaScript prolog

다음 포스트

JavaScript 01

JavaScript

JavaScript 01

오늘 배운 study 수업내용에서 가장 핵심

JavaScript란?

JQuery란? :

JQuery 사용을 위해 import 하기

javascript

jquery

javacript 알아가야 할 용어들!! (★★★★★)

★ 주석 :

★ 변수 선언 : var, let, const

var의 문제점은..?

변수의 중복 선언이 가능하다.

for문에서의 문제점

★ const란?

★ let란?

★ 호이스팅(Hoisting) ★

★ 스코프(Scope) ★

★ 백틱(backtick)

자바스크립트 메모리할당

★ 얕은 복사 Shllow Copy

★ 깊은 복사 Deep Copy

lodash clodeDeep()

JavaScript prolog

Javascript 02

0개의 댓글