[멋사 FE 스쿨] 28일차 리뷰 + 보라님 특강

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

---

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

morning break

• 코드의 질로써 어필할 수 있다면 모르겠지만
• 우리가 책을 낸다면 이력을 만들기 위한 책이지 홍보를 위한 책이 아니다.
• 유행은 돌고돈다. jQuery가 굉장히 유행했을 때도 있었고.. 리액트 죽을 수도 있다. 핵심은 JavaScript다.
• JavaScript는 죽을 수 없다..ㅠ

수업

• 오버라이딩 오버로딩
• 자스엔 왜 오버로딩이 없을까? → 나중에
• 오버로딩(overloading)이란?

function sum(x, y) {
    return x + y;
}

function sum(x, y, z) {
    return x + y + z;
}

function sum(int x, int y) 
function sum(int x, int y, int z)
function sum(char x, char y, char z)

→ 다른 언어에서는 이렇게 매개변수의 갯수가 다른 두 함수가 정의 되는데, 자바스크립트는 어이없게도 밑의 것이 덮어 쓴다.

JS 딴에는 arguments가 있어서 그렇다고는 한다...

• 구조분해할당 다른 언어에서의

// 이름과 성을 요소로 가진 배열
let arr = [1000, ["Hojun", "Lee"]]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [계좌잔고, [firstName, surname]] = arr;

console.log(계좌잔고);
console.log(firstName);
console.log(surname);

• try catch

try {

  alert('try 블록 시작');  // (1) <--

  lalala; // 에러, 변수가 정의되지 않음!

  alert('try 블록 끝(절대 도달하지 않음)');  // (2)

} catch(err) {

  alert(`에러가 발생했습니다!`); // (3) <--

}

• console.error 많이 써준다.

let error = new Error(message);
// or
let error = new SyntaxError(message);
let error = new ReferenceError(message);

• error는 node 등에서 error 발생 시킬 때 어떻게 발생하는지 보려고 많이 쓴다

let json = '{ "age": 30 }'; // 불완전한 데이터

try {

  let user = JSON.parse(json); // <-- 에러 없음

  if (!user.name) {
    throw new SyntaxError("불완전한 데이터: 이름 없음"); // (*)
  }

  alert( user.name );

} catch(e) {
  alert( "JSON Error: " + e.message ); // JSON Error: 불완전한 데이터: 이름 없음
}

• throw로 error를 던지고 catch해준다.

try {
   ... 코드를 실행 ...
} catch(e) {
   ... 에러 핸들링 ...
} finally {
   ... 항상 실행 ...
}

• finally는 무조건 실행되는 놈

try {
  alert( 'try 블록 시작' );
  if (confirm('에러를 만드시겠습니까?')) 이상한_코드();
} catch (e) { // e는 error 메세지 자체를 설계하는 것
  alert( 'catch' ); // 404페이지를 예쁘게 만드는 것은 여기에서 해주는 일
} finally {
  alert( 'finally' );
}
/*
try 블록 시작
에러를 만드시겠습니까?
확인 취소
확인 -> catch -> finally
취소 -> finally
*/

→ 이거만 이해해도 된다.

• 보험을 들어놓기 위해서 사용하는 것이 멈추면 안되니깐
• try, catch 말고도 promise를 쓰기도
• custom error를 회사에서 만들일이 있을 수도 있지만 시니어들이 해놓았을 것
  안해놨다? 시니어가 아니라 주니어인것임 사실
• 다양한 에러를 발생시켜야하는 경우가 있을 것이다.
• 유효성 검사 에러 검사는 FE, BE 모두에서 해준다. 해커와 같이 이상한 놈들이 잘못된 데이터를 그냥 packet으로 보내버리는 경우에 BE 유효성 검사가 없다면 큰일 날 것

promise, async, await

• node에서 꼭 필요하니까 error는 몰라도 얘네들은 꼭 알아야한다.
• callback이란 무엇인가?
  → 최대한 쉽게 이해해보자. 인터넷에 있는 자료, 영상들은 웬만해선 공감이 안될 것
• .찍은 이후는 method
• fuction가 object 안에 있으면 method라고 부르긴 하는데

let hojun = console.log;
hojun('hello world');

• callback hell을 탈출하게 해주는 것이 promise

