항해 99 5기 TIL_12

▶ Today I Learned

 

<CS 스터디>

 

[문자코드]

 

컴퓨터는 사람의 언어를 읽을 수 없음

-> 사람의 언어를 읽을 수 있게 해주는 것이 문자코드

 

아스키ASCII 문자 코드(American Standard Code for Information Interchange)

- 널리 쓰이고 있으며 모든 기호에 7비트만큼의 수 값을 할당함

 

확장 BCD 교환카드 EBCDIC

- IBM에서 만듬, 펀치카드에 사용한 인코딩을 기반으로 만듬

- BCD 2진 코드화한 10진수

 

Unicode

- 아스키코드는 영어를 기준으로 한 언어였음, 컴퓨터 보급에 따라 다른 언어에 대한 처리 지원이 필요했고 그에 따라 나오게 됨

- 문자에 16비트 코드 부여, 21비트까지도 확장되었음

 

UTF-8 (Unicode Transformation Format-8 bit)

- 하위 호환성과 효율성 때문에 가장 널리 쓰이고 있음

- 모든 아스키 문자를 8비트로 표현하기에 아스키 데이터를 인코딩 할 때는 추가 공간이 필요하지 않음!

- 문자 데이터를 받을 때 아스키 처리 프로그램이 깨지지 않도록 문자를 인코딩

 

cf) 가끔 보이는 한글 깨짐 현상은 대부분 ECU-KR로 인코딩된 파일을 UTF-8로 읽거나, 그 반대의 경우임

 

[인코딩]

다른 비트 패턴을 표현하기 위해 사용되는 비트 패턴

- QP 인코딩, 베이스64 인코딩, URL 인코딩 같은 것들이 있음

 

 

<자바스크립트 문법>

 

const: 상수, 값의 재할당은 안된다. 하지만 Key: Value 형태의 오브젝트나 프로퍼티를 할당하는 것은 가능

 

변수

- 함수도 할당할 수 있지만 변수를 불러와 함수를 실행할 때도 ()가 필요!

cf) 변수 선언에는 let, const, var가 있다. 여기서 const는 상수, let은 재할당이 가능한 변수 선언에 쓰이는데 var은 쓰지 않는 것을 추천한다. 아래에서 배우게 될 Hoisting 이라는 개념 때문!

 

cf) 자바스크립트에서는 자바나 타입스크립트와 달리 데이터 타입을 나누지 않는다. 이로 인해 타입이 다른 데이터도 == 라는 식으로 인해

같은 대상으로 취급되어 오류가 생길여지가 있다. 따라서 등호를 쓸거라면 되도록 ===(등호 + 데이터 타입까지 완전히 똑같아야 함)를 쓰는 것을 권장한다.

ex)

'1' == 1
true

'1' === 1
false

 

ex) const a = function aa () { return 'Hello'}

 

a  // [function: aa]

a() // 'Hello'

cf) 함수만 콘솔창에 실행할 때도 함수를 부르기만 하면 ()없이, 불러서 기능까지 작동시킬 땐 함수명 뒤에 () 반드시 포함

 

- 함수의 기능을 실행시킨 채 값을 변수에 할당하게 되면 함수가 아니라 그 값이 변수에 할당됨

ex)  const a = function aa () { return 'Hello'}

 

let b = a()

b. //  'Hello'

 

[Truthy & Falsy]

 

True, False 말고도 참스러운 값, 거짓스러운 값이 있다.

 

- Truthy: 참스러운 값, true 처럼 여겨지는 것들, 1, 변수값 자체 ... cf) Array와 Object는 항상 Truthy로 판단됨

 

- Falsy: 거짓스러운 값, false, null, NaN, 0, undefined...

 

Boolean() 이라는 함수로 판단가능

 

[Chaining]

 

조건 Chaining

- &&: 여러개 썼을 때 전부 truthy하면 맨 마지막 값이 출력됨, 조건에 맞지 않는 것이 하나라도 오면 그 맞지 않는 조건 중 가장 앞에 나온 것이 출력됨

ex) true && NaN && 0 // NaN

true && 1  //  1

 

- | |: 여러개 썼을 때 조건에 맞는(truthy한) 값이 있으면 맨 먼저 나온 truthy값 출력, 조건에 맞는 게 없을 경우 맨 마지막에 나온 falsy값 출력

 

ex) true || 1 || NaN  //  true

ex) 0 || false || null // false

 

=> || 의 특징을 무언가를 입력해야하는 곳에 활용하면 좋을 듯!

 

[this]

 

자바스크립트 함수에서 this

 

함수 밖: 전역 객체를 참조, 웹 브라우저에서는 window라는 객체를 참조

함수 안: 함수를 어떻게 호출하느냐에 따라 다르게 참조

non-strict mode: this가 (함수)호출에 의해 설정된 것이 아니기 때문에 브라우저의 전역 객체인 window를 참조

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

 

