hello! Mingure

React에서도 를 이용해서 라디오버튼을 만들 수 있다. 그러나 개발 상황에 따라 굳이 저 input radio를 사용하지 않고 내 마음대로 커스텀해서 사용하고 싶을 때가 있을 터. 그 때 사용하면 좋을 javascript를 소개하겠다. 나는 위에 두 이미지처럼 라디오 버튼 동그라미를 디자인을 커스텀 하거나, 버튼 형식처럼 하나씩 클릭되는 식으로 표현하고 싶었다. React 에서 state 로 option 명으로 하나씩 만든다면 만들 수는 있으나 너무나도 귀찮. import React from 'react'; import { View, Text, SafeAreaView, Pressable } from 'react-native'; import { CheckBox } from '@shared/componen..

CSS 초기화 (reset)는 기본으로 설정되어야 하는 규칙이며, 서로 다른 특성을 가진 브라우저에서 일관성 있는 사이트를 만들 수 있는 기반을 마련하게 도와준다. 여러 프로젝트에서 지속적으로 사용할 수 있는 자신만의 기본 스타일 세트를 만들어두는 것도 좋은데 귀찮으면 아래 코드를 사용하면 좋다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and s..

모든 프로젝트에서 어떤 형태가 되던 분류, 정리하는 것이 중요하다. 새로운 스타일을 생성할 때마다 파일의 맨 뒤에 코드를 붙여버린다면, 필요한 것을 찾기도 어렵고 협업하는데도 혼란을 줄 수 있다. 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..