갯츠비를 이용하여 SSG 통해서 웹 서비스중 클라이언트에서만 작동하는 페이지를 구현하였다. 문제는 여기서 발생 웹서버 없이 정적 파일 호스팅으로만 웹을 서비스하므로 정적 파일이 없으면 클라이언트 사이드에서만 작동하는 URL로는 접근할 수 없다. 예를 들어 /app/admin 같은 경우 /app/admin/index.html 파일이 존재한다. 그 안에서 Router를 통해서 하위 패스를 서비스한다면 /app/admin/users 같은 경우는 직접 브라우저를 통해서 바로 접근할 수 없다. /app/admin/users/index.html 파일은 갯츠비가 만들어주지 않기 때문이다. src/pages/app/admin/index.js // pages 폴더 안에 작성되지 않은 오직 클라이언트 사이드 경로 : 브라..

일하면서 연구원 같이 집중력 있게 제품을 개선하고 향상시킬 방법들을 찾아보고 적용하는 시스템으로 일하고 싶다. 일종의 연구원처럼. 하지만 실상은 공장의 생산라인에서 제품을 만들고 있는 일개 노동자 처럼 느껴질 때가 있다. 개인적으로는 연구원으로써 일하고 싶지만 제품 라인의 노동자 위치에서도 일하며 이 두 포지션을 스위칭 하면서 일할수 밖에 없다고 생각한다. 문제는 이 두 가지 위치중 제품 라인에 들어설 때가 많다는 것이다(비즈니스를 처리해야하기 때문에? 다른 팀이나 직군에서 무언가를 요구하기 바빠서?). 그렇다면 개발자 스스로의 역량이 저하될 뿐만 아니라 제품도 품질이 저하된다. 실험실에서 제품 질을 향상시키기 위해서 어떤 기술들을 걷어내고 도입해야 하는지 분석하고 실험해 보는 반복적인 행위가 필요하다...

웹 스토리지 사용에 관한 지침 - 앱 및 파일 기반 컨텐츠를 저장하려면 cache storage API 사용 - 그 외의 데이터는 indexedDB with idb - session/local storage, cookie 등은 특수성에 맞게 사용되어야 하며 일반적인 data 저장용으로는 권장하지 않음 Chromatic 2.0 - UI를 위한 코드 검토 with storybook useWorker for React webworker redux-toolkit - react redux의 더 쉬운 작성 react concurrent mode - 마이그레이션을 위한 strict mode, createRoot 사용... 그리고 이해를 도와주는 예제 코드 React Testing Library 일반적인 실수 maje..

웹 사이트 속도 향상시키기 CSS 뷰 포트 단위 자바스크립트로 CSS 변수 다루기 iframe 컨텐츠를 HTML에 삽입하기 - 이를 통해서 iframe 컨텐츠를 직접 핸들링할 수 있다. Headless CMS 10가지 기술 스펙 작성 우리가 원하는 목표에 어떻게 도달할지와 어떻게 측정하고 평가할지를 나타내는 총체적인 방법을 작성. *everything of javascript module 프론트 개발자를 위한 보안 지침 slack의 배포 프로세스 react 성능 측정 ECMAScript2020 javascript framework의 비용 더 나은 모바일 경험을 위한 input 테크닉 캐러셀 only CSS :nth-child-of-class 의 대체 .active ~ .active ~ .active { ..

내 삶에 많은 변화가 한꺼번에 찾아와서 2월, 3월은 동향이나 사설을 많이 살펴보지 못함. Redwoods - JAMstack full framework - JAMstack + 데이터베이스(soon) 로 구성된 풀 프레임워크. 프론트 코드와 서버 코드를 동시에 지원하며 곧 데이터베이스도 지원할 예정. 상용구를 최대한 배제하며 최대한 비즈니스에 집중할 수 있도록 설계되었다. 갯츠비의 Rehydration - hydrate와 render의 차이 - hydrate는 이벤트 리스너만 등록 React Typescript 기본 가이드 좋은 품질의 module 작성 가이드 // test.js export const test = { data: havyLogic() } // test2.js export const tes..

드래그를 끝내고 드랍하는 순간 드랍 위치에 따라서 고스트 이미지가 원 위치로 돌아가는 현상이 나타난다. 이는 드랍 위치가 드랍 가능한 위치인지 아닌지를 사용자에게 시각적으로 제공하기 위한 브라우저의 기본 처리 방식이다. 드랍 가능한 위치라는 것을 나타내기 위해서는 ondragover 리스너에서 retrun false 혹은 event.preventDefault() 해줘야 한다. 또한 엘리먼트의 드래그를 통한 위치 수정을 하기 위해서는 top, left, right, bottom 속성을 사용해야 drop 위치를 인식하게 할 수 있다. transform 속성의 translate 값을 수정하여 위치를 변경하면 ondragover 이벤트 리스너가 실행되지 않는다. MDN 데모