[멋사 FE 스쿨] 26일차 리뷰 + 스프린트, 모의면접

멋쟁이사자처럼 프론트엔드스쿨 w/ 제주코딩베이스캠프

---

오전(09:00~11:50) 수업 w/ Licat

morning break

• 깃헙 skill set을 FE에 맞게 잘 정리해놔라
• 이력서 (이력, 회사지원동기) / github / 홈페이지나 블로그 등
• 이력서에 관련없는 수상을 지우는 경우가 있던데 대표님 같으면 쓰겠다. 그 수상 과정에서 깨달은 것들을 적을 수 있으니깐
• 무엇보다 회사 지원 동기를 면밀히 검토할 필요가 있다.
• 이력서는 pdf로 수정 불가능하게 주는데, ppt, notion으로 그냥 띡 보내면 버릇이 없다(?)고 보는 경우가 있다. 회사 분위기에 맞게끔 준비를 잘 하자
• 무엇이 중요하고, 캐치한 것이 무엇인지 잘 어필할 수 잇도록
• FE가 갖춰야할 가장 큰 소양? 우리 수업에서 캐치해가야할 가장 중요한 한가지??
  → 페이지 구현 대부분 회사에 가서(상위 그룹은 다를 수 있지만 이미 짜여있는 페이지 유지보수 같이) 우리 벤딩머신 과제와 같은 페이지 구현이 안된다? 며칠 걸리나? 코드 퀄리티?를 보고 역할 분배를 한다.
  페이지 구현이 안되는 FE 개발자가 과연 살아남을 수 있는가?
  뒤의 것들이 소화가 어렵다는 사람들은 페이지 구현에 몰입을 해서 퍼블리셔로 출발을 해보는 것도 나쁘지 않은 선택지
• JS 문법이 중요한데, 페이지 구현보다 중요하냐? FE 개발자 입장에선 문법 깊게 파서 시야가 좁아지는 것보다는 페이지 많이 구현해봄으로써 자신감을 얻고 1~2번 퍼블리슁 해보는 경험
• 50% JS 문법을 안다면 100% 알겠다는 방향보다는 페이지 구현해가면서
• 연봉 4천 이상 : 최고의 프로그래머를 뽑겠다. 4천 이상의 퍼포먼스를 낼 수 있는. 최소 6~7천은 벌어올 수 있는 사람. 열심히 일 시키려고 뽑는게 아니라 이미 잘하는 사람을 쓰려고 뽑는 것. 이미 완성되어 있는 친구들
  연봉 3천: 코딩을 좀 하세요? 그럼 OK, 우리가 일하면서 가르칠게요
  연봉 2천(판교 SI..): 제발 와주세요. 일은 힘들고, 야근도 많겠지만😥
• 자기객관화가 필요하다.
  퍼블리셔를 간다고 평생 퍼블리셔냐. 단계별 이직을 하게 될 것. 처음 갈 곳의 전략을 잘 짜야한다.
• 카카오, 네이버 입사한 사람들 중 코테를 안보고 입사한 사람이 50%라 할 때, 그 사람들이 지금 코테를 봐서 코테에 합격할 확률?
  → 코테 스터디를 열었더니 대기업 시니어들만 온 기억..
  시대에 따라 코테도 난이도가 엄청나다... 코테 자체 난이도가 엄청 상승해왔다.
  코테를 보는 것보다 연봉이 낮은 기업 선택해서 점차 올라가는(경력직 이직) 방안도 괜찮다는 이야기
• 실패 경험치
  이력서만 쓰고 제출 안하는 사람들이 있는데, 이력서를 만들었으면 제출 해봐라. 경험치를 계속 쌓아야 한다. 면접 보면서 경험치도 쌓고.
  이력서를 꽁꽁 붙들고 있는 것보다는 떨어지는 경험을 쌓아야 한다.

이번주 목표 진도입니다.

월 : ECMAScript별 업데이트, 실무에서 사용하는 여러 팁(여기서부터 가지에 나뭇잎 수준), 엄격 모드, 스크립트별 변수 참조 범위, this, 클로저, 생성자 함수, json, json으로 table 렌더링, 심볼

화 : 프로퍼티 플래그, getter, setter, 프로토타입, 애러 핸들링, class, DOM, 이벤트

