Youngble_개발스토리

사용 계기 기존에 예전에 있던 분이 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 을 사용하고 있었다. 사용한 경험이 없었기때문에 흥미로웠지만 공부하면서 진행하기에는 시간소요가 있기때문에 있는 ..