https://www.syncfusion.com/blogs/post/10-best-visual-studio-code-extensions-for-flutter-development.aspx

#Flutter & Dart 플러그인 기본적으로 설치해야 한다.

#Flutter Widget Snipperts 일부 위젯을 명령어로 빠르게 작성할 수 있게 해준다.

#Flutter Tree 위젯 작성시 하위 위젯을 나열하여 빠르게 작성할 수 있다.

#Bracket Pair Colorizer 2 {} () 같은 위젯, 함수를 선으로 묶어주는 플러그인으로 가독성을 높여준다.

#Error Lens 오류를 쉽게 확인할 수 있다.

해결방법 Expended 로 감싸기

 Expanded(
            child: GridView.builder(
              itemCount: 10,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                ),
                itemBuilder: (context, index) {
                  return Container(
                    child: Text('$index'),
                  );
                }),
          ),

https://choseongho93.tistory.com/297?category=959709

https://namunamu1105.medium.com/github-actions%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9E%90%EB%8F%99%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-s3-ec2-code-deploy-centos-nginx-react-js-e6f54a6e69bc

github action과 aws code deploy를 이용하여 spring boot 배포하기(1) https://isntyet.github.io/deploy/github-action%EA%B3%BC-aws-code-deploy%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-spring-boot-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0(1)/

https://bin-e.tistory.com/44

Postman 에서 Cookie 설정하기

삽입정렬 사용 안함
      function moveToFront(arr, n) {
        let idx = arr.indexOf(n);
        for (let i = idx; i > 0; i--) {
          [arr[i - 1], arr[i]] = [arr[i], arr[i - 1]];
        }
      }
      function solution(input, m) {
        let s = m[0];
        let n = m[1];
        let arr = [];
        for (let i = 0; i < s; i++) {
          for (let j = 0; j < n; j++) {
            if (arr.length < s && arr.indexOf(input[j]) != -1) {
              moveToFront(arr, input[j]);
            } else if (arr.length < s && arr.indexOf(input[j]) == -1) {
              arr.unshift(input[j]);
            } else if (arr.length == s && arr.indexOf(input[j]) != -1) {
              moveToFront(arr, input[j]);
            } else if (arr.length == s && arr.indexOf(input[j]) == -1) {
              arr.unshift(arr, input[j]);
              arr.pop();
            }
          }
        }
        return arr;
      }
      let input = [1, 2, 3, 2, 6, 2, 3, 5, 7];
      let n = [5, 9];
      console.log(solution(input, n));

삽입정렬 사용

   function solution(size, arr){
       let answer=Array.from({length:size}, ()=>0);
       arr.forEach(x => {
           let pos=-1;
           for(let i=0; i<size; i++) if(x===answer[i]) pos=i;
           if(pos===-1){
               for(let i=size-1; i>=1; i--){
                   answer[i]=answer[i-1];
               }
           }
           else{
               for(let i=pos; i>=1; i--){
                   answer[i]=answer[i-1];
               }
           } 
           answer[0]=x;  
       });
       return answer;
   }
   let arr=[1, 2, 3, 2, 6, 2, 3, 5, 7];
   console.log(solution(5, arr));

이제 정확히 한달이라는 시간이 남았고, 남은시간 동안 최대한 기업에 신입으로써 지원하기 위해 개발 스펙을 쌓아가야 하겠다고 한번 더 생각한다. 필요한 것과 배우고 싶은 것들의 교집합을 스터디 하는 것이 좋다고 판단하였고, 지금은 nodejs로 개발하는 거의 모든 곳에서 필요한 타입스크립트를 공부하기로 마음 먹었다. 마음 먹음과 동시에 타입스크립트 강의를 질러버렸다.. 배움에 돈을 아끼지 말자. 시간이 더 중요하다.

타입스크립트?

왜 타입스크립트를 배워야할까

