웹 프론트엔드59 Vite : vite-plugin-static-copy를 통해 정적 파일 복사하기 개요 이번 시간에는 Vite를 통해 프로젝트를 진행하던중에 정적파일 복사를 위해 사용한 패키지에 대해 한번 소개해보도록 하겠습니다. vite-plugin-static-copy 패키지 Vite에서 복사를 위해 vite-plugin-static-copy 라는 패키지를 사용하였는데요, 해당 플러그인을 통해 Vite 프로젝트에서 정적파일을 복사하거나 프로젝트에 추가할 수 있습니다. vite-plugin-static-copy rollup-plugin-copy for vite with dev server support.. Latest version: 1.0.0, last published: a month ago. Start using vite-plugin-static-copy in your project by ru.. 2023. 12. 22. React Native : 다른 Screen 이동후 돌아왔을 때 새로고침 방법 (stack screen / tab screen) React Navigation 사용 시 원래 화면으로 돌아왔을 때 새로고침 React Navigation의 Stack Navigator 이나 BottomTab Navigator을 통해 화면이동을 하고 난 뒤 원래 화면으로 돌아왔을 때 원래 Screen 의 화면을 새로고침해야 할 때가 있습니다. 하지만 React Navigation의 Navigator를 통해 화면이동을 할때, 기존의 상태를 저장하기 때문에 다시 원래 화면으로 돌아온다고 해도 화면 컴포넌트의 라이프사이클이 다시 수행되지 않아서 새로고침이 되지 않는 문제가 있습니다. 저도 개발을 하던 도중에 원래 Screen으로 돌아올 때마다, AsyncStorage에서 데이터를 갱신해야 하는 상황이 생겼었는데요, 이러한 경우에 어떻게 해결하면 좋을지 한번 .. 2023. 8. 30. React Native: 안드로이드 빌드시 mergeLibDexDebug 개요 React Native를 통해 안드로이드 빌드를 진행할때 mergeLibDexDebug 에러가 발생하였습니다. mergeLibDexDebug 에러가 무엇인지 알아보고 해결법을 간단히 공유해보겠습니다. 문제점 여러가지 문제가 있지만 보통 아래와 같은 이유로 발생한다고 합니다. Dex 메서드 제한 초과 => 의존성 패키지들에서 사용하는 메서드들이 너무 많을때 의존성 충돌 => 다양한 라이브러리와 의존성 충돌. 즉 비슷한 라이브리를 사용하는 경우에 Dex 파일에 중복된 메서드 포함됨. 멀티덱스 설정 문제 => Gradle 플러그인이 여러 Dex파일을 생성하고 하나의 Dex파일로 병합하는 설정에서 문제 발생 해결법 먼저 multiDex 설정상 문제가 발생할 가능성이 있기 때문에 아래와 같이 적용해보았습니다.. 2023. 8. 2. React Native : Animated, Interpolation를 이용하여 Loading Spinner 만들기 React Native를 공부하던 중 Loading Spinner가 필요하여서 구현 방법에 대해 조사를 해보았습니다. React Native에서는 기본적으로 제공하는 Loading Spinner인 ActivityIndicator라는 컴포넌트가 있기는 합니다. ActivityIndicator · React Native Displays a circular loading indicator. reactnative.dev 하지만 React Native에서도 간단한 애니메이션을 구현해보고 이해해 보기 위해서 React Native에서 제공하는 Animated를 이용하여 한번 Loading Spinner를 만들어보도록 하겠습니다. 먼저 간단하게 React Native의 Animated에 대해 알아보도록 하겠습니다. .. 2023. 5. 1. React Native : 빈 화면 터치시 Keyboard 숨기기 React Native를 개발하던 중에 TextInput을 활용하여 Keyboard로 유저의 입력을 받는 부분을 구현하였습니다. 그런데, Keyboard를 띄우고 난 뒤에 빈 화면을 눌렀을때 Keyboard를 숨기게 하는 방법을 몰라서 조금 검색을 해보았는데요, 이에 대해서 오늘은 유저가 빈 화면을 터치시 Keyboard를 숨기는 방법에 대해 간단히 알아보도록 하겠습니다. TouchableWidhtoutFeedback 해결법은 TouchableWithoutFeedback 이라는 React Native에서 제공하는 Component를 사용하면 쉽게 해결할 수 있습니다. TouchableWithoutFeedback · React Native If you're looking for a more extensi.. 2023. 4. 19. React Native : Custom Font 설정하기 사이드 프로젝트를 개발하던 중에 기본적으로 제공하는 Font가 아닌 Custom Font를 적용해야 할 일이 생겼습니다. 한번 이번 기회에 까먹지 않기 위해서 React Native 에서 Custom Font를 설정하는 방법에 대해서 정리해 보도록 하겠습니다. Android에서 설정하기 안드로이드에서 설정은 생각보다 간단합니다. 1) android/app/src/main/assets/fonts 폴더를 생성합니다. 2) 생성한 폴더에 폰트파일들을 추가합니다. 3) 이후 안드로이드를 다시 빌드합니다. (npx react-native run-android) IOS에서 설정하기 1) ios 폴더에 fonts 폴더를 생성합니다. 이후 해당 폴더에 폴더에 폰트 파일들을 저장해놓습니다. 2) xcode상에서는 fon.. 2023. 3. 23. JS: 유니코드 문자열로 인코딩하기, 문자열 이스케이핑이란? (+encodeURIComponent, encodedURI, encodeURIComponent의 차이점) 서론 웹을 공부하다가 encodedURIComponent, decodeURIComponent 라는 window 객체의 메서드를 사용하여, 문자열 인코딩을 해야 할 일이 있었습니다. 그 당시에, 문제 해결을 위해서 어떤 함수인지, 문자열 인코딩이 무엇인지 모르고 복사해서 쓰곤 했는데 한번 정확하게 어떤 개념인지 알아두어야 할 필요가 있는 것 같아서 한번 정리를 해보게 되었습니다. 문자 집합 / 문자열 인코딩 먼저 문자열인코딩에 개념에 대해 알아보도록 하겠습니다. 문자 집합 (Charater Set) 이란 문자와 숫자가 매핑된 표를 의미합니다. Unicode 기반의 utf-8, 한글 코드 기반의 euc-kr 등이 문자집합이라고 볼 수 있으며, 보통 문자를 숫자로 나타내는 rule을 의미합니다. Unicode.. 2022. 12. 28. CSS : 말풍선 만들기 (border 속성) 개요 회사에서 프로젝트를 하다 보니 CSS를 이용하여 말풍선을 만들어야 할 일이 생겼습니다. 간단하게 CSS의 border 속성을 등을 이용하여 만들 수 있었는데요, 해당 방법을 한번 공유해보도록 하겠습니다. 말풍선 만들기 예제 먼저 간단하게 Codepen으로 만든 예제를 공유드리겠습니다. See the Pen Untitled by jungwoole91 (@jungwoole91) on CodePen. Border 속성을 이용하여 말풍선 꼬리 만들기 border의 영역에 대해서만 먼저 한번 설명드리겠습니다. border는 크게 border-top, border-bottom, border-right, border-left로 이루어져 있는데 각각의 영역은 아래와 같습니다. 위 사진은 border-top, bo.. 2022. 12. 20. 모바일 웹 : Device Orientation Event란? ( feat: IOS 13+ 이상에서 Device Orientation Event 권한 얻어오기 ) 개요 Device Orientation 는 모바일 웹에서 기기의 위치나 회전에 대한 값을 얻어올수 있는 이벤트입니다. 보통 모바일웹에서 360도 파노라마 이미지를 보여주거나 Aframe과 같은 3D 프레임워크를 웹에서 사용할때 내부적으로 DeviceOrientation 이벤트가 사용되는 것을 알수 있습니다. 오늘은 모바일 웹에서 DeviceOrientationEvent 이벤트를 요청하는 방법에 대해 알아보겠습니다. DeviceOrientation 이란? Device Orientation은 중력을 기준으로 기기의 물리적 방향의 변화(event)를 뜻합니다. 즉, Device Orientation은 모바일 웹에서 디바이스의 물리적 방향의 변화를 감지하기 위해 사용됩니다. 해당 이벤트를 이용하면 모바일 디바이.. 2022. 10. 12. Webpack : Webpack 빌드후 자동으로 S3로 배포하기 (webpack-s3-plugin) Webpack으로 웹 애플리케이션을 빌드한 뒤에 S3로 업로드를 해야 하는 경우가 있습니다. 보통 S3를 통한 정적 웹페이지 배포를 할 때, 또는 특정한 버킷 위에 Webpack으로 bundling 한 js파일을 업로드해야 할 경우가 있을 때 이러한 경우가 발생하게 됩니다. 수동으로 dist폴더 안에 있는 파일들을 drag-end-drop을 통해 S3로 업로드 할 수도 있지만, Webpack 명령어 사용 후에 자동으로 S3 Bucket에 올려주는 플러그인이 있어 한번 소개해드리도록 하겠습니다. webpack-s3-plugin 오늘 설명해드릴 플러그인은 바로 webpack-s3-plugin 인데요, 아래 링크를 누르시면 npm 설명 페이지를 확인하실 수 있습니다. webpack-s3-plugin Uploa.. 2022. 7. 22. 이전 1 2 3 4 ··· 6 다음