// 모던자바스크립트 예제
let promise = new Promise(function(resolve, reject) {
  // 프라미스가 만들어지면 executor 함수는 자동으로 실행됩니다.

  // 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 'done'이 됩니다.
  setTimeout(() => resolve("끝남!"), 1000);
});
console.log('hello world');
console.log(promise);

→ 이것이 비동기

let promise 선언하고 Promise 할당하면서 실행된 setTimeout이 실행되는 동안 console.log('hello world')가 실행되고 console.log('promise')도 실행된다.
그리고 이것이 비동기

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("끝남!"), 3000);
});

console.log('hello world');
promise.then(v => console.log(v));
console.log('hello world2');

// hello world
// hello world2
// 끝남!

→ 비동기를 이해하고 then도 이해하기에 좋은 예제

• 동기랑 비동기
  동기 → 순차적 실행, 순서대로 실행
  비동기 → 순서대로가 아님
• 왜 비동기가 필요할까? → 서버의 통신

// 모던자바스크립트 예제
new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

→ resolve(1)에서 1이 then의 function의 result로 들어간다.

• then이 error를 잡을 수도 있지만 일단은 resolve로 잘 수행되고 나서 넘어갈 때 then
• then과 catch와 finally의 순서가 매우 중요한데, 이 것에 관한 설명은 node에서 자세히
• promise는 뭐다? 비동기적으로 나중에 실행해주겠다는 (기약없는) 약속 → 비동기가 중요
• catch는? 에러를 잡아내는 녀석
• finally는? 무조건 실행
• then은 정상적 실행일 경우만 수행된다.

---

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

• fetch도 promise처럼 생각 promise를 구현하는 한가지 방법이다.
• 그렇다면 fetch와 promise의 공통점과 차이점은?
• promise로 값을 받아올 때 약속 실행 전에 차이가 생기듯이 fetch도 지연이 생긴다.

// 문제 : 1차 접종자의 퍼센트를 가지고 오세요!
fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        console.log(json);
        return json
    })

→ 정답

// 문제 : 1차 접종자의 퍼센트를 가지고 오세요!
fetch('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (json) {
        console.log(json);
        return json
    }).then(function (arr) {
        console.log(arr.filter(s => s['시·도별(1)'] === '전국').map(obj => obj['1차 접종 퍼센트']));
        return
    })

• 의도치 않게 깃헙에 DDos 공격..ㅎ
• 개인 → Deny of Service
  여러명 → Distribution Deny of Service
• 한국 사이트는 트래픽 차단이 있다.

유명한 사람, 커뮤니티 팔로우 해두고 간간히 보면 인사이트 얻기에 좋다.

손코딩 시간

1번

// 1차 접종 퍼센트를 구해주세요!
fetch('https://블라블라.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국').map(obj => obj['1차 접종 퍼센트']));
        return
    })

2번

new Promise(function(resolve, reject) {

  setTimeout(() => reject('error'), 1000);

}).then(function(result) {

  alert(result + ' : 잘 수행!');
  return result + 'one';

}).catch(function(result) {

  alert(result + ' : 애러 발생!'); // 1
  return result + 'two';

}).then(function(result) {

  alert(result + ' : 잘 수행!'); // 2
  return result + 'three';

});

• async, await는 syntactic sugar로 보는 것이 맞다.
• async를 붙이면 Promise처럼 사용할 수 있다.
• .then으로 이어 붙이면 .then 앞에서 return 한 값이 then의 function의 argument로 넘어온다.

// 모던 자바스크립트 예제
async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

→ 요것은 동기적으로 실행시킨 것

• async, await를 이용한다면 then, then,으로만 이어서

• async await키워드를 사용하면 promise 댐댐댐 하는게 아니라
  동기적(순차적)으로 절차적으로 비 동기적 방식 처릴를 동기적인 모습의 코드로 간단하게 순차적으로 읽어 내릴 수 있어서 편리하다는 차이가 있어요!!
  코드 가독성 좋아지고 읽기 편해짐

• → 다시 정리해보기

• 원래 Promise 기능에서 제공하는 기능을 넘어서지는 못했기 때문에 syntax sugar라고 보는 게 맞음

• 원래는 async랑만 await을 쓸 수 있었는데, 최근에 바뀜

• 프로그래밍 세계에서는 버티면 따라가는 것이다

• 보통 html, css 끝나는 순간 절반이 나가떨어진다

• 호출스택 나오면서 스택 퀴-즈

• 싱글 쓰레드인데 왜 비동기가 가능?

