Youngble_개발스토리

적용 전 CLS 및 이미지 최적화 전 왼쪽화면을 보면 아래 컴포넌트 이미지가 먼저 뜨고난후 위의 배너 컴포넌트 그후 동영상 썸네일 파트가 차례로 뜨는걸 볼수있다. 이는 CLS(Cumulative Layout Shift)로 예측적이지 않은 밀림 현상을 나타낸다. 이를 통해 느려보일뿐 아니라 잘못된 클릭 가능성, 유저경험상 일정하지않고 혼란스러운 경험을 줄수있는 단점이있다. 이와같은 원인은 Nextjs를 쓰면서 static 페이지를 미리 만들면서도 dynamic import를 사용함으로써 화면로드는 빠르게 하기위한 장점은 있었지만 메인 홈 이다보니 첫진입에 있어서 dynamic import 이점이 위의 단점을 상쇄하지못하고 현 서비스에는 오히려 독이라고 판단되었다. 적용 후 이를 개선하기위해 static 페..

[상황] 메인홈에서 페이지이동(레슨신청페이지)시 SSR방식일 경우 getServerProps가 완료되기전까지 화면이동없이 정지화면 처럼 보이는 현상 (아래 스크린샷 참고) 2. 사용자 경험상 클릭을해도 작동을 안한다고 생각해서 여러번 누르게되고, 중복 클릭으로 인한 오작동 가능성이 있음, 특히 뒤로가기 버튼클릭시 작동을 안한다고 생각하여 두번 누르게되어 이전페이지가 아닌 2번째전 history 페이지로 이동하게됨 [원인분석 및 해결방안] 1. Nextjs SSR 라우팅 특징으로 라우팅진행 되는동안 멈추어 보이는 현상이 있음 2. 페이지 이동과 이동 완료까지 중간에 로딩UI 가 필요 3. Nextjs 의 useRouter, Router 를 사용하여 처리 routeChangeStart(url, { shall..

[상황] 1. 현재 서비스가 앱의 웹뷰를 통해 진입하여 사용함 2. graphql 를 통한 api 데이터 호출을 함 3. 채팅기능을 위해 폴링 방식으로 진행(이관) 4. addEventListener를 통해 focus, blur 시에 폴링(interval)을 set and clear 5. 새로운 data가 폴링을 통해 들어오면 랜더링에 사용하는 generator 객체에 추가되어 리랜더링됨 6. 리랜더링되는 과정 or 장시간 앱에서 이탈후 진입시, Application error: a client-side exception has occurred 라는 에러 발생 [원인분석, 해결방안] 1. 해당 문제 구글링 검색, Next.js 공식 사이트에 해당 문제 및 해결방법 기재되어있음 https://nextjs...

SEO 최적화는 어느정도 마무리가되어 서비스의 성능 최적화를 위하여 번들사이즈를 줄이기로 하였다. 먼저 찾아본결과 Nextjs build후에 번들의 사이즈를 알기위해서 bundle analyzer를 사용하여 사이즈를 체크하고 사용하지않는 코드와 import들을 Tree Shaking을 진행하면 된다고 하였다. 현재 Nextjs로 진행하고 있기 때문에 @next/bundle-analyzer 라이브러리를 사용하여 번들사이즈를 이미지화하여 볼수 있다. bundle-analyzer를 사용하여 보는 사이즈는 Stat size, Parsed size, Gzipped size 총 3개가 있다. Stat: 빌드된 그대로의 상태 사이즈 Parsed: 번들된 사이즈 Gzipped: 압축된 사이즈 Parsed를 줄이면 Gz..

Router Next.js의 Router는 file-system 기반 File-system? 파일을 만들면 해당 파일이름으로 라우터로 즉각적으로 인지하여 주소와 docking이 된다. pages/ src/pages/ 만약 src/pages 도 있고 pages/ 경로도 있다면 어느게 우선순위가 높고 어떤걸로 인지하는가? 만약 pages/ 가 있다면 이것을 우선순위로 인지하여 실행되고 아래 src/pages는 인지하지않는다. Nested routes pages/products/first-item.js => /product/first-item pages/settings/my/info.js => /settings/my/info 이때 경로 depth가 길어질수록, import 할때 상대경로의 …/../ 등 일정하..

Layouts 여러 page들의 공통 처리 하나의 공통된 layout을 쓰는 경우 Components/Layout.js 컴포넌트 하나를 pages/_app.js 에서 활용하면 됨 만약 여러개의 Layouts을 활용하고 싶은 경우 Components/SubLayout.js Page.getLayout에 getLayout 함수를 제공 Next.js에서 다른 url path로 이동하거나 새로고침시에 전역적으로 사용하는 header, navigator 같은 형식이나, 전체적으로 가져가고싶은 css 등을 설정할수 있게하는 기능이 있다. 이를 전체 한개의 layout으로 쓸 Layout이라는 컴포넌트와 그외에 추가적인 layout을 쓴다면 SubLayout을 만들어서 사용한다. 먼저 Layout.js 컴포넌트를 보면..

SSR : Server Side Render 서버가 그린다. 그린다: 데이터를 가져와서 그린다 서버가 그린다: 서버가 데이터를 가져와서 그린다. SSR을 담당하는 함수 - getServerSideProps 정해진 틀로 props에 원하는 값을 넘겨주면되는데 이때 time에 현재시간을 넣어주었다. 위와 같이 getServerSideProps를 선언하고 Home이라는 컴포넌트에서 {time}을 매개변수로 사용한다. 그리고 jsx return 문에서 해당 time을 출력해보면 아래와 같이 뜬다. 이 getServerSideProps와 페이지 Home 컴포넌트 어디서 작동하는지 알기위해 console.log를 써놨는데 클라이언트 브라우저에서는 아무 로그도 찍히지 않았다. 대신 terminal을 통해 server..

운영 서비스의 SEO, head 설정 등의 문제로 기존 CSR 방식을 SSR 방식으로 바꾸기로 결정하게 되었다. 기존 리액트로 된 것을 NextJs로 마이그레이션 하기전에 일단 기본적인 NextJs 동작방식을 튜토리얼 식으로 해봐야겠다고 생각했다. 다행히 그전에 사놨떤 udemy 강의 리액트 코스중에 NextJs를 사용해보는 튜토리얼+응용배포 까지 있어서 쭉 따라해보았다. 30개 가량의 리스트의 약 3시간 30분 짜리 동영상 코스를 약 3일정도 걸쳐서 다보게 되었는데 해보니깐 참 흥미로운 점이 많았던거 같다. 일단 useEffect을 통한 API요청을 안하고 getStaticProps, getServerSideProps, getStaticPath에서 해당 값들을 객체형식을 return 하는 방식으로 사용..