Jake의 블로그

# 프론트엔드에서 UI를 구현하는 작업을 하다보면 가끔 정사각형 레이아웃이 필요한 경우가 있다. 구체적인 사이즈가 정해져 있으면 문제가 없지만, 가끔 반응형이나 기기 사이즈에 따라서 구현이 필요한 경우, 오늘의 팁을 알아두면 좋다. # 구현 방법 - 기본적으로 tailwindcss가 설정되어 있는 환경에서 아래의 플러그인을 설치하고 적용해준다 https://github.com/tailwindlabs/tailwindcss-aspect-ratio GitHub - tailwindlabs/tailwindcss-aspect-ratio Contribute to tailwindlabs/tailwindcss-aspect-ratio development by creating an account on GitHub. git..

# React Native에서 Android 기기에서 폰트 스케일링 옵션을 설정한 경우 앱에서도 폰트가 확대되어 제대로 표시가 되지 않고 잘리는 경우가 있습니다. 이 문제는 아래의 옵션으로 해결할 수 있습니다. {children} // 기본적으로 모든 텍스트 컴포넌트에 적용하려고 할 경우 // index.js 등에서 아래와 같이 추가해 주시면 됩니다 Text.defaultProps = Text.defaultProps || {}; Text.defaultProps.allowFontScaling = false;

# 패키지, 앱 이름과 함께 프로젝트 생성하기 - RN 프로젝트를 생성할 때 별도의 옵션을 넣지 않을 경우, 앱 이름으로 패키지 이름 등 모든 이름이 결정되어버리기 때문에, 추후에 이를 변경하기 위해서 번거로운 작업이 필요하다. 만약 아직 패키지 이름 등이 결정되지 않은 경우에는 어쩔 수 없지만, 패키지 이름을 정하고 시작할 수 있는 경우 아래의 옵션을 사용하여 추후 번거로운 작업을 줄일 수 있다. # 한 줄 팁 - "--package-name" 으로 패키지 명을 정하고, 사용자에게 표시될 이름을 "--title"을 이용해서 정한다 npx react-native@latest init MyAppName --package-name com.foo.bar --title "My App Name"

# Mac 운영체제에서 이미지의 배경을 날리는 기능 사용하기 - 아이폰에 기본 포함되었던 누끼 따기(이미지 배경 제거) 기능을 맥에서도 사용하실 수 있습니다. 본 포스팅에서는 아주 간단히 사용방법과 예제를 보여드려고 합니다. 먼저 이미지를 준비합니다. # 사용법 - 이미지를 선택한 후에 우클릭으로 메뉴 창을 띄운 후, Quick Actions > Remove Background를 누르시면 끝입니다. # 결과물 - 이미지에 따라서 결과물의 퀄리티가 약간 씩 차이가 나기는 하지만, 생각보다 아주 깔끔하게 잘 배경을 제거해 주기 때문에 불필요한 업무를 줄이는데 큰 도움이 될 것 같습니다.

# 아이폰(시뮬레이터) 프레임까지 함께 스크린 샷 찍는 방법 - 아이폰 앱을 개발을 완료하는 시점이 다가 오면, 앱스토어 등에 제출하기 위해서 아이폰의 프레임이 포함된 스크린 샷을 필요로 하게 되는 경우가 있습니다. 본 포스팅에서는 이럴 때 가장 쉽게 사용할 수 있는 방법을 소개하려고 합니다. 참고로 맥 운영체제에서만 가능합니다. # 방법 소개 - 우선 스크린 샷을 찍고 싶은 아이폰 기기의 시뮬레이터를 실행합니다. 그리고 스크린 샷을 찍을 앱을 실행합니다. - 이제 맥 운영체제의 스크린 샷 단축키인 Cmd + Shift + 4를 누릅니다. 그리고 시뮬레이터위로 커서를 가져간 후에 스페이스 바를 누릅니다. 사실 이 기능은 스크린 샷 영역을 커서 가 속한 윈도우를 영역으로 지정하는 것입니다. 만약 제대로 지..

# 브라우저에 설정된 언어를 확인하는 코드가 필요한 경우가 있습니다. 매번 검색을 해서 기억을 하지만, 막상 사용할 때가 되면 기억이 나지 않아서 다시 검색하게 되는 경우가 많습니다. 그럴 때 이용하세요. // Get the user's preferred language const userLanguage = navigator.language || navigator.userLanguage; console.log("User's preferred language:", userLanguage);

# 인터넷 속도 측정하는 방법 - 인터넷을 사용하다가 왠지 속도가 느린 것 같을때나, 새로 공유기를 구입한 경우 등 여러 상황에서 인터넷 속도가 궁금할 때가 있습니다. 이를 확인하는 방법에는 여러가지가 있지만, 가장 쉽고 빠른 방법을 소개 해 드립니다. https://fast.com/ko/ 인터넷 속도 테스트 회원님의 다운로드 속도는 얼마나 될까요? FAST.com의 간편한 인터넷 속도 테스트로 몇 초 안에 ISP 속도를 알아볼 수 있습니다. fast.com - 사용법은 정말 간단합니다. 아래의 사이트에 접속하면 자동으로 속도 측정이 시작되고 일정시간 기다리신 후 측정된 결과 값을 확인하시면 됩니다.

# Mac OS X에서 바탕화면에서 원하지 않는 아이템들을 숨기는 방법 # 하드 디스크 등 장치 아이콘 숨기기 - Finder를 실행 하고, Finder App Menu의 Settings를 실행합니다. (Cmd + ,로도 실행 가능)그러면 아래와 같은 창이 뜨는데, 여기서 원하지 않는 항목들을 체크 해제해주시면 됩니다 # 모든 아이콘 숨기기 - 위의 방법으로는 Desktop 경로에 있는 아이콘들이나 파일들까지 숨겨지지 않습니다. 바탕화면의 스크린 샷을 찍는 등의 상황에서 아이콘을 숨겨야 한다면, 아래의 터미널 명령으로 숨길 수 있습니다 # 숨기기 defaults write com.apple.finder CreateDesktop -bool FALSE; killall Finder # 다시 보이기 defaul..

# Simple Icons - 웹 또는 앱 서비스를 제공하려다 보면 다운로드 링크, 지원하는 플랫폼을 표시, 소셜미디어등 여러가지 상황에서 브랜드의 로고나 아이콘이 필요한 경우가 있습니다. 개별 브랜드에서 아이콘을 제공하기도 하지만, 일일히 이를 구하는 일은 귀찮고 번거로운 일입니다. 본 포스팅에서는 이런 경우, 도움이 될 사이트를 알려드리려고 합니다. # 사용법 https://simpleicons.org/ Simple Icons 2437 Free SVG icons for popular brands simpleicons.org - 사이트에 접속을 한 후, 검색 창에 원하는 브랜드 명을 검색 하셔서 찾으신 다음, svg나 pdf 파일로 다운 받거나, svg 코드로 바로 복사할 수 있습니다. 그리고 필요한 ..

# 맥 터미널에서 Port 강제 종료 시키는 방법 - pid 찾기 // pid 찾기 lsof -i:3000 // 3000은 react 기본 포트 번호입니다. 원하는 포트 번호로 변경 파세요 - pid 확인 - 포트 종료하기 kill -9 1205 // 1205는 위에서 찾은 pid입니다. 적절한 pid로 변경하세요