수 : 비동기 프로그래밍, 스택, 힙, callback hell, promise, async, await,

목 : JQuery & Ajax

금 : TDD, (이벤트 캡처링, 버블링 등 면접문제 대비) 심화개념

• 코테를 통과할 수 있을까? 완전 기술에 집중하는 IT 기업보다 난이도는 1단계 낮은 문제를 많이 풀면서 충분히 통과할 수 있도록 도울 예정
• 알고리즘은 파면 팔수록 더 깊다. 자기 객관화를 한 이후에 난이도 천차만별을 생각하고

수업

ES Version

• ES6 ⇒ ES2015 이런식이었는데, 연도 버전으로 부르는게 Official이긴 한다.
• 매년 새로운 버전이 나오는데 ES6, ES2015 배우는 이유?
  → 안정적이기 때문에
• 언젠가 한번 점프 뛸 날이 올거다. 계속해서 변화하는 것을 염두하고 대비해야한다.

string 관련 메소드

let s = 'abcde';
s.repeat(); // ''
s.repeat(2); // 'abcdeabcde'
s.repeat(2.5); // 'abcdeabcde' 소수점은 무시
Array.from('a'.repeat(10));
Array.from(s.repeat(10));
Array.from('abc');
Array(10); // [비어있음 x 10] -> 이때 비어있음은 undefined도 아닌 아예 메모리도 잡지 않는 비어있는 상태
Array(100).fill(0);
Array(10).fill(1000);
Array(10).fill('abc');
// 값을 순서대로 넣고 싶을 때에는
Array(10).fill(0).map((value, index) => value + index));
// 위의 것은 여러가지 방법 중 하나
Array(10).fill(0).map((value, index) => ((index+1)**2));
// 물론 value, index에 a, b를 넣어도 상관 없지만 이렇게 쓰지 말자... 닌자 코드

• Array(100).fill(0).map((value, index) => value + index) 에서 value + index 이부분이 value += index 이게 아니어도 되는지. value + index 만 해도 value값이 갱신되는 가?
  → map method의 정의를 한번 더 살펴보자
• 닌자코드..ㅋㅋhttps://ko.javascript.info/ninja-code
  절대 이렇게 작성하지 말자
• SW 인원 부족 문제는 해결이 안된다.,

'.'.repeat(9).split('.'); // 좋은 코드는 아니다. 가독성이 떨어져서
// 실무에서 자주하기 쉬운 실수
2 ** 3 ** 2 ; // 64가 아닌 512 출력
Math.pow(2,3); // 8
let s = 'weniv CEO hojun.lee';
s.split(' ');
s.split('.');
s.split(/\s/);
s.split('');
'12367'.split(''); // 이게 array가 되니까 여기부터 array method를 사용할 수 있다.
'12367'.split('').map(x => parseInt(x));
let sum = 0;
'12367'.split('').map(value => parseInt(value)).forEach(value => sum += value);

• 적당한 길이의 method chaining은 가독성을 높여줄 수도 있다! 메서드 체이닝은 많이 한다.
  너무 이상하게 긴 것은 문제가 있겠지만
• map: 콜백함수의 반환값으로 이루어진 배열을 반환합니다 (원본 배열은 유지)
  forEach: 아무것도 반환하지 않고 콜백함수만 실행됩니다
• Date 관련해서 toString도 많이 쓰고, toLocaleString(국가코드), toTimeString, toISOString도 많이 쓴다.

let today = new Date('2021/12/5/12:00')
today.toISOString() // '2021-12-05T03:00:00.000Z'
// 두 개로 연, 월, 일 뽑아내기
today.toISOString().slice(0,10).split('-');
today.toISOString().split('-').map(v => parseInt(v))

• Math.PI 많이 쓰고, Math.ceil(올림), Math.floor(내림), Math.round(반올림) 주의해서 쓰자
  Math.max() : Infinity, Math.min() : -Infinity
• 직장은 겉옷일 뿐이다. 취준 할 때 너무 자존감이 낮아질 필요는 없다.

//모던자바스크립트 예제
let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current);

console.log(result)

