새롭게 알게된 것들 6

Subresource Integrity (SRI) 적용 경험

문제의 발생블록체인 기술을 활용한 NFT마켓 및 DeFi 를 서비스하는 회사에 프론트엔드 개발자로 근무하던 때 였다. 여느 때 처럼 프로젝트 개발을 하고 있던 중, 팀원 한 분이 운영환경 웹사이트 기능이 이상하게 동작한다고 공유해주셨다. 자세하게는 DeFi 기능 중에 token swap 과정에서 사용되는 블록체인 주솟값이 우리측에서 사용하는 주소가 아닌 다른 주소가 표기된다는 내용이었다. 이 상황에서 사용자가 해당 기능을 사용하게 될 경우, 사용자가 swap 하려는 token 및 트랜잭션 수수료가 다르게 표기된 주소로 전송되게 된다. 금융 계좌거래와는 달리, 블록체인에서 다른 주소로 token 을 전송하게 되면 해당 token 은 완전히 유실돼 버린다. 이는 금전적으로 피해가 발생하는 매우 심각한 상황..

Client-side rendering(CSR) 구조 웹사이트 검색엔진최적화(SEO) 적용 경험

당시 재직하던 회사에서 운영 중인 웹 프로젝트는 Create-React-App(이하 CRA) 으로 구조를 잡아 개발하고 있었다. 사용자가 웹사이트에 들어와 컨텐츠를 보고 기능을 사용하는데 문제는 없었으나, 웹사이트에 들어오기 전 단계에서는 문제가 있었다. Client-side rendering(CSR) 가 되어 검색엔진 봇이 웹사이트 메타데이터를 크롤링하지 못하다보니, 마켓팅팀에서 기획전이나 이벤트를 위해 페이지 URL 을 외부에 공유하면 해당 사이트에 대한 요약정보 및 미리보기 이미지가 보여지지 않았다. 이를 해결하려면 검색엔진 봇이 우리 측 웹서버에 접근했을 때 Next.js 의 Server-side rendering(SSR) 방식처럼 서버에서 동적 컨텐츠를 포함해 페이지 rendering 을 해야했..

window.history.pushState 로 추가한 뒤, 브라우저 뒤로가기 클릭 시 브라우저마다 다르게 동작하는 증상

사용자가 카카오톡 공유하기를 통한 URL 링크와 같이 외부 링크를 클릭해 웹사이트에 접속하게 되면,접속한 웹사이트 도메인에 해당하는 history 는 현재 페이지를 제외하고는 존재하지 않는다.(history stack 에는 현재페이지의 history만 존재한다는 의미) 그러므로 사용자가 브라우저 뒤로가기를 클릭하면 브라우저의 기본 페이지로 이동하거나 혹은기본 페이지가 존재하지 않는 경우라면 뒤로가기 버튼은 비활성화 되어있다. window.history.pushState 혹은 replaceState 를 사용하면, 사용자가 웹사이트 최초 접속 후 브라우저 뒤로가기를 해도현재 웹사이트에 다른 페이지로 이동되도록 개발자가 의도하여 브라우저 history 를 추가할 수 있다. 이 기능을 작업한 뒤 확인하는 과정에..

Typescript Parcel Tilde(~)경로 적용 시, Resolver Error 해결 (삽질기)

오랜만에 삽질기를 올린다. 아직 Typescript 기반으로 React 개발을 해본 적도 없고.. Parcel 번들러도 경험해보고 싶어서 요즘 끄적끄적하고 있다. 오늘 상대 경로를 절대 경로로 변경하기 위해 Parcel 공식문서를 찾아보다 Tilde (~)를 사용한 절대 경로 적용에 대해 알게 되었다. Parcel 공식 Docs Tilde path 바로가기 📔 Module Resolution Getting Started Features 📦 Asset Types Advanced 📔 Module Resolution The Parcel resolver implements a modified version of the node_modules resolution algorithm. Module resolution..

[express] express request.body undefined 문제 해결

express 로 REST API를 만들던 도중 난관에 봉착했다. DB table에 데이터를 INSERT 하기 위해 unit test를 만들고 테스트를 하는데 request 객체에 body가 자꾸 undefined 가 뜨는 것이었다. 처음에는 express router 를 잘못 써서 발생하는 문제인줄 알았다. 허나, router 를 사용하지 않고 테스트를 해봤는데 여전히 증상은 동일했다. router 사용에는 문제가 없었다. 이리저리 해결방법을 찾기위해 express 공식페이지에서 부터 stackoverflow 등 돌아다녔다. 그러던 도중 body-parser 를 알게되었고 설정에 추가했다. 이제는 해결되는가 싶었다. 결과는 기대와는 달리 참담했다. 몇시간 째 붙잡고 있어 머리가 아파 일단 노트북을 덮었..

CentOS 7 설치 삽질기 (feat. boot usb)

오늘 서버구축 담당업무가 주어졌다. 맨날 가상머신에 리눅스 깔고 하던 스킬을 활용할 때가 왔다. + (군 전산병 스킬추가) 는 개풀 뜯는.. 서버 셋팅할 PC를 부팅하니 떡하니 Windows 가 .. 당황하지 않고 CentOS 공식페이지에 들어가 .iso 파일을 받았다. 음... 가상머신에서는 그냥 iso파일을 지정하고 부팅을 하면 바로 설치가 가능하도록 진행됐음에 반해 통짜 PC에 CentOS (이하 리눅스) 설치하려면 부팅 USB 또는 CD가 필요했다. 다행히도 마침 가방에 usb가 있었고 구글링을 하여 usb 부팅이 가능하게 설정하는 프로그램을 설치했다. CentOS minimal 버전이라 그런지 usb 설정하기 까지 약 1분정도 소요됐다. usb를 데스크탑에 꽂은채로 재부팅 + F8 연타타타타닥 ..