hello! Mingure

모든 프로젝트에서 어떤 형태가 되던 분류, 정리하는 것이 중요하다. 새로운 스타일을 생성할 때마다 파일의 맨 뒤에 코드를 붙여버린다면, 필요한 것을 찾기도 어렵고 협업하는데도 혼란을 줄 수 있다. ID 선택자(#), class 선택자(.) 등 사용할 수 있는 몇 가지 선택자 중에서 무엇을 사용할지는 어떻게 결정하는게 좋을까? 원하는 스타일을 적용 할 적절한 요소는 어떻게 선택해야 좋을까? 웹 사이트의 스타일을 이해하기 쉽게 정리하려면 어떻게 하면 좋을까? 이 때 필요한 것은 범주화(categorization)다. CSS 규칙을 범주화함으로써 규칙에서 패턴이 보이기 시작하고, 각 패턴을 더 적절하게 사용할 수 있게 된다. CSS 5개 규칙 베이스 (Base) 레이아웃 (Layout) 모듈 (Module) ..

리액트로 웹 반응형 개발하다보면, 크롬, 사파리 등 크로스브라우징을 항상 신경써야한다는것은 다들 알고있을 것이다. 그런데, 이 애플이 참 하루가 멀다하고 버전을 업데이트 시키니 IOS 버전 14에서 무시되는것들이 종종 생기는 것 같다. 현재는 버전 16라인이니...참... 이번 이슈는 모바일 채팅화면에서 발생했다. 채팅 하나 자체가 컴포넌트이며, 프로필이미지, 아이디, 내용 전체를 감싸는 container에 display:flex 로 배치한 것이다. 문제가 발생한 IOS 14 버전 핸드폰을 노트북에 연결해서 관리자 도구로 코드 살펴보며 여러가지 원인을 살펴보았다. 1. margin-top/ margin-bottom으로 잡았던 것이 안먹힌 것인가? 간혹, 이미지 아이콘이나 동일한 것을 나란히 붙여놓을 때 ..

flutter 프로젝트를 디버깅 없이 실행 하여 프로젝트 실행하려고 하니 자꾸 이런 에러메시지로 인해 실행이 안됐다. 'impellerc'은(는) Apple에서 악성 소프트웨어가 있는지 확인할 수 없기 때문에 열 수 없습니다.......후.... 시스템 환경설정 > 보안 및 개인 정보 보호 에서 들어가 보니 하단에 허용을 해줘야 했다. 하단 좌물쇠 클릭 > 비밀번호 입력 > 확인 없이 허용 > 다시 vscode 에서 프로젝트 실행 한 여러번 이렇게 하니까 허용도 잘 되고, 프로젝트도 잘 열렸다! 끝!

회사에서 회사 노트북으로 프로젝트 생성 후 git에 올린 후 집에와서 flutter 환경 설치 후 git clone을 받았다! cmd+shift+p를 누르고 > flutter: select device 떠야 디버깅을 해보던지 하는데 그게 안뜬다! git clone 받은 후 flutter: select device가 안뜰 때 1. Flutter 프로젝트를 clone 받은 후에는 pubspec.yaml 이 파일을 열어보자 2. Get Packages을 누른다 pubspec.yaml 파일을 찾아서 열어보면 vscode 상단 오른쪽에 이런 다운로드 버튼이 보일거다. Get Packages 클릭! 마치 React에서 yarn 하는것과 동일하다! 그리고 다시 cmd+shift+p 누르고 > flutter: sele..

회사에서 React Native로 개발 하다 보니 리네의 한계를 좀 느끼는 것 같고, 다들 Flutter가 좋다길래 한번 알아보자 하는 마음으로 Flutter 공부를 시작했다. 회사에서는 Intel 맥북 16Pro 사용하고, 집에 있는 맥북은 M1 14 pro 사용한다. 회사에서 사용하는 맥북 환경과 집에서 사용하는 맥북 환경이 사뭇 다르다보니 설치에도 조금 다른 부분이 있어 함께 포스팅 해보려 한다. 우선, 크게 정리하자면 1. Flutter SDK 설치하기 2. Flutter 환경변수 설정하기 3. flutter doctor을 이용해 필요한 환경 추가로 세팅해주기 4. VScode 에서 확장 프로그램 설치하기 1.Flutter SDK 설치하기 macOS install How to install on ..

공식 문서에서는 useIsFocused를 이렇게 소개하고 있다. https://reactnavigation.org/docs/use-is-focused/ reactnavigation.org 화면의 포커스 상태에 따라 다른 콘텐츠를 랜더링 하고 싶을 때, useIsFocused Hook 을 사용한다. 이 훅을 사용하면, 초점이 변경될 때 화면에 대한 리랜더링을 시키는 트리거가 된다. 공식문서만 봐서는 사실 이게 무슨말인지 정확하게 이해하는데 시간이 좀 걸렸다. 공식문서를 바탕으로 이 내용을 간단하게 생각해보자. 우선, 이 useIsFocused 가 사용된 screen 에서 이 값은 항상 true 이다. import { useIsFocused } from '@react-navigation/native'; fu..

리액트네이티브의 장점, 안드로이드와 IOS 둘 다 동시에 개발이 가능하다는 점! 그러나 안드로이드와 IOS의 큰 차이점이 있으니, 그것은 바로 하단에 뒤로가기 버튼! IOS와 다르게 안드로이드는 하단에 네비게이션바가 있어 자체적으로 뒤로가기 버튼을 누를 수 있다. 그렇다는 것은, 아래 이미지와 같이 우리가 만들려는 RN 앱에서 사용할 헤더 뒤로가기 버튼에 특정 이벤트가 걸려있는 경우에는 헤더 뒤로가기를 누르는게 아닌, 안드로이드 자체 뒤로가기를 누를때 뒤로가는 액션에 대한 특정 이벤트가 적용이 안된다. 예를들어, 헤더 < 뒤로가기를 누르면 '회원가입을 그만두시겠습니까?'와 같은 안내 모달창이 뜬다고 가정해보자. 헤더 < 아이콘 뒤로가기를 누르면 안내 모달창이 뜨겠지만, 안드로이드에서 자체 네비게이션 바 ..

앱 처음 켜질 때 나타나는 랜딩페이지 같은게 splash screen 이다. 안드로이드와 IOS 각각 세팅해야한다. 그리고, 리네가 0.70으로 업데이트 되면서 또 기존 블로그 내용과 달라지는 부분도 있어서 해당 부분은 내 다른 포스팅 참고하면 된다. https://hellomingure.tistory.com/32 [React Native] SplashScreen 에러 : MainActivityDelegate cannot be converted to Activity SplashScreen.show(this); 이번 리네 프로젝트 Splash Screen 작업하다가 발견한 이슈. 이 전 프로젝트에서 쓰던대로 그대로 splash screen 설치해서 작업하는데................ yarn add e..

기본 컴포넌트 Image 네트워크 이미지, 정적 리소스, 임시 로컬 이미지 및 카메라 롤과 같은 로컬 디스크의 이미지를 포함하여 다양한 유형의 이미지를 표시하기 위한 React 구성 요소입니다. android/app/build.gradle 에 아래 코드 추가하면 Gif나 WebP도 이 기본 Image 컴포넌트로 사용 가능합니다. dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14) implementation 'com.facebook.fresco:animated-base-support:1.3.0' // For animated GIF support implementation 'com.fac..

