썬이의 IT세상

react native에서 긴 이미지를 보여줄 때, 썸네일 형식으로 이미지를 보여준 후 해당 이미지에 버튼 이벤트를 걸어 전체보기 화면을 구현하고 싶을 때가 있다. 이 경우 css에서는 object position : top 을 주면 바로 해결되지만, 안타깝게도 react native에서는 해당 기능을 지원하지 않는다. 이 문제를 해결하기 위해 내가 생각해낸 방법은 ScrollView의 height를 원하는 고정값으로 선언하고 그 안에 Image를 감싼 후, scrollenabled={false} 로 스크롤을 막아내면 되지 않을까? 였다. 결과는 매우 성공적이었다. 아래는 예시 코드이다. Usage type TImageSizeProps = { width: number; height: number; }; ..

만약 View 컴포넌트에 {children} 위와 같이 행으로 나열되는 컴포넌트를 배치할 때, 아래 예시 이미지와 같이 화면을 벗어나는 경우가 생기는데 이럴 경우 텍스트 영역만 아래로 확장하고 싶을 것이다. 이를 해결하는 방법은 아주 간단한데, flex-shrink 스타일만 준다면 해결된다. ... 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 안드로이드도 물론 적용된다. flex 관련된 스타일의 경우 flexShrink를 포함하여 flexGrow 등 많은 속성들이 있는데 몰라서 잘 사용하지 못하는 경우가 많다. 이를 계기로 더 공부해봐야지 ㅎㅎ

평소처럼 커리어리 피드를 보던 중 팔로우하는 어떤 개발자분께서 VS Code 내에서 Figma 화면을 볼 수 있다는 말씀에 후다닥 VS Code의 확장에 Figma를 검색해보니 Figma for VS Code 플러그인이 있어 간단하게 사용해본 후에 후기 및 사용법을 간단히 포스팅해보겠다. 먼저 앞서 말했듯 VS Code 확장 탭 > Figma 를 검색하면 Figma for VS Code 가 위와 같이 나올텐데, 당연히 install 을 눌러준다. 그러면 위 사진과 같이 좌측 탭에 피그마 로고가 생기면서 클릭해보면 피그마에 로그인해달라는 문구가 뜬다. 버튼을 눌러 로그인해주자. 정상적으로 로그인 되었다면 VSC 상에서 위와 같이 보일텐데, Recents 혹은 Shared Files 토글을 열어 작업 중인 ..