🦁_21.12.06 TIL

21년 12월 06일

📝 Javascript

📎 ES(ECMAScript) Version

• 1998년 ECMAScript 2 발표
• 1999년 ECMAScript 3 발표
• 2007 ECMAScript 4 개발을 시작했으나 중도 포기
  => 여러 가지 기능을 추가하기 위해 개발 욕심을 부렸지만 ECMAScript 3 호환성을 포기하게 생기자 개발 좌초
• 2009년 ECMAScript 5를 2009년 3월에 발표(현재 가장 많이 사용)
• 2015년 6월 ECMAScript 2015가 확정
  => ES6가 대중화된 이름이지만 ECMA International에서 해마다 업데이트 하기로 결정
  => ES 뒤에 에디션 번호가 붙였던 이름이 ES2015와 같은 출판된 년도가 붙는 방식으로 변경

참고 링크

• JavaScript 버전별 표준

매년 새로운 버전이 나오는데 ES6(ES2015)를 배우는 이유?

• 안정적이기 때문입니다.

📎 닌자 코드

• 위의 링크 참고
• 링크 내용은 반어법이에요.
  => 닌자 코드는 사용하지 않는 것이 좋습니다🧐

📎 엄격 모드(strict mode)

• ES5에서 strict mode 기능이 추가
  => ES5에서 새로운 기능이 추가되고 기존 기능 중 일부가 변경
  => 기존 기능을 변경하겼기 때문에 하위 호환성 문제가 발생할 수 있다.
  => 따라서 변경사항 대부분은 ES5의 기본 모드에서는 활성화되지 않도록 설계

"use strict";

• use strict라는 특병 지시자를 사용해 엄격 모드를 활성화 했을 때 변경 사항 활성화

// use strict 지시자가 스크립트 최상단에 위치
"use strict";

// 이 코드는 "모던한" 방식으로 실행

function test() {
  x = 10;
}

test();

console.log(x); // 엄격 모드가 아닌 경우, 10이 출력됨. 에러가 발생하지 않는다

// 엄격 모드일 경우, ReferenceError: x is not defined

📎 this 값을 사용자의 의도대로 조작하기

📎 클로저

📎 생성자 함수

📎 JSON(Javascript Object Notation)

• 자바스크립트에서 객체를 표현하는 형식으로 데이터를 표현한 것
  => 값이나 객체를 나타내주는 범용 포맷
• 다른 형식에 비해 가볍고 자바스크립트와 호환성이 높아 널리 사용

JSON 구조

• JSON은 JavaScript 객체 리터럴 문법을 따르는 문자열
• JSON 안에는 JavaScript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언, 다른 객체를 포함할 수 있다.

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    }
  ]
}

JSON Syntax rules

• 데이터는 키: 값의 쌍으로 이루어져 있다.
• 데이터는 쉼표(,)로 구분
• 중괄호({})로 객체를 감싼다.
• 대괄호([])로 배열을 감싼다.

JSON 메서드

• JSON.stringify : 객체를 JSON으로 바꿔준다.
  => 원하는 값을 JSON으로 직렬화

• JSON.parse : JSON을 객체로 바꿔준다.
  => JSON을 본래 값으로 역 직렬화

• JSON으로 인코딩된 객체와 일반 객체의 차이점

  • 문자열은 큰따옴표로 감싸야 한다.
    => JSON에서 작은따옴표, 백틱을 사용할 수 없다.
  • 객체 프로퍼티 이름은 큰따옴표로 감싸야 한다.
    => age: 30이 "age": 30로 변함

// 자바스크립트 객체
let student = {
  name: "John",
  age: 30,
  isAdmin: false,
  courses: ["html", "css", "js"],
  wife: null,
};

let json = JSON.stringify(student);

// 자바스크립트 객체를 문자열로 변환
console.log(typeof json); // string
console.log(json); // {"name":"John","age":30,"isAdmin":false,"courses":["html","css","js"],"wife":null}

// 숫자를 JSON으로 인코딩 => 숫자
console.log(JSON.stringify(1)); // 1
// 문자열을 JSON으로 인코딩 => 문자열(단, 큰따옴표 추가됨)
console.log(JSON.stringify("test")); // "test"
console.log(JSON.stringify(true)); // true
console.log(JSON.stringify([1, 2, 3])); // [1, 2, 3]