strict mode: 아래와 같이 함수가 특정 객체의 프로퍼티나 메서드로서가 아닌, 본 개체로서 호출되어 실행될 때 (execution context) this가 정의되어 있지 않으면 여기선 undefined가 되어버린다.

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

아직 완벽히 이해한 것은 아니며 this의 쓰임새를 잘 모르지만 우선 이 정도 알아두고 전반적인 흐름을 공부해야겠다. 그때 가서 필요할 때 찾아본다면 분명 더욱 쉽고 명료하게 이해할 수 있을 것 같다 :)

 

[Hoisting]

 

Hoist : 끌어 올리다, 들어 올리다 라는 뜻

 

변수 선언 시 var를 쓰게 되면 아래와 같은 문제가 발생한다.

console.log('number')

var number = 5 // 보통은 실행 시 ReferenceError 가 나타나야 한다.
// 콘솔을 찍는 시점에는 아직 변수가 선언되지 않았기 때문이다. 하지만 var을 쓰게 되면
// 호이스팅이 일어나서 아래와 같은 느낌의 코드가 된다.

var number

console.log('number') // undefined
number = 5

// 즉 변수의 값은 아래에 도달해야 할당되지만 var선언한 변수는 우선 변수가 있는 것으로 등록된다.
// 그래서 콘솔에는 아직 값은 할당되지 않았지만 있긴 한 것으로 인식되는 undefined가 나오는 것이다.
// 이런 문제로 var를 되도록 쓰지 않는 것이 깔끔하다.

let, const, class도 호이스팅이 내부적으로 일어나긴 하지만 TDZ라는 것의 보호를 받는다.

Temperal Dead Zone의 약자인데 보통 let, const, class로 선언된 변수들은 선언이 실행되는 구문이 실행되기 전까진

해당 구역에 들어가 있다. TDZ 안에 있는 변수는 참조할 수 없다. var은 그 보호를 받지 못한다.

 

 

cf) 익명 함수의 단점으로는 함수의 호이스팅이 일어나지 않는다는 것이 있다. 보통 함수가 호출 구문 아래 놓여있어도 호이스팅이 일어나 실행되는데 익명 함수는 그렇지 못하다.

 

 

<알고리즘>

 

[이상한 문자 만들기]

 

https://programmers.co.kr/learn/courses/30/lessons/12930

소요시간: 1차 1시간 2차 55분

 

2차로 제출한 코드

function solution(s) {
   
    let arr = s.toLowerCase().split("") // 전체를 소문자로 우선 바꿔준다.
    // 경우에 따라 문제에서 대문자, 소문자가 섞여있으면 연산과정에서 반복적으로
   	// 대문자화 소문자화 둘다 해주기보다는 처음에 하나를 만들어 놓는 편이 낫다.
    
    let i = 0
    let answer = ''

    while (i < arr.length) {

    if (arr[i] === ' ') { // 공백이면 answer에 값을 곧바로 집어넣음
    answer = answer + arr[i]

    } else if (i%2 === 0) { // 인덱스가 짝수일 때
      answer = answer + arr[i].toUpperCase()
      // 기존의 answer라는 문자열에 대문자화한 글자 넣음
    } else {
      answer = answer + arr[i]
      // 공백도 아니고 인덱스가 짝수도 아닌 경우 그대로 값 더함
    }
    i++  
    }
    return answer
}

보기 코드는 실행되지만 제출하니 되지 않는다.. 왜일까..?

=> 생각해보니 이렇게 되면 문자열 'try hello world' 에서 각 단어를 기준으로 짝수 홀수가 아니라 공백포함 전체 문자열의 짝수 홀수를 따져 대소문자화 하기 때문에 순서가 맞질 않다.

 

내일 다시 한번 더 풀어보아야 겠다.

 

 

▶ 느낀 점

또 다시 새로운 과제가 주어졌다. 이제는 본격적으로 주특기 기술을 활용해볼 차례! 자바스크립트 문법에 대해 공부하니 그동안 몰랐던 것들이 보였다. 간혹 ECMAScript라는 말이 무엇인지 몰랐는데 이제는 유래가 어떻게되며 무엇을 가리키는 지 알게 되었다. 또 node가 어떤 도구인지 대략적으로 알게 되었다.

내일도 열심히 공부해서 더 많은 것을 알아가고 싶다.

얼른 익힌 후에 활용하면서 점차 다듬어 나가야지..! 직접 고민한 것은 빨리 체득하며 쉽사리 잊지 않으니까.

새롭게 배정된 팀원 분들도 모두 좋다. 팀장으로써 큰 도움이 되어야지..! 화이팅팅

 

 

 

▶ 공부 시 참고 링크들

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN

 

https://nodejs.org/api/repl.html

REPL | Node.js v17.4.0 Documentation

 

https://evan-moon.github.io/2019/06/18/javascript-let-const/

JavaScript의 let과 const, 그리고 TDZ