멋쟁이사자처럼 프론트엔드스쿨 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 같은 역할
막간 조은님 팁
아까 다른 채널 스레드에서 얘기 나와서,
개발자의 커리어 패스- 일단 스타트업에 취업 (보통 시리즈 A 거나 Seed 투자 단계)
연봉 3000 ~ 3600 사이 - 1 ~ 2년 정도 경력 쌓으면서 공부
그래봐야 연봉은 여전히 3000 ~ 3600 사이 - 신입 연봉 많이 준다는 스타트업 진입 (시리즈 C 이상)
연봉 평균 5000부터 시작, 내 연봉은 5000 일 가능성이 높음
본인이 그 회사 신입 정도 실력이라고 생각해야함 - 중니어 (약 5년차) 까지 그 회사 존버
이 때 연봉이 많이 오르면 6000 ~ 7000까지도 오름
네이버 같은 곳은 인센티브도 주기 때문에 총보상 기준으로 봐야함 - 중니어 이후 시니어 레이어 진입 위해 대기업 (네카라쿠배) 진출
그 전에 갔으면 그냥 거기서 존버하면 됨.
이 때부터 연봉이 거의 안오름 - 시니어 진입
이제 연봉은 거의 안 오르고 인센티브 / 스톡옵션으로 이직 시작
- 일단 스타트업에 취업 (보통 시리즈 A 거나 Seed 투자 단계)
xhr(XMLHttpRequest) → 응답에 대한 양식
Ajax 통신으로 로그인을 구현하지는 않는다. 오늘 한것은 테스트를 해본 것 뿐
막간 퀴즈
- 회원 데이터는 (각 개인) github에 있음
- prompt로 id와 pw를 입력
- 로그인 성공시 - 로그인 성공 문자 출력
3.1 출력 문자열 : 누구누구님 환영합니다.
멋사코인 100억원, 등급 다이아몬드
3.2 100억이라는 필드가 없네요. 전화번호 뒷자리에 억원을 붙이기로 합시다. 010-1234-1235면 1235억원 가지고 있는 것으로 출력해주세요. - 로그인 실패시 - 로그인 실패 문자 출력
- (선택사항) prompt를 input으로 바꿔서 사용자에게 html 상에서 입력받게 해주세요.
- (선택사항) 실력이 되시는 분들은 로그인 성공 페이지와, 로그인 실패 페이지를 별도로 설계합니다.
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 가서
간단 회고
- 오늘은 어쩌면 다시는 배울 일 없을지 모르는 jQuery 학습. 왜 jQuery가 항상 뜨거운 감자일까 싶었는데, 꽤나 강력하면서도 무겁고 요상한 부분이 있어서 그렇구나라는 걸 깨닫게 되었다.
- Promise 한번 정리해서 이해할 필요가 있겠다.
- 담주부터 알고리즘..! 코테 빠샤
'기록 > 멋쟁이사자처럼 FE 스쿨' 카테고리의 다른 글
[멋사 FE 스쿨] 31일차 리뷰 (0) | 2021.12.13 |
---|---|
[멋사 FE 스쿨] 30일차 리뷰 (0) | 2021.12.10 |
[멋사 FE 스쿨] 28일차 리뷰 + 보라님 특강 (2) | 2021.12.08 |
[멋사 FE 스쿨] 27일차 리뷰 (0) | 2021.12.07 |
[멋사 FE 스쿨] 26일차 리뷰 + 스프린트, 모의면접 (0) | 2021.12.06 |
댓글