Skeleton의 세상

집주변을 돌다가 '아 배고픈데..' 하고 주위를 돌다가 선택했어요. 역삼동에 있는 역삼 주먹고기를 먹고 왔습니다. 삼겹살 1인분 주먹고기 1인분! 진로 한잔과 고기, 그리고 얼큰 칼국수! 얼큰 칼국수는 사진이없어요... 배고팠거든요..! 근데 정말 거짓말 안하고 핵쫀맛 여기 단골될까봐 무서워요 가격은 음.. 솔직히 저렴하진 않아요 그치만! 맛으로 커버가 된다면..? 충분히 내고 먹을만 했습니다

React-Native를 사용하기 위해서 expo를 설치해 주어야합니다. 하지만 그전에 npm이 설치가 되어있어야 하겠죠? node.js를 설치해 줍니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치를 완료 하였다면 이제 npm install -g expo-cli 를 입력해서 expo-cli를 설치해줍니다. 여기서 -g (global)로 설치를 진행하려면 관리자권한이 필요한데 이때는 sudo npm install -g expo-cli 이렇게 입력해주면 해결됩니다. 쭈우욱 설치가 되었다면 expo init AwesomeProject cd Aw..

리액트 네이티브에서 제공해주는 TextInput이 있습니다. 이 TextInput은 많은 기능이 있습니다. 스타일 또한 자유롭게 사용이 가능하며 포커스, 값변경시 등 체크가 가능합니다. const [value, onChangeText] = React.useState('값'); onChangeText(text)} value={value} /> 이렇게 사용을 할 수 있습니다. allowFontScaling 텍스트 크기 접근성 설정을 고려하여 글꼴 크기를 조정할지 여부를 지정합니다. 기본값은 true입니다. autoCapitalize TextInput특정 문자를 자동으로 대문자로 표시 할 수 있습니다. 이 속성은과 같은 일부 키보드 유형에서는 지원되지 않습니다 name-phone-pad. characters:..

웹에서는 스크롤이 자동으로 설정되며 스크롤을 할 수 있지만 앱에서의 뷰는 자동으로 스크롤이 적용되지 않습니다. 그렇기 때문에 리액트 네이티브 요소중 ScrollView가 있습니다. ScrollView에 대하여 한번 알아 볼까요. View와 크게 다른점은 없습니다. 그저 ScrollView로 한번 감싸주면 되는 것이지요 export default function App() { return ( 스크롤이 내려올정도로 텍스트를 적어보세요 ); } 위와 같이 적는다면 스크롤뷰가 가능합니다. 스크롤 뷰에도 엄청나게 다양한 레퍼런스가 존재하는데 그양이 너무 많아서 여기에 전부 나열하기에는 무리가 있다고 판단하여 공식 홈페이지 문서링크를 남겨두려 합니다. https://reactnative.dev/docs/scroll..

와 같은 역할이라 볼 수 있는 에 대하여 알아봅시다 바로 코드로 알아보죠 const styles = StyleSheet.create({ mainText: { fontFamily: "Cochin" }, titleText: { fontSize: 20, fontWeight: "bold" } }); const TextInANest = () => { const titleText = useState("Bird's Nest"); const bodyText = useState("This is not really a bird nest."); return ( {titleText} {"\n"} {"\n"} {bodyText} ); }; 위와 같이 사용이 가능합니다. 위의 styles를 통하여 스타일을 정의하고 render하..

앱의 가장 기본이 되는 요소가 있습니다. 이는 뷰 (View) 입니다. 뷰는 웹의 와 같다고 보면 됩니다. 코드를 통해 간단히 알아봅시다 뷰안의 뷰 입니다 위의 코드는 이러한 뷰 스타일을 가집니다. 검은 배경이 가장 밖의 뷰, 빨간 배경이 안의 뷰 입니다. 뷰는 기본적으로 display: flex를 가지고 있으며 column 을 기본으로 합니다. 그렇기 때문에 아래의 코드로 보면 뷰안의 뷰 입니다 뷰안의 뷰 입니다2 이러한 모양을 가집니다. 정말 별거 없죠? 이상 뷰(View)에 대하여 알아보았습니다. 여러 요소들을 합쳐서 쓰는것은 다른 글로 포스팅 하도록 하겠습니다!

