Homile

📌 다른 캠프의 지인도 열심히 하는 것을 보며 나도 열심히 해야겠다고 생각을 하는 날이 되었다.

📗 오늘 학습한 내용

JavaScript

• 스코프, 클로저 내용 정리

GraphQL

• 페이스북에서 만든 쿼리 언어
• 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것을 목적으로 둔다.
• REST API와 비교
• GraphQL의 구조

Python 알고리즘 문제풀이

• [Leectcode] Remove Element
• [Leectcode] Search Insert Position
• [Leectcode] Container With Most Water

주간에 배운 스코프와 클로저에 대해 자세히 정리하였다.

알고리즘 스터디 중 나온 GraphQL에 대한 내용을 개발자가 되기위해 공부해야 한다고 생각하여 추가적으로 공부하였다. GraphQL은 React와 같이 페이스북에서 개발한 아키텍처이란 것을 알고 React를 사용하기 위해서는 같은 회사에서 개발한 GraphQL이 호환성이 확실히 좋다고 생각이 든다.

📘 추가로 공부할 내용

JavaScript

• React
  • React와 vue의 차이
• Graphql
  • GraphQL과 Rest의 차이

위와 같은 프레임워크, 라이브러리를 사용했을때, 왜 사용하는지 정확하게 누군가에게 전달할 수 있도록 공부를해보자.

📝 오늘 느낀점 & 마음 가짐

• 프레임워크, 라이브러리를 조금 더 공부해보자.
• JavaScript와 TypeScript의 관계에 대해 공부해보자.
• 앞으로 정해진 것만 하지말고 한발더 나아가 보자!!!!

클로저란?

• 외부 함수의 변수에 접근 할 수 있는 내부 함수
• JavaScript MDN: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합, 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다
• 어휘적 환경의 조합이라는 것이 낯설게 느껴진다. 하지만, 앞서 작성한 스코프에 대해서 이해를 하고 온다면 유효범위가 지역범위라는 것을 알 수 있다.

외부함수, 내부함수(클로저)

• 외부 함수 안에 있는 함수가 내부함수이며, 클로저라고 불린다.
• 외부함수는 내부함수의 변수를 사용하지 못한다.
• 내부함수는 외부함수의 변수를 사용할 수 있다.
• 내부함수는 여러개를 작성할 수 있다.

function init() {
      let name = "minwoo";     // name은 init에 의해 생성된 지역 변수이다.
      function displayName() {    // displayName() 은 내부 함수이며, 클로저다.
        console.log(name);     // 부모 함수에서 선언된 변수를 사용한다.
      }
      displayName();
    }

init();

참고자료

• MDN

📌 이제 section 마지막에 다가오니 기분이 묘하다... 앞으로 더 열심히 해야지!!

📗 오늘 학습한 내용

JavaScript

• 클로저
  • 함수에 함수가 선언되어 return하는 구조이다.
  • 클로저함수: 외부함수의 매개변수에 접근할 수 있는 내부함수
  • 특징
    • 데이터의 보존
    • 정보의 접근 제한(캡슐화)
    • 모듈화
  • 외부함수
    • 외부함수에 선언된 변수는 내부함수에서 접근이 가능하다.
  • 내부함수
    
    • 내부함수에 선언된 변수는 외부함수에서 접근이 불가능하다.
• ES6 신규 문법
  • Spread
  • rest
• 3주간 배웠던 내용 종합 퀴즈

스코프, 클로저의 개념은 조금 어려울 수 있다. 내부함수, 외부함수, 외부함수의 변수 등 다양하게 데이터가 이리저리 움직인다고 생각하기 때문이다. 이럴때는 천천히 그림을 그려보면서 흐름을 이해하면 쉽게 할 수 있다는 것을 적고 싶었다.

그리고 ES6문법의 경우 많이 사용해봤던 부분이라 코플릿 배열, 객체 문제를 풀 때에도 사용했던 적이 있었는데 깊은 사용법까지는 자세히 몰랐으나 알게되었다.

📘 추가로 공부할 내용

JavaScript

• DOM
• Graphql

📝 오늘 느낀점 & 마음 가짐

• 다양한 프론트엔드 지식에 대해 조금 더 알아보자!
• 따라 잡히지 않도록 조금 더 나아가자!!

스코프(Scope)

변수의 접근할 수 있는 '유효범위'를 나타낸다.

스코프의 접근 범위

• 전역 스코프(Global Scope): 가장 바깥의 범위
  • 전역 스코프에서 선언한 변수는 지역 스코프에서 사용이 가능하다.
• 지역 스코프(Local Scope): 전역 스코프가 아닌 나머지 범위
  • 지역 스코프에서 선언한 변수는 전역 스코프에서 사용이 불가능하다.

let hi = 'hello'; // 전역 스코프

function talkMessage(){ // 지역 스코프
  let message = 'JavaScript';
  return hi + ' ' + message;
}

console.log(talkMessage());		// 'hello JavaScript'
console.log(hi);			// 'hello'
console.log(message);			// 'Uncaught ReferenceError: message is not defined'

