개발 사항 IIS 서버를 사용하면서 특정 서버안에 있는 이미지를 불러와야 하는 상황이 발생했습니다. 예를 들면, IIS 서버에서 구동되고 있는 A 웹사이트에서 XXX.XXX.XXX.XXX 서버에 존재하는 1.png 이미지를 사용하려는 상황입니다. IIS에 가상 디렉터리를 추가해여 구현해보겠습니다. 설정 방법 설정방법은 크게 가상 디렉터리로 설정할 서버 내 설정과 IIS 서버 내 설정으로 나뉩니다. 🔔 설정 시 가장 중요한 부분은 권한입니다. IIS 서버의 권한과 가상 디렉터리로 설정할 서버의 권한이 맞아야 합니다. [ A. 가상 디렉터리로 설정할 서버 내 설정(위 그림으로 XXX.XXX.XXX.XXX 서버) ] IIS 서버가 설치된 웹서버의 이름을 확인합니다. (만약 기본이름이라면 사용하기 편한 이름으로..
개념 이진 검색 알고리즘은 오름차순으로 정렬된 리스트에서 특정한 값의 위치를 찾는 알고리즘입니다. 장점 검색이 반복될 때마다 목표값을 찾을 확률이 두배가 되므로 속도가 빠릅니다. 단점 검색 원리상(중간 값을 찾아야 하기에) 정렬된 리스트에만 사용할 수 있습니다. 알고리즘 과정 배열의 중간 값을 임의의 값으로 선택 중앙 값과 찾고자 하는 값의 크고 작음을 비교 중앙 값 = 찾는 값 : 값을 찾았으니 검색 종료 중앙값 > 찾는 값 : 중앙값 기준 배열의 왼쪽 구간을 대상으로 탐색 중앙값 < 찾는 값 : 중앙값 기준 배열의 오른쪽 구간을 대상으로 탐색 값을 찾거나 간격이 0이 될때까지 반복 리스트에서 검색할 값과 같은 요소 발견한 경우(검색 성공) 검색할 범위가 더 이상 없을 경우(검색 실패) [ 0. 선행조..
💻 개발 사항 아래와 같이 게시판에서 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:..
❎ 오류사항 AJAX를 통해 서버로 POST 요청시 Controller로 넘어가지도 못하고 오류가 발생했습니다. 이때 서버로 넘긴 값에 특수문자가 포함되어 있었고 이에 따른 문제였습니다. 👩💻 오류 파악 서버로 값을 전달할 때 POST 요청시 특수문자나 인코딩 되지 않은 HTML 콘텐츠()가 포함되어 있으면 발생하는 오류입니다. 클라이언트에서 이러한 값이 포함된 내용을 전송 받을 경우 XSS(Cross-site scription) SQL Injection공격 같이 보안적인 이슈가 발생하기 때문에 .NET 기반 웹 기술(ASP.NET, MVC, Razor)의 기본설정에서 막고 있습니다. 즉, 서버에 전송 된 특수문자나 인코딩 되지 않은 HTML 콘텐츠를 처리 하지 못하도록 하는 ASP.NET의 요청 유효..
🤔스코프란? 스코프(scope)는 변수와 상수, 매개변수가 언제 어디서 정의되는지 결정합니다. 예를 들어 함수 매개변수가 함수 바디 안에서만 존재하는 것도 스코프의 일종입니다. function f(x) { return x + 3; } f(5); x; 위의 코드를 보면 f(5)를 통해 함수 f를 호출 하기 전까지는 x는 존재하지 않고 함수를 실행하는 동안만 존재 후 함수 바디를 벗어나면 x는 존재하지 않는 것처럼 보입니다. x의 스코프가 함수 f 라고 부를 수 있습니다. 🤔그럼, 변수가 스코프 안에 있지 않다면, 변수는 존재하지 않는 건가요? - 꼭 그런건 아닙니다! 스코프와 존재를 반드시 구별해서 생각해야 합니다. [💡스코프와 존재] 스코프(가시성) 현재 실행중인 부분, 즉 실행 컨텍스트(executio..
💀Skeleton UI란? 스켈레톤 UI는 실제 데이터가 화면에 로딩되기 전 사용자에게 화면이 로드 중임을 나타내기 위해 사용하는 UI입니다. Luke Wroblewski 는 디자이너가 시각적 개체 틀을 선호하는 스피너를 사용하지 않는다고 조언 하는 블로그 게시물에서 "스켈레톤 스크린"이라는 용어를 처음 만들었습니다. 스켈레톤 로딩 화면은 기본적으로원본 레이아웃을 기준으로 제작되고 페이지가 로딩되고 사용 가능해질 때 실제 콘텐츠와 유사한 모양으로 페이지를 보여줍니다. 스켈레톤 로딩 화면은 기본적으로원본 레이아웃을 기준으로 제작되고 페이지가 로딩되고 사용 가능해질 때 실제 콘텐츠와 유사한 모양으로 페이지를 보여줍니다. [🤔그럼, 왜 스켈레톤 UI 로딩 화면을 사용하나요?] 빈 페이지를 표시하는 대신 콘텐츠..
🤔무한 스크롤(Infinite scroll)이란? 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있습니다. 게시판의 많은 양의 글을 편리하게 보기 위해 무한 스크롤 방법으로 페이징 기능을 구현해 봤습니다. [👍무한 스크롤의 장점] - 사용자 참여 및 콘텐츠 탐색이 쉽습니다. - 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공합니다. (다음 콘텐츠를 보기 위한 추가 클릭이 필요없고 페이지 로드 시간이 짧습니다.) - 터치스크린(모바일)일때 더 유용하게 적용됩니다. (화면이 작을수록 스크롤은 길어지기에 모바일 환경에서 콘텐..
🤔 Pagination? 페이지네이션이란 콘텐츠를 여러 페이지고 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법입니다. ✅ 필요한 Pagination 조건 게시판을 더 쉽게 볼 수 있고 사용자의 접근성을 높일 수 있게 Pagnation을 적용하기로 했습니다.💪 Pagination을 구상하면서 필요한 요구 조건들은 총 네 가지입니다. 1 한 페이지에 페이지 링크는 10개로 보여준다. 2 한 페이지에 20개씩 게시물을 보여준다. 3 이전, 다음 버튼이 존재한다. 4 처음으로, 마지막으로 버튼이 존재한다. 👩💻 JS로 Pagination 개발 [1. 한 페이지에 페이지 링크는 10개로 보여준다.] total : 462 1 ... ..
