Jun's TID

이번에도 마찬가지로 front-end 국민 실습 App인 todoList를 만들어 보려고 한다. 나름 CRUD도 다 들어가야 하고, 기본적으로 react-native app이 어떤 '형식'으로 구성이 되어 만들어지는 지를 확인할 수 있는 아주 좋은 실습이라고 생각은 하지만, 조금 지루한 프로젝트인 건 반박할 수 없는 사실이다. App의 데이터는 react를 공부하면서 다뤘던 useState Hook을 기반으로 하며, StyleSheet를 사용하는 것과 아래 코드에서 확인할 수 있겠지만, 버튼과 같은 컴포넌트들을 터치했을 때 그 터치 효과를 정해줄 수 있는 여러 컴포넌트를 을 사용하는 걸 제외하면 react App 제작과 크게 다르지 않다. 바로 한번 확인해보자. ◎App.js import React, {..

React Native에서 StyleSheet의 resizeMode 속성은 이미지의 크기 조정 방식을 결정하는 데 사용되는 것이다. 이 속성에는 여러 옵션이 있는데, 주요 옵션은 다음과 같다. - cover: 이미지가 컨테이너의 경계를 초과하지 않도록 조정되며, 비율은 유지된다. 이미지의 일부가 컨테이너에 맞지 않을 수 있다. - contain: 이미지가 컨테이너 안에 완전히 들어가도록 조정되며, 비율은 유지된다. 이미지의 너비나 높이가 컨테이너의 너비나 높이보다 작아질 수 있다. - stretch: 이미지가 컨테이너의 너비와 높이에 맞도록 늘어난다. 이 때 이미지의 원래 비율은 유지되지 않는다. - repeat: 뷰의 크기대로 이미지를 리사이징한다. 이 과정에서 이미지의 가로 세로 비율이 원본과 달라질..

거의 모든 웹/앱 개발 언어 실습의 고유 첫 프로젝트인 아주 간단히 버튼으로 숫자만 하나씩 증가/감소시킬 수 있는 카운터를 만들어보자. ◎components/Counter.js import React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; const Counter = ({count, onIncrease, onDecrease}) => { return ( {count} ); }; const styles = StyleSheet.create({ wrapper: { flex: 1, }, numberArea: { flex: 1, alignItems: 'center', justifyContent: 'center', }, n..

react-native를 공부한 지 얼마 지나지 않았지만, 벌써 마음에 든다. 바로 css 파일을 굳이 따로 만들지 않는다는 것! 개인적으로 css 파일을 따로 만들고 각종 셀렉터들을 막 찾아다니는 걸 정말 싫어해서... 이건 좀 반갑다. 간단하게 react-native에서 사용하는 StyleSheet의 특징과 예제 코드를 보자. CSS와 StyleSheet의 차이점 - 셀렉터라는 개념이 존재하지 않는다. - 모든 스타일 속성은 camelCase로 작성해야만 한다. - display 속성은 기본적으로 flex이며, 다른 값은 none 밖에 없다. - flexDirection 속성의 기본값은 웹에서는 row이지만, react-native 에서는 column이다. - react-native에서 스타일링할 때..

js를 많이 사용하는 사람들은 보통 ESLint로 조금 더 까다로운 문법 검사를 하면서 에러를 쉽게 찾는다고 하시길래.. 나도 한번 써보려고 한다. 기본으로 생성되는 config 파일을 그대로 두고 쓰려니까, 세미콜론도 못쓰게 하시길래. 내가 사용할 옵션들을 추가하고, 쓸데없는 옵션은 비활성화한 파일을 저장해두려고 한다. ◎.prettierrc.js module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', }; ◎.eslintrc.js module.exports = { root: true, extends: '@react-native',..

react를 한창 공부를 하던 때에 같이 했으면 참 좋았을 걸... 그때 괜히 Flutter가 더 좋대!라는 소리를 어디서 봐서 겉멋 부린다고 재낀걸 아주 후회하고 있다... 물론 flutter가 안좋다는 게 아니라, 회사 프로젝트 하나가 모바일을 react-native로 가는 바람에... flutter를 현재 딱히 쓸 곳이 없어졌다. 이제 새해도 왔고, 진짜 본격적으로 나만의 서비스를 하나 가지고 싶어서 리액트 숙련도가 많이 올라온 지금! 리액트 네이티브를 공부하려고 한다. Hello! react-native! 길벗 출판사의 react-native를 다루는 기술을 참고하여 차근차근 하나씩 해보려고 한다. 우선, 첫 프로젝트를 만들어보자! 새 프로젝트 생성 명령어 npx react-native init ..