코드로 대화하기

오늘은 typescript에서 변수를 선언하는 방법에 대하여 알아보겠습니다. js와 달리 ts는 타입이 엄격하기 때문에 유의하셔야 합니다. 숫자 . number 숫자를 선언합니다. 16진수, 10진수, 8진수, 2진수 모두 지원합니다. let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; 문자열 . string 문자열을 선언합니다. 백틱(``)을 사용하거나 연산이 있는 문자열도 가능합니다. let hello: string = "hello"; let sentence: string = `${hello} my name is sjh`; let sentence2: string ..

안녕하세요! 오늘은 타입 스크립트에 대하여 알아보겠습니다. 타입스크립트를 배우기 전 왜 이 언어를 사용해야하는지 궁금해서 찾아보게 되었습니다. 최근 개발자들 사이에서 ts는 굉장히 뜨고 있는데요. 대기업들의 채용공고에도 우대사항 혹은 자격요건에 포함되어있는 것을 볼 수 있습니다. npm trends를 봐도 무섭게 성장하고 있습니다. 저는 궁금했습니다. 왜 타입스크립트가 뜨게 되었고, 왜 수많은 개발자들이 선택을 하였을까요? 이 언어를 배워야하는 이유는 뭘까요? 개요 C#의 창시자인 아네르스 하일스베르가 개발을 주도하였고 마이크로소프트에서 2012년 오픈소스로 발표하였습니다. 2014년 4월 마이크로소프트의 Build 행사에서 타입스크립트의 1.0 버전을 공개했습니다. 2016년 9월에 2.0 버전이 릴리..

function getDistanceFromLatLonInKm(lat1,lng1,lat2,lng2) { function deg2rad(deg) { return deg * (Math.PI/180) } var R = 6371; var dLat = deg2rad(lat2-lat1); var dLon = deg2rad(lng2-lng1); var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; return ..

React Native에서 이미지 경로를 동적으로 제어하는 방법을 알아보겠습니다. React처럼 src안에서 분기처리는 불가능합니다. // 잘못된 방법 방법 1. js 상단에 이미지 경로를 변수에 담은 후 넣는 방법입니다. // app.js const icon = require('./img/icon.png'); const activeIcon = require('./img/activeIcon.png'); ... 방법 2. 이미지 경로를 위한 js파일을 만들어 사용합니다. 확장성이 좋고 나중에 유지보수/추가개발을 할때도 좋아 저는 이 방법을 자주 사용합니다. // iconPath.js export const iconPath = { icon: require("./img/icon.png"), activeIcon..

You specified `onScroll` on a but not `scrollEventThrottle`. You will only receive one event. Using `16` you get all the events but be aware that it may cause frame drops, use a bigger number if you don't need as much precision. IOS에서 RN 개발을 하다보면 ScrollView 사용 시 위와 같은 로그가 계속 뜰때가 있습니다. 에서 onScroll 이벤트를 사용하는데 scrollEventThrottle을 정의하지 않아서 나는 것입니다. scrollEventThrottle란 스크롤하는 동안 스크롤 이벤트가 발생하는 빈도를 제어..

오늘은 padStart와 padEnd에 대해 알아보겠습니다. 날짜를 계산할 때 앞에 0을 붙여야 하거나, 일부 암호화를 해야할 때가 있습니다. 조건문이나 반복문으로 해결할 수도 있지만 오늘은 그 작업을 편리하게 해보겠습니다. String.prototype.padStart() MDN에 예제가 잘나와있어서 가져왔습니다. // 앞에 0 넣기 const str1 = '5'; console.log(str1.padStart(2, '0')); // -> "05" console.log(str1.padStart(2)); // -> " 5" // 앞에 * 넣기 const fullNumber = '2034399002125581'; const last4Digits = fullNumber.slice(-4); console.lo..

안녕하세요! 오늘은 저번 무한스크롤과 measure()에서 정리한 내용을 토대로 역무한스크롤을 구현해 보겠습니다. 역무한스크롤이란 아래에서 시작하여 위로 향하는 무한 스크롤을 의미합니다. 제가 지은 이름이라 정식 명칭은 다를 수도 있습니다. 이 기능은 주로 채팅에서 사용하였습니다. 이 기능의 핵심은 스크롤이 맨 끝에 갔을 때 콘텐츠의 사이즈가 늘어나도 스크롤 값을 기억하는 것입니다. 시작 // reverseInfinityScroll.js import React, { useRef, useState } from 'react'; import { ScrollView, View } from 'react-native'; const R_InfinityScroll = ({children, onScrollEnd}) =>..

개발을 하다 보면 x, y좌표나 콘텐츠의 사이즈를 구해야 할 때가 있습니다. 그럴 때는 measure, measureInWindow, measureLayout을 사용하시면 됩니다. 각 함수들의 정의부터 살펴본 후 코드와 이미지로 설명 이어가겠습니다. measure(callback) boxRef.current.measure((x, y, width, height, pageX, pageY)=> {}) 콜백 함수는 x, y, width, height, pageX, pageY를 인자로 받습니다. x, y -> 자신의 부모 기준으로 x, y 좌표를 가져옵니다. width, height -> 가로, 세로를 길이를 가져옵니다. pageX, pageY -> 화면상의 x , y 절대 좌표를 가져옵니다. measureInW..

React Native에서 무한스크롤을 구현해보겠습니다. const [isUpdateList, setIsUpdateList] = useState(true); const onScrollList = async (e) => { if(!isUpdateList){return} // 현재 스크롤 값 let updateScroll = e.nativeEvent.contentOffset.y; if(updateScroll == 0){return} // 현재 보여지는 화면 높이 let screenHeight = e.nativeEvent.layoutMeasurement.height; // 전체 문서의 높이 let documentHeight = e.nativeEvent.contentSize.height; // 원하는 로직을 시..

attempt to invoke interface method 'boolean com.swmansion... 안드로이드쪽에서 나는 오류입니다. 해결 android / app / build.gradle project.ext.react = [ enableHermes: true //