목록2022/11 (6)

맨 땅에 프론트엔드 개발자 되기

React 외부 영역 클릭 시 닫기

이러한 메뉴 혹은 모달, 그리고 커스텀 셀렉트박스를 만들 때, 외부 영역을 클릭하면 닫히게 만들고 싶을 경우, 사용하는 방법은 크게 두 가지가 있다.useState 활용하기import React, { useState } from "react"; const Sample = () => { const [isDropMenuOpen, setDropMenuOpen] = useState(false); const toggleDropMenu = (e: React.MouseEvent) => { e.stopPropagation(); // 이벤트 캡쳐링 방지 setDropMenuOpen(prevState => !prevState); } return ( setDropMenuOpen(false)} > print download ..
코딩 공부 일지/React JS 2022. 11. 30. 12:07
CSS 텍스트 드래그 방지

웹브라우저에서 내가 만든 웹페이지의 글 내용을 드래그 못 하게 하는 방법. 간단하게 CSS로 처리할 수 있다. body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 브라우저 별로 다 막아준다. 일부 영역에서는 드래그를 허용하고 싶으면, 위의 코드를 body 영역에 기본으로 넣어주고, 원하는 영역에 아래 코드를 적용한다. .allow-to-drag { -webkit-user-select:all; -moz-user-select:all; -ms-user-select:all; user-select:all } 텍스트만 드래그를 허용하고 싶을 때, .allow-to-drag-text { -webk..
코딩 공부 일지/CSS3 & SASS(SCSS) 2022. 11. 29. 10:55
RNCSafeAreaProvider was not found in the UIManager 에러 해결

모바일 앱 개발에 있어서 기기 사이즈, 노치 크기 등이 다 다르므로, react-native-safe-area-context 라이브러리를 사용하면, iOS 와 안드로이드에서 모두 Safe Area(기기 사이즈, 노치 크기 등으로 가려지지 않는 안전지대)를 확보할 수 있다. 에러 해결 react-native-safe-area-context 라이브러리를 설치했는데도 불구하고 위와 같은 에러 메시지가 나온다면, 아래 커맨드를 실행한다. $ npx pod-install ios 그리고 나서 다시 Metro를 실행해주면, 에러가 해결된다.
코딩 공부 일지/React Native 2022. 11. 10. 16:33
React Native 버전 0.60 이상 react-native-vector-icons 설치방법

라이브러리 설치 $ npm install react-native-vector-icons // for TypeScript $ npm install --save-dev @types/react-native-vector-icons 라이브러리 연결 React Native 0.59 버전 이하에서는 아래 명령어로 바로 연결을 해줄 수 있었으나, $ react-native link react-native-vector-icons 0.60 버전 이상부터는 수동으로 연결을 해주어야 한다. - iOS react-native CLI로 프로젝트를 시작했다는 가정하에 진행한다. (Expo CLI로 시작했을 경우, Expo 패키지에 기본적으로 포함되어 있다.) react-native CLI로 프로젝트를 시작하려면, 기본적으로 Xco..
코딩 공부 일지/React Native 2022. 11. 10. 15:55
React Native 프로젝트 폴더 구조 셋팅 & 절대 경로 설정 & 정적파일(이미지) 경로 설정

* 예시 프로젝트는 React Native CLI로 만들어진 프로젝트임을 참고 바랍니다. React Native 개발 환경 설정은 공식 문서를 참고하세요. Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev React Native 프로젝트 폴더 구조 셋팅 react-native init 명령어로 프로젝트를 시작하면 아래와 같은 폴더 구조를 기본으로 셋팅해준다. 해당 프로젝트 루트에 components 폴더와 assets 폴더를 구성할 수도 있지만 app과 관련된 것들을 app 폴더에서 관리해주기 위해 아래와..
코딩 공부 일지/React Native 2022. 11. 9. 14:31
React Native를 사용하는 이유 (장단점)

React Native React Native는 React를 만든 페이스북이 만든 모바일 앱 개발을 위한 JavaScript 기반 프레임워크다. React와 React Native의 가장 큰 차이점은 React는 JavaScript 라이브러리 이지만, React Native는 프레임워크라는 점이다. React는 JavaScript 라이브러리 이므로 JavaScript를 쓰는 느낌에 더 가깝다면, React Native는 만들어진 프레임을 가져다 쓰는 느낌에 가깝다. 그러나 이 둘의 근본은 같아서 React를 어느정도 사용해본 사람들은 금방 React Native도 익숙해질 수 있다. React Native는 HTML이나 CSS를 사용하지 않는다. 그 대신 JavaScript 쓰레드로부터의 메시지를 사용하..
코딩 공부 일지/React Native 2022. 11. 8. 14:13
이전 Prev 1 Next 다음