• 이벤트 루프 → 설명할 줄 알아야지

• 주니어 개발자 뽑는데 이벤트 루프까지는 좀 너무하지 않나 싶은

• 호출 스택이 비어있는 상태여야 테스크 큐에 있는 작업을 가져와서 완료시킨다.

• promise는 백그라운드 → 테스크 큐 → 호출 스택

• 호출 스택(call stack), 백그라운드, 테스크 큐를 합쳐서 이벤트 루프라고 부른다
  그런데 사실 호출 스택, 백그라운드, 테스크 큐도 하나만 있는게 아니라 여러개다.

• FE 프로젝트라고 할라면 20~30페이지짜리 하나는 되어야하지 않을까

• Promise → 비동기 실행해줄 것을 약속. 그런데 이 실행이 callback으로 실행? 호출? 비슷한 의미로 이해

• 왜 callback과 promise? async로 실행되는 게 callback
  callback 함수를 비동기적으로 처리

Promise → then, catch, finally

fetch도 매우 중요(Promise 산하)

async와 await 쓰면 Promise에서 한 것처럼 then, catch를 쓸 수 있다.

콜백 지옥은 지옥이니까 프로미스나 async await로 탈출 하자

---

저녁(19:00~21:00) 특강 w/ Violet Lee

서류 합격률을 높이는 Github 관리 전략

잘 되신 분들의 Github에서 볼 수 있는 공통점은??

README 잘 작성하기

• 말 그대로 '나를 읽으세요'
  fork를 하던 뭐하던 가장 먼저 해야할 것은 README 읽기
  과제마다 README를 명시해달라하는 회사도 있다. 명시해달라는 말이 없어도 당연히 작성해야 한다.

1. 프로젝트 설명
2. 반드시 빌드 및 실행 방법이 있어야 한다.

• React를 한다? Awesome react github 검색해서 저장소 둘러보기
  Node? Awesome Node Github 검색해서 저장소
  좋은 Repository들은 star를 눌러두자
  star 눌러둔 repo등을 통해서 최신 trend 따라잡기
• README 때문에 떨어지는 일은 없게 하자
  좋은 README beauty-saurus 참고 하자 → github.com/Chloekkk/Beauty-Saurus
• 깃헙 모든 문서는 MD 문법

커밋 잘 만들기

• README에서 파생되는 문서 읽기 → wiki, contributing

• commit 이력 살펴보기 → 이 사람이 commit을 얼마나 논리적으로 잘 할 수 있는가

• commit이란 무엇인가?
  → 현재 진행 중인 프로젝트의 스냅샷

• 하나의 commit이 하나의 독립적인 버전이 되도록

• commit을 언제 만들어야 하는지
  → 논리적 변경이 있을 때 새로운 commit을 하나

• 논리적 변경이란?
  → 사람마다 논리적 scope이 다르다.
  그래서 사람마다 commit 기준이 다르다.

• 가능하면 commit 크기는 작게하는게 좋긴하다

• 막간 은님(?!) 정리 및 조언

1. 커밋은 '작업의 단위' 별로 작성하고 의미를 주는 게 좋다. 그래서 크기가 작을 수록 좋은 커밋이다.
2. README 는 일단 쓰면 좋다. 대략적인 내용만 쓰고 상세한 건 WIKI에 관리하자
3. 파일 여러개 뭉텅이로 건드리는 건 상관 없는데, + 1472 줄인데 'XXX 작업' 이라고 로그 찍혀있으면 당신은 그 날 사망한다

• commit 단위를 어느정도로 잡아야 할지
• 논리적 commit이란?
  책을 쓴다 가정하자
  → 유년기, 청년기, 중년기 나누듯이
