만족

CLS(Cumulatie Layout Shift) 누적 레이아웃 변경 수치를 말한다. 예를 들어 img 태그에 가로/세로값을 지정하지 않았을 때, 이미지 로딩이 끝난 이후에야 크기를 추정할 수 있으므로 이미지 로딩 중에는 크기가 0으로 추정되고 로딩이 끝나고 나면 크기가 결정되어 레이아웃의 위치가 변경된다. 네트워크의 속도가 느리거나, 크기를 지정하지 않은 이미지의 갯수가 많은 경우 많은 레이아웃 이동이 발생하고, 레이아웃의 이동은 사용자가 의도하지 않은 항목의 클릭과 같은 문제로 UX가 저해된다. 이것을 수치화시킨 것이 CLS 수치이다. (lower is better) CLS 측정하기 크롬 개발자 도구의 lighthouse 를 이용해 측정할 수 있다. 이미지와 글밖에 없는 간단한 html이지만 벌써부터..

전면 광고가 성공적으로 로딩되었음에도 로딩되지 않는 현상이 포착되었다. 조건 만족 시 전면 광고 로딩이 실패하거나 표시된 후 다음 동작이 실행되었기 때문에 매우 치명적인 문제였다. 오류 설명 코드에서는 전면 광고를 담당하는 로직을 분리해 별도의 클래스에서 관리하고 있었다. public void load(Context context) { mInterstitialAd = new InterstitialAd(context); if (BuildConfig.DEBUG_MODE) { mInterstitialAd.setAdUnitId("ca-app-pub-3940256099942544/1033173712"); } else { mInterstitialAd.setAdUnitId("AD_UNIT_ID"); } mInters..

골든래빗 출판사로부터 책을 제공받아 작성했습니다 -골든 래빗 출판사- 소위 말하는 '고수' 분들의 이야기를 담은 책이다. 작년에 대학을 졸업하고, 올해 개발자로서 1년차를 맞이하게 되었기 때문에 어떻게 내 커리어를 만들어갈 지에 대한 고민이 많던 중 이라는 책의 리뷰어를 신청해 선정되었다. 어떤 내용인가? 사실 책의 표지에서 풍기는 분위기로는 딱딱하게 풀어갈 줄 알았지만, 저자와 커피 한잔 하며 궁금한 것을 대답해 주는것만 같은 편안한 분위기로 내용이 진행된다. 책의 추천사에서도 말했듯이, '꼰대스럽지 않게' 생각의 방향을 제시해준다. 목차 1. 덕업일치를 넘어서 2. 오류를 만날 때가 가장 성장하기 좋을 때다 3. 소프트웨어 디자인 원칙 4. 나의 메이저 버전을 업그레이드하는 마이너 원칙들 5. 이직,..

갑자기 정책 위반 관련 메일을 받고 수익창출이 아예 틀어막혀버렸다. 원인 파악과 의심되는 원인을 수정하는 과정을 소개한다. (정확한 문제를 알려주지 않아 추정해서 수정해야 한다) 원인 파악 1: 다른 액티비티에 의해 전면 광고가 가려질 수 있음 현재 사용중인 광고는 전면 광고, 배너 광고, 네이티브 고급 광고이다. 배너 광고와 네이티브 고급 광고는 구조적으로 가려질 수 없었기에 전면 광고를 의심했다. 내 앱의 전면 광고 표시 로직을 요약하면 다음과 같다. 1. 액티비티를 새로 여는 동작이 감지됨 2. 액티비티를 여는 동작을 인터셉트하여 중지시키고, 전면 광고 데이터가 로딩 완료되었는지 체크 3-1. 예) 전면 광고를 표시하고 광고가 닫힌 후 액티비티 여는 동작 마저 실행 (3-1이 한번 실행된 이후에는 ..

컴알못, AS 편의성을 중요하게 생각하는 사람들을 대상으로 하여 '사무용~가벼운 작업/게임이 가능'한 '국내 AS 지원이 좋은' 울트라북 노트북을 소개한다. 어차피 컴잘알들은 알아서 찾을 수 있잖아... 2023.02.06~14까지 진행되고, 여름 전까지는 아마 없을 것 같으니 이번에 구매하는게 좋다. https://www.gmarket.co.kr/e/bigs/digital/tab4 [G마켓] 디지털·가전 빅세일! 올해 최고의 쇼핑찬스 단 9일, 누구나 3일마다 최대 20만원 할인 혜택! www.gmarket.co.kr + 돈받은거 없고 노트북 바꿀까 고민하면서 그냥 정리해봤다. 삼성 갤럭시북2 NT550XEZ-A58A (49만원) http://item.gmarket.co.kr/Item?goodscode..

렌더링 타임에 state의 갯수가 달라져서 발생하는 오류다 const Mycomponent= ()=>{ const [foo, setFoo]= useState(''); if(foo!== ''){ const [bar, setBar]= useState(''); } return ( setFoo('foo')}>버튼); } 위 코드에서는 버튼을 클릭하기 전에 state가 한 개(foo) 였다가, 버튼을 클릭하고 나면 const [bar, setBar]= useState(''); 에 의해 state가 하나 더 생긴다. 이런 경우 발생하는 오류이므로, state의 갯수는 조건과 관계없이 동일하도록 변경하고, 그 state에 따른 사이드이펙트를 조건부 처리하는 방식으로 수정한다.

프로젝트에서 githook을 이용해 커밋 전 검사를 하고 있다. yarn eslint ./src --cache && tsc --noEmit && yarn test 3개의 커맨드가 모두 정상적으로 종료되어야만 커밋되고, 이 작업들은 현재 의존성을 가지고 있어 이전 작업이 끝나야만 다음 커맨드가 실행된다. (yarn eslint ... > tsc ... > yarn test...) 정말 의존성이 필요할까? eslint는 js, jsx파일의 코드 포맷 검사, tsc는 ts, tsx파일의 코드 유효성 검사, test는 테스트를 수행한다. 사실 이들의 순서가 바뀌어도 상관없고, 심지어는 동시에 실행되어도 결과에는 영향을 미치지 않는다. 위 명령을 실행하면 약 20~30초가량이 소모되는데, 점점 프로젝트의 규모가 ..

웹 개발을 하다보면 특이한 경험을 한 적이 있을 것이다. 김흥국이 나온 대학교는? 구글로 이동 예를 들어, 이 코드에서는 처음에 '김흥국이 나온 대학교는?' 이 표시되고 3초 뒤 '으아 들이대 ㅋㅋ'가 표시된다. ㅋㅋㅋ 그렇다면 다른 페이지로 이동한 다음 뒤로가기로 페이지로 돌아오면 어떻게 될까? 여전히 '김흥국이 나온 대학교는' 이 표시되고 3초 뒤 '으아 들이대 ㅋㅋ'가 표시될까? 로딩도 없이 바로 '으아 들이대 ㅋㅋ'가 표시된다. 어떻게 된 일일까 bfcache(back/forward cache)가 작동했기 때문이다. 브라우저에서는 조건에 맞으면 페이지를 벗어나기 전에 memory snapshot을 찍어두고, 다시 돌아왔을 경우 이를 복원해 사용자에게 표시한다. 리소스를 다시 다운로드하고, 스크립트..