모리스의 개발 노트

안녕하세요. 모리스입니다.😄이번 포스트에서는 예전에 RN 개발할 때 유용하게 썼던 디버깅 툴 하나를 소개해 볼까 해요. VSCode는 정말 다양하고 유용한 서드파티 extension들이 많이 있어서VSCode로 React Native 개발할 때 유용하게 썼던거 같아요. 이번에 소개할 extension은 RN개발 시 디버깅을 편리하게 할 수 있는React Native Tools에 대한 내용이에요. 자 그럼. React Native Tools에 대해 알아볼게요.공식 마켓플레이스 문서에 따르면:This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug ..

안녕하세요. 모리스입니다.🙂이번 포스트에서는 지난 포스트에 이어서 React의 Hook API에 대해서 작성해볼게요. React의 Hook API를 사용해 프로젝트를 진행하면서, 가장 기본적이면서 많이 사용하는 세 가지useState, useEffect, useContext에 대해서 알아볼게요! ✅ useState컴포넌트 내부에서 상태값(state) 을 유지할 수 있게 해주는 가장 기본적인 Hook이예요.📌 주요 개념useState는 상태값과 해당 상태를 갱신할 수 있는 함수를 반환해요.컴포넌트가 처음 렌더링될 때, 반환된 state는 전달한 initialState 값으로 초기화 돼요.const [state, setState] = useState(initialState);💡 쉽게 말하면 위 코드에서..

안녕하세요. 모리스입니다.😃React Native 앱을 개발하면서 예전에 학습했던 React Hook에 대해서 다시 정리해 볼까 해요. 저는 지금은 iOS Native를 개발하고 있지만 실무에서 처음 개발을 접한 건 RN이였어요.Native를 하면서 느끼는 거지만 React는 정말 정말 정말 잘 만든 프레임워크라는게 뼈저리게 느껴지네요..아마 시작을 RN이나 Flutter로 시작하신 개발자 분들은 느끼실 거 같아요.. Native는  하나부터 열까지 내가 구현해야 하지만..cross platform들은 정말 많은걸 컴포넌트화 해서 제공해 주는구나.. 정말 편하구나..라는 걸요..😂 아무튼 이상한 소리 그만하고 이번 포스트 주제인 React Hook API에 대해서 알아볼까요?🔗 Hook이란?Reac..

안녕하세요. 모리스입니다. 😄오늘은 React Native로 앱 UI를 개발하다 보면 예기치 못한 부분에서 레이아웃이 어긋나게 되는데..저는 styled component로 AOS에서 font를 적용했을 때 원치 않는 padding이 발생하는 문제 였어요.결론부터 말하자만 문제의 원인은..Text 컴포넌트에 적용된 font 자체의 padding입니다.자, 이제 조금 더 자세하게 들여다볼까요?문제 상황텍스트 버튼에 일반적으로 많이 쓰는 폰트인 NotoSans 폰트를 다음과 같이 적용했어요.vehicleText: { fontFamily: FontFamily.notoSansRegular, fontSize: 32.0, fontWeight: 'normal', fontStyle: 'normal', let..