전체 글(39)
-
JSX, TSX를 SVG로 변환하기
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..
2024.11.04 -
Codepush Standalone 버전 출시 (코드푸쉬 대안)
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 버전..
2024.09.30 -
React Native에서 상수 선언시 주의점
개발을 하다보면 상수 선언을 할 때가 많은데 React, 특히 React Native에 상수를 선언할 때 특히 주의해야 할 점이 있다. 컴포넌트 외부에 상수를 선언하면 그 상수는 컴포넌트의 갱신주기 및 라이프사이클을 완전히 벗어나게 된다. 일반적인 경우 큰 문제되지 않지만, 실제로 그것이 고정된 값(상수)가 아니라 어떤 조건에 따라 변화하는 값을 다룰땐 주의해야 한다. 특히 시간과 같이 실제로는 내부적으로 변화되어야 하는 값을 상수로 처리할때 주의해야 한다. 아래 예시를 보자.참고로 moment는 현재 시간을 가져오기 위해 사용한 타임 라이브러리의 일종이다....const NOW_TIME = moment() // 컴포넌트 외부에 선언된 상수export default function ExampleComp ..
2024.09.11 -
코드조각: 중복없이 아이템 랜덤뽑기 (Array에서 n개 꺼내기)
여러 아이템이 들어있는 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..
2023.12.10 -
create-react-app 은 더이상 권장되지 않는 방식인가?
권장사항에서 빠진 create-react-app와 최근의 프론트엔드 개발 트렌트 제 블로그에 관심이 많으신 분들은 이미 알고 계시겠지만, 사실 전 React보단 React-Native 개발자에 가깝습니다.(아, 웹 하고 싶다!) 그래서 한동안 React 웹서비스를 처음부터 만들 일이 많지 않았죠. 조그마한 토이프로젝트로 React에 대한 열정을 되살리고자 npx create-react-app 을 사용했습니다. 그러던 중 꽤나 충격적인 사실을 알게 되었습니다. 바로 React 공식문서에서 더 이상 create-react-app을 권하고 있지 않다는 사실을 말이죠. React에 관심있으신 분들은 아시겠지만 최근 React 공식 웹사이트가 새로 오픈했습니다. React The library for web an..
2023.07.17 -
2023 ONE-IT 티스토리 리부트
2년 전 쯤에 티스토리가 카카오 로그인을 강제한다고 해서 불만을 품고 다른 블로그 사이트를 알아본 적이 있었다. 카카오 계정으로의 전환을 강제하는 티스토리... (tistory.com) 카카오 계정으로의 전환을 강제하는 티스토리... 카카오톡 계정을 강제로 연동시키는 티스토리때문에 너무 많은 불편을 겪고, 스트레스를 받다가 결국에는 카카오계정으로 전환하게 되었다. 마크다운을 지원하지 않는 것부터 시작해 임시저장 one-it.tistory.com 그런데 그냥 블로그를 놔버렸다...ㅋㅋㅋ 블로그를 안 알아본 것은 아닌데, 늘 그렇듯이 배가 아닌 배꼽을 찾아 해매다보면 정작 배가 소홀해지기 마련이다. 사실 velog를 가장 유력하게 봤는데, 결정적으로 광고를 달지 못한다는게 고민이었다. 어떻게 받은 구글 애드..
2023.07.17