썬이의 IT세상

지난 주말 신용산역 근처에 볼 일이 있어 처음으로 용리단길을 방문하게 되었다. 저녁도 해결했어야 하는 상황이었는데, 간단히 맥주도 한 잔 하고 싶어 주변 이자카야를 알아보던 중 삼각지역 근처에 있는 쿠히치에 방문하게 되었다. 우선, 오픈 시간에 맞춰 갔는데도 웨이팅이 있어서 충격이었다. 입구에서 웨이팅은 테이블링으로 관리하는데, 테이블링 앱에서 미리 웨이팅을 걸어놓고 가면 더 빠르게 입장할 수 있을 것 같으니 참고! 신용산-삼각지역 주변에 있는 용리단길 식당들은 이렇게 각 식당마다 각 나라의 느낌을 잘 살린 것 같아 너무너무 마음에 들었다. 특히 쿠히치는 좀 더 고급진 일본의 식당 느낌이 있어 30분정도 웨이팅 하는데도 전혀 지루하지 않았다. 기다리면서 쿠히치 외관 사진을 찍으시는 분들이 진짜 많더라....

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

터미널에서 앱을 빌드 했을 때, 위 사진과 같이 앱 빌드 시 launchPackager.command이(가) 터미널에서 문서를 열도록 허용되지 않았기 때문에 '(null)'을 열 수 없습니다. 라는 문구와 함께 메트로가 연결된 터미널창이 열리지 않는다면, 다음 방법으로 간단하게 해결해 보자. 보통 위 에러 문구가 나는 개발 환경이라면 사용자의 pc에 iterm2 라는 터미널 응용 프로그램이 설치되어 있을 것인데, react-native 에서 디버깅 앱을 빌드했을 때 iterm2를 열도록 설정해주면 된다. 해결 방법 (project root)/node_modules/react-native/scripts/launchPackager.command 파일 우클릭 > 다음으로 열기 > iterm 으로 설정해두면 앞..

