CRA 없이 Webpack을 설정하여 작업 진행 중에 이미지를 import 해야 할 일이 생겼는데, 이미지 import를 하기 위해서 별도의 웹팩 설정이 필요했다. Webpack 4버전에서는 file-loader를 이용했지만 Webpack 5 버전 부터는 새로운 모듈이 추가되어 로더 없이 진행 할 수 있었다. 웹팩5 assets modules 설정 방법을 찾아봐도 file-loader를 이용한 방법이 대부분.. 또 빌드를 했을 때 이미지의 폴더구조가 동일해야 했는데 이 조건을 맞추기 위해 어떻게 해야하는지 넘무 어려웠다. 먼저 나의 assets 폴더 구조는 아래와 같았다. src / assets / images / 이미지 파일 아래 코드는 웹팩의 다른 설정부분들을 제외한 assets 모듈 설정만 남겨놓은..

웹 워커를 사용하는 환경에 놓여 이에 대하여 알아보았습니다. 사용방법에 초점을 맞춰 정리했습니다. 😊 자바스크립트는 싱글 스레드입니다. 데이터 처리 시간이 길게 소요되는 작업이 실행되면 해당 연산이 마무리되기 전까지 다른 이벤트를 실행하면 동작하지 않습니다. 이때 유저 입장에서는 불편함을 느낄 수 있는데 WebWorker를 이용해 백그라운드 스레드로 해당 이슈를 개선할 수 있습니다. 또한 웹 워커에서는 DOM 컨트롤을 직접적으로 할 수 없기 때문에 결과를 전달받아 사용해야 합니다. 다른 예제들에 해당 기능을 지원하는지 확인하는 코드가 있어 확인해봤는데 잘 지원되는 것 같다. 개발 중인 서비스의 지원 브라우저를 확인하고 작업하면 좋을 듯합니다! 사용 환경 1. React 17.0.2 2. vite 2.72..

업무 중에 해결하기 위해 골머리를 앓았던 일을 회고하고자 합니다. 먼저 어떤 이슈였냐면 모바일기기에서 PC URL 접속 시 모바일 URL로 보내주고 있는데, 삼성 브라우저에서 모바일 URL로 리다이렉팅 되었을 때 뷰포트가 깨지는 현상이 있었습니다. 문제 해결과정 1. 삼성 브라우저 조사 삼성 브라우저에서만 발생했기 때문에 별도의 설정이 필요한지 찾아보았습니다. 이 과정에서 찾은 결과는 삼성 브라우저와 크롬 브라우저는 개발자가 설정한 확대 방지 옵션을 무시할 수 있는 기능이 있는데 삼성에서는 기본값으로 설정되어있고 크롬에서는 선택 값으로 설정이 되어 있었습니다. 삼성 브라우저에서도 해당 옵션을 끄면 이슈가 재현되지 않았지만 코드로 브라우저의 해당 기능을 끄거나 할 수 있는 방법을 찾지 못했고 작성 된 코드..

cmd : 'webpack'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. powershell: webpack : 'webpack' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 윈도우에서 webpack 설정중 발생한 에러이다. 분명 나는 webpack과 cli를 설치를 했고.. 명령어는 먹지 않고.. 검색을 하면 여러 해결 방법이 나오지만 나에게 해당되지 않았고 스택오버플로우에서 발견한 것으로 하니 해결되었다 사랑해요,,스택오버플로우.,.,..... 1. 먼저 웹팩을 글로벌로 설치한다. - npm install web..

input에 background가 설정되어 있지 않은데 자꾸 background-color가 적용되는 현상이 있었다. input에 아이콘이나 이미지가 들어가 있을 때 input 영역 값에 저 색이 들어가니 몹시 불_편했다. 찾아보니 자동완성 기능을 사용 할 때 생기는 스타일링이였다! input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow:..

스크립트 코딩 컨벤션을 정하던 중 css 컨벤션에 대하여 이야기가 나왔다. css 컨벤션이 있을거라고 생각하지 못했다. 중요하지 않다고 생각했기 때문인가.. 이야기가 나온 김에 css 컨벤션 및 스타일 가이드에 대하여 알아보았다. 유용한것 같은것만 몇개 정리해보았다. CSS에서 캐멀케이스(camelCase)는 좋지 않다. css는 하이픈을 구분자로 사용하는 프로퍼티로 되어있다. .class-name { border-bottom: 1px solid #fff; font-size: 1rem; } 2. XHTML은 소문자를 사용하는 언어이다. 케밥 케이스를 사용하는것이 표준적이며 일관성을 유지 할 수 있습니다! border: none 대신 0을 사용하자. 평소에 별 생각 없이 none을 이용해왔다. 모든 inp..

next + firebase 조합으로 채팅창을 작업하던중에 , 새로운 메세지를 입력할 때 마다 가장 아래로 스크롤을 보내는 기능이 필요했다. useRef를 이용해 DOM에 접근해서 scrollIntoView()를 이용해 입력때 마다 아래로 이동하게 하려고 했는데.. 아무리해도 작동을 하지 않았다. 처음 내가 작성했던 코드는 아래와 같다. (스타일,구조 완성된 코드아님 주의) { messageList?.docs.map((e, i) => { const data = e.data() const date = data.createdAt?.seconds ? formatDate(new Date(data?.createdAt.seconds * 1000)) : null return ( {data.userName} {date..

사이드 프로젝트를 위한 프레임워크 및 필요 라이브러리 설치 과정입니다. 기존에는 react/ts + redux saga + node.js를 사용하여 작업을 했지만 사이드 프로젝트에서 새로운것들을 공부해보기 위해 해보지 않았던 프레임워크와 라이브러리를 이용해보기로 했습니다. 1. Nextjs 2. Recoil 3. TypeScript 4. styled component 5. antd 6. jest 7. firebase 처음 사용해보는것들은 nextjs, recoil, jest, firebase입니다. 전부다 사용해볼수 있을지 둑은둑은....... next js는 서버사이드 렌더링이.... 어쩌고는 여기저기 많으니 해당 프레임워크,라이브러리 세팅 과정만 정리합니다. 1. npx create-next-app ..

Do not pass children as props. Instead, nest children between the opening and closing tags react/no-children-prop 옛날 코드를 가지고 오던중에 해당 에러를 만났다. 기존 코드는 위와같이 Children props를 태그안에 보내는 형식이였는데 self closing 형태로 되어 있었다. 이 부분이 문제가 되었고 해당 코드를 end tag 형태로 수정하여 에러를 잡았다.

React에서는 useRef를 이용해 특정 DOM을 선택할 수 있습니다. useRef에 대해서는.... 검색하면 많은 자료가 나오니 패스합니다. input에 기본 값을 주고 포커스 되었을 때 커서를 가장 뒤로 보내주기 위해 useRef를 사용하였고, 그 과정을 소개하고자 합니다. 먼저 antd의 input 태그를 사용하였으며, focus 안에 있는 cursor 객체는 antd에서만 되는듯 했다. 일반 input태그에서는 확인해보지 못했습니다.. 만약 일반 input에서 저게 안된다면 useRef.current로 console.log 찍어 보시면 해당 input의 value를 받아 올 수 있습니 다. 그 value의 length값을 가지고 useRef.current 안에 있는 selectionStart ,..