[멋사 FE 스쿨] 23일차 리뷰

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

---

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

morning break

• Github 프로필도 잘 꾸며두고 README.md도 잘 쓰기
  https://codecollector.tistory.com/667
  https://github.com/paullabkorea/resume-repo
• 적어도 4개의 레포를 핀해두던가
• Repo 주소만 제출하는 곳도 있다.

 

• FE 커리큘럼을 어디까지 소화해야 취업이 가능할지?
  → 최소요건에 해당하는 스텝? HTML, CSS, JS 중에 하나라도 빈다? 그러면 FE 개발자 취업하면 안되지
  서버Linux? 직접할 확률은.. 낮다. 그렇다면 Node는?? 역시 필수는 아니다. Node를 한다는 것은 풀스택에 가까운 것 Node는 필요조건은 아니지만 경험 정도?
  Bootstrap? tailwind? Sass? 다 필수 아니다. 가산점은 될 수 있겠지만... 집중할 것을 잘 정하자
  JQuery? 반반 유행이 많이 지났다고 생각하겠지만, 레거시코드 유지보수를 위해선..
  Ajax? 80~90% 중요. 거의 필수네..
  MongoDB, MySQL 필수는 아님
  React 필수
  웹팩 필수
  HTTP 필수는 아니지만 알고 있어야지
  웹 접근성, SEO도 필수에 가깝지만 앞의 것들보다는 중요도는 떨어진다.
• BE를 파고 싶다면? Bootstrap, tailwind는 필수일 듯. BE가 JS를 못한다? Node를 할건데? 그러면 뒤가 텅텅 비게 된다.
  MongoDB, MySQL BE는 필수
  HTTP 필수
  웹 접근성, SEO도 필수에 가깝지만 앞의 것들보다는 중요도는 떨어진다.
• 자료구조, 알고리즘이 모두에게 필요한 것일까? 둘은 코드 구현에 있어서 겹친다. 자료구조알고리즘 공부는 어느정도 마음을 먹고 해야한다.
• 서비스 개발 기획은 지금 당장 필요하지는 않은 느낌
• 정규표현식은 어차피 해야한다. 엄청 깊이 알아야 하는 것은 아니고
• 모든걸 다하려고 하면 이것도 저것도 안될 경우가 있다. 선택과 집중이 필요하다
• 커리큘럼 내 집중 스택 정리
  FE: HTML / CSS / JS(Ajax) / React / (SASS) / (jQuery) / SEO // github // 웹팩 // 정규표현식
  BE: JS / tailwind or bootstrap / Node / DBA / github / Server / HTTP
• BE 간다고 하면 HTML, CSS 너무 집중하지는 말자. 정신 건강에 썩 좋지 않다..
• 이력서 검토 요청을 하면서 따끔하게 해달라고 하고 마상을 입지 말자.. 충고를 받으면 이력서가 좋아진다.
  ex) 저라면 이 이력서 안봐요
• 학력을 보는 기업? 솔직히 곧 없어질 기업이다. 학력을 보는 곳도 점점 더 안보게 될 것. 대기업 입장에서(샘숭, 시난) 같은 곳은 학력 컷이 있긴 한듯.. 컴공, 관련학과 출신들이 많다.
  개발 중심 회사들은 거의 관련이 없다. 물론 시험 자체가 어렵다는 건 안비밀..ㅎㅠ
  핵심은 실력이다!!
• firebase로 프로젝트를 한다? == Node를 포기하겠다..
  → 대표님은 찬성
  선택과 집중을 하겠다는 거구나!!
  BE에 신경쓸 일 없이 BE를 구축할 수 있게 해주기 때문에
• 물론 대기업은 나이가 중요하긴 하다. 신한 신입 최고령자 나이? 조직 문화 체계적으로 잡혀있는 곳은 maximum 30이다. 대리보다 나이가 많다. 신입 수십명 중에 30살이 최고령..
• 주니어에게 엄청난 실력을 바라지 않는다.
• 문법에 함몰 되는 것을 조심해야한다. 딥다이브는 시니어급이다. 대기업 갈 사람들은 딥다이브를 해야지. 연봉 많은 대신 시니어 급을 원하니까
• parseInt vs + → 실무에선 parseInt
• == vs === → 실무에선 ===
• 연산할 때는 리소스가 들어간다.
  형변환 5번, 나누기 연산 5번, 덧셈 5번
  vs
  형변환 5번, 나누기 연산 1번, 덧셈 5번
  당연히 후자가 더 빠르고 좋지

어제 문제 풀이

• 숫자 각 자릿수 더하는 가장 쉬운 방법? string화 하고
• ex. 998 → 100 나누고 몫, 100곱해서 빼주고, 10 나누고 몫, 10 곱해서 빼주고, 10 나머지로 구하고 다 더하고..! 이렇게 구할 수도 있지만 추천하지는 않는다..

let data = [11, 22, 33, 111, 2];
data = data + ''; // '11,22,33,111,2'
data.replace(/,/g, '');
data.replace(/ /g, '');

외워야 자유가 생긴다.

• JS를 DOM이랑 붙여 생각하면 좋지만, 분리해서도 생각할 수 있어야한다. Node 입장에서 보기 위해
• 자릿수 , 찍어주기 문제
  → 대표님 풀이를 보니 배열 index로 접근하는 것보다는 자릿수 세어주는 count pointer를 이용해서 해주는 것이 더 좋다.
• String, Number, Array, Object 다 너무 중요하다.