// space로 가독성 높이기
// space는 가독성을 높이기 위해 중간에 삽입해 줄 공백 문자 수를 나타냄
console.log(JSON.stringify(student, null, 4));
/* 출력결과
{
    "name": "John",
    "age": 30,
    "isAdmin": false,
    "courses": [
        "html",
        "css",
        "js"
    ],
    "wife": null
}
*/

---

📝 프론트엔드 개발자로 성장하기 스프린트_3 with 임동준님

미래를 바라보는 시간

주니어 개발자에게 보는 것은?

• 성장 가능성
• 몇 달간 무엇을 ‘잘’해왔는지
  => 무언가를 ‘한’ 사람은 많아요. 무언가를 잘한 경험을 한 사람은 많지 않다.

미래 시점으로 가서 우리가 할 것

=> 모의 면접 : 악!

• 4명이 하나의 조로 구성
  1명 - 면접관
  1명 - 피면접자(지원자)
  2명 - 관찰기록자
• 한 면접 당 10분씩 2번의 면접 진행

예상 질문(참고용)

• 짧은 시간안에 몰입해서 성장하는게 쉽지 않았을텐데 극복하려고 했던 본인만의 경험이나 노하우
• 다시 학습한다면 어떻게 다르게 할 것인지
• 학습하면서 본인만의 학습 방법을 찾은게 있는지
• 개발자로서의 본인의 장점은 무엇이라고 생각하는지

질문1) 공부하면서 모르는 개념을 처음 접하게 되었을 때 그 개념을 대하는 자세?
질문2) 최근에 관심을 가지고 있는 공부 분야?
질문3) 최근 남에게 칭찬 받았던 부분?
질문4) 그 이야기를 듣고 어떤 생각이 들었을나요?
질문5) 스스로 칭찬해주고 싶은 부분이 있나요?
질문6) 다른 분야를 시도했다가 실패했던 경험이 있나요?

질문_조은님)

• 커리어 목표가 있으신가요?
• 가장 선호하는 학습 방식에는 어떤 게 있나요?
  ㄴ 왜 해당 방식을 가장 선호하시나요?
• 리팩토링을 해보신 경험이 있으신가요
  ㄴ 어떤 식으로 리팩토링을 하셨나요?
  ㄴ 근데 그렇게 하시면 코드 리뷰를 반영하기만 한 거 아닌가요?
• 본인에게 주어진 업무가 도저히 시간 내에 끝낼 수 없다면 어떻게 하실건가요?
  ㄴ 타협을 아예 할 수 없는 상황이라면 어떻게 하실건가요?

이걸 무표정으로 질문하고 꼬꼬무 (꼬리에 꼬리를 무는 질문) 합니다
=> 🥲

모의면접 회고

• 멋사를 수료한 미래 시점의 나는 어떤 모습이었나요?
• 면접관과 피면접자를 보면서 어떤 인사이트를 얻었나요?
• 그 외 생각난 점들을 자유롭게 작성해주세요~!
• 와 이질문 좋았다! 싶었던게 있다면 같이 공유해주세요~!

=> 면접관 역할을 하면서 개발에 관련 질문 이외에 다른 부분에 대해 질문을 던졌는데 면접자가 현재 어떤 마음으로 개발에 대해 대하고 있는지 알 수 있었습니다.

회고 템플릿 : KPT 템플릿

• Keep
  • 현재 만족하고 있는 부분
  • 계속 이어갔으면 하는 부분
• Problem
  • 불편하게 느끼는 부분
  • 개선이 필요하다고 생각되는 부분
• Try
  • Problem에 대한 해결책
  • 다흠 회고 때 판별 가능한 것
  • 당장 실행가능한 것
• Question
  • 내가 Keep하고 있는 것과, Problem의 차이를 만드는 키워드 2~3가지를 뽑고 Problem이 어떻게 하면 Keep이 될 수 있을지 이야기해보세요

회고의회고 & 피드백

• 모의면접, KPT를 통해 미래와 현재 미래를 번갈아가면서 보았는데요. 오늘 회고를 통해서 어떤걸 느꼈나요?
• 회고 스프린트 시간에 바라는게 있다면 편하게 피드백을 작성해주세요

---

마무리

• 오늘따라 스프린트 참여율이 많이 낮아서 새로운 분들과 팀을 하게되었다.
  => 새로운 분들과 했더니 다시 처음 스프린트한 것처럼 어색했네요 허허허