용용it

이 글을 작성하게 된 계기, 최근 api 사이트를 오픈한 이후, 대기업들은 어떤 코드를 사용할까 궁금해서  네이버에서 개발자 도구 => 소스탭에 가서 소스 코드를 보려고 시도해보았다. 하지만 당연하게도 대놓고 소스 코드를 보여줄 바보들은 아니다. 보안 쪽은 무조건적으로 안전을 기원해야 하기 때문에 당연한 조치이다.그러므로 꼭 코드가 노출되지 않게 감추자,  때문에 본인의 사이트의 코드를 보호하도록 하고자 적용했던 과정을 작성한 것이다.   React & windows 기준 소스 코드를 안 보이게 하는 설정 방법  매우 간단하다. package.json 파일을 수정한다. "scripts" 에서 "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts bui..

이번에는 PageSpeed Insights를 이용하여 배포중인 사이트의 성능을 개선해보자,   우선 검색할 URL을 적고 분석을 누르면   모바일에서의 환경, 데스크톱에서의 환경 두 환경의 점수를 볼 수 있다.  일단 간략하게 성능을 점수로 보여준다. 필자가 배포중인 https://mezzang.com 사이트는  성능 점수 부분에서 pc는 우수하게 나오는데 유독 모바일에서는 어쩐지 점수가 낮게 나온다.     이렇게 자세하게 항목별로 자세하게 나온다!     렌더링 지연 시간이 늘어난 부분 때문에 성능 점수가 낮게 나온 것을 알 수 있다.  사실 블로그 작성하기 전에 사전에 조치를 취한다고 해봤는데전혀 고쳐지지 않았다..ㅠㅠ 이번에는 크롬 개발자 도구를 이용해서 알아보자성능 탭에서 확인 가능하다. 이렇게..

넥슨사에서 OPEN API를 공개했다. (사실 시간은 반년 정도 지난 상태다)  필자는 이 OPEN API를 이용하여  한때 열심히 했었던 게임인 "메이플 스토리" 캐릭터 검색 사이트를 만들었다.(리액트를 이용하여 만들었다.) https://www.mezzang.com 메이플 캐릭터 검색 - 메짱 www.mezzang.com  다른 캐릭터 검색 사이트도 많이 나왔고기능적으로도 우수한 사이트가 많지만  나름 열심히 머리 굴려가면서 인게임과 최대한 비슷하게 검색 사이트를 구성해보았다. 다크모드, 라이트모드에 따라 백그라운드 이미지를 다르게 한 것은 참신한 생각이었던 것 같다  프로젝트를 하면서 gpt의 도움도 많이 받고 처음부터 끝까지 디자인, 구성을 생각하느라 많은 난항을 겪었지만  결국 끝까지 가서 완성..