• 적절한 commit 크기
• commit은 언제 만들까 → 논리적 변경이 있을 때
• 논리적 변경을 측정하는 기준은 사람마다, 팀마다 다르기 때문에 컴포넌트 단위일 수도 있고 다를 수도 있고 컨벤션 따라서..
• 암튼 너무 크면 안된다.
• commit마다 메세지
• 회사마다 convention이 다르다. 그니까 정답은 없다.
• 구글에 commit message convention 검색해서 보기
• commit message에 [#000] 이런식(이건 github issue)으로 이슈 트래커(issu tracker) 붙이기 issue tracker : Jira, Asana, GitHub Issues 등
• 주의 사항
  변경분이 해당 commit message와 상응하는가?
  issue tracker와 연동되어 있나?
• 첫 커밋은 어느 시점이 좋은가?
  → 프로젝트 몇번 해보면 감이 온다
• 어떤 파일을 추가한다고 정리하는 게 아니라 기능을 구현했다는 기능 단위로 하는 것이 좋닼`
• 뭔가 막힐 때는 git status를 치면 힌트가 다 나온다.
• 이슈 트래커 혼자 공부할 때는 그렇게까지 할 필요는.. 회사 협업 할 때는 무조건 붙여야 한다
• 이슈 트래커 혼자 연습할 방법? → 학생일 경우 커리큘럼상 오늘 진도 쓰고 관련 링크 달아놓는 식으로 연습
• 초보일 때는 GUI 사용하지 않기를 추천. log 볼 때는 GUI 쓰긴 한다.
• git 원하지 않는 이력 삭제할 때 좋은 검색어
• commit message 영어랑 한글 섞어 쓰는 걸 이상하게 볼 수도 있지만.. 크게 상관 없지 않을까

잔디 심기

• 일단 코딩을 잘 하려면 코딩을 많이 하는 게 중요하다.
• 신입의 커밋은 전략일 수 있다. → 피해야할 패턴은 있다.
• 외부에 드러낼 수 있는 유의미한 방법 중 하나가 될 수 있다

1. TIL → 매일 학습 할 수 있다는 걸 티 낼 수 있다.
2. 토이 프로젝트 → 솔직히 어떤 토이플젝 할지 모르지 않나
   살면서 내가 불편했던걸 해결할 수 있는 소프트웨어 만들기
   1. 주의점 → 배포까지 해보기, 배포 후 점진적 해결까지 해보기
3. 오픈소스 기여 → 리액트 번역 등. 쉬운 것부터 참여해보자 아카데미 등 참여해서 이벤트 이슈 따라가기

주의 사항

• 무의미한 or 불필요한 커밋
  사칙연산 10년간 연습한 사람과 미분을 1년간 연습한 사람의 차이
• 잔디심기를 위해서 무의미한 잔디심기를 하는 경우가 있지 않나 돌아보기
• 코딩이라는 행위의 부수적인 산출물일뿐이다.
• 연습에 도움이 되는 commit을 만드는게 좋겠지
• 훌륭한 엔지니어 모두 Github 개인 계정을 사용해 작업하는 건 아니다. 아무리 코딩을 열심히 해도 잔디가 잘 심어져 있지 않을 확률이 있다.
• one commit per one logical change라는 규칙을 잘 지키고 있는지 되돌아보자

No Silver Bullet

Brooks, Fred P.

한 번에 해결되는 건 컴퓨터 공학에서는 없다.

QnA

• ~을 느꼈다 이런 거는 issue로 만들어서 연동할 것
• SI 가고 싶다면 정처기 따도 되기는 하지만.. 흠 마이너스는 아니지만..
• TIL은 어떻게 관리하는 게 좋을까? → 깃헙, 블로그 관리 잘 하는 것도 좋다. 기술 블로그를 썼다면 굳이 깃에 굳이 쓰지 않아도 괜찮지 않을까
  목표에 따라 다르다.
• 내가 주니어 프론트엔드 개발자 취업을 준비한다면 요거만 파겠다 싶은게 있으실까유?
  → 지원자가 최소한 알고 왔으면 하는 것을 토대로 하지 않을까
  리눅스는
  https://www.44bits.io/ko/post/linux-and-mac-command-line-survival-guide-for-beginner
  이거 하나 잘 보자
  요즘 Vanilla JS로 과제 시키는 회사도 많아졌다
• 모던 JS 튜토리얼 읽는게 다가 아니라 과제를 풀어보는 것이 중요하다. 예제에 있는 해답 코드
  Object 구조분해할당→ Hook에서 중요하니깐
• 한 유명한 회사는 코테 과제를 낼 때 모던 JS 튜토리얼에 있는 예제를 그대로 내는 경우도 있었다(!)
• jQuery 엄청 많이 쓴다!!
  회사에서는 돈 벌어다주는 코드라면 뭐든 가져다 쓴다.
• 솔직히 3개월은 너무 짧다 그 전 학습 기간가지 치면 6개월 ~ 1년 그정도가 될 수도 있겠는데
• 존버하면 무조건 취업한다!!!