노드를 이용해서 서버를 개발하려고 하는데... 정작.. 자바스크립트를 많이도 까먹었다.
해서 이번 기회에 확 정리하고자 한다.
변수?
1) 자바 스크립트는 동적 언어로, 변수 타입을 미리 선언하지 않는다(까먹었음!)
2) 타입은 프로그램이 처리되는 과정에서 파악하니 내가 굳이X
3) 혹시 데이터 타입을 확인하고 싶다면 typeof()를 이용할 것.
그렇다면 이와 관련해서 간단한 코딩을 해보자.
console.log(cat);
var cat = "cute";
console.log(cat);
//변수 타입을 미리 선언할 필요가 없음. 타입은 프로그램이 처리 과정에서 자동으로 파악하기 때문이다!
출력방법은 비주얼코드에서 노드로 선택한 뒤, control + f5 를 누르면 간단하다.
그치만.. 우리는 터미널을 앞으로 더 자주 쓰이게 될 것이기에..(git, 서버 개발이니까)
이렇게 하면 된다. 나는 이 코드 이름을 2-1.js라고 이름을 지었고, 폴더 이름은 C:\__webapp_JSP 이 안에 있다.
우선 터미널에서
1) cd C:\__webapp_JSP를 해서 해당 폴더 위치로 가져간 뒤
2) PS C:\__webapp_JSP> node 2-1.js
3) undefined #참고! 이는 메모리 공간을 차지 한다는 의미!
cute 이렇게 출력 결과가 나온다. 이런 결과가 나오는 이유는 간단하다. 첫번째 고양이에 대한 변수가 선언돠지 않았기 때문이다. 이후 변수 고양이는 귀엽다는 값이 있으니 로그에서 귀엽다는 답이 나온다:)
+ const는 상수변수 이다. 해서 변수 값을 수정할 수 없으니 유의*
스코프?
스코프란, 범위를 의미 한다. => 변수에 접근 가능한 일정한 범위를 의미한다고 보면 됨!
블록 범위 내 선언 변수는 지역 변수이고, 함수 외부 변수는 전역 변수라고 생각하면 편하다!
var cat = "cute";
console.log(cat); // (1) 출력: cute
{
var cat = "Wonderful"; // (2) 기존 전역 변수 cat을 덮어씀
}
console.log(cat); // (3) 출력: Wonderful=> var는 전역변수에 원하지 않는 지역 변수를 덮어쓸 수 있음!(사실.. 코드의 오류를 줄이기 위해서는 그냥... 변수명을 동일하기 않게 하는게 "매우" 중요하다.)
let cat = "cute"
console.log(cat)
{
let cat = "Wonderful"
}
console.log(cat);=> 이러면 귀엽다는 출력만 2번 나온다. 그렇다는 이야기는 let은 전역변수 값에 감히 지역 변수가 끼어들지 못하게 한다!
객체?
자바 스크립트에서 객체는 키와 값으로 이루어진 프로퍼티의 집합을 의미한다. 나는 졸업프로젝트로 우선 운동에서 id, pw는 꼭 받아야 하기에 우선 이정도만 정의한 간단한 객체를 생성해보겠다!
const user = {
id : "jennie",
pw : "960126",
get_id: function(){
return this.id;
},
get_pw: function(){
return this.pw;
}
}=> 이런 식으로 생성하면 된다. 나는 최애의 이름, 생년월일을 이용하여 아주 간단하게 id, pw를 구성했다~
키 : 값 이라고 생각하면 된다. 객체 안에 함수도 가능하며, 이 경우를 메서드라고 한다!
* 배열에 객체가 들어갈 수 있다. 이때 push()를 이용함.
람다식?
c++에서 했다가 까먹은... 것인데 이번에 다시금 정리하자면,
const a = (b,c ) => b+c 이렇게 나타낼 수 있다. a라는 함수에 b,c라는 파라미터가 있고 리턴으로 b+c를 의미함.
프로토타입?
자바스크립트는 모든 것이 객체라고 봐도 무방하다. 객체의 부모격?인 프로토타입을 이용해 새롭게 자식 객체 같은 것을 생성하고 이는 곧 다른 객체의 부모가 된다고 생각하면 쉽다!(나는 씨쁠쁠 개념처럼 이해했다)
function Animal(name) {
this.name = name;
}
Animal.prototype.sayHello = function() {
console.log(`안녕! 나는 ${this.name}야.`);
};
const cat = new Animal("고양이");
cat.sayHello(); // 출력: 안녕! 나는 고양이야.=> 이런 식으로 Animal.prototype.sayHello를 추가하여 모든 Animal 객체가 이 메서드를 사용하도록 하였고,
cat 객체를 새롭게 생성 하고 cat은 프로토 타입을 통해 접근이 되도록 하는 것이다!
프로토 : 객체의 부모 참고
프로토타입 : 생성한 함수의 프로토타입 객체
콜백?
콜백은 나중에 실행되는 코드를 의미함. 비동기 처리 겸사 보면, 콜백 함수와 지체할 시간을 받아 기다렸다가 실행.
밑의 코드의 경우 두번째 문장은 2초 걸리니 먼저 실행, 이후 3초 실행
비동기의 장점을 볼 수 있음! 이유는 우선 첫번째로, 만약 동기적이였다면 첫번째 문장이면 3초, 이후 두번째 문장은 2초 총 5초가 걸렸을... 코드임... 지금은 간단하지만, 이후에는 기능 추가하면 이는 엄청난 차이임!
+ 졸프할 때는 파일 읽기, 데이터베이스 요청, APi 요청 과 같은 작업을 수행할 때 당연히 빠르고 유리함!
setTimeout(() => {
console.log('todo: First work!');
},3000 );
setTimeout(() => {
console.log('todo: work!');
},2000 );
참고로 콜백 함수란, 다른 함수의 인자로 전달되어서 특정 조건에서 실행되는 함수를 의미함. 함수 A가 실행되면서 함수B를 인자로 전달받고, 함수 A내부에서 함수 B가 실행되는 방식임.
그런데 콜백을 잘못 사용하면, 콜백에서 빠져나올 수 없는 지옥이 발생함.
function step1(callback) {
setTimeout(() => {
console.log("1단계 완료");
callback();
}, 1000);
}
function step2(callback) {
setTimeout(() => {
console.log("2단계 완료");
callback();
}, 1000);
}
function step3(callback) {
setTimeout(() => {
console.log("3단계 완료");
callback();
}, 1000);
}
// 콜백 중첩 (콜백 지옥)
step1(() => {
step2(() => {
step3(() => {
console.log("모든 단계 완료!");
});
});
});=> 쓸데없이 복잡한 코드가 만들어진다.. 그러면 이를 극복하기 위해서는 어떻게 해야 할까?
Promise, async/await 를 사용하면 된다. 위의 예시에서 수정해서 알아보자
function step1() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("1단계 완료");
resolve();
}, 1000);
});
}
function step2() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("2단계 완료");
resolve();
}, 1000);
});
}
function step3() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("3단계 완료");
resolve();
}, 1000);
});
}
// `then`을 이용해 순차적으로 실행
step1()
.then(() => step2())
.then(() => step3())
.then(() => console.log("모든 단계 완료!"));
async function processSteps() {
await step1();
await step2();
await step3();
console.log("모든 단계 완료!");
}
processSteps();
=> 아직 콜백은 어렵다.. 이건 이후 추가적으록 공부하도록 하겠다.
'BackEnd' 카테고리의 다른 글
| [PostgreSQL] 첫 걸음 (0) | 2025.03.22 |
|---|