et cetera/Trouble Shooting
-
Parcel이 tsconfig의 path alias를 인식하지 못하는 문제et cetera/Trouble Shooting 2022. 1. 22. 19:22
■ 상황 Parcel-bundler를 typescript와 함께 사용하면서, path alias를 사용하기 위해 tsconfig 파일의 'paths' 속성을 다음과 같이 설정했다. { "compilerOptions": { "baseUrl": ".", "paths": { "@src/*": ["src/*"], }, } 하지만 원하는 대로 동작하지 않고 계속해서 에러가 발생하는 상황. ■ 상세 에디터에 컴파일 에러는 발생하지 않는데 빌드 과정에서 에러가 발생하는 것을 보니, tsconfig의 path alias 설정을 parcel은 인식하지 못해서 문제가 발생하는 듯 하다. (tsconfig 파일은 typescript 설정 파일이니깐) 이에 대해, 내가 찾은 해결책은 babel의 plugin을 사용하는 것. ..
-
Parcel의 Cannot find module './style.module.scss' or its corresponding type declarations. 에러et cetera/Trouble Shooting 2022. 1. 17. 13:37
■ 상황 parcel로 번들링한 타입스크립트 프로젝트에서 css modules를 사용하기 위해 파일을 만들고 import를 했는데 'Cannot find module './style.module.scss' or its corresponding type declarations.' 라는 ts 에러가 발생하면서 타입스크립트가 css 모듈을 찾지 못하는 상황이 발생했다. ■ 상세 parcel에는 css 모듈 기능이 기본으로 탑재되어 있지만, 타입스크립트는 이를 알지 못하기 때문에 parcel.d.ts 파일에 모듈의 타입을 선언하여 타입스크립트에게 알려주도록 하자. // parcel.d.ts declare module '*.module.scss' { const value: Record; export default..
-
click 이벤트보다 blur 이벤트가 먼저 발생하는 문제et cetera/Trouble Shooting 2021. 12. 24. 04:01
■ 상황 드롭다운 input 컴포넌트를 직접 구현하는 상황이었다. input 하단의 드롭다운 메뉴에 있는 item들에게 click 이벤트를 걸어놨고, input에서 focus가 다른 쪽으로 옮겨가면, 즉 blur가 되는 순간 드롭다운 메뉴가 사라지게끔 구현을 해놓은 상황. 드롭다운 메뉴를 펼쳐서 item을 클릭하려고 했는데, 갑자기 드롭다운 메뉴가 사라져버렸다. ■ 상세 드롭다운 메뉴의 item에 걸린 click 이벤트가 발생하기 전에 input의 blur 이벤트가 먼저 발생했기 때문. mouse를 누르고나서, 눌렀던 손가락을 떼는 순간 mouseup이 발생하면서 동시에 click 이벤트가 발생한다. 그 예로, 버튼에 onclick 이벤트를 달고 버튼을 꾹 누른 채 마우스를 떼지 않으면 click 이벤트..
-
모바일에서 Webpack-dev-server에 접근하지 못하는 문제et cetera/Trouble Shooting 2021. 9. 30. 19:54
■ 상황 Webpack-dev-server에서 돌리는 로컬 서버에 모바일 기기로 접근할 수 있다고 해서, 나도 시도를 해봤는데 접속이 되지 않았다. 참고로 Windows 10을 사용하고 있는 상황. ■ 상세 현재 사용중인 Wi-fi의 속성 탭으로 들어가서 네트워크 프로필을 개인으로 설정해주면 된다. 내 경우에는 네트워크 프로필이 공용으로 설정되어 있었기 때문에(왜 그랬지?) 안되고 있었던 것. ■ 비고 모바일 반응형 UI를 구현할 때 맨날 개발자 도구에서 확인하기만 했는데, 실제로 모바일로 접속해야 알 수 있는 문제들이 제법 있더라. 그래서 모바일에서 프로젝트를 구동해야 할 필요성을 느꼈고, 마침 모바일에서 webpack-dev-server에 접근할 수 있다는 얘기를 듣고 시도해보았다. webpack.c..
-
Webpack cli가 종료되지 않는 문제et cetera/Trouble Shooting 2021. 9. 24. 18:41
■ 상황 Webpack에다가 플러그인을 몇 개 추가해주고 나서 빌드를 수행했는데, ('npm run build' 같은 스크립트를 통해 빌드를 수행했다) 빌드가 완료된 이후에도 터미널이 원래대로 되돌아오지 않았다. 즉, 빌드가 완료되었다는 메시지가 떴는데도 Webpack의 수행이 종료되지 않았다. ■ 상세 원인은 바로 WebpackBundleAnalyzer였다. WebpackBundleAnalyzer를 서버 모드로 수행하고 있어서, 빌드가 완료된 이후에도 Bundle 결과를 보여주기 위해 계속해서 서버를 돌리고 있었던 것. 결과적으로, WebpackBundleAnalyzer를 development 모드일 때만 실행하게 함으로써 문제가 해결되었다. 다른 해결 방법으로는 서버 모드 말고 html 파일을 생성하..
-
fetch API 사용 시 headers가 비어있는 문제et cetera/Trouble Shooting 2021. 6. 11. 18:46
■ 상황 장바구니 미션에서, fetch API를 사용해서 장바구니에 상품을 추가했다. 상품을 추가하고나면 cart_id가 response headers의 location에 담겨서 날아오게끔 API가 구현되어 있었다. 그래서 response를 그대로 console.log 찍어봤는데, headers 안에 아무것도 들어있지 않았다. 하지만 다른 크루들의 결과물을 보니, axios의 response headers에는 원하는 값이 담겨져 있었다. fetch(API_URL.CART, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ product_id: product.product_id, }), }) ...