728x90
728x90

what’s call stack ?

callstack : the way control flows through functions is somewhat involved.

function greet(who) {
	console.log("Hello" + who);
}
greet("Ramona")
console.log("Bye")

run through this program goes roughly like this:

→ the call to greet causes control

→ does its job

→ returns control to line 2

→ there it reaches the end of the greet function, so it returns to the place that called it (line 4)

→ the line after that calls console.log again

→ reaches its end

 

we could show the flow of control schematically like this :

not in fuction
	in greet
		in console.log
	in greet
not in function
	in console.log
not in function

because a function has to jump back to the place that called it when it returns. the computer must remember the context from which the call happened.

in one case, console.log has to return to th greet function when it is done.

in other case, it returns to the end of the program

the place where the computer stores this context is the call stack

everytime a function is called, the current context is stored on top of this stack. when a function returns. it removes the top context from the stack and uses that context to continue execution.

 

what about the memory?

storing this stack requires space in the computer’s memory.

when the stack grows too big, the computer will fail with a message like “out of stack space” or “too much recursion”

the following code illustrates this by asking the computer a really hard question that causes an infinite back-and-forth between two functions. rather, it would be infinite, if the computer had an infinite stack. as it is. we will run out of space, or “blow the stack 🤩”

 

function chicken () {
	return egg();
}
function egg() {
	return chicken();
}
console.log(chicken() + came first.");

that’s the problem about ‘which one came first?’ well… that’s popular

let’s see how does the code works

  1. The chicken() function is called initially in the console.log() statement.
  2. Inside the chicken() function, it calls the egg() function.
  3. Now, the egg() function is invoked.
  4. Inside the egg() function, it calls the chicken() function again.
  5. This recursive call from egg() to chicken() creates a loop between the two functions.
  6. Since there is no condition or base case to stop the recursion, the loop continues indefinitely until a limit is reached or an error occurs.
  7. Eventually, the call stack becomes full as each function call adds a new frame to the stack.
  8. At this point, the JavaScript engine recognizes that the call stack has reached its maximum capacity and throws a "Maximum call stack size exceeded" error.
  9. The error prevents an infinite loop and terminates the program.

the console.log() statement is attempting to concatenate the return value of chicken() with the string " came first.". However, since the recursion causes a stack overflow error, the code execution is halted before reaching the console.log() statement.

728x90
300x250
728x90
728x90

오늘의 타임테이블


 

5:00am  
6:00am  
7:00am  
8:00am  
9:00am 항해접속/ 2주차까지 한 필기 복습하면서 시험 준비
10:00am 항해 99 시험
11:00am 숫자야구게임 점검
12:00pm 점심시간
1:00pm 숫자야구게임코드리뷰 (13시 10분) / 상한님이랑 페어 코드리뷰 후 깃허브 업로드&과제 제출
2:00pm 어제 TIL 쓰기
3:00pm readline 모듈 공부하기
4:00pm (원):Readline 공부하기 (수정): readline 모듈 공부하다가 process모듈까지 공부하게 됨.
5:00pm ~30 readline 공부하기 ~59 티스토리 24h 업데이트
6:00pm 저녁시간/휴식/좀 자자 (수정) 좀 자려했는데 기술매니저님 오심 아 시발
7:00pm 스터디 범위 강의 듣기
8:00pm 스터디 질문 준비
9:00pm 스터디
10:00pm 스터디
11:00pm 스터디
12:00am 1. 스터디 과제 / 2. 항해 99 시험 복습 / 3.스터디 일지 업데이트
1:00am 스터디 일지 업데이트
2:00am 강의듣기/정리(수정 : 취침-너무 피곤해서 견딜 수가 없었음)
3:00am 강의듣기/정리(수정 : 취침-생리통 너무 힘드니까 봐주세요
4:00am 취침 혹은 유동적인 질문(수정 : 두통치통생리통에는 게보린) 
5:00am  

 


오늘의 투두리스트



오늘의 느낀 점

원래 어제 할 일 3시까지 전부 끝내고 자려고 했는데 이 상태는 너무 좀비화된것같아서 1시 반에 쓰러지듯이 자겠다 싶었다.

4시까지 진행하다가 그때쯤 자야지 싶었는데 그 전에 자버렸다. 

 

항해 99를 진행하면서, 정말 많은 대단한 분들을 뵙게 되고 정말 많은 걸 느꼈다.

나는 정말 우물 안 개구리였고, 

내가 이태껏 보내온 시간을 '개발자'로 정의할 수 있을지조차 의문이 들었다.

나는 과연 잘 해온 것일까?

구글링을 하고 gpt를 키고 받은 답변을 내 코드에 조금 수정해 넣었을 뿐 이해한 건 아무것도 없는 상태에서 그 코드를 과연 내가 직접 썼다고 말할 수 있는 것인가? 

 

지난 세월을 부정하고 싶지는 않았다만, 인정해야 했다.

앞으로 안되는 부분이 있으면 꼭 내 손으로 해결해야겠다.

그리고 항상 느끼는 부분이지만 잘하시는 분들이 엄청 많다.

자존감을 가지되 자존심은 내려놓고 항상 배우려는 태도로 임해야지.

 

내가 아는 세상이 전부가 아님을 늘 기억할 것

그러나 전부를 알려는 태도로 임할 것

이 마인드를 갖게 된 것이 이번주중 가장 큰 발전인 것 같다


공부한 내용( 추가공부 편) - 미업로드 


Readline은?

콘솔에서 받은 입력을 처리하는 모듈

사용자와 상호작용하며 텍스트 기반의 대화형 프로그램을 만들 때 유용하게 사용한다.

기본 사용법

모듈 불러오기 → 인터페이스 생성하기 → 코드 작성하기

모듈 불러오기

const readline = require("readline")

Readline의 모듈을 사용하기 위해 require함수를 사용하여 모듈을 불러온다.

이러면 Readline 객체를 사용하여 사용자 입력을 읽을 수 있다.

인터페이스 생성하기

const rl = readline.createInterFace({
	input: process.stdin
	output: process.stdout
});

stdin - standard input

프로그램에 입력 데이터를 제공하는 표준 입력 스트림

키보드나 다른 프로세스의 출력을 통해 입력받음

stdout - standard output

프로그램의 출력 데이터를 전달하는 표준 출력 스트림이며 일반적으로 터미널에 출력되는 데이터

프로그램은 stdout에 데이터를 쓰거나 출력하여 정보 제공

→ 노드 js 환경에서는 process 모듈속에 있음

 


-}Process 모듈에 대해 더 알고싶어 process 모듈 파기 시작

참고자료

https://inpa.tistory.com/entry/NODE-📚-OS-모듈-Utility-모듈#process.env

https://ojhallae.tistory.com/88

process모듈이란?

전역객체이며, require()를 사용하지 않고도 Node.js 어플리케이션에 접근할 수 있는 전역객체

동작중인 프로세스에 접근할 수 있는 권한을 제공함

process.cwd()는 __dirname과 경로로서 많이 쓰임

 

process.env

  • 시스템 환경변수가 들어가있는 객체
  • 비밀번호 키를 보관하는 용도로 사용함

process.nextTick (콜백)

  • 이벤트 루프가 다른 콜백 함수들보다 nextTick의 콜백 함수를 우선적으로 처리함
  • 너무 쓰면 다른 콜백 함수들 실행이 늦어짐
  • 비슷한 경우로 promise가 있음

Process.stdin.setEncoding(’utf8’)

 

 

이정도까지 파다가 시간이 다 되었다

 

 


공부한 내용 - 숫자 야구 프로그램 만들기 편


https://insidepixce.tistory.com/86

 

[node.js] 숫자 야구 게임 만들기 : 부연설명 많음

항해99 1주차 과제이다. 컴퓨터는 0과 9 사이의 서로 다른 숫자 3개를 무작위로 뽑습니다. (ex) 123, 759 사용자는 컴퓨터가 뽑은 숫자를 맞추기 위해 시도합니다. 컴퓨터는 사용자가 입력한 세자리

insidepixce.tistory.com

 

하면서 어려운 점이 많아서 여기저기 도움을 많이 받았던 것 같다

내가 개념을 아는 것과 내가 여기저기 응용할 수 있는 것은 다르니 

좀 더 열심히 하게되는 계기가 되었던 것 같다

 

 


공부한 내용 - 스터디 편 


2조분들께서는 동기 / 비동기 개념을 집중적으로 강의하셨다. 

https://secretive-fireman-347.notion.site/230615-2-23-28-ee7abcfe6fb94bf39a4c2fd35d3e8b4c

 

230615 스터디 2일차 ( 23장 ~ 28장 )

카테고리

secretive-fireman-347.notion.site

2조 교안

 

 

정말 설명이 잘 된 예시였다. 2조 상한님께서 정리하신 내용인데 머리에 쏙쏙 들어왔다.

블로킹과 논블로킹의 개념이 확실히 이해가 되었다.

상한님 블로그 링크 : https://blog.naver.com/luna_prog

 

스파르타 코딩일지 : 네이버 블로그

자기소개가없습니다.

blog.naver.com

 

스터디 내용을 다 정리하면 스터디록에 올릴 예정이다.

그때 또 수정하러 올 생각이다 

 


한줄평


할 게 너무 많은데 참 ... 주기가 또 이렇게 잡혔다 ㅠ 

진짜 화장실 자주 가야하고 진짜 불편하다

힘들어도 열심히 해야지 내가 

728x90
300x250
728x90
728x90

항해99 1주차 과제이다.

 

  • 컴퓨터는 0과 9 사이의 서로 다른 숫자 3개를 무작위로 뽑습니다. (ex) 123, 759
  • 사용자는 컴퓨터가 뽑은 숫자를 맞추기 위해 시도합니다.
  • 컴퓨터는 사용자가 입력한 세자리 숫자에 대해서, 아래의 규칙대로 스트라이크(S)와 볼(B)를 알려줍니다.
    • 숫자의 값과 위치가 모두 일치하면 S
    • 숫자의 값은 일치하지만 위치가 틀렸으면 B
  • 기회는 무제한이며, 몇번의 시도 후에 맞췄는지 기록됩니다.
  • 숫자 3개를 모두 맞춘 경우, 게임을 종료합니다.

 

1. Readline 불러와준다

const readline = require('readline').createInterface({
	input: process.stdin,
	output: process.stdout
};

Readline같은 경우에는 내가 지금 구덩이 파고 있는 주제 중 하나이다.

아마 오늘 내로 1차적 삽질리포트가 올라올 것이다.

2. 배열을 지정한다

var answer = []

이 배열은 나중에 랜덤값을 저장할 때 사용해줄 것이다

3.랜덤한 숫자 생성하기

 var answer = [];
  while(answer.length < 3){
      var randomNum = Math.floor(Math.random()*10); 
      if(answer.indexOf(randomNum) > -1) continue;
      answer.push(randomNum);
  }

위 코드에서는 랜덤으로 숫자를 생성해 생성된 숫자가 4개 미만이라면 새로운 숫자가 생성되고,

중복되지 않는다고 하면 결괏값인 randomNum 에 저장이 된다.

조금 더 자세히 알아보도록 하자

  • 생성되는 숫자 제어하기
  while(answer.length < 3){

만약의 answer 배열의 길이가 3보다 작다면 ~ 으로 시작해서 작동하는 코드이다.

answer 배열의 길이가 3개 이상이라면 멈추게 된다

  • 숫자를 정수화한 후 Randomnum에 넣기
 var randomNum = Math.floor(Math.random()*10); 

이때 math.random()으로 숫자를 생성하고,

이 숫자의 범위는 0~1이기 때문에 *10을 해줘서 1~10으로 바꿔준다.

그 후 Math.floor로 소숫점을 떨궈주고, randomNum으로 정의해준다.

  • 코드의 중복 확인하기
      if(answer.indexOf(randomNum) > -1) continue;

indexof: 지정된 요소의 인덱스를 검색하는 javascript의 내장 메서드이다.

호출한 배열에서 첫번째로 일치하는 요소의 인덱스변환, 일치하는 요소가 없는 경우 -1 을 반환한다.

만약 2번째 숫자가 같았으면 해당숫자의 인덱스인 1이 반환되고,

첫번째 숫자가 같았으면 해당 숫자의 인덱스인 0이 반환된다.

-1보다 작으면 continue로 계속해준다

indexof도 곧 포스팅할 예정이다!.

  • 중복이 아니라면
   answer.push(randomNum);

randomNum에 answer가 들어가게 된다

4. 세자리 숫자 입력받고 사용자 입력의 중복/글자수 이상 처리하기

 function playGame() {
    readline.question('세자리 숫자를 입력하세요.', (playerInput) => {
      count++;
      if(playerInput.length !== 3 || new Set(playerInput).size !== 3){
          console.log("세자리의 서로 다른 숫자를 입력하세요.");
          playGame();
          return;
      }

readline를 이용하여 세자리 숫자를 입력받았다.

그러나 만약 세 자리 숫자 안에 중복된 숫자가 있거나, 4자리라면 어떻게 되는 걸까?

당연히 프로그램 진행에 문제가 생긴다.

자세히 뜯어보자.

세 자리 숫자 입력받고 입력받을 때 마다 시도횟수 하나씩 증가시키기

 function playGame() {
    readline.question('세자리 숫자를 입력하세요.', (playerInput) => {
      count++;

나는 playGame이라는 함수를 사용하기로 했다

제일 먼저 readline.question으로 사용자의 입력을 받았다

실행 결과의 이 부분이라고 생각하면 될 것 같다.

사용자가 입력한 값은 콜백 함수의 매개변수인 playerInput에 저장된다.

한번 입력을 받을 때 마다 count 횟수를 1씩 늘려준다

이는 마지막에 시도 횟수를 출력할때 사용된다

  • 사용자 입력의 중복이 있거나 길이가 3이 아니라면
    if(playerInput.length !== 3 || new Set(playerInput).size !== 3){
          console.log("세자리의 서로 다른 숫자를 입력하세요.");
          playGame();
          return;
      }

논리 OR 연산자

두 개의 피연산자중 하나 이상이 True이상인지를 확인하고, 결과로 True를 반환한다.

  • 왼쪽 피연산자를 평가한 결과가 True이면 오른쪽 피연산자 평가 x 그냥 바로 True반한
  • 왼쪽 피연산자를 평가한 결과가 False 이면 오른쪽 피연산자 평가하고 그 결과를 반환함

(추후 포스팅해볼 내용이 더 늘어나버렸네…;;

이걸 어떻게 적용했냐면

    if(playerInput.length !== 3 || new Set(playerInput).size !== 3){

이 상황에서 playerInput.length이 3이 아니라면, 뒤에 중복 여부 결과는 보지 않고 바로 True를 반환한다.

숫자가 3개도 아닌데 굳이 중복 볼 필요가 있냐는거다.

그래서 먼저 앞의 숫자 갯수를 확인해본 후 playerInput을 Set 형태로 바꿔준다

*set은 중복이 존재할 수 없다

중복이 없는 상태에서 숫자의 갯수가 3개가 맞는지 확인하는 과정이였다.

논리 OR 연산자 쓰는 게 습관이 되어가고 있다 ! &ㅠ&

5. 기본 값 세팅하기

      var strike = 0;
      var ball = 0;
      var checkResult = Array(3).fill(0);

strike 카운트와 Ball 카운트를 초기화해준다.

그리고 Array(3).fill(0)이라는 게 보이는데 이는 길이간 3인 배열을 생성하고, 그 배열의 모든 요소를 0으로 채우는 역할을 한다.

Array 생성자 함수에 문자 3을 인수로 넣어 배열의 길이를 설정하고, fill 메서드를 조합해서 쓰여진다.

나는 이것을 세 자리 수에 각각 비교하도록 구성해보려 하였다.

  • array와 Fill을 사용하지 않고 작성한다면??

직접 배열 리터럴을 사용하여 배열을 생성하고 요소에 초기값을 할당한다

var checkResult = [0, 0, 0];

배열 생성 후에 반복문이나 인덱스 접근을 통해 각 요소에 초기값을 할당한다.

var checkResult = [];
for (var i = 0; i < 3; i++) {
  arr[i] = 0;
}

빈 배열을 생성한 후에 반복문을 사용하여 각 요소에 초기값 0을 할당하는 법.

배열의 크기가 커지면 이 방향을 사용하여야 할듯

away.from 메서드를 사용하여 배열을 생성하고 초기값을 할당한다

var arr = Array.from({ length: 3 }, () => 0);

이러한 방법으로도 쓸 수 있다. array.fill이랑 다른 점이라면 여러 개의 매개변수를 받을 수 있다 정도?

  1. 현재 요소의 값
  2. 현재 요소의 인덱스
  3. 생성된 배열의 전체 길이

를 받을 수 있다.

비어있는 자리에는 value, index가 들어있다

추후 좀 더 공부해보고 이 주제만 단독으로 포스팅해보도록 하겠다 !

6. 볼과 스트라이크 구성/ 표현

   for(var i=0; i<3; i++){
          if(answer[i] == playerInput[i]){
              checkResult[i] = 2;
          } else if(answer.indexOf(parseInt(playerInput[i])) > -1){
              checkResult[i] = 1;
          }
      }

i를 0으로 두었고, 세 자리 숫자이기에 세 번만 할 수 있도록 제한해준다.

한번 실행될따마 i에 하나씩 더해진다

  • 스트라이크 구현
          if(answer[i] == playerInput[i]){
              checkResult[i] = 2;

만약 정답의 n번째 인덱스에 있는 숫자가 입력값의 n번째 인덱스에 있는 숫자와 같다면

checkResult[i]가 2가 된다

즉 strike 를 나타내는 표현으로 2를 둔 것이다

  • 볼 구현
          } else if(answer.indexOf(parseInt(playerInput[i])) > -1){
              checkResult[i] = 1;
          }

스트라이크는 조금 감이 잡혔는데 볼은 어떻게 구현해야 할 지 감이 잘 안 잡혔었다.

그래서 중복 찾기에서 진행했던 방식을 조금 활용해보기로 헀다.

playerinput이 지금 사용자가 입력한 문자열을 가지고 있기에 parseInt로 정수로 변환한다.

Indexof 메서드는 배열에서 특정값을 검색하고, 검색된 값의 첫 번째 인덱스를 보낸다.

만약에 Indexof 값이 -1을 넘는다면 특정 인덱스에서 겹친다는 것이다

따로 떼놓고 본다면, 어? 저렇게 되면 스트라이크도 볼이 될 수 있는 거 아니야? 라고 할 수 있는데

   for(var i=0; i<3; i++){
          if(answer[i] == playerInput[i]){
              checkResult[i] = 2;
          } else if(answer.indexOf(parseInt(playerInput[i])) > -1){
              checkResult[i] = 1;
          }
      }

이렇게 전체를 보면 이해가 된다

if문에서 인덱스가 아예 같은건 다 스트라이크로 보내버리고

남은것들만 있기 때문이다

7.볼과 스트라이크 세기

  strike = checkResult.filter(x => x === 2).length;
  ball = checkResult.filter(x => x === 1).length;

checkresult.filter로 조건을 만족하는 요소들을 필터링하여 새로운 배열을 생성한다.

x는 현재 요소를 나타내는 매개변수이다

x가 2가 일치하는 경우로 배열을 만들어버리고 그 배열의 길이를 구하는 것이다.

strike,Ball을 숫자로 둔 이유가 그것이다

ball같은 경우에도 마찬가지다. result에 ball이 몇개가 있는지 확인하고 그 배열의 길이를 구해준다

  • 여기서 질문: 새로 생긴 배열은 어디에 저장되는가 ? 저장하긴 하는가?

→ 저장 안 된다. 그냥 쓰고 버림. strike에 저장되는건 새로 만든 배열의 길이일 뿐임.

→ 그럼 이거는 그냥 날리는 건가요? 필요가 없어서 뒤에 사용을 안 했다면 날려버리는거죠?

8. 결과 출력하기

    if(strike === 3){
          console.log("축하합니다! " + count + "번만에 맞췄습니다.");
          readline.close();
      } else {
          console.log(strike + "S " + ball + "B 입니다.");
          playGame();
      }
    });
  }

strike가 세 개면 종료 메세지를 출력한다.

세 개가 아니면 될 때 까지 출력해주고 스트라이크 갯수와 볼 갯수를 포함해 안내 메세지를 출력해준다.

그리고 Playgame 함수를 다시 출력해준다

 

 

구현화면

 

 

최종 코드

const readline = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
  });
  
  var answer = [];
  while(answer.length < 3){
      var randomNum = Math.floor(Math.random()*10); 
      if(answer.indexOf(randomNum) > -1) continue;
      answer.push(randomNum);
  }
  
  var count = 0;
  
  function playGame() {
    readline.question('세자리 숫자를 입력하세요.', (playerInput) => {
      count++;
  
      if(playerInput.length !== 3 || new Set(playerInput).size !== 3){
          console.log("세자리의 서로 다른 숫자를 입력하세요.");
          playGame();
          return;
      }
  
      var strike = 0;
      var ball = 0;
      var checkResult = Array(3).fill(0);
  
      for(var i=0; i<3; i++){
          if(answer[i] == playerInput[i]){
              checkResult[i] = 2;
          } else if(answer.indexOf(parseInt(playerInput[i])) > -1){
              checkResult[i] = 1;
          }
      }
  
      strike = checkResult.filter(x => x === 2).length;
      ball = checkResult.filter(x => x === 1).length;
  
      if(strike === 3){
          console.log("축하합니다! " + count + "번만에 맞췄습니다.");
          readline.close();
      } else {
          console.log(strike + "S " + ball + "B 입니다.");
          playGame();
      }
    });
  }
  
  playGame();
728x90
300x250
728x90
728x90

자바스크립트에서의 연산자를 정리해보았다

#다른 언어랑 비슷해서 학습하기 쉬웠음

1. 산술 연산

덧셈 연산자 (+)

var num1 = 5;
var num2 = 3;

var sum = num1 + num2;        // 덧셈 연산
console.log(sum);

숫자들을 더하거나 문자열을 연결할 때 사용됨

두 개의 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결이 수행됨

뺄셈 연산자 (-)

var difference = num1 - num2; // 뺄셈 연산
console.log(difference);

숫자들 간의 뺄셈을 수행함

곱셈 연산자 (*)

var product = num1 * num2;    // 곱셈 연산
console.log(product);

숫자들 간의 곱셈을 수행함

나눗셈 연산자 (/)

var quotient = num1 / num2;   // 나눗셈 연산
console.log(quotient);

숫자들 간의 나눗셈을 수행함

나머지 연산자 (%)

var remainder = num1 % num2;  // 나머지 연산
console.log(remainder);

첫 번째 피연산자를 두 번째 피연산자로 나눈 후, 나머지를 반환

거듭제곱 연산자 ( 또는 Math.pow())**

var exponentiation = num1 ** num2;  // 거듭제곱 연산
console.log(exponentiation);

첫 번째 피연산자를 두 번째 피연산자의 거듭제곱으로 계산

단항 증가/감소 연산자 (++, --)

var x = 10;
console.log(x++);             // 출력: 10 (후위 증가 연산자)
console.log(x);               // 출력: 11

var y = 7;
console.log(--y);             // 출력: 6 (전위 감소 연산자)
console.log(y);

변수의 값을 1씩 증가시키거나 감소시킴

변수 앞에 사용되면 값을 증가/감소시킨 후 반환하고, 변수 뒤에 사용되면 값을 반환한 후 증가/감소시킴

2. 할당연산자

할당 (=) 연산자

x = 10;
console.log(x);   // 출력: 10

우측 피연산자의 값을 좌측 피연산자인 변수에 할당함

x = 5;와 같이 사용하여 x 변수에 5를 할당

덧셈 할당 (+=) 연산자

x += 3;
console.log(x);   // 출력: 13

변수에 우측 피연산자 값을 더하고, 그 결과를 변수에 할당

x += 3;은 x = x + 3;과 동일

뺄셈 할당 (-=) 연산자

x -= 2;
console.log(x);   // 출력: 11

변수에서 우측 피연산자 값을 빼고, 그 결과를 변수에 할당

x -= 2;는 x = x - 2;와 동일

곱셈 할당 (*=) 연산자

x *= 4;
console.log(x);   // 출력: 44

변수에 우측 피연산자 값을 곱하고, 그 결과를 변수에 할당

x *= 4;는 x = x * 4;와 동일

나눗셈 할당 (/=) 연산자

x /= 2;
console.log(x);   // 출력: 22

변수를 우측 피연산자 값으로 나누고, 그 결과를 변수에 할당.

x /= 2;는 x = x / 2;와 동일

나머지 할당 (%=) 연산자

x %= 3;
console.log(x);   // 출력: 1

변수를 우측 피연산자 값으로 나눈 나머지를 변수에 할당

x %= 3;는 x = x % 3;과 동일

거듭제곱 할당 (=) 연산자**

x **= 2;
console.log(x);   // 출력: 1

변수의 값을 우측 피연산자의 거듭제곱으로 계산한 후, 그 결과를 변수에 할당

x **= 2;는 x = x ** 2;와 동일

3. 비교 연산자

일치 (===) 연산자

console.log(1 === 1);  // 출력: true
console.log(1 === '1');  // 출력: false

두 피연산자의 값과 타입이 동일한지 비교

동등 (==) 연산자

console.log(1 == 1);   // 출력: true
console.log(1 == '1');  // 출력: true

두 피연산자의 값이 동일한지 비교

부등 (/!=) 연산자

console.log(1 != 2);   // 출력: true
console.log(1 != '1');  // 출력: false

두 피연산자의 값이 다른지 비교

불일치 (!==) 연산자

console.log(1 !== 2);   // 출력: true
console.log(1 !== '1');  // 출력: true

두 피연산자의 값과 타입이 다른지 비교

보다 큼 (>) 연산자

console.log(3 > 2);    // 출력: true
console.log(2 > '3');  // 출력: false

첫 번째 피연산자가 두 번째 피연산자보다 큰지 비교

보다 작음 (<) 연산자

console.log(2 < 3);    // 출력: true
console.log(2 < '1');  // 출력: false

첫 번째 피연산자가 두 번째 피연산자보다 작은지 비교

보다 크거나 같음 (>=) 연산자

console.log(3 >= 3);   // 출력: true
console.log(3 >= '2'); // 출력: true

첫 번째 피연산자가 두 번째 피연산자보다 크거나 같은지 비교

보다 작거나 같음 (<=) 연산자

console.log(2 <= 3);   // 출력: true
console.log(2 <= '3'); // 출력: true

첫 번째 피연산자가 두 번째 피연산자보다 작거나 같은지 비교

4. 논리 연산자

논리 곱 (&&) 연산자

console.log(true && true);    // 출력: true
console.log(true && false);   // 출력: false
console.log(false && false);  // 출력: false
console.log(false && 'text'); // 출력: false

두 피연산자가 모두 참인지 비교

논리 합 (||) 연산자

console.log(true || true);    // 출력: true
console.log(true || false);   // 출력: true
console.log(false || false);  // 출력: false
console.log('text' || false); // 출력: 'text'

두 피연산자 중 하나 이상이 참인지 비교

논리 부정 (!) 연산자

console.log(!true);  // 출력: false
console.log(!false); // 출력: true

피연산자의 반대값 반환

5. 조건 연산자

삼항 연산자

var x = 10;
var y = 5;

var result = x > y ? 'x가 y보다 큽니다.' : 'x가 y보다 작거나 같습니다.';
console.log(result);

조건식의 평가 결과에 따라 반환할 값을 결정하는 연산자

조건식이 참인 경우, 첫 번째 표현식이 반환되며, 거짓인 경우에는 두 번째 표현식이 반환됨

6. 문자열 연산자

문자열 연결 (+) 연산자

var hello = 'Hello, ';
var world = 'world!';

console.log(hello + world); // 출력: 'Hello, world!'

두 문자열을 연결하여 새로운 문자열을 생성함

7. 타입 연산자

typeof 연산자

console.log(typeof 123);           // 출력: 'number'
console.log(typeof 'text');        // 출력: 'string'
console.log(typeof true);          // 출력: 'boolean'
console.log(typeof {});            // 출력: 'object'
console.log(typeof []);            // 출력: 'object'
console.log(typeof null);          // 출력: 'object'
console.log(typeof undefined);     // 출력: 'undefined'
console.log(typeof function() {}); // 출력: 'function'

피연산자의 타입을 문자열로 반환

8. 비트 연산자

비트 AND (&) 연산자

console.log(5 & 3); // 출력: 1

두 피연산자 각각의 비트를 AND 연산함

비트 OR (|) 연산자

console.log(5 | 3); // 출력: 7

두 피연산자 각각의 비트를 OR 연산함

비트 XOR (^) 연산자

console.log(5 ^ 3); // 출력: 6

두 피연산자 각각의 비트를 XOR 연산함

비트 NOT (~) 연산자

console.log(~5); // 출력: -6

피연산자의 모든 비트를 반전함

왼쪽 시프트 (<<) 연산자

console.log(5 << 1); // 출력: 10

첫 번째 피연산자의 모든 비트를 왼쪽으로 두 번째 피연산자만큼 이동시킴

오른쪽 시프트 (>>) 연산자

console.log(5 >> 1); // 출력: 2

첫 번째 피연산자의 모든 비트를 오른쪽으로 두 번째 피연산자만큼 이동시킴

부호 없는 오른쪽 시프트 (>>>) 연산자

console.log(5 >>> 1); // 출력: 2

첫 번째 피연산자의 모든 비트를 오른쪽으로 두 번째 피연산자만큼 이동시키고, 왼쪽에서 새로운 비트를 0으로 채움

728x90
300x250
728x90
728x90

암시적 형변환

javascript에서 연산자를 사용할 때 자동으로 수행되는 형변환

피연산자의 타입에 따라 결과가 다를 수 있음

주로 숫자와 문자열간 논리 연산자 사용 시 발생

 

1. 숫자와 문자 간의 암시적 형변환

var num = 42;        // 숫자 타입 변수
var str = "10";      // 문자열 타입 변수

var result = num + str;
console.log(result); // "4210" (문자열로 형변환 후 연결)

숫자 42 + 문자열 "10"이 더해진다. 

자바스크립트는 숫자와 문자열을 더할 때 숫자를 문자열로 암시적 변환하여 두 문자열을 연결한다

따라서 result 변수의 값은 "4210"이 된다

 

2. 논리 연산자를 사용할 때의 암시적 형변환

 

var num = 10;         // 숫자 타입 변수

var result1 = num || 0;
console.log(result1); // 10 (참 값인 첫 번째 피연산자 반환)

var result2 = "" && num;
console.log(result2); // "" (거짓 값인 첫 번째 피연산자 반환)

||연산자 : 첫 번째 피연산자가 참이면 해당 값을 반환하고, 거짓이면 두 번째 피연산자를 반환

&&연산자 : 첫번째 피연산자가 거짓이면 해당 값을 반환하고, 참이면 두번째 피연산자 반환

Result1 변수의 값은 10, result2변수의 값은 "" (빈 문자열)

 

3. 불리언 변환

 

var value = "Hello";      // 문자열 타입 변수

if (value) {
  console.log("Value is truthy");    // 실행됨
} else {
  console.log("Value is falsy");
}

 

변수 value에는 문자열이 할당되어 있음

if문에서 value를 조건으로 사용하면 javascript는 value를 불리언으로 암시적 변환

문자열은 비어있지 않음- 불리언으로 변환하면 true

그래서 조건문은 참이 되고 truthy가 출력

 

명시적 형변환

 

개발자가 일부러 형변환시킴

 

 

1. 문자열 변환

 

String() 함수 사용

var num = 42;           // 숫자 타입 변수
var str = String(num);  // 숫자를 문자열로 변환

console.log(str);       // "42" (문자열로 변환된 값)

toString()메서드 사용

var bool = true;              // 불리언 타입 변수
var str = bool.toString();    // 불리언을 문자열로 변환

console.log(str);             // "true" (문자열로 변환된 값)

 

연결 연산자(+) 사용:

var num = 10;             // 숫자 타입 변수
var str = num + "";       // 빈 문자열과의 연결을 통해 문자열로 변환

console.log(str);         // "10" (문자열로 변환된 값)

 

2. 숫자 변환

 

Number() 함수 사용

var str = "42";            // 문자열 타입 변수
var num = Number(str);     // 문자열을 숫자로 변환

console.log(num);          // 42 (숫자로 변환된 값)

 

parseInt() 함수 사용

var str = "123.45";              // 문자열 타입 변수
var num = parseInt(str);         // 정수로 변환

console.log(num);                // 123 (숫자로 변환된 값)

 

parseFloat() 함수 사용

var str = "3.14";                // 문자열 타입 변수
var num = parseFloat(str);       // 부동 소수점 수로 변환

console.log(num);                // 3.14 (숫자로 변환된 값)
728x90
300x250
728x90
728x90

 

 

 JS 언어의 특징

1. 객체 지향 프로그래밍 지원

객체를 생성하고 관리하는 데에 강점이 있음. 이를 통해 복잡한 기능을 구현할 수 있음

 

-절차지향 : 순서대로 실행되는 일련의 과정을 단계적으로 기술해 프로그램을 만듦

ㄴ첫 번째 일을 처리한 다음에 두 번째 일을 처리하고, 그 다음에 세 번째 일을 처리 

-객체지향 : 데이터와 함수를 객체라는 그룹으로 묶어서 처리 하는 법

ㄴ 각 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성이라고도 함

 

 

 js에서 객체를 만들 때는

객체 : {중괄호} 사용 

속성 : 쉼표, 

ㄴ이름: 문자열 값: 다양한 데이터 타입을 사용할 수 있음

메소드 : 객체 내부의 함수 

*속성의 값으로 함수를  추가할 수 있음

https://insidepixce.tistory.com/75

 

javascript에서 객체를 생성하는 방법 8가지

1. 일반적인 객체 생성 방법 // 객체 생성자 함수를 사용하여 객체 생성 function Person(name, age) { this.name = name; this.age = age; } // 새로운 객체 생성 let person1 = new Person("gyodam", 21); console.log(person1); // 출

insidepixce.tistory.com

객체를 생성하는 법 8가지를 정리한 티스토리 첨부

확인해보면 도움이 될 것이다. 

-> 객체를 만들어 필요한 속성과 메소드를 추가하여 사용

 

2. 동적 타이핑 언어

동적 타이핑 언어란? 

자바스크립트가 아닌 다른 언어에서는 변수를 지정할때 타입을 지정해줘야 함

 

#타이핑이라는 단어가 조금 생소하게 느껴진다면 type + ing라고 생각하면 좋다. 

정적 타이핑 언어 : java

public class Example {
    public static void main(String[] args) {
        int myVariable = 10;
        System.out.println(myVariable); // 출력: 10

        myVariable = "Hello, World!"; // 오류: 타입 불일치
        System.out.println(myVariable);
    }
}

 

이를테면, C, C++, Java, C# 등이 정적 타이핑 언어에 해당한다. 

위의 예시 코드에서 'myvariable' 은 처음에는 정수 타입인 int로 선언 , 10이라는 값이 할당됨.

그러나 이후 문자열인 "Hello, World!"를 할당하려고 해 컴파일 오류가 발생함

java에서는 변수의 타입이 컴파일 시에 결정되기 때문에 한 번 타입이 지정되면 다름 타입의 값을 할당할 수 없음

 

장점 -> 컴파일 시에 타입 체크를 수행하여 오류를 사전에 방지

단점 -> 동적 타이핑 언어에 비해 유연성이 떨어짐

 

https://insidepixce.tistory.com/76

 

런타임이란? (런타임 시점)

런타임이란? 컴퓨터 프로그램이 실행되는 동안, 프로그램의 실행 환경과 관련된 모든 작업을 처리한다. 실행중에 발생하는 모든 활동과 동작을 포함한다 1. 메모리 관리 : 프로그램이 메모리를

insidepixce.tistory.com

 

*숫자열과 문자열을 동일한 변수에 저장할 수 있다

let myVariable = 10;
console.log(myVariable);

myVariable = "Hello, World!";
console.log(myVariable); // 출력: Hello, World!

첫번째 출력 : 10 두번째 출력 : Hello, World!

 

*동적 타이핑은 연산에 대해서도 적용된다 

let sum = 5 + 10;
console.log(sum)

sum = "5" + "10";
console.log(sum);

첫번째 출력 : 15 두번째 출력 : 510

따로 타입을 정해주지 않았는데도 적용되는 것을 볼 수 있다

*배열은 여러 타입의 요소를 포함 할 수 있다

let myArray = [1, "two", true];
console.log(myArray);

 출력: [1, "two", true]

 

*객체의 속성은 런타임 중에 추가하거나 수정할 수 있다

let myObject = { name: "gyodam", age: 21 };
console.log(myObject);
myObject.email = "insidepixce@gmail.com";
console.log(myObject);

출력1 : { name: 'gyodam' , age : 21}  출력 2 : { name: :"gyodam", age: 21, email: "insidepixce@gmail.com" }

 

3. 함수형 프로그래밍 지원

 

함수를 일급 객체로 취급하고 , 고차 함수를 지원함. 

-> 코드의 재사용성과 가독성을 높임

 

따로 포스팅을 하려 했으나, 2주차에 자세히 배울 예정이기에 이 포스트에 서술함.

 

특성

1. 변수에 할당 가능함

2. 함수의 매개변수로 전달할 수 잇음

3. 함수의 반환값으로 사용할 수 있음

4. 동적으로 프로퍼티를 할당하거나 메서드를 추가할 수 있음

 

즉, 일급 객체는 Javascript에서 다른 객체와 마찬가지로 취급됨. 

함수형 프로그래밍에서는 함수를 값으로 다루어 코드를 조합하는 기법을 사용함.

 

// 변수에 할당
const add = function(a, b) {
  return a + b;
};

// 함수의 매개변수로 전달
function calculate(operation, a, b) {
  return operation(a, b);
}

console.log(calculate(add, 5, 3)); // 출력: 8

// 함수의 반환값으로 사용
function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 출력: 10

// 동적으로 프로퍼티 할당 및 메서드 추가
const person = {};
person.sayHello = function() {
  console.log("Hello!");
};

person.sayHello(); // 출력: Hello!

 

고차함수란?

함수를 인자로 받거나 , 함수를 반환하는 함수 

// 함수를 매개변수로 받는 고차 함수
function operationOnNumbers(operation, a, b) {
  return operation(a, b);
}

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(operationOnNumbers(add, 5, 3)); // 출력: 8
console.log(operationOnNumbers(subtract, 5, 3)); // 출력: 2

// 함수를 반환하는 고차 함수
function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 출력: 10

 

 

4. 비동기 처리

 

작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식

 

 


항해 99 15기 node.js 1주차 강의 중 2강까지의 내용정리 

728x90
300x250
728x90
728x90

 javascript의 역사에 관하여 

1. 1995년 자바스크립트 탄생

넷스케이프 커뮤니케이션에서 제작

ㄴ livescript -> javascript(마케팅을 위하여 이렇게 진행)

ㄴ java와는 전혀 관련이 없음

#필자의 경우에도 주변에 javascript를 줄여 java라고 말하는 거 아니야?  라고 말하던 친구가 있었다

#인도를 인도네시아의 줄임말이라고 하는 거랑 같은 느낌

ㄴ브라우저에서 동작하는 스크립트 언어

 

2. 2005년 AJAX 등장

javascript 기반의 기술

당시의 웹사이트는 버튼을 하나 눌러서 작동하려면 전체 페이지를 새로고침해야 했으나 덕분에 해당 부분만 작동시키면 됨

UX- user experience : 사용자 정의

 

3. 2008년 V8 엔진 출시

-super fast(코드 실행 속도 상당부분 개선)

-컴파일러 , 메모리관리 시스템이 좋아짐

 

4. 2009년 node.js 등장, 서버 개발 활성화

브라우저를 깨고 나와서 어디에서든 사용할 수 있도록 만든것이 node js

frontend + backend+ db (mongodb) = fullstack

하나의 언어로 풀스택이 될 수 있는 언어

 

728x90
300x250
728x90
728x90

런타임이란?

컴퓨터 프로그램이 실행되는 동안, 프로그램의 실행 환경과 관련된 모든 작업을 처리한다. 

실행중에 발생하는 모든 활동과 동작을 포함한다

 

1. 메모리 관리 : 프로그램이 메모리를 할당하고 사용하는 방법을 관리한다. 

변수, 객체, 배열 등의 데이터 구조를 메모리에 할당하고 해제하는 작업을 포함함

 

2. 변수 및 객체의 생성 및 소멸 : 변수와 객체가 선언되거나 삭제되는 시점에서 해당 작업을 처리함

 

3. 예외 처리 : 런타임은 프로그램 실행 중에 발생하는 에외를 처리하고 적절한 조치를 취함

 

프로그램의 실행 흐름을 제어하고 오류를 처리하는데 도움이 됨

 

4. 동적 타이핑: 동적 타이핑 언어의 경우 변수의 타입을 보고 반환하는 작업을 수행

변수의 타입이 실행중에 결정되는 동적 타이핑 언어의 특성과 관련

 

5. 입출력 처리 : 파일 읽기/쓰기 , 네트워크 통신, 사용자 입력 처리 등의 작업을 수행

 

6. 스레드 관리: 멀티스레드 환경에서 스레드의 생성, 동기화, 스케쥴링 등을 관리 

이는 동시성과 병렬성을 지원하며 프로그램의 성능을 향상시키는데 중요

 

728x90
300x250

+ Recent posts