지역 스코프에 변수는 전역 스코프의 변수보다 더 높은 우선순위를 가지게 된다.

• 전역 스코프에 let name = 'cho'이고, 지역 스코프에 let name = 'kim'일 때, 지역 스코프에서 name을 return 하면 name이 출력된다.
• 전역 스코프에만 변수가 선언될 경우 지역 스코프에서 전역 변수를 사용한다.

// 전역 변수와 지역 변수의 이름이 같을 경우
let name = 'cho';

function nameChange(){
    let name = 'kim';
    return name;
}

console.log(nameChange());		// 'kim'
console.log(name);		// 'cho'


// 전역 변수만 선언된 경우
let name = 'cho';

function nameChange(){
    name = 'kim';
    return name;
}

console.log(nameChange());		// 'kim'
console.log(name);		// 'kim'

📌 오늘은 결국 몸살이나서 조금 힘들었지만 최대한 오늘 정해진 학습과정을 견뎌냈고, 추가로 복습, 예습까지 진행했다. 대신 빨리하고 쉬어야 할 것이라 생각해서 평소보다는 학습을 못한것은 주말에 채워야겠다. 몸건강이 우선이다!!!

📗 오늘 학습한 내용

JavaScript

• 원시자료형
  • 고정된 저장 공간을 차지하는 데이터
  • number, string, boolean, undefined, ,symbol, (null)
  • 하나의 변수에 하나의 데이터만 들어간다.
  • 변수를 복사하여 사용해도 원본은 변경되지 않는다.
• 참조자료형
  • 대량의 데이터를 다루는 배열(Array)과 객체(Object)
  • 함수(function)
  • 데이터를 저장 공간에 넣는 것이 아닌 주소를 할당한다.
  • 저장 공간을 복사 할 경우 복사한곳의 데이터를 변경할 경우 원본도 변경된다.
• 스코프
  • 전역 스코프
    • 전역 스코프는 말그대로 global 적으로 사용이 가능하다.
  • 지역 스코프
    • 지역 스코프는 한 블록에서만 사용이 가능하고 벗어날 수 없다.
  • var, let, const
• 클로저
  • 함수에 함수가 선언되는 구조이다.
  • 특징
    • 데이터의 보존
    • 정보의 접근 제한(캡슐화)
    • 모듈화
  • 외부함수
  • 내부함수
  • 외부함수에 선언된 변수는 내부함수에서 접근이 가능하다.
  • 내부함수에 선언된 변수는 외부함수에서 접근이 불가능하다.

📘 추가로 공부할 내용

JavaScript

• 클로저
• ES6 신규 문법

📝 오늘 느낀점 & 마음 가짐

• udemy JS 알고리즘 공부를 다시 해보자!!
• 몸 건강이 우선이다!! 체력을 길러야 겠다!!

📌 개인적인 이슈가 생겨서 많이 힘들었던 날이다...

📗 오늘 학습한 내용

JavaScript

• 객체
  • 객체의 속성과 속성값
  • for (let key in obj)
    • 객체에 있는 속성을 변수 key에 할당
  • for (let [key, value] of Object.entries(obj)
    • 객체에 있는 속성을 변수 key에 할당, 속성의 값은 value에 할당
• 원시자료형
  • 고정된 저장 공간을 차지하는 데이터
  • number, string, boolean, undefined, null
• 참조자료형
  • 대량의 데이터를 다루는 배열(Array)과 객체(Object)

배열은 사용할때 순차적으로 나와 구별하기 쉬웠지만, 객체의 경우 속성과 속성의 값을 둘다 변경하거나 삭제, 비교를 해야하는 과정에서 조금 헷갈렸던 것 같다. 코플릿으로 객체에 대한 문제를 풀면서 처음에는 쉬운 객체를 다루는 방법에 대해 나와있었지만 후반으로 갈 수록 여러가지 객체를 이용하여 푸는 문제에서 조금 신경을 써서 풀어야했다.

이때, !(부정)을 사용할 때 ()을 사용하지 않아 하나의 값만 부정하는 경우를 발생했는데 페어분이 알아내셔서 바로 수정하여 결과를 도출할 수 있었다. 이런부분에서 나는 꼼꼼하게 체크를 하지 않아 다양한 풀이를 생각했지만 의외로 간단한 부분에서 실수가 난다는 것을 다시 한번 인지하고 다음에는 조금 더 꼼꼼히 코드를 살펴볼 수 있도록 해야겠다.!!

📘 추가로 공부할 내용

JavaScript

• 스코프
• 클로저
• JSON을 JavaScript의 배열로 변환하는 방법

📝 오늘 느낀점 & 마음 가짐

• 프론트엔드로 가기에는 내 맥북이 버티질 못하겠다..... 구매를 생각하자!
• 딥다이브를 오랜만에 한번더 정독해서 전문적 언어를 사용하자!!
• 이제  Section 1의 종료가 얼마 남지 않았는데 한달간의 회고를 작성할 수 있도록 메모해보자!