Youngble_개발스토리

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

pull --rebase 란? 먼저 rebase이 무엇인지 알아보자. 영어 뜻대로 re-base, 즉 re(다시 ) base(기반)을 잡겠다는 뜻이다. 아래 그림을 보면 좀더 이해가 쉽다. 파란색 branch를 develop 이라 생각하고 빨간색 branch를 feature 기능 브랜치라고 생각해보자. 최초 develop에서 feature 브랜치를 만들고 작업을 1, 2, 3 해나갈것이다. 그리고 해당 기능을 완성하고 develop에 다시 PR merge를 할려고할때 최초 develop에서 가져왔을때 이외에 추가된 commit history가 존재한다고 하면(다른 팀원이 작업이나 새로운 기능이 완료되어 develop에 PR merge 된 경우), 왼쪽 그림처럼 rebase없이 git pull 을 할경우 ..

사용 계기 기존에 예전에 있던 분이 eslintrc를 구축하여 그대로 쓰고있었는데 vscode를 사용할때는 .vscode에 extensions.json과 settings.json을 통해 eslint를 기본 formatter로 지정하였지만 팀원들은 vscode가 아닌 웹스톰으로 사용하기때문에 해당 formatter 설정이 들어가지 않았고 그로인해 코드 정렬시 다르게 적용되어 PR 리뷰를 할때 불필요한 + , - 줄이 생기게 되었고, 리뷰하는데 불필요한 에너지와 시간을 쏟게 되는것을 방지하고자 prettier를 설정하기로 했다. (아래 스크린샷과 같은 PR시 불필요 변경사항들) 작동조건 prettier를 사용하는 방법은 간단하다. 다음과 같은 조건을 다 만족해야지만 정상 작동한다 1. prettier 라이브..

상황 iframe안에서 KCP 결제 진행 같은 url path 경로에서 진행되지만 iframe에서 결제프로세싱을 진행하면 history가 쌓임 뒤로가기를 눌러도 같은 주소로만 찍힐뿐 여러번 눌러야 예전페이지로 가게됨 해결방안 1. nextjs에서 router기능으로 beforePopState, routeChangeStart 등을 이용하여 라우트 변화 감지에 따라 로직을 짤려고 했음 2. 하지만 뒤로가기를 눌러도 같은 페이지 path이고 트리거가 먹히지 않아 해당 메서드를 사용해도 안되었음 3. iframe속성을 찾아보고 가능한지 보았지만 실제로 되는 부분은 없음 4. history를 이용해서 스텍을 알수있다면 그걸로 컨트롤 하기로 함 5. history.length를 이용하여 iframe 안에서 결제 이..

[원인] 순수 video 태그 영역으로 재생하는게 아닌 썸네일 이미지를 사용하여 videojs 라이브러리를 사용 재생시 풀스크린을 하려고 video 태그는 width: 0, height: 0 으로 하고 아래와 같이 썸네일 image를 서버에서 가져와 style 적용함 2. 썸네일 클릭시 숨겨진 해당 video 태그의 ref 로 useRef로 play() 시키고 fullscreeen 메서드 실행시켜 풀스크린시 핸드폰을 가로세로 회전시켰을때 아래와같이 본래 사이즈로 돌아오지 못하는 이슈가 발생 [원인 분석 및 해결 방안] 먼저 videojs 라는 라이브러리를 사용하고 있기때문에 videojs에서 사용하는 속성 또는 이슈가 있는지 체크해봄 videojs의 속성, css를 직접 건드려보았지만 수정할수없었고 풀스..

[상황] 메인홈에서 페이지이동(레슨신청페이지)시 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...

이직한지 아직 1달은 되지 않았지만 어느덧 5월이 되었고 휴일이 긴 오늘 푹쉬며 책도 읽고 맛있는 것도 먹고 비오는날에 짧게 TIL을 작성하면 좋겠다고 생각했다. 들어오자마자 병행해야했던게 두가지였다. 하나는 입사하여 필요한 서류, 사원증, 받을 장비, 보안교육 등 전반적인 회사 교육과 온보딩이였고 하나는 실무적인 파악과 OKR 작성, 노트북 셋팅을하고 어느부분의 업무를 바로 맡아서 진행하는지 등이 이루어졌다. 현재 사용하는 기술스택을 보니 Graphql을 통한 API 데이터 통신을 하는데 단순히 그냥 쓰는게 아닌 타입스크립트대비한 code generator 인 graphql전용 codegen 을 사용하고 있었다. 사용한 경험이 없었기때문에 흥미로웠지만 공부하면서 진행하기에는 시간소요가 있기때문에 있는 ..

들어가기전. 나에게 현재 커리어가 1순위인 만큼 개발서적과 온라인 강의등을 통해 공부를 하느냐고 그외의 것들에 시간을 쏟지 못하는것에 아쉬움이 있었다. 올해 목표 중, 여러분야의 책을 읽고 싶었기에 주말이나 밤에 짧게는 30분, 보통 1~2시간 독서하는데 시간을 보내고 있다. 그 중 철학관련된 주제에 흥미가 있던터라 관련 책들을 온라인또는 종이책으로 리스트를 가지고 있었는데 그 중 유명한 저자 파울로 코엘료의 책들을 읽기로 했다. 감상문은 남기지 않았지만 연금술사을 읽었고 이어 '베로니카, 죽기로 결심하다'를 약 3주정도 나눠 읽은거 같다. 줄거리 및 내 생각 슬로베니아에 사는 베로니카라는 여자 주인공이 죽기로 결심하고 자살을 시도하면서 스토리는 시작한다. 옥상이나 손목을 그어 자살한다면 부모에게 큰 상..

아마 다음주 중으로 입사 확정이 될 것이라고 생각하여 그전에 짧게 회고를 쓰고자 한다. 이직과정이나 어떤걸 느꼈는지는 아마 입사가 확정된다면 다음 회고록에서 쓰도록하고 오늘은 짧게 추가된 도서에 대한 이야기를 해보고자한다. 도서 목록 추가 먼저 그전에도 읽을 책들에 대한 리스트를 정리한적이 있는데 추가적으로 내가 필요하다고 느낀 책들이 추가되어서 그부분에 대해서 써보고자 한다. 1. 기초부터 완성까지, 프론트엔드 by 이재성 이 책을 고르게 된 이유는 프론트엔드만의 책이 있는지를 찾아보다가 알게되어서 사게 되었다. 전반적으로 자바스크립트, css, html에 대한 짧은 기본 지식을 시작하고 있다. 하지만 그런 지식을 위해서 산것은 아니고 거의 뒷쪽 챕터에 있는 내용들을 보고자 샀다. 좀더 심화된 내용으로..