React Native에서 SVG를 컴포넌트화하여 사용하는 경우가 많은데 이를 위해 SVG -> JSX/TSX로 변환하는 컨버터는 쉽게 찾을 수 있다. 그러나 그 반대의 경우인 JSX/TSX -> SVG로 변환하고자 할 땐 어떻게 해야 할까? 이 경우엔 컨버터나 방법을 찾기 어려웠는데 쉬운 방법이 있다. 바로 JSX/TSX 컴포넌트에서 return 값만을 빼내어 각 컴포넌트들을 svg 태그로 변환해주고svg 태그에 xmlns="https://www.w3.org/2000/svg" 어트리뷰트를 추가해주면 된다.xmlns를 추가해주지 않으면 보통 웹브라우저에선 svg 파일로 인식하지 않고 ‘This XML file does not appear to have any style information associa..

GitHub - microsoft/code-push-server: Standalone CodePush server from App CenterStandalone CodePush server from App Center. Contribute to microsoft/code-push-server development by creating an account on GitHub.github.com🎉🎉🎉 코드푸쉬 standalone 버전이 출시되었습니다 🎉🎉🎉 MS가 Appcenter 서비스를 종료함에 따라 CodePush도 자연스레 종료하게 되었는데요. 😢 (관련내용: https://learn.microsoft.com/en-us/appcenter/retirement ) 대신 Standalone 버전..

개발을 하다보면 상수 선언을 할 때가 많은데 React, 특히 React Native에 상수를 선언할 때 특히 주의해야 할 점이 있다. 컴포넌트 외부에 상수를 선언하면 그 상수는 컴포넌트의 갱신주기 및 라이프사이클을 완전히 벗어나게 된다. 일반적인 경우 큰 문제되지 않지만, 실제로 그것이 고정된 값(상수)가 아니라 어떤 조건에 따라 변화하는 값을 다룰땐 주의해야 한다. 특히 시간과 같이 실제로는 내부적으로 변화되어야 하는 값을 상수로 처리할때 주의해야 한다. 아래 예시를 보자.참고로 moment는 현재 시간을 가져오기 위해 사용한 타임 라이브러리의 일종이다....const NOW_TIME = moment() // 컴포넌트 외부에 선언된 상수export default function ExampleComp ..

여러 아이템이 들어있는 Array에서 아이템을 랜덤으로, 그리고 중복없이 n개 뽑아내는 로직입니다. array를 ['a', 'b', 'c', 'd', 'e'], cnt를 3으로 하면 ['c', 'b', 'a'] 등의 식으로 랜덤으로 뽑습니다. 단, ['c', 'b', 'c'] 와 같이 중복되는 값은 나오지 않습니다. 요새 TypeScript를 사용해서 TS로 짜봤습니다. 자세한 코드는 아래를 참고하세요. 혹시 JavaScript 버전을 원하시면 댓글로 알려주세요. /** * @param array 아이템 리스트 * @param cnt 뽑을 아이템 개수 * @returns 랜덤으로 추출된 아이템 리스트 */ const getItemRandomly = (array: any[], cnt: number): an..

권장사항에서 빠진 create-react-app와 최근의 프론트엔드 개발 트렌트 제 블로그에 관심이 많으신 분들은 이미 알고 계시겠지만, 사실 전 React보단 React-Native 개발자에 가깝습니다.(아, 웹 하고 싶다!) 그래서 한동안 React 웹서비스를 처음부터 만들 일이 많지 않았죠. 조그마한 토이프로젝트로 React에 대한 열정을 되살리고자 npx create-react-app 을 사용했습니다. 그러던 중 꽤나 충격적인 사실을 알게 되었습니다. 바로 React 공식문서에서 더 이상 create-react-app을 권하고 있지 않다는 사실을 말이죠. React에 관심있으신 분들은 아시겠지만 최근 React 공식 웹사이트가 새로 오픈했습니다. React The library for web an..

서비스 개발을 하다보면 비동기적으로 개발해야 할 일이 많습니다. JavaScript에서는 과거 callback 함수를 통해 비동기를 구현하곤 했으나 요즘에는 Promise 객체를 반환하게 하여 async와 await로 작업이 완료되면 다음 로직이 진행되게끔 지연시키는 방식을 통해 비동기를 구현하곤 합니다. 최근 회사에서 앱을 개발하면서 한번 사용하는 방법을 간단하게 정리해봤습니다. (Promise 객체 자체에 대해서는 developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises 이 링크를 참고하세요.) Promise 객체를 반환하게끔 작성한 함수를 호출할 땐 함수명 앞에 await 키워드를 붙이고 호출하면 해당 작업이 완료되고 나서야 이후 코드가 ..