자바스크립트는 프로그램이 동작할 때 타입이 결정되어 약간 위험?하다. 이에반해 타입스크립트는 타입이 정적으로 정의되어 즉각적으로 타입 에러를 받아볼 수 있다. 타입이 없다면 자유롭다고 말할 수 있지만 오히려 가독성이 떨어지고, 딱 봤을 떄 변수가 어떤 데이터를 담고있고, 함수는 어떤 인자를 받는지 명확하지 않다. 그래서 이슈가 발생하여도 타입스크립트와 비교하여 발견하기 어렵다.

또한 타입스크립트를 배워야하는 이유는 OOP(Object-Oriented Programming)이 가능해지기 때문이다! OOP 즉 객체지향 픅로그래밍이 가능하게되어 좀 더 노퓨은 퀄리티를 완성할 수 있다👌

오늘 기본 타입, 함수 타입에 대해 스터디하며, 예전 C++을 사용하며 코딩했을 때가 생각났다. 처음 자바스크립트를 사용하며 타입이 없다는 것에 어색했어서 그런지 오히려 타입을 작성하는게 반갑다.

오늘 작성한 예제 코드, 코드가 고급스러워진 기분,, 타입이 좋다,,

```javascript //JavaScript => TypeScript //Optional parameter function printName(firstName:string, lastName?:string){ console.log(firstName); console.log(lastName); } printName('Liam', 'Jeon'); printName('Julie'); printName('Liam',undefined); //Default parameter function printMessage(message: string = 'default messgae'){ console.log(message); } printMessage(); //Rest parameter function addNumbers(...numbers: number[]):number{ return numbers.reduce((a,b,)=>a+b); } console.log(addNumbers(1,2)); console.log(addNumbers(1,2,3,4)); console.log(addNumbers(1,2,3,4,5));

참고

https://www.typescriptlang.org/download

알고리즘

오늘 스터디한 알고리즘 - 선택정렬, 버블정렬, 삽입정렬 https://github.com/liamjeon/study-algorithm/tree/master/inflean/ch7_%EC%A0%95%EB%A0%AC%EA%B3%BC%EA%B7%B8%EB%A6%AC%EB%94%94

str[0] = 'S'처럼 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다(이때 에러가 발생하지 않는다). 한번 생성된 문자열은 read only로서 변경할 수 없다. 이것을 변경 불가능(immutable)이라 한다.

Undefined

var foo;
console.log(foo); // undefined

undefined는 개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진에 의해 초기화된 값이다. 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적인 없는 변수라는 것을 개발자는 간파할 수 있다. 그렇다면 개발자가 의도적으로 undefined를 할당해야하는 경우가 있을까? 자바스크립트 엔진이 변수 초기화에 사용하는 이 값을 만약 개발자가 마음대로 할당한다면 undefined의 본래의 취지와 어긋날 뿐더러 혼란을 줄 수 있으므로 권장하지 않는다. 그럼 변수의 값이 없다는 것을 명시하고 싶은 경우 어떻게 하면 좋을까? 그런 경우는 undefined를 할당하는 것이 아니라 null을 할당한다.

자바스크립트는 어떻게 작동하는가: 메모리 관리 + 4가지 흔한 메모리 누수 대처법

https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B4%80%EB%A6%AC-4%EA%B0%80%EC%A7%80-%ED%9D%94%ED%95%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%8C%80%EC%B2%98%EB%B2%95-5b0d217d788d

카카오로그인

https://minhyeok-rithm.tistory.com/entry/20210706-Kakao-Login

🚀What I learend

지난 1주일간 진행했던 Mini-Project 에서 좀 더 개선할 수 있는 부분이 뭐가 있을지, 어떻게하면 좀 더 좋은 코드를 짤 수 있을지, 이번 프로젝트에서 부족했던 것이 무엇이었는지 고민했다. 고민의 결과는 Testing 이었다. 이번 프로젝트에선 내가 구현한 비지니스 로직에 대해 테스트하지 않았다. Postman을 이용하여 한 것도 테스트라면 테스트라고 생각할 수도 있지만, 내가 말하는 테스트는 Jest를 이용한 비지니스 로직 테스트다.

테스트를 하지 않는다면?

이번 Mini-Project 에서 초반에 구현한 코드와, 프로젝트를 진행하며 리펙토링하여 완성한 코드는 꽤나 달랐다. 리펙토링을 하며 이 코드가 맞는 코드인가를 검증하기 위해 많이 시간을 소요했다. 코드를 수정하고 매번 Postman 으로 Request를 날리며 정상적으로 동작하는지 확인했다. 굉장히 비합리전인 방법이었던 것 같다.

만약 내가 Jest 를 이용하여 테스트 코드를 작성했었더라면?

프로젝트 초반에 테스트 코드를 작성하여 모든 로직들이 Pass 했다면, 나는 나의 코드에 대해 자신감을 가지고 리펙토링을 할 수 있었을 것이다. 또한 테스트 결과를 보며 리펙토링을 하기에 개발 시간을 단축시켰을 것이고 단축한 시간동안 더 많은 것을 할 수 있었을 것 이다.

테스트란 무엇일까

내가 생각하는 테스트를 한문장으로 말한다면 "제품이 예상한 대로, 원하는 대로 동작하는지 확인하는 것이다.

테스트 했을 때의 장점은 뭐가 있을까 아래 나열한것과 같이 많은 장점이 있겠지만, 문서화와 자신감있는 리펙토링이 좋은 장점이라고 생각한다. 한가지 더 붙히면 재미이다. 테스트를 만족해가며 로직을 구현하는 재미를 한번 보니 코딩이 좀 더 재밌어진 것 같다.

• 기능이 정상 동작
• 요구사항 만족
• 이슈에 대해 예측
• 버그 조기 발견
• 손쉬운 유지 보수
• 코드 품질 향상
• 코드간 의존성을 낮춤
• 좋은 문서화
• 시간 절약
• 자신감 있는 리펙토링

Jest 를 이용한 테스트

Jest : https://jestjs.io/docs/getting-started

Jest 공식 사이트를 보며 기본적인 Jest 테스트 기법들을 공부했다. Github : https://github.com/liamjeon/study-unittest-jest.git

비동기/동기 일 때의 테스트 방법, 그리고 Mock을 이용한 기본적인 코드들을 구현해 봤다. 우선 당장의 목표는 다음주에 있을 클론 프로젝트에서 TDD를 이용하여 로직을 구현하는 것이다. 그리고 이미 진행했던 mini-project 에서도 test 를 작성해야겠다.

*테스트는 선택이 아닌 필수다. *

MongoDB => MySQL, Mongoose => Sequelize

생각보다 백엔드 로직 구현이 금방 끝났다. 물론 프론트엔드와 연결할 때 문제가 발생할 것은 예상하지만 프론트엔드와의 연결은 내일 오후이다.

팀원들과 상의하여 남은 시간동안 Sequelize를 구현하는 것을 Next step 으로 잡았다. 우리 팀은 MongoDB, Mongoose를 사용하여 DB를 만들었는데, Sequelize로 DB를 변경하는 것이다. 다행히 MVC패턴을 구현하여 DB를 관리하는 Model 만 수정하면 되기에 1day 챌린지가 가능할 것이라고 생각했다. 하지만.. 역시 쉽지 않았다.

쉽게 넘어가는 법이 없지.. Error..

단순히 DB만 바꾸는게 아니라 유저정보, 게시글 정보, 댓글 정보의 Model간 관계를 만들어야하는데 예기치 못한 에러가 발생했다. Comment & Item model 관계를 만들기위해 belongsTo 함수를 사용했으나, 이 함수를 사용하면 기존에 정상적으로 동작하던 댓글 생성(Create)에서 에러가 발생한다.

MySQL Workbench 에서 Tables은 정상적으로 생성되는데... 좀 더 분석을 해봐야한다,...

//Todo
//Comment & Item 연결 ==> Comment model에 ItemId가 추가될것
Comment.belongsTo(Item);

JWT 토큰을 어디에 저장해야할까?

팀원들과 로그인 구현에 대해 고민하며 JWT 토큰을 어디에 저장할지 의견이 나뉘었다. 지난번 로그인 방식에 대해 공부할 때 JWT vs Cookies&Seccsion 으로 구분하는 것으로 알고 있었기에 Cookies는 Session과 함께 사용하는 것이라고 생각을 했지만, Cookies라고 하는 것은 Localstorage 저장과 같은 하나의 저장 방식이었다. 역시 알아가는 맛!

둘 중 뭐를 사용해야할까?

cookie와 localstroge에 대해 구글링을 하면서, 실제로 이 두가지 방법에 대한 의견이 나뉜다는 것을 알았다. (우리만 고민하던 것이 아니었군...) 실제로 장단점이 있었다.

가장 중요한 것은 보안

먼저 로그인한 사용자의 경우 세션 토큰이 ID에 대한 프록시 역할을 한다. 이러한 토큰는 백엔드에 의해 발행되어 프런트 엔드로 전송되며, 프런트 엔드로 전송된다. 만약 토큰이 오용되거나 도난 당한다면, 공격자는 공격 대상자의 계정에 무단으로 접근할 수 있다. 따라서 공격이 수행될 수 있는 모든 가능한 방법의 위험을 최소화해야 한다.

각 방식의 장단점

Localstorage

*- 장점 : 사용이 쉽다. *순수 자바스크립트이기에 사용이 편하다. Access token을 header에 넣어 API에서 사용할 수 있다. *- 단점 : XSS 공격에 취약하다. *XSS 공격은 공격자가 웹 사이트에서 Javascript를 수행할 수 있을 때 발생한다. 즉 공격자는 사용자가 Localstorage에 저장한 Access token을 가져올 수 있다.

Cookies

*- 장점 : JavaScript를 통해 쿠키에 액세스할 수 없으므로 localStorage만큼 XSS 공격에 취약하지 않다. *httpOnly & secure cookies 를 사용하는 것은 공격자가 site에서 Cookie를 javascript 에 의해 엑세스될 수 없다는 것을 의미한다.
*- 단점 : Token을 Cookie에 저장하지 못할 수도 있다.
*1 . cookie의 용량은 4kb 이다. big size token을 저장하지 못할 수도 있다. (token이 4kb까지 될일이 잘 없다지만..) 2 . cookie를 server와 공유할 수 없는 상황들이 있을 수 있다. 이때 cookie를 사용할 수 없다.

결론은 Cookie!

종합해보면 Token을 저장할 때 httpOnly, secure cookie를 사용하는게 보안적으로 더 좋은 방법이라고 생각한다. 처음에는 단순히 token vs sesstion&cookie라고 생각했는데, cookie역시 하나의 저장소라고 생각하고 고민해볼 수 있는 기회였다.

참고 https://indepth.dev/posts/1382/localstorage-vs-cookies https://supertokens.io/blog/cookies-vs-localstorage-for-sessions-everything-you-need-to-know

🔥Mini Prject Start~!

이번주는 Mini Project를 진행한다. Frontend 3명, Backend 3명 총 6명으로 구성되었다. 확실히 1주차에 Javascript로 website 제작하는 프로젝트와는 다른 느낌이다. 각자 주특기(Front, Back)으로 나눠져 협업을 할 수 있다는 것이 매우 설렌다.

뭘 만들까?

팀원들과 논의하여 나온 결과는 친환경 제품들을 펀딩하는 펀딩사이트이다. 사이트 이름은 "에코펀딩!" 전체적인 구조는 와디즈 펀딩을 따올 예정이다. 펀딩 사이트를 제작하기로한 이유는 지금까지 스터디한 것들을 거의 다 구현할 수 있기 때문이다. 와이어프레임과 REST APIs를 작성해보니 백엔드 인원이 3명이서 2~3일 정도면 구현할 수 있을 정도로 판단이 된다. API 구현은 빠르게 진행하고 Swagger 등 다양한 외부 툴들을 사용하는 것을 목표로 하기로 했다.

Backend는 당연히 Node.js 를 이용할 것이고 주요 기술 키워드는 아래와 같다.

1. Token 방식을 이용한 로그인 인증 구현
2. 사용자 인증 미들웨어 구현
3. Express-Validator 를 이용한 미들웨어 구현
4. CORS 사용
5. Swagger 사용(optional)
6. 펀딩 게시글 CRUD
7. 펀딩 댓글 CRUD
8. 실시간 펀딩 알림(optional)

와이어프레임 제작

REST APIs

• 노션 링크 https://www.notion.so/joo-page/1-50891e8907b44b24868f73df72692cd8

개발 범위 할당

백엔드 개발 범위는 크게 3단계로 나눴다.

1. 로그인 파트
2. 펀딩 게시글 파트
3. 댓글 구현 파트

내가 맡은 파트는 댓글 구현이었으나, 하루만에 댓글 API 구현을 완료했기 때문에 내일 팀원들과 얘기하여 나의 스코프를 좀 더 가져와야겠다. Express 사용하며 CRUD를 구현하는 것은 조금 익숙해졌다고 생각한다. 이제 좀 더 복잡한 로직과 구조, 보안, 툴 등에 대해 스터디를 하고 적용시켜야겠다.

문제

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

문제 풀이

부분 문자열 비교를 묻는 문제이다. 멜로디의 각 음을 나타내는 글자는 한 글자 일수도 있고, 'C#'처럼 두글자일 수도 있다. 나는 멜로디의 문자열을 입력받아 각각의 음을 배열로 변환한 뒤에 비교를 수행했다. ex) ["ABC#"] ==> ["A","B","C#"]
문자열 비교는 잘 했지만 문제 요구사항의 예외처리를 하나 누락하여 시간을 많이 잡아먹었다. 처음부터 코드를 잘 짜자 라는 것을 다시금 생각했다..나의 3시간....

function allTime(start, end) {
  let start_h = start.split(":")[0];
  let start_m = start.split(":")[1];
  let end_h = end.split(":")[0];
  let end_m = end.split(":")[1];

  return (end_h - start_h) * 60 + (end_m - start_m); //총 재생시간
}

function makeRecord(record) {
  let tmpRecord = record.split("");
  let newRecord = [];
  for (let i = 0; i < tmpRecord.length; i++) {
    if (tmpRecord[i] !== "#") {
      newRecord.push(tmpRecord[i]);
    } else {
      newRecord.pop();
      newRecord.push(`${tmpRecord[i - 1]}#`);
    }
  }
  return newRecord;
}