• reduce는 쓰긴 쓰는데 쓰는 것을 추천하지는 않는다. 사용 말아야 할 이유는 없지만 대체할 수 있는 문법들이 많이 나왔기 때문에
• Number.EPSILON 만큼의 오차는 JS에서 허용해줄 것이다.
  SAFE_INTEGER 밖의 범위부터는 bigInt로 해줘야 한다.
• Array.flat을 통해서 array 안에 array를 펴줄 수 있다. 즉, array 내부의 array는 풀린다(?). flat() 안에 숫자 만큼 depth를 들어가 준다.

엄격 모드('use strict')

• 모던 자바스크립트를 사용하기 위한 방법
• 문서는 업데이트 되었는데, 업데이트 된 내용을 이전 버전에서 사용할 수가 없는 문제 발생.
• one JavaScript에 위배된다.
• 누구나 다 사용했으면 좋겠다는 생각으로 만들다보니 오류가 발생

function test() {
    x = 10;
}
test();
console.log(x);

하면 오류가 나야하는데 그냥 출력이 된다.

이를 보완해준게 엄격모드 (use strict)

"use strict"
function test() {
    x = 10;
}
test();
console.log(x);

이제 이러면 오류가 나오는 모던한 JavaScript가 된다.

HTML에서 script를 불러올 때 → 폴리필 얘기 나올 때 나온다.

불러온 a.js를 b.js에서 사용해줄 수 있다.

script마다 변수명을 분리해주는 library도 있다.

this

• 자신을 호출한 객체, 자신을 생성한 객체

let 호텔 = [{
  '이름' : '하나호텔',
  '위치' : '제주도 제주시 001',
  '가격' : {'A':50000, 'B':30000, 'C':15000},
  '방의개수' : 50,
  '예약자수' : 25,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
  '이름' : '둘호텔',
  '위치' : '제주도 제주시 002',
  '가격' : {'A':100000, 'B':60000, 'C':30000},
  '방의개수' : 100,
  '예약자수' : 30,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
},{
  '이름' : '셋호텔',
  '위치' : '제주도 제주시 003',
  '가격' : {'A':80000, 'B':50000, 'C':30000},
  '방의개수' : 120,
  '예약자수' : 80,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
}];
console.log(호텔[0].남은방의개수());
console.log(호텔[1].남은방의개수());
console.log(호텔[2].남은방의개수());

→ 이렇게 쓰면 동적으로 남은 방 개수 확인이 가능하다.

• 회사에서 html에 inline tag로 onclick이 보인다? 도망쳐... inline으로 style도 사용할 가능성 농후

---

오후(13:00~18:00) 수업 w/ Licat

this 이어서

• 의도대로 조작할 수 있다.
• call()의 인수로 함수를 호출
  내가 정의할 함수가 있는데 이미 다른 변수가 사용하고 있다면 call로 가져올 수 있는 것
• apply도 다른 사람 것을 쓰는 것
  bind

Closure

• 왜 사용할까? → 변수의 은닉, 외부로부터 감추기 위해, 견고한 코드를 작성하기 위해

function 제곱(x) {
    function 승수(y) {
        return y ** x
    }
    return 승수
}

제곱(2) // 제곱(2) 자체가 승수라는 function을 반환하기 때문에
제곱(2)(10) // 100이 출력된다.

• 처음부터 클로저를 생각하고 코드를 짠다.
• this, closure는 노션 참고

중간 질문!

const x = 100;

function a() {
  const x = 1;
  b();
}

function b() {
  console.log(x);
}

a(); // 100
b(); // 100

// 비교대상

const xx = 100;

function a() {
  const xx = 1;
  function b() {
      console.log(xx);
  }
  b();
}

a();// 1

→ 왜 a(); 가 100일까?
a()에서는 호출한 것일 뿐 선언한건 아니어서

• strict 모드?
  → 회사마다 다르겠지만, 함수(function) 안에서만 "use strict"를 하는 경우는 없다. 어디는 최신 문법을 사용하고 어디에서는 최신문법을 사용 안하고 하면 이상하니까

생성자 함수

• 일반함수와 기술적 차이가 없다.
• new 연산자를 붙여서 사용
• 재사용하지 않기 위해 사용. 단 한번 호출할 목적으로 만들었기 때문에 재사용이 불가

JSON

