오늘은 프로젝트를 진행하는 과정 중 백앤드에서 구현한 기능을 프론트앤드에서 보여주기 위한 간단한 프론트앤드를 제작할때 유용한 Jquery를 몇가지 알아보겠다.
$('#{id or class 이름}').find()
이와 같은 형식은 id/class 값을 가지고 있는 노드 중에서 찾는다는 의미이다.
ex) $(
#column).find()
위의 예시를 함께 보면 id 값이 column인 노드중에 서 찾는다는 의미가 된다.
$('div[id^='cardInsertDiv']')
이와 같은 형식은 div 노드중 id값이 cardInsertDiv 인 것을 지칭한다는 의미이다.
위의 두개를 연결해서 사용하면 다음과 같다.
$('#column').find($('div[id^='cardInsertDiv']')).hide();
column이란 id를 가진 노드 중 div 를 찾는데 id 값이 cardInsertDiv을 찾는다 그리고 찾은 노드를 hide() 즉 숨긴다는 의미이다.
위와같은 형식을 사용하면 ajax를 사용하고 다음 상요작용으로 프론트에서 보여지지 말아야할 노드를 선택해서 숨겨줄 수 있다.
또한 해당 노드를 없애거나 데이터값을 변경할 수 도 있으니 유용하게 사용될거라 생각한다.
$(<button>버튼</button>).prependTo(#cardRight);
이와 같은 형식은 버튼 노드를 생성해서 cardRight 이란 id를 가진 노드에 추가하라는 의미이다.
위와같은 형식은 생성할수 있는 노드가 div, input 등 다양하게 생성할 수 있고 붙여줄 노드를 고를 수 있다는 점에서 편리하다.
또한 어떠한 노드에 붙일지에서 붙는 형식을 고를수 있다.
바로 prependTo부분으로 cardRight라는 id를 가진 노드에 처음으로 추가하라는 뜻이다.
이가 뜻하는 바는 cardRight라는 id를 가진 노드에 이미 다른 노드들이 있다면 그것들 보다 위에 적용되는 것이다.
반대로 appendTo는 노드들중 마지막에 추가되는 것으로 cardRight라는 id를 가진 노드에 이미 다른 노드들이 있다면 그것들보다 아래에 적용된다.
이러한 형식은 예를들면 게시물을 추가하거나 삭제 하는 api가 작동하고 추가되거나 삭제된 해당 게시글이 프론트앤드가 실시간으로 바꿔지도록 보여 줄 수 있다.
마치며
프론트앤드를 항상 구현하면서 느끼는 바로 백앤드 개발자가 되어도 프론트앤드 작업자와의 소통이 매우 중요함을 계속 느끼고 프론트앤드로 보내줄 데이터값의 형태의 중요성을 알게되는 것 같다.
위와같은 형식들을 다는 아니더라도 알고있다면 협업에 큰 도움이 될것같다.
