hooney.log

타입스크립트 기초 1. 변수 변수 선언에는 var, let, const 사용 // var 변수: 타입 = 값 // let 변수 : 타입 = 값 // const 변수 : 타입 = 값 // ex let aaa = aaa; let bbb: string = bbb; const ccc = 1; 2. 원시타입 원시타입(primitive type)인 string, number, boolean은 타입스크립트에 대응하는 타입이 있음. 타입이 한번 정해지면 다른 값 대입이 안됨. let aaa: number = 1; let bbb: boolean = false; let ccc: string = 'ccc'; aaa = 'aaa'; // X bbb = 200; // X 3. 배열 배열도 타입지정하면 지정된 타입만 추가가 가능..

리액트 네이티브 버전 : "react-native": "0.73.2" 지난 포스팅에서 간단하게 웹뷰를 구현했는데 해봤으면 문제를 알 수 있다. 웹뷰 상에서 뒤로가기가 안되고 앱이 꺼져버리는 문제인데, 이를 처리해줘야 한다. 1. 코드 작성 import React, { useEffect, useRef, useCallback } from 'react'; import { StyleSheet, SafeAreaView, BackHandler } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { const webviewRef = useRef(null); const backPress = ..

리액트 네이티브 버전 : "react-native": "0.73.2" 1. 웹뷰 라이브러리 설치! npm install react-native-webview 2. 코드 작성! import React from 'react'; import { StyleSheet, SafeAreaView } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); SafeAreaView를 통해 아이폰 노치때문에 가리는것을 막아준다. 끝!

리엑트 네이티브 개발 시 Expo 사용하느냐 안하느냐 방식의 차이가 있다. 차이점을 알아보자 React Navie CLI 일반적인 React Native 개발 방식은 React Native를 사용하여 네이티브 모바일 앱을 개발하는 프로세스를 말한다. 환경 설정: Node.js 및 npm 또는 Yarn 설치: React Native 개발을 시작하려면 Node.js 및 관련 패키지 관리자 (npm 또는 Yarn)를 설치해야 한다. Android Studio 또는 Xcode 설치: Android 앱을 개발할 때는 Android Studio를, iOS 앱을 개발할 때는 Xcode를 설치해야 한다. React Native 프로젝트 생성: React Native CLI를 사용하여 새로운 프로젝트를 생성합니다. np..

리액트에서 상태 변화는 useState로 진행하는데, 이게 많을 경우 코드가 길어지고, 유지보수 하는데 불편하다. 이를 좀더 편하게 하기 위해 useReduce()를 통해 개선할 수 있다. 먼저, 리액트에서 CRUD를 작업한다고 하면 const Main = () => { const [data, setData] = useState([]); const [name, setName] = useState(""); const onCreate = () => { ...생략 } const onRead = () => { ...생략 } const onUpdate = () => { ...생략 } const onDelete = () => { ...생략 } } 생략된 코드들이 복잡하고 길 가능성이 있다. 이를 개선하면, Main..

1. useMemo() 리액트 Hook 에서 useEffect()와 비슷하게 불필요한 동작을 막기 위해 useMemo()라는 것을 사용한다. 예를 들면, Lifecycle이 시작될 때 배열을 서버로부터 받아와서 useState()로 데이터를 상태를 유지한다고 하면, const [data, setData] = useState([]); const getData = async () => { const response = await fetch("url") .then((res) => res.json()); setData(response); } useEffect(() => { getData(); }, []) 이런 코드를 작성할 수 있다. 여기서 Data 안에 있는 내용을 화면에 보여준다고 하면, const getD..

리액트를 함수형 컴포넌트를 사용하면서 unMount는 어떻게 잡는지 제대로 알지 못했는데, 이번에 공부하면서 알게 되었다. 먼저 Lifecycle이란 화면에 있는 컴포넌트들이 생성될 때 발생하는 과정을 말한다. 이런 과정 제어하는데, Hooks를 사용하면서 클래스형보다 좀 더 편하고 안전하게 사용할 수 있게 됐다. 간단하게 생성 수정 제거 3단계로 나눠서 생성은 화면에 나타나는 것 - Mount 수정은 말 그대로 업데이트(re-render) - Update 제거는 화면에서 사라지는 것 - UnMount 이를 코드로 나타내면 // 생성 & 제거 useEffect(() => { console.log("Mount!"); return () => { console.log("UnMount!"); } }, []); ..

리액트를 사용하면서 DOM에 접근할 땐 useRef()를 사용한다. const nameInput = useRef(); const [state, setState] = useState({ name: "", email: "", password: "", }); const dataSubmit = () => { if (state.name.length < 1) { alert("빈값이면 안돼요."); return nameInput.current.focus(); } } return ( ... 제출 ) nameInput을 console.log로 확인해보면 jQuery나 바닐라JS 사용할 때 보던 화면을 보게 된다. 위에서 만든 nameInput 안에 current가 있고, 그 안에 value, style 등등이 있다. 리..

리액트를 사용하면서 state가 여러개 일 때 각각 해줬었는데, 왜 공통화할 생각을 한번도 안했는지 반성했다. 내가 평소 사용하던 코드 const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( { setName(e.target.value); }} /> ... ) 이렇게 해왔는데, 이러한 코드를 공통화 하면, // const [name, setName] = useState(""); // const [email, setEmail] = useState(""); // const [password, setPassword] = useSt..

리액트 네이티브 버전 : "react-native": "0.69.2" 카카오 로그인 라이브러리 사용하기 1. 라이브러리를 먼저 설치해준다. npm install @react-native-seoul/kakao-login 프로젝트 폴더 안에 ios 폴더로 이동 한 뒤 아래 명령어로 설치 마무리 pod install 2. 카카오 디벨로퍼에서 키 발급 (1) 내 애플리케이션 클릭 (2) 애플리케이션 추가하기 클릭 - 내용 입력 후 저장 - 네이티브 앱 키가 필요하다. 3. 플랫폼 등록 - 나는 iOS 플랫폼만 등록했다. - 번들ID를 잘 등록해야된다....이거 틀린지 모르고 왜 안되지 고민 2일 했다... - 번들ID는 xcode로 프로젝트명.xcworkspace을 실행한다. - 왼쪽 메뉴에서 프로젝트명을 클릭..