1. 오픈소스 소프트웨어(Open Source Software, OSS) 공개적으로 액세스할 수 있게 설계되어 누구나 자유롭게 확인, 수정, 배포할 수 있는 코드입니다. [오픈소스 장점] 1. 비용 절감 2. 빠르고 유연한 개발 3. 신뢰성(검증된 기관에서 발행 시 !!) 4. 변경의 자유로움 (오픈소스가 유료화 되어도 자체적으로 변경하여 자산화 시 오픈소스 계속 이용 가능) 2. Cropper.js 오픈소스 소개 - 공식 홈페이지 - Cropper.js - GitHub 주소 - GitHub - fengyuanchen/cropperjs: JavaScript image cropper. - JavaScript의 Container와 Canvas 기능을 활용한 오픈소스로 Canvas 안 이미지를 자유롭게 편집하..
💻 개발 사항 아래와 같이 게시판에서 kendoGrid와 kendoListView를 이용해 같은 데이터를 두 가지 버전으로 게시물을 보여주는 UI를 개발했습니다. 하지만 kendoGrid와 kendoListView를 각각의 DataSource로 구성해 본 결과 같은 요청이 두 번씩 발생하는 문제가 발견되었습니다. var dataSource = new kendo.data.DataSource({ transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/products", dataType: "jsonp" } }, pageSize: 10 }); $("#grid").kendoGrid({ dataSource: dataSource, pageable:..
🤔스코프란? 스코프(scope)는 변수와 상수, 매개변수가 언제 어디서 정의되는지 결정합니다. 예를 들어 함수 매개변수가 함수 바디 안에서만 존재하는 것도 스코프의 일종입니다. function f(x) { return x + 3; } f(5); x; 위의 코드를 보면 f(5)를 통해 함수 f를 호출 하기 전까지는 x는 존재하지 않고 함수를 실행하는 동안만 존재 후 함수 바디를 벗어나면 x는 존재하지 않는 것처럼 보입니다. x의 스코프가 함수 f 라고 부를 수 있습니다. 🤔그럼, 변수가 스코프 안에 있지 않다면, 변수는 존재하지 않는 건가요? - 꼭 그런건 아닙니다! 스코프와 존재를 반드시 구별해서 생각해야 합니다. [💡스코프와 존재] 스코프(가시성) 현재 실행중인 부분, 즉 실행 컨텍스트(executio..
🤔무한 스크롤(Infinite scroll)이란? 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있습니다. 게시판의 많은 양의 글을 편리하게 보기 위해 무한 스크롤 방법으로 페이징 기능을 구현해 봤습니다. [👍무한 스크롤의 장점] - 사용자 참여 및 콘텐츠 탐색이 쉽습니다. - 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공합니다. (다음 콘텐츠를 보기 위한 추가 클릭이 필요없고 페이지 로드 시간이 짧습니다.) - 터치스크린(모바일)일때 더 유용하게 적용됩니다. (화면이 작을수록 스크롤은 길어지기에 모바일 환경에서 콘텐..
🤔 Pagination? 페이지네이션이란 콘텐츠를 여러 페이지고 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법입니다. ✅ 필요한 Pagination 조건 게시판을 더 쉽게 볼 수 있고 사용자의 접근성을 높일 수 있게 Pagnation을 적용하기로 했습니다.💪 Pagination을 구상하면서 필요한 요구 조건들은 총 네 가지입니다. 1 한 페이지에 페이지 링크는 10개로 보여준다. 2 한 페이지에 20개씩 게시물을 보여준다. 3 이전, 다음 버튼이 존재한다. 4 처음으로, 마지막으로 버튼이 존재한다. 👩💻 JS로 Pagination 개발 [1. 한 페이지에 페이지 링크는 10개로 보여준다.] total : 462 1 ... ..
