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

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

---

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

morning break

• 우리 수업의 난이도들
  HTML - 하
  CSS - 중
  JS - 상
  Bootstrap, Tailwind - 중하
  Linux - 중
  SCSS - 중하
  jQuery, Ajax - 하
  Node - 중상
  React - 중
  MongoDB, mySQL - 중
• Node는 사실 JS의 런타임이기 때문에 JS를 제대로 알아야한다.
• 알고리즘은 시니어 넘어가려는 사람, 코테 준비하는 사람 아니면 사실..
• 로컬 폴더에 있는 json 파일의 데이터를 변수안에 담으려면? → fetch를 이용하거나, js로 저장해서 연결하기
• CRUD

수업

• 어제 콜백지옥 이어서 → Promise로 해소까지
• 사실 Promise로 해결해도 callback 지옥에 빠질 위험은 있다..ㅠ
• 무슨 에러가 있었고 어떻게 해결했고... 쌓이다보면 또 콜백지옥이 펼쳐질 수도.. → 그렇기에 집요함, 끈기, 다음 날 출근해서 리팩토링하겠다는 의지..!

jQuery

• jQuery부터는 자신감이 생길 것!
• Library - 빌려서 사용하는 것 내 코드에 넣는 것
  FrameWork - 짜여져 있는 것에 규칙대로 내가 쌓아 올리는 것
• 걷어가는 추세라고는 하지만 실무에서 여전히 사용량 1위임은 부정할 수 없는 사실이다
• 가상돔? 결국 잘 알아야한다..! → 리액트에서 사용
• 회사마다 React나 Vue가 오버스펙일 경우가 있다
• jQuery 실습
• 1개의 페이지에 script가 30줄도 안되는 경우? → 60%는 될 걸?
• jQuery마저 버린 ie8... 진짜 ie10 이하 지원하면 돔황챠..
• eq(equal), ne(not equal), lt(little), le(litte equal), gt(greater), ge(greater equal) 자주 보게 될 것임
• JS로 하면 querySelector로 순회 돌면서 다 잡아야할 것을 jQuery로 더 쉽게 해줄 수 있다.

---

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

break time

• 교육은 비즈니스가 아니다
킹갓제네럴 Licat 호준

jQuery 수업 이어서

• 페이지가 전부 렌더링 되고 script가 먹기 때문에 생각해서 위치 넣어주기
• hover vs on mousetenter, leave → 뭘 써도 상관 없을 것 같다. 되면 그냥 쓰자

Ajax

• ajax → 전체 비동기 쿼리를 일컫는 말
  axious → node에서는 axios를 많이 쓴다.
• ajax의 방법 중 axios, fetch, jQuery의 ajax, XMLHttpRequest(얘는 잘 안쓴다)
• 굉장한 Request는 공격이 된다
• load는 fetch 같은 역할

막간 조은님 팁

• 아까 다른 채널 스레드에서 얘기 나와서,
  개발자의 커리어 패스

  1. 일단 스타트업에 취업 (보통 시리즈 A 거나 Seed 투자 단계)
     연봉 3000 ~ 3600 사이
  2. 1 ~ 2년 정도 경력 쌓으면서 공부
     그래봐야 연봉은 여전히 3000 ~ 3600 사이
  3. 신입 연봉 많이 준다는 스타트업 진입 (시리즈 C 이상)
     연봉 평균 5000부터 시작, 내 연봉은 5000 일 가능성이 높음
     본인이 그 회사 신입 정도 실력이라고 생각해야함
  4. 중니어 (약 5년차) 까지 그 회사 존버
     이 때 연봉이 많이 오르면 6000 ~ 7000까지도 오름
     네이버 같은 곳은 인센티브도 주기 때문에 총보상 기준으로 봐야함
  5. 중니어 이후 시니어 레이어 진입 위해 대기업 (네카라쿠배) 진출
     그 전에 갔으면 그냥 거기서 존버하면 됨.
     이 때부터 연봉이 거의 안오름
  6. 시니어 진입
     이제 연봉은 거의 안 오르고 인센티브 / 스톡옵션으로 이직 시작

• xhr(XMLHttpRequest) → 응답에 대한 양식

• Ajax 통신으로 로그인을 구현하지는 않는다. 오늘 한것은 테스트를 해본 것 뿐

• 막간 퀴즈

1. 회원 데이터는 (각 개인) github에 있음
2. prompt로 id와 pw를 입력
3. 로그인 성공시 - 로그인 성공 문자 출력
   3.1 출력 문자열 : 누구누구님 환영합니다.
   멋사코인 100억원, 등급 다이아몬드
   3.2 100억이라는 필드가 없네요. 전화번호 뒷자리에 억원을 붙이기로 합시다. 010-1234-1235면 1235억원 가지고 있는 것으로 출력해주세요.
4. 로그인 실패시 - 로그인 실패 문자 출력
5. (선택사항) prompt를 input으로 바꿔서 사용자에게 html 상에서 입력받게 해주세요.
6. (선택사항) 실력이 되시는 분들은 로그인 성공 페이지와, 로그인 실패 페이지를 별도로 설계합니다.

function success(userValid) {
    document.write(`
        ${userValid.name}님 환영합니다.
        멋사코인 ${userValid.phone.slice(-4)}
        등급 : ${userValid.grade}
    `);
}
function fail() {
    document.write('로그인 실패!');
}
$('.dataLoadButton').click(function () {
    let id = $('.id').val();
    let pw = $('.pw').val();
    $.ajax({
        url: 'https://raw.githubusercontent.com/HojinAn/ajaxlogintest/main/userdata.json',
        async: true,
        success: function (result) {
            result = JSON.parse(result);//JSON에서 가져온 string을 object화
            let user = result.find(obj => obj.id === id && obj.pw === pw);
// 처음엔 for문 돌렸는데 find가 더 좋은 것 같다. filter보다 find가 나은게 find는 원하는 것을 찾으면 멈추기에 더 효율적
            if (user) {
                success(user); // 상단 success 함수 호출
            } else {
                fail(); // 상단 fail 함수 호출
            }
        }
    });
});

→ 해설을 참고한 내 코드

• JSON에서 데이터를 문자열로 만들어주는 stringify와 문자열로된 데이터를 구조화된 데이터로 만들어주는 parse
• 코딩할 때 신나는 노래 안듣는다고 하신다. 집중상태일 때랑
• 코딩을 잘해서 취업하는 게 아니라 취업을 해서 잘하게 되는거다(?)
• 자신감은 명언에서 나오는게 아니다
• ajax → 비동기적으로 통신을 하는 방법
• GET, POST 방식 HTTP 요청은 node 가서

---

간단 회고

1. 오늘은 어쩌면 다시는 배울 일 없을지 모르는 jQuery 학습. 왜 jQuery가 항상 뜨거운 감자일까 싶었는데, 꽤나 강력하면서도 무겁고 요상한 부분이 있어서 그렇구나라는 걸 깨닫게 되었다.
2. Promise 한번 정리해서 이해할 필요가 있겠다.
3. 담주부터 알고리즘..! 코테 빠샤