어제 보다 나은 나

모바일 전단지를 제작하는 서비스를 고도화시키는 작업을 진행하다가 버그를 발견했다. 오래전에 만든 페이지의 경우 미리보기용 이미지를 삭제하기 때문에, 미리보기 할 경우 img의 alt 속성의 문자열이 보이는 것이다. 물론 이건 버그가 아닌 정상적인 html의 동작이다. 하지만, 이미지를 표시하지 못한 경우와 이미지가 없는 경우(네트워크 문제 혹은 만료되서 삭제)는 구분해서 처리해줘야 하지 않겠는가. 이때 img태그의 onError 속성을 이용하여 처리를 해주자. const [isGetImgError,setImgError] = useState(false); const onGetImgError = (e)=>{ setImgError(true); }; ... {isGetImgError ? 이미지가 만료되었습니다...

평화로운 나날이 지나던 어느 날, 고객사에서 서비스가 느리다는 CS가 들어왔다. 평소에는 별 탈없이 이용하던 서비스인데 갑자기 느리다니 이게 머선 소리? 라는 생각으로 문제가 되는 페이지에 들어가 봤다. 이슈가 있던 서비스는 웹페이지를 만들어주는 에디터 서비스이다. 원하는 디자인의 모듈로 페이지를 구성하면 고대로 페이지를 제작해주는 서비스인데... 페이지에 들어가보니 이미지가 수십 장이요, 이미지 각각의 사이즈도 수 메가를 넘기는 상황이었다. 이전까지는 이슈가 없었는데 코로나가 끝나가면서 오프라인 행사를 위한 상품 안내 페이지를 제작하다보니 많은 이미지가 들어가게 되고 그러다 보니 화면을 그리는데에 있어 React의 특성상 모든 콘텐츠를 로딩 한후 페이지가 보이니 최초 페이지가 보이는 시간이 10초가 넘..

현재 서비스를 운영하는데에 기존 인프라에서는 api서버, db 등을 하나의 인스턴스에서 운영했다. 서비스 초반에는 충분한 소스였다고 하는데, 지금 보면 한번씩 cpu사용량이 80프로로 튀고 사용량이 늘면서 접속 패킷이 꽤 많이 늘어난 상황이었다. 그래서 우리 팀 인프라 작업했던 동료가 이젠 분리할 때가 되었다고 하면서 작업을 하더니, 빡세게 일하고 잠시 쉬고 있는 나에게 갑자기 신규 인프라에 올라갈 mongodb세팅을 해보라고 하는 것이지 않겠는가. 가만 생각해보니 학원다닐때 ec2에 mysql설치해본 경험과 mysql에서 작업을 하고 그 db를 덤프떠서 다른 팀원의 노트북에 설치해주는 작업을 해본 기억은 있는데, mongo는 해본적이 없는 것이다. 순간 재밋겠는데? 라는 생각에 흔쾌히 승낙해버렸다. 일..

회사에서 일하는데, 개발에서 어떤 요소가 클릭이 안된다는 제보가 들어왔다. 분명 개발자 도구에서 봤을 때 element는 존재하는데 실제로 클릭도 안되고, 요소 선택도 안되는 것이다! 처음보는 상황에 js로 선택을 막아 놨나 했더니 그런 코드는 또 안보인다. 도통 모르겠는 와중에 다른 컴포넌트들과 비교해 보다가 이런 css가 들어있는 것을 보았다. pointer-events: none; 오..처음 보는 css 코드인데 검색해보니 포인터 이벤트 대상이 될 지 선택할 수 있는 옵션이라고 한다. js도 문제 없는데 선택이 안되면 이 속성을 먼저 의심해봐야겠다.

오늘은 회사에서 next.js로 만들어진 페이지의 기능을 추가할 일이 있어서 작업에 착수했다. 주요 골자는 이전 페이지에서 도출된 결과를 다음 페이지로 넘겨주고 그 값에 다른 값들을 입력받아 회원가입을 진행하는 그런 플로우 였다. 그래서 당연히 react에서 하듯이 const router = useRouter(); const {} = router.query; 이렇게 이전 페이지에서 쿼리스트링으로 넘겨준 값을 가져다가 쓰려고 했는데, 페이지 이동 전에 해당 값으로 다른 값을 조회해야할 일이 생겼다. 그래서 export const getServerSideProps(){ const router = useRouter(); } 이렇게 짜면 되겠지 하고 저장을 딱 하자마자 에러가 났다. useRouter는 Hook..

회사에서 페이지 에디터의 신규 기능을 추가해 달라는 요청이 와서 작업에 들어갔다. 간단히 설명하면 우측 에디터에서 값을 입력하면 가운데에 뷰 페이지에 해당 값이 반영되서 보이는 식이다. 근데 예를 들어 input 폼에다가 옵션을 넣어준다 생각해보자. placeholder옵션을 주기 위해서 에디터쪽에서 입력을 하면, 가운데 뷰 페이지에 반영을 해야하니 onChange 이벤트를 걸어줬다. const onChange = (e:React.ChangeEvent)=>{ const value = e.target.value; setState({[target]:value}) } 근데 이러면 어떻게 되냐. 타자를 칠 때마다 상태가 업데이트 된다. 물론 이거가지고 막 느려지거나 하지는 않겠지만, 이런 경우가 점점 많아 진다..

오늘은 next와 씨름을 하며 회사 브랜드 페이지의 신규 기능을 만들어서 개발에 pr을 올려놨다. 우중충했던 날씨도 맑아지고 기분 좋게 코딩을 하다가 순간 뭔가 이상하게 상태 업데이트가 안되는 것이다. 분명 하던대로 했는데 왜 안될까. const [state,setState] = useState([]); const onClick = (e:React.MouseEvent)=>{ ... setState(beforeState=>{ const newData =...; beforeState[index] = newData; return beforeState; }) } 날씨가 좋아졌는데 왜 내 머리 속도 꽃밭이 됐는지.. 여튼 뭐지 뭐지 하다가 앗차차 하면서 스스로의 멍청함에 감탄했다. 자바스크립트의 데이터 타입은 원..

어제는 익스플로어의 마지막 날이었다. 삼가 고 브라우저의 명복을 액션 빔이다. 잘가라 익스플로어 이건 회사에서 우리 브랜드 홈페이지에서 있던 일이다. 어느날 개발에 올라간 페이지의 첫 페인팅 속도가 너무너무 느린 것 이다. 그래서 콘솔을 열고 네트워크탭을 열어 뭘 가져오는데 시간이 이렇게 걸리는지 알아보기로 했다. NEXT로 만들어진 ssr페이지인데 왤케 느리징.. 하고 보니까 이게 왠걸! ttf확장자로 된 폰트가 3메가나 되는 것이다. 그리고 그걸 가지고 오는데 뭔 5초나 걸리네! 그래서 고민했다. 폰트의 크기를 줄여야한다. 그렇다면 어떻게 해야할까. 검색해보니 폰트의 확장자도 이미지처럼 ttf 하나뿐만 있는것이 아니었다. ttf, otf, woff, woff2 이처럼 다양한 확장자가 있었고, 각기 특..

Javascript에는 this가 있다. 이 this라는 것은 사용하는 방식에 따라 뜻하는게 달라 진다. 1. 일반 함수의 this / 일반 함수안의 this는 전역객체를 바라본다. 2. 메소드의 this 메소드안의 this는 메소드를 호출한 객체를 바라본다. 단 메소드를 선언할 때, 일반 함수일 경우에만 호출 객체를 바라보지, 화살표 함수의 경우 상위 스코프의 this를 바라본다. 3. 생성자함수의 this 생성자 함수안의 this는 생성될 인스턴스 객체를 바라본다. 4, this 바인딩 함수 Function.prototype.apply/call/bind 메소드의 첫 번째 인수로 전달한 객체를 바라본다. 엄격 모드에서의 this는 undefined를 값으로 갖는다. 1. 일반 함수의 this funct..

페이지 작업을 하다보면, 요소의 크기나 폰트의 사이즈를 너비비례(vw,vh)의 단위로 주게된다. 근데, 만약에 사용자의 뷰포트가 엄청 크다면? 폰트에 vw를 줬는데 요소 컨테이너의 사이즈는 고정이라면? 내가 원하는 디자인이 나오지 않을 수 있다. 때문에 우리는 max-width같은 최대 너비를 혹은 min-width같은 최소 너비를 설정해주기도 한다. 이를 좀더 쉽게 할 수 있게 해주는 css 함수가 있다. 바로 min()함수와 max()함수이다. min()함수 예를 들어 레이아웃을 width:70%로 잡았을 때, 너비의 상한을 제한하기 위해서는 width: 70%; max-width: 800px 이런 식으로 속성을 주게되는데, 이를 min() 함수로 표현하게 되면, . width: min(70%,800..