function makeAllPlayRecord(time, record) {
  let allRecord = [];

  for (let i = 0; i < time; i++) {
    allRecord.push(record[i % record.length]);
  }
  // console.log(allRecord);
  return allRecord;
}

function solution(m, musicinfos) {
  let startTime = [];
  let endTime = [];
  let musicName = [];
  let orgRecord = [];
  let allTimes = [];
  let allRecord = [];
  let mm = makeRecord(m);

  for (let i = 0; i < musicinfos.length; i++) {
    let splitMusicinfos = musicinfos[i].split(",");
    startTime[i] = splitMusicinfos[0];
    endTime[i] = splitMusicinfos[1];
    musicName[i] = splitMusicinfos[2];
    orgRecord[i] = makeRecord(splitMusicinfos[3]);
    allTimes[i] = allTime(startTime[i], endTime[i]);
    allRecord[i] = makeAllPlayRecord(allTimes[i], orgRecord[i]);
  }

  let music = "";
  let tmpTime = 0;

  for (let i = 0; i < musicinfos.length; i++) {
    for (let j = 0; j <(allRecord[i].length-(mm.length-1)); j++) {
      for (let k = 0; k < mm.length; k++) {
        if (allRecord[i][j + k] !== mm[k]) {
          break;
        }
        if (k === mm.length - 1) {
          if (!music) {
            music = musicName[i];
            tmpTime = allTimes[i];
          } else if (music) {
            if (allTimes[i] > tmpTime) {
              tmpTime = allTimes[i];
              music = musicName[i];
            }
          }
        }
      }
    }
  }
  if(!music) music = '(None)';    
  return music;
}

