트러블 슈팅 (6) 썸네일형 리스트형 canvas에서 echart의 pie 차트가 흐리게 보이는 현상 해결 문제사항label을 차트 바깥으로 뺀 형태의 그래프를 구현하기 위해 상대적으로 많이쓰이는 chart.js보다 echart 라이브러리를 활용했다.이때 해당 차트가 흐리게 보이며, 마우스 호버시 이벤트가 정상적으로 동작하지 않는 현상을 발견했다.문제 접근차트를 띄우는 코드는 본인이 아닌 팀원이 구현한 코드이기 때문에 먼저 차트를 띄우는 코드 자체에 문제가 없는지 확인했다.해당 라이브러리와 관련된 코드가 정상인지 확실히하는 법은 아무래도 공식 문서를 확인하는게 제일 정확하기에 공식 문서의 샘플 코드와 비교하여 정상인지 확인하고 샘플 코드로 대체해 보기도했다.공식 문서의 차트 옵션을 그냥 붙여도 봤는데 마찬가지로 흐리고 호버 효과도 잘 안먹는다.따라서 해당 사항은 문제가 아니라고 생각했다(샘플 코드와 기존의 코.. class별 필터링 검색 기능 구현 요구사항 정리좌측 상단의 탭별 필터링 기능을 포함하여 검색 기능을 동작시켜야한다.검색 기능은 사용자가 제목, 작성자의 부서, 팀명, 이름 별로 드롭다운 버튼을 활용해서 필터링하여 지정할 수 있어야한다.구현한 코드 - 초안// @function 검색 함수function executeSearch() {console.log('검색함수 호출');let keyword = $(".search-input").val().toLowerCase();let selectedCategory = $(".search-category").val().toLowerCase();// NOTE - 탭을 통해 필터링된 결과를 가지고 검색을 시도// let tempTabFilteredData;// activeCategory = $(".tab-.. formData 전송시 유효성 검사 로직 구현 formData에 속한 input, select, textarea를 서버로 보내기 전에 빈 문자열이 서버로 들어갈 경우 500 에러가 발생한다.물론 사용자가 올바른 값을 작성하면 문제가 없지만 이에 대한 예외처리가 없으면 ux가 안좋아지므로 이를 방지하는 예외 메서드를 만들어보자.요구사항 정리서버로 formData를 전송하는데 사용자가 정상적으로 입력하지 않은 경우를 고려해서 예외처리를 해주어야한다.단순히 몇 개만 체크하는건 어렵지 않은데 조건부로 많은 양의 input을 검사해야하는 경우에는 이를 깔끔하게 관리하려면 어느정도 로직이 필요하다.function checkDetailForm(formData) { let isValid = true; const isIconCheck = $("#icon_.. 브라우저에서 페이지 로드 시 받아온 대용량 데이터를 특정 이벤트에서 사용하는 로직 페이지 최초 로드시 받아온 csv 파일의 통계 데이터를 버튼 클릭 등의 특정 이벤트 발생시 사용하기 위해서는 어떤 로직이 가장 효율적일까?예시는 2000개의 배열이지만 어떤 통계 데이터냐에 따라 개수는 계속해서 늘어날 수 있다.따라서 최적의 방식을 생각할 필요가 있다고 생각했다.요구사항 정리페이지 로드시 받아온 데이터를 미리보기 버튼을 클릭시 원하는 형태의 데이터로 매핑하여 세슘js 지도 위에 표시하여야한다.이를 위해 최초로 받아온 데이터를 따로 저장해둘 필요가 있다.이때 데이터를 어디에 저장해두는 것이 가장 효율적일까? 통계 데이터이므로 데이터 양이 커질 수 있어 메모리나 시간복잡도가 가장 낮은 방법에 대해 고민했다.데이터 저장 방식떠올린 저장 방식은 크게 전역 객체를 만들어서 저장하는 방식과 웹 스토.. Flash of Unstyled Content(FOUC) 현상 해결 먼저 기능을 설명하자면 표시하고자하는 파일은 각각 데이터 파일과 첨부 파일로 나뉜다.이때 첨부파일이 존재하면 첨부파일 영역을 조건부로 렌더링한다. 페이지 최초 접근 시에 첨부 파일이 존재하지 않으면 해당 영역들을 .hide()로 숨기고 첨부파일이 존재하면 해당 파일에 대한 정보를 dom 요소에 표시하도록 구현하였다.이때 문제점은 dom 요소를 모두 그리고나서 자바스크립트를 통해 판별하여 ui를 수정하기 때문에 초기에 DOM 요소가 렌더링되었다가 JavaScript 실행 후 숨겨지는 과정에서 잠깐 보여지는 현상(FOUC)이 발생한다.이를 해결해보자.Solution가장 간단한 방법은 화면에 표시하는 순서를 바꿔주면 된다.즉, 그렸다가 숨기는게 아닌 숨겼다가 그리면 된다.현재 코드 .. Next.js에서 유니티 빌드 파일 접근 수정 Next.js에서 iframe을 활용해 유니티 빌드 파일을 렌더링하던 중 배포 환경인 gitlab에 유니티 빌드 파일을 저장할 수 없는 문제가 발생했다.(파일 크기 문제)물론 lfs와 같이 대용량 파일을 gitlab에 저장하는 방식도 있겠으나, 시간이 없었던 관계로 빠르게 해결할 수 있는 방안을 찾아야했다.결론(시도한 방법)1. Next.js를 일종의 proxy 서버로 활용하여 s3에 접근 : 속도가 매우 느려짐2. Docker 이미지 생성시 S3에 저장된 유니티 빌드 파일을 public에 끼워 넣기 : 채택 1번 방식iframe을 통해 S3에 있는 유니티 빌드 파일에 직접 접근시 CORS 오류 발생nity WebGL 빌드 파일은 index.html이 S3에 저장되어 있고, 브라우저가 이를 직접 요청하.. 이전 1 다음
