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 ..

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

개발이슈 stackoverflow.com/questions/36938742/touchablehighlight-not-clickable-if-position-absolute%EF%BB%BF Touchablehighlight not clickable if position absolute I have a Touchablehighlight that I need to position absolute, but it becomes unclickable after I do it. What could cause this? It functions like it should if I dont have the position set to absolute. stackoverflow.com React Native Touchabl..

React와 관련한 글을 메일링서비스로 받아보던 중 이해하기 쉽고 clap 수가 1300으로 높은 글이 있어 원작자의 허락을 구해 번역해봤습니다. 원본 글에서 댓글을 여러 의견이 있었는데 이 번역글에서도 포함하여 일부 번역해봤습니다. 원본 글은 https://betterprogramming.pub/8-ways-to-write-clean-react-code-610c502ccf39 입니다. React Clean Code 더 클린하고 더 나은 코드를 작성하는 8가지의 간단한 방법 "클린코드"는 그저 동작만 하는 코드 그 이상을 의미합니다. 클린코드는 읽기 쉽고 이해하기 쉬우며, 깔끔하게 구성되어 있습니다. 이번 글을 통해 리액트 코드를 보다 "클린"하게 만드는 8가지 방법에 대해 알아보겠습니다. 그전에 이야기..