1. 알고리즘 스터디 1주차 테스트

알고리즘 스터디 1주차 테스트를 진행했다. 문제는 프로그래머스의 "방금그곡" 이라는 제목의 문제이며, 카카오 코딩 테스트에 출제 되었던 문제이다. 이번 테스트에서 나만의 목표는 시간이 얼마나 걸리든 상관없이 직접 해결하는 것 이었고, 실제로 3시간 동안 문제를 풀었고 결국 해결했다. 시간이 많이 소요된 부분은 문제 설명에서 명시된 예외처리를 누락한 것이 원인으로 30개의 테스트 검증 중 1개 검증에서 Fail 이 발생했었다.. 알고리즘 시퀀스 자체는 금방 짰었지만 이러한 예외처리에서 상당한 시간을 소요했다. 다른 프로젝트에서도 처음 만들때부터 꼼꼼히 만드는 것이 베스트인 것 같다.. 다시한번 느꼈다. 나의 3시간..😂

- 알고리즘 코드 링크 https://velog.io/@liam_jeon/프로그래머스-방금그곡-Javascript

2. Github, Blog 정리

나를 표현할 수 있는 것도 능력이다. 주니어로써의 잠재력을 보여주기 위해서는 내가 꾸준히 성장하고 있다는 것을 표현할 수 있어야한다. 처음 Github, Blog 를 만들었을 때는 나만의 저장공간, 나만의 블로그가 목적이었다. 하지만 앞으로 이 공간들이 나의 얼굴이 될 수도 있다고 생각이 들었기에 정리하는 시간을 가졌다.

