전체 글92 상하좌우 중앙 정렬시키기 기준 1. Flexbox 사용 .parent { /* 상하좌우 정중앙 정렬하기 */ display: flex; justify-content: center; align-items: center; } .child { } 2. CSS의 Transform과 Translate 사용 .parent { /* 설정 */ position: relative; } .child { /* 상하좌우 정중앙 정렬하기 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } [참조 URL] https://www.freecodecamp.org/korean/news/cssro-mueosideun-jungang-jeongryeolhaneun-bangbe.. 2023. 8. 22. 구글 애널리틱스 적용하기 2편(react-ga4) > 구글 애널리틱스 GA4 적용 (230710) 2023년 7월 1일부터 유니버셜 애널리틱스 속성이 데이터를 수집하지 않습니다. 대신 Google 애널리틱스 4 속성을 만드는 것이 좋습니다. 구글 애널리틱스가 드디어 결국 GA4를 사용해야 하는 날짜가 되었고 그에 따라 기존 유니버셜 ID를 추적했던 react-ga 라이브러리에서 react-ga4로 변경하였다. https://www.npmjs.com/package/react-ga4 다행히도 변경사항이 그리 많지않아 기존 글에서 수정만 하였다! 1. 리액트와 구글 애널리틱스 연결하기 배포할 때 포함되는 dependencies에 설치 $yarn add react-ga4 $npm install react-ga4 --save 2. 추적 ID를 환경변수로 저장하기.. 2023. 7. 10. [flutter] webview시 http 접근 허용해주기 보안정책으로 인해 android나 ios에서 http연결은 기본적으로 차단되어 있다. 따라서 https가 아닌 http를 사용하는 페이지를 웹뷰에서 열고 싶다면 추가적인 설정을 해주자. android (AndroidManifest.xml) /* 2023. 6. 13. [Flutter] 안드로이드 앱 배포하기 Flutter에서 하이드리드 앱 개발시 구글 플레이스토어에 비해 iOS 앱스토어에 배포하는 방법은 비교적 간단했다. iOS 앱스토어 배포는 따로 키를 서명할 필요없이 xcode에서 Product > Archieve 해주고 Distributed App을 누른 뒤, AppStoreConnect에 업로드해주면 끝난다. 물론 Archieve를 누르기 전까지 여러가지의 에러 상황이 있었지만.. 에러 상황은 따로 기록해두기로..! 앱 아이콘(런치 아이콘) 등록 관련 내용은 여기선 생략! 이제 구글 플레이스토어 배포 과정을 살펴보자~ > (안드로이드) 앱에 디지털 서명하기 Google Play 스토어에 출시하기 위해서는 반드시 앱에 디지털 서명을 해야한다. 1. KeyStore 만들기 2. 앱으로부터 KeyStore.. 2023. 5. 25. Cannot find module 'typescript' or 'ts-node' > Cannot find module 'typescript' 시 $npm install -g typescript $npm link typescript > Cannot find module 'ts-node' 시 위의 typescript 모듈이 먼저 전역 설치가 된 이후 진행한다. $npm install -g @types/node $npm install -g ts-node [참조 URL] https://github.com/TypeStrong/ts-node/issues/707#issuecomment-645757008 2023. 5. 7. [Xcode] The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation. > 이슈 flutter 프로젝트를 통해 xCode를 빌드시, 아래와 같은 에러가 뜰 수 있다. The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation. > 해결 1. Xcode 종료 2. 터미널 켜서 프로젝트의 경로를 잡아주고(flutter라면 /ios) 3. rm -rf Pods 4. rm -rf Podfile.lock 5. pod install 6. 확장자가 프로젝트명.xcodeproj가 아니라 프로젝트명.xcworkspace로 xCode를 열어준다 7 .product -> clean 을 해주고 실행하면 해결 [참고 URL] https://amajoy.tistory.c.. 2023. 4. 10. [Flutter] Cannot resolve symbol 'Properties' Flutter 프로젝트를 생성하면 android > app > build.gradle 파일에서 에러가 나타난다. 에러 메시지는 Cannot resolve symbol 'Properties'이다. 우선 안드로이드 스튜디오에서 File > Project Structure로 들어간 후 Project Setting에서 Modules를 선택하고 이어서 프로젝트명_android를 선택하면 원인을 확인할 수 있다. No SDK 안드로이드 스튜디오에서 플러터 플러그인으로 생성한 프로젝트의 Android API 버전과 설치된 API 버전이 달라 발생하는 문제로 보인다. Module SDK에서 사용해야 할 SDK 버전을 선택하면 된다. 위 화면에서는 33이 적절한 선택이다. 없으면 SDK를 설치하자. "OK" 버튼을 클릭.. 2023. 4. 10. [Xcode] Unable to load contents of file list: '/Target Support Files/Pods-Runner/Pods-Runner-frameworks-Release-input-files.xcfilelist' > 이슈 프로젝트에서 flutter를 사용중인데, androidStudio에서 Open iOS module in Xcode를 클릭하여 xCode를 실행한 후 build 버튼을 누르면 아래와 같은 에러가 발생한다. Unable to load contents of file list: '/Target Support Files/Pods-Runner/Pods-Runner-frameworks-Release-input-files.xcfilelist' > 해결 해당 프로젝트 터미널에서 /ios 경로로 이동한 후 아래 코드를 하나씩 적용하면 해결! $npx pod deintegrate $npx pod update [참고 URL] https://developer.apple.com/forums/thread/710440 2023. 4. 9. [Flutter] A problem occurred evaluating project ':app'. > path may not be null or empty string. path='null' 안드로이드 에뮬레이터를 키고 어플을 실행하는데 갑자기 다음과 같은 에러가 발생했다. * Where: Build file '/Users/kim-wooyoung/Desktop/.../android/app/build.gradle' line: 66 * What went wrong: A problem occurred evaluating project ':app'. > path may not be null or empty string. path='null' > 원인 원인을 찾아보니 android\app\build.gradle 파일의 signingConfigs와 buildTypes에 있는 release 부분 때문에 발생한 에러였다. > 해결 /* signingConfigs { release { // 생략 } } bu.. 2023. 4. 9. 이전 1 2 3 4 5 6 ··· 11 다음
