React

[LostArk Open API] 로스트아크 프로젝트 구상 및 open API 사용하기

로스트아크 Open API 프로젝트 로스트아크는 현재 유저들이 직접 게임 내 정보를 활용할 수 있도록 Open API를 제공한다. 해당 API로 로스트아크의 News, 캐릭터 정보, 길드, 마켓 등 다양한 인게임의 정보를 받아올 수있다. 개인적으로 로스트아크에서 생활 컨텐츠를 즐기는 편인데, 해당 API로 효율 좋은 생활 컨텐츠 방향을 정할 수 있을 것이라고 생각해서 생활 관련 정보를 제공해주는 프로젝트를 진행하기로 했다. 해당 정보를 알려주는 사이트들은 이미 많기 때문에 좋은 성능이라기 보다는 나에게 최적화 된 사이트를 만드는 것이 목적이다. - 참고 사이트 아이스 팽 : https://loa.icepeng.com/ 로아 도구 : https://loatool.taeu.kr/ 현재는 간단한 사이트만 생각..

Virtual Scroll - 가상 스크롤 구현

Virtual scroll 가상 스크롤은 화면에서 보이지 않는 부분의 내용을 출력하지 않고, 화면에 보여질 때만 출력하는 방식의 스크롤을 말한다. 많은 양의 리스트 데이터를 화면에 그리는 경우, 모든 항목을 그리면 성능 상 문제를 초래한다. 예를 들자면 10만개의 데이터를 그리기 위해 10만개의 DOM노드를 그리려고 하면 Call Stack size error가 발생할 것이다. 그렇기에 화면에 직접적으로 보여지는 부분만 그리고, 나머지 부분은 가상으로 그려내는 것이 Virtual Scroll의 목표이다. 이때 새로운 요소들이 렌더링되는 동안 어색하지 않도록, Node padding이라는 여분의 공간을 둔다. 가상 스크롤은 SNS나 커뮤니티 등 무한 스크롤에서 많은 내용 출력할 때 사용하면 유리하다. 구현..