처음 IT 계열에 입문하게 되었을 때, 가장 나를 힘들게 했던 건 관련 용어였다. API, 서버, 클라이언트, 등등.. 관련 서적도 많이 읽어보고 했지만 지금도 여전히 생소한 단어들 천국이다 :( 그러던 중 문득 쿠버네티스(Kubernetes)는 왜 k8s라고 쓰는지 의문이 생겨 알아보던 중, 아주 재밌는 사실을 발견했다. Kubernetes 문자열의 처음과 끝(k,s) 을 제외한 나머지 문자의 개수가 8개이기에 숫자로 줄여 k8s로 쓰는 것이었다. 나는 이에 흥미를 느껴 이런 류의 단어들을 더 찾아보았는데, 최근에 포스팅한 i18n(https://k-taeyang.tistory.com/61)또한 internationalization 의 약어로 단순히 i와 n 사이에 18개의 알파벳이 있기에 줄여서 사..

회원가입 기능을 작업하다 보면 거의 필수적으로 들어가는 생년월일 부분을 라이브러리를 사용하지 않고 Input으로 관리할 때, YYYYMMDD 혹은 YYYY-MM-DD 형식이 맞는지를 프론트에서 확인해주는 로직이 필요하다. 예를 들어 생년월일 파라미터에 1996-02-313 와 같이 들어갔는데 API를 호출하게 되면, 해당 회원정보에서 생년월일을 불러오는 부분에서 에러가 날 가능성이 아주 높다. 또 1111-22-33 과 같이 YYYY-MM-DD 형식은 지켰으나 실제 존재하지 않는 날짜의 경우도 있다. 실제적인 예로 어떤 외국인 회원분께서 22051996 과 같이 DD/MM/YYYY 의 형식으로 입력하셔서 해당 회원정보에 관련된 에러가 났던 경우가 있었다. 이에 정규식을 통해 자리수를 먼저 검증하고, 올바..

RN 으로 개발 중인 앱을 디버깅 할 때 나는 주로 XCode에서 실행하여 iOS 앱을 먼저 킨 후에 같이 켜진 터미널 창에서 안드로이드 앱을 열곤 하는데, 아무 이상 없이 잘 실행되던 디버깅 앱이 iPhone is busy fetching debug symbols for iPhone 창이 뜨면서 실행이 안되는 것이었다..! 이것저것 알아보던 중 역시 근본은 재부팅이었다. 내가 해결했던 방법은 아래와 같다. 1. XCode - Product - Clean BUild Folder 2. XCode 종료 후 다시 실행 3. 디버깅 할 iPhone 종료 후 다시 실행 - 이후 다시 실행시키니 정상 동작한다!

예전에 했던 프로젝트를 1달정도만에 XCode에서 빌드하려는데 Command PhaseScriptExecution failed with a nonzero exit code 에러로 IOS 빌드가 되지 않았다. 위와 같은 에러메시지는 하도 많이 봤지만 전에 했던 방법대로 해도 해결되지 않는 마법같은 에러.. 역시나 build clean & pod install 과 같은 명령어로는 해결되지 않았다. 열심히 찾아보던 도중 간단히 해결할 수 있는 방법을 찾았다! 프로젝트 루트/node_modules/react-native/scripts/find-node.sh 파일에 set -e 로 되어있는 부분을 set +e 로 변경해주고 빌드하면 바로 해결된다. - set -e + set +e

시작하기 회사에서 진행하는 프로젝트가 관광일이다보니, 외국인 관광객을 위한 다국어 번역 서비스가 필수적으로 들어가야 했다. API를 통해 받아오는 데이터에는 파라미터로 langId를 넣어 서버에서 번역 데이터가 날아오지만, 앱에 원고로 들어가있는 텍스트 등은 필수적으로 번역하여 언어별로 넣어주는 작업이 필요했다. 이를 언어별 JSON으로 관리하여 쉽게 이용할 수 있는 react-i18next 라이브러리를 사용하였고, recoil 전역변수로 저장된 langId와 i18n의 useTranslation() 훅으로 번역 서비스를 구현하였다. 이전 프로젝트에서 선임분께서 정리해주신 내용과 더불어 간단한 사용법을 파헤쳐보자. react-i18next 우선, 예전에 사용되던 react-native-i18n 라이브러리..

인라인 스타일(Inline-style)? 인라인 스타일은 자바스크립트 객체의 형태로 태그 안에 스타일 코드를 집어넣는 형식인데, 예를 들면 {children} 위와 같은 형식을 인라인 스타일이라 한다. 허나 인라인 스타일은 자바스크립트 엔진 쪽의 스레드에서 UI 스레드 쪽으로 브리지를 경유하므로, 동적 스타일이 아닌 정적 스타일을 사용할 때에는 앱의 디스플레이 속도가 느려지는 치명적인 단점이 있다. (이 때문에 React 공식문서에서도 인라인 스타일을 지양하도록 권고하고 있다.) 이러한 이유 등으로 인해 React Native에서는 StyleSheet.create로 스타일 코드를 정의하여 사용하게 되는데, StyleSheet.create 함수를 통해 만들어진 객체는 UI 스레드쪽으로 생성되기 때문에 컴포..

# 시작하기 앱을 개발하다 보면 리뷰 등의 기능에서 사용자 디바이스의 '카메라 앨범'을 불러와 사진 리스트를 출력해주어야 하는데, 해당 기능을 구현하는 데 사용해본 라이브러리 중 가장 대중적이고 편한 라이브러리인 react-native-camera-roll 라이브러리와 그 사용법, 그리고 flatlist를 통해 페이징 기능까지 구현해보자. # react-native-camera-roll 기본적으로 사용자의 카메라 앨범을 불러오려면 앱의 권한과 AOS/IOS 모두 설정을 해주어야 한다. npm 라이브러리 설치 명령어와 위 권한 관련 설정에 대해서는 도큐먼트를 잘 따라가면 순조롭게 진행된다. https://github.com/react-native-cameraroll/react-native-camerarol..