남들한테 있어보이는 글을 작성하는 것이 아니라, 내가 작성하는 코드와 생각들을 다른 사람들이 좀 더 쉽게 볼 수 있도록 하는 것이다. 나의 Github, Blog 작성 원칙은 바뀌지 않는다.

나의 소개를 최대한 정리해보려 노력했다. Work Experience는 적을지 말지 고민을 했지만, 직장을 다니며 여러 문제를 해결한 경험은 충분히 도움이 될 수 있다고 생각해서 적어놨다. 이렇게 정리하니 뭔가 더 열심히해서 Skill이든 Proejct든 마구 추가하고 싶다.

- Github : https://github.com/liamjeon

📌내 머리 속에 인터프리터, 실행컨텍스트

내가 보고있는 노드 강의 초반에 강사가 이런말을 했다. "자바스크립트는 실행컨텍스트, 이벤트루프, 프로토타입만 이해하면 된다". 이벤트 루프는 비동기 공부할 때 꽤나 자료를 찾아봐서 조금은 이해하고 있었지만 특히 실행컨텍스는 거의 이해하지 않은 상태였다. 자바스크립트 Deep Dive 책에서 한개 Chapter로 있기에 존재는 알고있었고, 한번 훑고 넘기기에는 내용이 어려웠다.