변수 다시

• Date에서 월은 0부터 시작, 일은 1부터 시작(...), 요일은 일요일 0부터 시작 연도 가져올 때는 getFullYear() 사용할 것

Array

• 배열은 호출해서 바꿀 수 있는데, 문자열은 호출해서 바꿀 수가 없다.

형변환

number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number

---

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

• 코딩을 할 수 있는 능력과 문법을 이해하는 능력은 다르다.
• 실력이 있는 사람들은 코테를 준비하던가, 프로젝트를 가던가 잘 하는 사람들 프로젝트 모아라
• 눈으로 컴파일 되는 사람(!) comp-eye-ler
• array의 method
  pop, push, unshift는 사용된 배열에 영향을 준다.
  join
• string의 method
  split

let 전화번호 = '010.1000.1000';
전화번호.split('.').join('-'); // '010-1000-1000' 반환

• slice는 string도 되고 array도 되고
• 이런 걸 다 알아야한다? 이런게 있다 정도는 알아야지
• JS sort는 ASCII 기준으로 정렬(사전식 정렬)이라 숫자 정렬에 최악

data.sort((a, b) => a - b) // 오름차순
data.sort((a, b) => b - a) // 내림차순

• 정렬하는 코드 등은 바뀌지 않는다. 이해하지 못하더라도 외우고 사용하는 거
• reverse → 역정렬이 아니라 역순이다.
• (여담) 은행 근무 장애 발생 시 고성이 오가지 않은 적이 없다..😥

let person = {
    // key: value;
    name: '이호준',
    age: 10,
    height: 30,
    weight: 40,
    이력: {
        '첫번째직장': '하나', 
        '두번째직장': '둘'
    }
};
person.name; // '이호준'
person['name']; // '이호준'

• [name]이 왜 안될까? → name 변수로 인식하기 때문에
• .name도 속성 접근자
• key, value 접근에 있어서
  위의 person 경우에

// person.keys(); 이렇게는 작동 안하고
Object.keys(person);// 이렇게 써줘야 한다.

Object.keys(person);

Object.values(person);

Object.entries(person);

→ 이렇게 써준다.

 

• for of는 배열의 어디까지 들어갈까?

이정도 depth까지 되는구나 확인해보자 항상

for (let [[i, j], k] of [[[1, 2], 2], [[1, 2], 4]]) {
    console.log(i, j, k);
}
/* 
1 2 3
1 2 4 
출력
*/

• 추후 다시 정리해줄 것

console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// value: '이호준',
// writable: true, // 변경 가능 여부, 기본값 false
// enumerable: true, // 열거(for) 가능 여부, 기본값 false
// configurable: true // 재정의 가능 여부, 기본값 false

함수

함수

1. 재사용성
2. 아키텍쳐 파악
3. 유지보수

에 좋다!

• 센스도 능력이다
• block scope, function scope
  함수 안에서 선언된 변수는 밖에서 사용할 수가 없다.
• 함수 내부에서 외부 변수에 접근, 수정이 가능하다(!)
• 캡슐화, 추상화
  운전대는 방향에 대한 추상화가 되어 있다.
  엑셀도 얼마나 가속하느냐가 고정되어 있는 것이 아니라 가속하는 것에 대한 추상화가 되어있다.
• 파선아실... 파라미터 선언 / 아규먼트 실행
• 물데네전세표응🤦‍♂️ → 네트워크 쉽게 외우기 하하..
• 변수 선언은 주로 콜백 함수 때 사용한다.
• 함수 스코프
• 함수 안에서 선언된 변수*는 함수 밖에서 사용할 수 없지만, 함수 밖에서 선언된 변수는 함수 안에서 사용하고 접근할 수 있다.
• 블록 스코프(if 등)
  블록 안에서 선언된 변수는 블록 밖에서 사용할 수 없다.
  전역으로 선언했던 변수를 블록 단위에서 다시 let 주고 선언에서 쓰지말자
  전역 let → 블록 let : 따로 쓰일 수 있다.
• 블록과 함수의 차이?
  함수 안에서는 지역 변수 쓰고 메모리 반환 해버린다. → 더 develop 필요
• 내 식은 땀은 성숙과 같다.
• Programming Language라면 캡슐화를 반드시 해야한다.
• 함수 선언문(함수에 이름 붙여서 사용하는 것) vs 함수 표현식(변수에 함수 할당해서 사용하는 것)
  태생이 다르다.
  선언식으로 호이스팅이 될 경우 함수를 맨 아래에 모아둔다거나 해서
  프로그램 실행 가독성을 높일 수 있을 거 같네요..
• 기명함수, 익명함수
• 콜백함수
  콜백함수라는게 그 자체로 특별한 선언이나 문법적인 특징을 가지고 있지 않다.
  콜백함수는 유니크한 문법적 특징을 가지고 있는게 아니라 '호출방식'에 의한 구분
• 화살표 함수? → 심플함을 요구하기도 하고 화살표 함수만 사용 가능한 경우도 있다.

호이스팅

• https://developer.mozilla.org/ko/docs/Glossary/Hoisting
• 다시 정리

 

• 다시 Number, String으로 돌아가야 한다.
• tdd 너무 함몰되는거는 반대
• 문법 하나하나에 함몰돼서 전체 보는 시야를 잃지 말자
• 복습이 버겁다면 그냥 쉬고 수업을 따라와라
• 다음 주 두희님 또 방문 예정..⭐ 두근두근