✨ 기록하기록 ✨ ✨ 기록하기록 ✨

프론트엔드

• [React Native] Redux Toolkit을 활용해 로그인 상태에 따라 페이지 전환하기

  프론트엔드/React 2023. 4. 7. 10:27

  틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 진행하고 있는 개인 프로젝트는 그렇게 복잡한 구조가 아닌지라 Redux를 사용할 생각은 없었다. 하지만 프로젝트를 진행할수록 Redux의 필요성을 절실히 느꼈다. 한 가지 예로 로그아웃 기능을 구현할 때 마이페이지 부분에서 login state를 true → false로 변경하고 이 state값을 로그인 페이지까지 끌어올려야 하는 과정이 번거롭고 코드가 지저분해지는 것이었다. 결국 Redux를 사용하기로 결정! 업무에서 Redux를 사용해 본 경험이 있지만 입사했을 때부터 기존 코드에 있었던지라 그에 맞춰 사용한 정도였지 세팅을 한 건 이번이 처음이었다. 문제: 중첩된 네비게이터를 거쳐 state를 관리하기 힘들다. 결론: Redux st..

  Read More
• [React Native] IOS에서 아이콘 사용하기 (react-native-vector-icons)

  프론트엔드/React 2023. 3. 17. 12:09

  틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇React native에서 아이콘을 사용하기 위해선 React native용 아이콘 패키지를 설치해야한다. 1. react-native-vector-icons 설치npm i react-native-vector-icons 2. podFile에 지정된 종속성 Xcode 프로젝트에 설치cd ios && pod install 3. node_modules/react-native-vector-icon에 있는 Fonts 폴더를 Xcode 프로젝트에 드래그해서 복사복사 시 Add to targets, Create group 체크되었는지 확인. 4. Info.plist 수정Xcode에서 Info.plist > Fonts provided by applicat..

  Read More
• [React Native] Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.

  프론트엔드/React 2023. 3. 15. 12:03

  틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 React Native 앱을 시뮬레이터로 실행시키는데 빌드하는 부분에서 에러가 발생했다. note: Building targets in dependency order /My/project/rnclient/ios/Pods/Target Support Files/Pods-rnclient/Pods-rnclient.debug.xcconfig:1:1: error: unable to open configuration settings file /My/project/rnclient/ios/Pods/Target Support Files/Pods-rnclient/Pods-rnclient.debug.xcconfig:1:1: error: unable to ope..

  Read More
• [React Native] 개발 환경 세팅하기

  프론트엔드/React 2023. 3. 8. 12:34

  틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 개인 플젝의 기본 기능이 어느 정도 구현되었으니 아이폰에서 앱을 테스트해보고자 했다. 아이폰 앱의 경우 testflight를 통해 테스트를 할 수 있는데 이를 위해선 애플 개발자 계정을 등록하고 연회비를 지불해야 한다. 그런데 애플 개발자 등록이 안 되는 이슈가 발생했다. 여러 포스트들에서는 개인 정보 입력하는 부분에 영문이 아닌 한글로 정보를 입력해야 한다고 하는데 해당 페이지에서 한글 입력이 안 되는 것이었다. 이미 계정 등록에 한 번 실패한 상황이었기에(이 때는 영문으로 개인 정보를 입력했다) 이번에는 무조건 패스한다!라는 생각이었고, 해결 방법을 찾기 위해 구글을 뒤져봤다. (해결 🥳 : Apple developer program ..

  Read More
• height: 100% 와 height: 100vh 의 차이

  프론트엔드/css 2023. 1. 19. 14:12

  틀린 내용이 있을 수 있습니다. 발견하시면 말씀 부탁드립니다! 🙇 한 줄로 요약하면 %는 상위 엘리먼트에 대한 비율이고, vh는 뷰포트(viewport, 화면 크기)에 대한 비율이다. 예를들어 부모 엘리먼트의 높이가 1500px이고 자식 엘리먼트의 높이가 100%로 설정되어 있다면, 자식 엘리먼트의 높이는 부모 엘리먼트를 따라 1500px가 될 것이며, 화면 높이를 벗어난다. 반연 자식 엘리먼트의 높이가 100vh로 설정되어있다면 부모 엘리먼트 높이와 상관없이 기기의 화면 높이에 딱 맞게 보여질 것이다. 참고 https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and

  Read More