리액트 네이티브에는 Image를 넣는 요소가 두가지나 존재합니다. 한가지는 를 사용하는 것이고 두번째는 를 이용하는 것입니다. 두개의 요소가 무슨차이점이 있는가 사실... 차이점을 모르겠습니다. Image를 써도 ImageBackground를 써도 똑같이 동작하기 때문이죠 리액트 네이티브 문서에서는 이렇게 설명하고 있습니다. 웹에 익숙한 개발자의 일반적인 기능 요청은 background-image입니다. 이 사용 사례를 처리하기 위해 와 같은 소품을 가진 구성 요소를 사용하고 그 위에 하위 요소를 추가 할 수 있습니다. 라고 적혀있습니다. 허허 무슨말인지 모르겠네요. 그냥 이미지 위에 다른 요소들을 추가할 수 있다. 이런 말인거 같은데 이는 Image요소를 사용해도 똑같습니다. 이제 사용하는 방법을 한번..

리액트와 리액트 네이티브는 대부분 비슷하게 동작을 하지만 렌더링과 스타일 적용 방법에 대해서는 큰 차이를 보입니다. 뷰를 작업하기 위해서는 알아야할 점이 있습니다. 리액트 네이티브는 기본적으로 앱을 만들기위해 만들어진 프레임워크로 웹을 만들기 위해서 만들어진 리액트와는 차이점이 있습니다. 리액트는 일반적인 HTML요소를 사용하여 렌더링을 할 수 있지만 리액트 네이티브는 앱에 종속적인 리액트 컴포넌트를 사용합니다. 리액트 컴포넌트를 사용하는 이유는 IOS Android 등 각 앱에 대응하여 해당 앱의 코드로 변환하기 때문입니다. 간단히 표로 리액트와 리액트 네이티브 요소의 차이점을 알아봅시다 리액트 (React) 리액트 네이티브 (React-Native) , 위와 같이 차이점이 있습니다. 위에 적은것 말고..

1. 체다치즈 3~4개 2. 연와사비 3. 캔참치 * 2 (어느 참치든 상관없음) 4. 비스킷 (저는 참으로 준비했습니다) 참치에 마요네즈를 적당량 섞어줍니다. (그냥 많이 넣고싶다면 많이 적게 넣고싶으면 적게) 비스킷(참)을 준비해 줍니다 두둥! 적당한 접시에 참치를 올려줍니다. (양은 어떻게해도 맛있더라구요...!) 와사비를 적당량 위에 올려줍니다. (잘못조절하면 코찡) 위에 체다치즈를 4등분해서 딱 올려주면 완성! (4등분하면 비스킷이랑 크기가 비슷해서 싸악 덮여집니다!!) 집에 있는 재료로 그냥 대충 만들어 보았습니다. 위에 토마토를 2등분해서 올려주면 새콤달콤한 맛까지 더해져 더 맛있을거 같아요!

React-Native란 무엇일까? IOS와 Android에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크입니다. 장점 1. 웹 개발자가 익숙한 자바스크립트를 이용하면서 겉모습과 실제 동작까지 진짜 네이티브인 모바일 앱을 만들 수 있습니다. 2. 그리고 Node.js를 이용하기때문에 플랫폼간의 공유가 가능하고 쉽고 빠르게 앱을 개발할 수 있다는 장점이 있죠. 굉장히 편해보이는 프레임워크이지만 단점이 존재합니다. 항상 뭘쓰든 장점이 있다면 단점도 존재하죠! 단점 1. 디버깅이 어렵습니다. 시뮬레이션을 사용하기 때문이죠. 시뮬레이션 디버깅은 항상 어렵더라구요.. ㅠㅠ 2. 플랫폼이 업그레이드 되었을경우 리액트 네이티브가 이를 지원해주기까지의 시간이 존재합니다. 리액트 네이티브는 리액트를 먼저..