코딩공부/Frontend3 Javascript 페이지네이션 jQuery 플러그인으로 간편하게 구현 📘 페이지네이션 jQuery 플러그인 제공해주는 공식홈페이지 주소 : https://pagination.js.org/ html haed에 아래와 같이 jquery, paginationjs, javascript 파일을 불러오고 paginationsjs의 css를 적용 출력 데이터와 페이지네이션 영역을 id값을 추가하여 만들어줍니다. 그리고 javascript 코드로 원하는 페이지네이션을 구현해주면 됩니다. 위에 언급한 홈페이지에 들어가면 여러 속성을 넣어 페이지네이션을 구현할 수 있습니다. 2022. 12. 20. DRF APIView로 좋아요 기능 구현_프론트엔드 역시나 아직 미천한 실력이지만 힘겹게 완성한 좋아요 기능입니다. 백엔드에서 정보를 주고 받아 이를 프론트에서 표현하는 방법이 가장 어려웠던 것 같습니다. icon 소스를 무료로 제공해주는 사이트에서 하트 아이콘 하나 받아오시고 Javascript로 async function으로 백엔드에서 API 통신으로 DB 데이터를 받아올 수 있도록 함수를 짜도록 합니다. viewLike()에서는 해당 유저가 좋아요를 눌렀었는지 확인하고 눌렀었다면, 하트가 빨간색으로 나올 수 있도록 해주어야 하기 때문에 if문을 사용하여 liked.likes(좋아요를 누른 유저들) 중에 me(해당 유저)가 포함 되어 있다면 classList에 빨간 하트를 추가해주어 눌린것으로 표현해주면 되고 해당 유저가 포함되어 있지 않다면 clas.. 2022. 12. 5. Javascript 드래그 앤 드롭 및 클릭으로 이미지 업로드 (1/2) 드래그 앤 드롭과 버튼 클릭 방식을 병합한 이미지 업로드 기능을 구현해보자. HTML 작성 드래그 앤 드롭 영역 class="material-symbols-outlined"로 구글폰트에서 icon 가져오기 클릭시 저장된 파일을 불러올 수 있도록 button 추가 input 태그로 file을 받아올 수 있도록 설정 add_photo_alternate 드래그 하여 이미지 업로드 또는 컴퓨터에서 선택 CSS 작성 CSS는 임의로 수정하세요. drag-area.active 는 파일을 박스 안으로 드래그하면 활성화 상태임을 표시해줌 /* CSS */ .drag-area { border: 2px dashed #fff; height: 500px; width: 700px; border-radius: 5px; displ.. 2022. 11. 22. 이전 1 다음
