📌 스프린트 회고_4
소프트스킬의 중요성
주니어 개발자 1년차가 되면서부터 역량을 크게 가르는 중요한 지점
: 요구사항 분석 역량
- 기획자랑 친하게 지낸다
- 소통할 때 이모지로라도 꼭 남기고 연결하는 소통의 과정이 굉장히 많다
TDD(테스트 주도 개발)
몰입을 도와주고, 불확실한 상황 속에서 학습을 최적화 하는데 굉장히 큰 도움이 된다.
소프트웨어는 문제 해결 도구이기 때문에 문제를 해결하는 맥락에서 학습해야 하는데
TDD를 하면 우선순위가 더 잘보이고, 피드백도 동작 되는 앱을 통해서 더 빨리 받을 수 있고, 지식을 외우는게 아니라 써먹었기 때문에 체화도 더 잘된다.
📘 jQuery
https://github.com/yoonmallang22/jQuery
Write less, do more.
빠르고, 작고, 기능이 많은 자바스크립트 라이브러리
엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트를 효율적으로 제어할 수 있는 다양한 수단을 제공한다.
기능적인 특징
- 막강한 CSS 셀렉터
- 크로스 브라우저 지원
- 메서드 체인
- Ajax 지원
- 풍부한 플러그인 지원
jQuery 선택자
jQuery 선택자는 DOM 요소의 확장 개체인 jQuery 개체 집합을 반환힌다.
DOM 요소를 직접 반환해주는 것이 아니라 그의 래퍼(Wapper)인 jQuery 개체로 반환해주기 때문에 직접 DOM 요소를 제어할 때보다 훨씬 편하고 쉽게 개체를 제어할 수 있다.
let $value = $('#one')엘리먼트를 선택한 다음 변수에 저장할 수 있다.
관례상 jQuery 선택자로 불러온 값의 변수를 변수명에 $표시를 붙인다.
jQuery 필터
기본 필터
- :eq(index) - 선택한 요소의 index에 해당하는 요소
- :even
- :odd
- :first
- :last
- :gt(index) - index보다 큰 숫자 선택
- :lt(index) - index보다 작은 숫자 선택
- :not(filter)
차일드 필터
- :first-child, :last-child
- :nth-child(2)
- :nth-child(even), :nth-child(odd)
- :nth-child(3n)
속성 필터
- [href]
- input[name]
- input[name='newmilk']
- input[name*='man’]
컨텐츠 필터
- :contains - 특정 텍스트가 들어가 있는 요소
- :empty
- :has(selector)
- :hidden - 숨겨진 모든 요소
- :visible - 표시된 모든 요소
탐색
- parent()
- closest()
- children()
- find()
- siblings()
- next()
- prev()
each()
$("td").each(function () {
const origianl_content = $(this).html();
$(this).html("-" + origianl_content + "-");
});attr()
// 속성값 읽기
$("a").attr("href");
// 속성값 쓰기
$("a").attr("href", "allMyHrefsAreTheSameNow.html");
$("a").attr({
title: "all titles are the same too!",
href: "somethingNew.html"
});val()
// 값 읽기
$("input[name='id']").val();
// 값 쓰기
$("input[name='id']").val('220');css()
// css 값 읽기
$("td").css("padding");
// css 값 쓰기
$("td").css("padding", "1rem");클래스 설정
- addClass()
- removeClass()
- hasClass()
- toggleClass()
엘리먼트 조작
- html()
- text()
- append()
- appendTo()
- clone()
- prepend()
- prependTo()
- after()
- before()
effect
- hide()
- show()
- toggle()
- fadeOut()
- fadeIn()
- fadeToggle()
이벤트
- 클릭 이벤트: click()
- 호버 이벤트: hover()
- 마우스 이벤트: mouseenter(), mouseleave()
- 키보드 이벤트: keyup()
Ajax
$.ajax({
url: "URL주소",
method: "POST",
data: { name: "John", location: "Boston" },
dataType: 'json'
}).done(function(response) {
// 성공했을 때
}).fail(function(){
// 실패했을 때
}).always(function(){
// 항상 실행
});- url : 요청보낼 URL
- method : http 메소드 - GET, POST, PUT
- data : 함께 전송할 데이터
- dataType: 서버 응답 데이터 타입
- done() : 요청에 대한 응답이 온 후 실행할 함수
- fail() : 요청이 실패 한 경우 실행할 함수
- always() : 요청 후 항상 실행할 함수
참고자료 https://reqres.in/
플러그인
- lightbox https://lokeshdhakar.com/projects/lightbox2/
- datatables https://datatables.net/