📌어떻게 공부했나

참고 : https://medium.com/@happymishra66/execution-context-in-javascript-319dd72e8e2c

이번에도 역시... 될 때 까지 했다. 유튜브, 블로그에서도 실행컨텍스트 정보가 많지 않아서 주로 해외 블로거들이 작성한 글과, 자바스크립트 책을 통해 공부했다. 간단한 코드를 작성하고 그 코드에 대한 실행컨텍스트를 직접 손 으로 그렸다. 그러다보니 머리 속에 자바스크립트가 어떻게 동작하는지 조금은 들어온 느낌이다. 여기서 비동기까지 넘어가면 이벤트루프까지 생각할 수 있다.

📌느낀 것

단순히 문법 사용만해선 중급으로 넘어가기 힘들다고 느꼈고 다음주부터 항해 부트캠프에서 미니프로젝트가 시작되는데, 미루면 따로 시간을 내서 공부하기 어렵겠다고 판단했다. 이번주차 과제는 다소 쉬웠기에, 다른 팀원들은 추가로 Node Express 사용법 등을 공부했지 자바스크립트를 다시 보고있는 사람들은 거의 없던 것 같다. 하지만 나는 기본부터 탄탄하게 쌓아가려한다. 우선 목표는 부트캠프동안에 자바크립트 Deep Dive 2회 정독이 목표다. 빠르게 띄엄 띄엄이 아니라 천천히 꼼꼼히 달려나가자.

