반응형 TIL/TIL22 이미지스프라이트 입사 초기에 마크업 공부한답시고 네이버 홈페이지에서 개발자도구 키고 따라치면서 분석했던 적이 있다. 그냥 똑같이 따라치는데, background-image가 이렇게 되어있어서 심히 당황했었다. 그렇게 몇달이 지나고 오늘, 이미지 스프라이트 라는 것을 알게 되었다. 이미지 스프라이트 기법 여러 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법 해당 기법을 사용하면 한번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다. 또한 많은 이미지 파일을 개별로 관리하지 않고 특정 스프라이트 이미지만 관리하기 때문에 유지보수가 용이하다. 우리 회사도 적.. 2022. 5. 13. <input type = file/>에서 value 타입 맞추기(오랜만에 에러핸들링 TIL) onUploadFile(e)} /> /// const onUploadFile = (e: React.ChangeEvent) => { if (!e.target.files) { return; } const { name, type, size } = e.target.files[0]; // const formData = new FormData(); // formData.append('name', name); // if (type.split('/')[1] !== 'xlsv' || type.split('/')[1] !== 'csv' || type.split('/')[1] !== 'json') { // alert('지원하는 파일이 아니오 이걸 토스트로 바꿀것이오 걱정마시오'); // return; // } console.. 2022. 5. 6. TIL : git 브랜치 날려먹은 날 생활코딩에서 괜히 git을 '지옥에서 온 Git' 이라고 하는 게 아니다. 지금까지는 qa를 버전 하나만 진행했다. 때문에 그냥 qa에 git push --force origin HEAD:qa를 이용하여 푸시했다. 하지만 이번 qa일정에서는 v22,v23을 한번에 qa해야하기 때문에 v22,v23을 qa브랜치에 PR을 올려 머지했다. 시간이 지나고 qa수정사항을 반영하기 위해 git pull origin release/v22 를 실행했지만 자꾸 없는 레포라는 메시지만 떴다. 문제는 자동 삭제 기능이었다. 자동삭제기능때문에 살아있어야 할 v22,v23이 날아가 버린 것이다. 다행히도 로컬에 v22가 남아있어서 (v23은 다른분이 작업) v22를 어찌저찌 되살려서 push를 하였다. 그후 다시 v22를 P.. 2022. 5. 4. react-html-parser로 줄내림반영 react-html-parser로 줄내림반영 react-html-parser는 HTML 문자열을 React 요소로 변환하는데 사용되는 라이브러리이다. react-html-parser는 API에서 받은 HTML 문자열을 안전하게 렌더링하거나, 서버에서 렌더링한 HTML을 클라이언트로 전송하여 이를 React에서 사용할 수 있도록 도와준다. 줄바꿈을 반영하려면 html에서는 과 \n을 이용하지만 리액트에서는 \n이 줄바꿈이 아닌 문자열로 렌더링된다. react-html-parser를 사용하면 리액트에서도 \n이 줄바꿈으로 적용된다. 또한 react-html-parser를 이용하면 위험한 dangerouslySetInnterHTML를 사용하지 않고도, html요소로 변환할 수 있게 해준다. //https://.. 2022. 3. 5. 이전 1 2 3 4 5 6 다음 반응형