이번 리네 프로젝트 Splash Screen 작업하다가 발견한 이슈. 이 전 프로젝트에서 쓰던대로 그대로 splash screen 설치해서 작업하는데................ yarn add eact-native-splash-screen https://github.com/crazycodeboy/react-native-splash-screen GitHub - crazycodeboy/react-native-splash-screen: A splash screen for react-native, hide when application loaded ,it works on iO A splash screen for react-native, hide when application loaded ,it works on..

이제 보름뒤면 2022년이 끝나고 새 해가 밝아온다. 어쩜 이리 시간이 빠른지. 아마 다들 신년 계획을 세우고 있을것이라 생각한다. 그러나 나도 마찬가지지만 신년 계획을 100% 다 지키는 사람이 과연 얼마나 있을까 싶다. 왜 내가 다짐한 목표를 끝까지 이루지 못하는 것일까. 우유부단하고 끈기없는 평범한 사람들에게 스탠포드 대학생들의 인생 목표 설계 방법을 소개하고자 한다. 마침 새해 소망을 다짐하는 이 시기에도 딱 알맞은 책이다. 파이브 “보고 읽고 느끼고 상상하라,당신이 원하는 것을 뚜렷하게 그릴 때까지.” 6년 간 아마존 베스트셀러!구체적인 미래와 가능성을 탐색하는 ‘행동하는 책’! 스탠포드대 졸업생들이 격찬한 ‘ ridibooks.com 파이브. 스탠포드 대학생들이 지키고 있는 원칙 중 하나. 나..

https://github.com/facebook/react-native/issues/35210 [READ ME] [FIX INSIDE] Android build failures happening since Nov 4th 2022 · Issue #35210 · facebook/react-native Description Hey all, I'd like to share an update on a series of build failures React Native & Expo users have been experiencing when building Android apps starting from November 4th 2022. W... github.com 2022년 11월 4일 기준 React Nati..