전체 글125 [회고] 자바스크립트 + 리액트 디자인 패턴 스터디 레포 : https://github.com/The-survivor-is-strong/coding-study-of-death 2월 4일부터 3월 25일까지 7주간 자바스크립트 + 리액트 디자인 패턴 책으로 스터디를 진행했습니다. 작년 항해 플러스를 같이 했던 인연으로 개발에 열정이 있는 분들과 매주 적정 분량을 읽고 공부한 후 내용을 함께 온라인에서 만나 서로가 얻은 인사이트와 지식들을 공유했습니다. 자바스크립트와 리액트를 실무에서 숨 쉬듯이 사용하지만, 사용할 때 우리가 어떤 디자인 패턴을 사용하는지 전혀 알지 못했기 때문에 이런 의문점들을 해결하기 위해 공부하게 되었습니다. 주로 점심시간에 시간을 잠시 내어 책을 읽고 정리를 하고 그 안에서 원래 알고 있던 지식들과 연결해 생각하려고 노력했습니다.. 2025. 3. 30. [회고] 미방문자 이벤트 프로젝트 1. 프로젝트의 목표저희가 이번에 진행한 프로젝트는 단순한 이벤트 페이지를 만드는 것이 아니었습니다. 미방문자분들에게 정말 좋은 경험을 제공해서 우리 앱을 계속 써보고 싶다는 생각이 들게 만드는 게 목표였습니다. 그래서 평소보다 개발 기간을 더 넉넉히 잡고 진행했습니다. 2. 기술 구현2.1 기술 스택 선정과 선정 이유이러한 목표를 달성하기 위해 다음과 같은 기술 스택을 선정했습니다:React: 터치 이벤트를 부드럽게 처리하고 클라이언트 사이드 인터랙션을 풍부하게 구현하기 위해 선택했습니다.TailwindCSS: 빠른 개발과 일관된 UI를 위해 도입했습니다.Canvas: 복권 긁기의 부드러운 애니메이션과 터치 인터랙션을 위한 핵심 기술이었습니다.2.2 최적화 전략빌드 최적화: 복권 응모/긁기 페이지를.. 2025. 2. 5. FOUT(Flash of Unstyled Text) 웹 페이지를 만들다 보면 폰트가 늦게 적용되어 발생하는 FOUT(Flash of Unstyled Text) 현상이 나타납니다. 개발자 도구에서 Fast 4G로 페이지를 로드했을 때 FOUT 현상이 발생했습니다. 사용자들이 처음 진입하여 보게 되는 화면에서 FOUT 현상이 나타나면 텍스트가 깜빡이면서 시각적으로 거슬릴 수 있습니다. 따라서 사용자 경험을 향상시키기 위해 로컬에 저장된 폰트를 프리로딩하고 font-display 속성을 사용하기로 했습니다. 현재 페이지에서 중요하게 사용되는 두 가지 폰트를 link 태그를 통해 프리로딩하고, 동시에 font-display 속성값을 swap으로 설정했습니다. @font-face { font-family: 'KIMMBold'; src: url('.. 2025. 1. 13. [ZIMZIM] pwa로 만들어 보는건 어떨까?(1) ZIMZIM은 사용자가 운동 기록과 음수량을 기록하는 어플이다.하지만 웹어플리케이션일 경우 사용자에게는 사이트에 접속하여 기록을 하는 것이 귀찮을 수 있다.그렇다면 사용자에게 앱으로 제공한다면 편히 이용할 수 있지 않을까?react-native로 구성할 수도 있겠고 아니면 pwa로 구성할 수도 있을 것 같다. 이번에는 pwa로 구성해보기로 했다. 먼저 pwa 플러그인을 설치한다.npm install next-pwanetxt.config.js에 pwa를 사용할 수 있게 설정을 해준다.그리고 public 폴더 안에 manifest.json을 만들어준다.public 폴더 안에 sw.js도 만들어준다.pwa는 https에서만 구동되기 때문에 로컬에서 구동시키려면 인증서를 받아야 한다.먼저 brew install.. 2024. 9. 15. [ZIMZIM] 클라이언트 컴포넌트에는 skeleton ui를 입혀주자 클라이언트 컴포넌트에 skeleton ui를 입혀주었다. 데이터 페칭하는 동안 사용자들에게 빈 페이지를 보여주는 것 보다 skeleton ui를 보여주는 것이 사용자 경험을 높일 수 있기 때문에 추가해주었다. 2024. 9. 14. [ZIMZIM] 클라이언트 컴포넌트와 서버 컴포넌트의 성능 차이는 얼마나 날까? 클라이언트 컴포넌트로 되어있던 것 중 서버컴포넌트로 변경하면 좋을 것을 선별했다.그 중 하나는 대시보드 페이지였다. 대시보드 페이지에는 총 3개의 차트가 있었고 클릭하면 다른 페이지로 이동하는것 외에는 다른 사용자와의 상호작용이 없었기 때문에 서버컴포넌트로 변경했다. next.js에서는 이렇게 사용자와의 상호작용이 적고 데이터를 보여줄 경우 서버컴포넌트로 구현할 것을 권장하는데 왜일까 그 이유를 생각해봤다. 미리 데이터를 받아와 사용자에게 보여줄 수 있다는 점에서 권장하는것 같아 대시보드페이지에서 차트들을 클라이언트 컴포넌트, 서버컴포넌트일 때 Lighthouse에서 측정했다. 클라이언트 컴포넌트와 서버컴포넌트를 비교했을 때 성능은 +2점, FCP(Fist Contnetful Paint) +0.3초,.. 2024. 9. 11. 이전 1 2 3 4 5 ··· 21 다음