• XML 보고 가져오는 것? RSS를 보고 가져온다
• JSON.stringify() 많이 쓴다.
  → "" 규칙이 엄밀하게 지켜져서 다른 언어에서 받을 때 주의해줘야 한다.
• 배열이나 object로 가져올 수 있다.

막간 토크

이력서

• FE 개발자 지원하는데 이력서 디자인이.. 메모장처럼 되어있다? pdf로 잘 관리하자
• 분량으로 감동을 줄 수도 있다.

회사에서 급하게 인력을 뽑는 경우?

• 서버 터지거나, 누가 갑자기 나갔을 때는 소방수를 부른다.
• 보통은 1. 지원 사업일 때 신입을 많이 뽑는다.
  ex. 2년에 청년 고용시 임금의 80% 지원
• 이런 경우는 머릿 수 채우기로 급하게 뽑기도 한다.
• 이상한 곳? 오늘 출근 오늘 퇴사 출근과 동시에 몸이 아프다고 하고 퇴사 바로 하자
• 2. 큰규모의 사업을 따왔을 때

난 이력서를 쓰지 않았는데?ㅠ

→ 지금도 늦지 않았다. 쓰고 피드백 받아라

아직 쓸 수준이 아닌 거 같은데?

→ 그래도 적어서 대표님께 피드백 받아라 너무 쳐지지 않게 계획을 세워서. 커트라인을 정해서 하자

다음주 자료구조, 알고리즘

→ 페이지 교체 알고리즘, 트리 순회, 그래프

Chart.js

• Chart.js는 엄밀하게 하는게 아니라서 → 공식문서 그냥 보면서 하는 것
• D3만 할 수 있는 사람만 따로 모집하기도..

수업 막판

• 코딩 테스트 볼때나 코드 짤 때, 변수를 최대한 적게 짜주는 방향이 옳다.

---

저녁(19:00~21:00) 스프린트 w/ Makerjun

오늘은 미래를 바라보는 시간

• 주니어 개발자에게 가장 중요한 것? 성장 가능성, 의지, 열정
• 성장 가능성은 어떤 걸 보면 알 수 있을까?
  → 과거? 여태 노력해온 것들? 회고와 개선의 기록
  무언가를 '한' 사람은 많다. 하지만 무언가를 '잘' 한 살람은 많지 않다.
• 잘만든 컴포넌트, 잘만든 css, 잘만든 JavaScript 하나쯤은 있어야하고 이런 포인트가
• 이 사람은 이런 상황에서 이런 방법으로 해결했는데, 다른 상황에서도 이렇게 잘 해결하겠구나

미래 시점으로 가자 → 모의 면접 진행(!)

• 어떤 문제를 맞았을 때 어떻게 극복할 건지 미래 시점에서 생각해보기
• 모든 사람이 면접자 역할을 하기 어렵
• 4인 1조 → 3대1아니고
  1명 - 면접관
  1명 - 피면접자(지원자)
  2명 - 관찰기록자

• 면접 이런 것들을 나중가서 준비하면 힘들다. 미리미리 해보자

#모의면접 (~19:40)

• 1명 면접관
• 1명 피면접자
• 2명 관찰기록자
• 1사람당 10분정도씩 총 2번 진행해보겠습니다!

#예상 질문 (이건 참고만 해주세요)

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

스터디하면서도 모의면접하듯이 질문하면 성장에 도움이 된다.

구체적 기간과 숫자를 넣어 표현한다.

짧은 기간 성장 비결에 관한 질문 → 스터디하고, 페어프로그래밍

관련 경험이 근거로 존재하자

커뮤니케이션 능력을 강점으로 제시하는 것

회고 템플릿 KPT 좋은 템플릿

[Keep]

• 현재 만족하고 있는 부분
• 계속 이어갔으면 하는 부분

[Problem]

• 불편하게 느끼는 부분
• 개선이 필요하다고 생각되는 부분

[Try]

• Problem에 대한 해결책
• 다흠 회고 때 판별 가능한 것
• 당장 실행가능한 것

잡담이 곧 KPT

도구는 생각을 이끌어내기 위한 것일 뿐

스터디는 시각이 달라진다.

동준님 → 교육적 실험 장소

수다 떠는 스터디

수업 내용

스터디의 중요성!!