🚀Study

📌렉시컬 환경(Lexical Environment)란?

식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트다. 실행 컨텍스트 스택이 코드의 실행 순서를 관리한다면 렉시컬 환경은 스코프와 식별자를 관리함.

최근 내가 듣고있는 node.js 강의가 있다. 강의 초반에 강사가 자바스크립트에서는 아래 3가지는 무조건 알고 넘어와야한다고 했지만, 내가 완벽하게 이해하고 있는 것이 없더라. 실행컨텍스트, 이벤트루프, 프로토타입 이벤트루프도 처음에는 이해가지 않았지만, 이해가 될 때 까지 여러 자료들을 찾아보니 어느순간 내용이 와닿았다. 나머지 개념들도 이해 될 때 까지 계속봐야겠다.

실행 컨텍스트 Object 생성 방법 console.dir()

Obejct 생성 방법 3가지

https://poiemaweb.com/js-object

1. 객체 리터럴

**가장 일반적인 자바스크립트의 객체 생성 방식이다. 클래스 기반 객체 지향 언어와 비교할 때 매우 간편하게 객체를 생성할 수 있다. 중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다. {} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

var emptyObject = {};
console.log(typeof emptyObject); // object
var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
person.sayHello(); // Hi! My name is Lee

###  2. Obejct 생성자
**사실 객체 리터럴 방식으로 생성된 객체는 결국 빌트인(Built-in) 함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약 표현(short-hand)이다. 다시 말해, 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object 생성자 함수를 사용하여 객체를 생성한다. 따라서 개발자가 일부러 Object 생성자 함수를 사용해 객체를 생성해야 할 일은 거의 없다.

### 3. 생성자 함수
**생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

>
```javascript
// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}
// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.dir()

https://developer.mozilla.org/en-US/docs/Web/API/console/dir

console.dir()은 지정된 JS 객체의 속성에 대한 대화식 목록을 표시합니다. 출력은 하위 객체의 내용을 볼 수 있는 펼침 삼각형이 있는 계층 구조 목록으로 표시됩니다. 지정된 JavaScript 객체의 모든 속성을 보는 방법입니다.

매개변수(parameter, 인자) vs 인수(argument)

매개변수는 함수 내에서 변수와 동일하게 메모리 공간을 확보하며 함수에 전달한 인수는 매개변수에 할당된다. 만약 인수를 전달하지 않으면 매개변수는 undefined로 초기화된다.

var foo = function (p1, p2) {
  console.log(p1, p2);
};
foo(1); // 1 undefined

[[Prototype]] vs prototype 프로퍼티

function Person(name) {
  this.name = name;
}
var foo = new Person('Lee');
console.dir(Person); // prototype 프로퍼티가 있다.
console.dir(foo);    // prototype 프로퍼티가 없다.

**[[Prototype]] **함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이다. 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다. 그 이유에 대해서는 4.2 생성자 함수로 생성된 객체의 프로토타입 체인을 참조하기 바란다.

*prototype 프로퍼티 *함수 객체만 가지고 있는 프로퍼티이다. 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.