본문 바로가기
728x90
반응형

App

[React Native] #2-3. 계산기 인터페이스 심화 2025. 2. 15. 2.3. Button 컴포넌트와 props2.3-4. 계산기 버튼 만들기이전 포스팅에 이어 작성한다. 2.3(Button 컴포넌트와 props) / 3-4 [React Native] #2-2. 계산기 인터페이스 만들기25.02.10 이전 포스팅에서는 기본적인 리엑트 네이티브의 프로젝트 초기 설정을 진행했고, props의 객체 구조 분해할당에 대해 언급하고 마무리했다. 잠깐 다시 복습해 보자! [React Native] #2-1. 계산udangtangtang-cording-oldcast1e.tistory.com 계산기를 구현하기 위한 버튼은 다음과 같다 : 정사각형 숫자 / 가로 형 숫자 / 정사각형 연산 / 세로형 연산중복된 기능을 불필요하게 반복 생성하는 것이 아닌 4가지 종류의 버턴을 모두 활용할 수..
[React Native] #2-2. 계산기 인터페이스 기초 2025. 2. 11. 25.02.10 이전 포스팅에서는 기본적인 리엑트 네이티브의 프로젝트 초기 설정을 진행했고, props의 객체 구조 분해할당에 대해 언급하고 마무리했다. 잠깐 다시 복습해 보자! [React Native] #2-1. 계산기 만들기 초기 설정이번 포스팅에서는 간단한 계산기 어플리케이션을 구현해보자. 다음 내용을 다루게 된다.스타일 : StyleSheet로 스타일 변경하기 / 화면 정렬과 방향컴포넌트 : props와 상태 / 커스텀 컴포넌트Hooks: uudangtangtang-cording-oldcast1e.tistory.com이전 포스팅 복습객체 구조 분해 할당(Object Destructuring)은 객체에서 특정 속성만 추출하여 변수에 할당하는 방법이다. 이를 통해 불필요한 객체 참조를 줄이고, 코드..
[React Native] #2-1. 계산기 만들기 초기 설정 2025. 2. 4. 이번 포스팅에서는 간단한 계산기 어플리케이션을 구현해보자. 다음 내용을 다루게 된다.스타일 : StyleSheet로 스타일 변경하기 / 화면 정렬과 방향컴포넌트 : props와 상태 / 커스텀 컴포넌트Hooks: useState로 상태 관리하기먼저 "rn-calc"이라는 프로젝트를 생성 후 프로젝트 파일로 이동, ESLint 파일을 생성한다.실행하면 프로젝트 유형을 선택하는 옵션이 나타난다. 여기서 "blank"(빈 프로젝트)를 선택한 후 진행한다.맥북에서 파일/폴더 삭제하는 명령어 정리1. 일반 파일 삭제 : rm 파일경로2. 폴더 삭제 (-r 옵션 추가) : rm -r 폴더경로3. 강제 삭제 (-rf 옵션 추가) : rm -rf 파일경로 또는 폴더경로4. 권한 문제 발생 시 (sudo 사용) : su..
[React Native] #1-2. 리액트 네이티브 프로젝트 생성하기 2025. 2. 2. React Native 프로젝트를 보다 쉽게 개발할 수 있도록 도와주는 Expo를 사용하면 빠르게 앱을 설정하고 실행할 수 있다.1. 리액트 네이티브 프로젝트 생성하기1-1. Expo 프로젝트 생성Expo는 React Native 개발을 더 간편하게 만들어주는 도구이다. 이를 위해 expo-cli(Expo Command Line Interface)를 사용하면 쉽게 프로젝트를 생성하고 실행할 수 있다. 이때 expo-cli는 Expo 프로젝트를 생성하고 관리할 수 있는 명령어 도구이다. React Native 앱을 빌드하거나, 실행하고, 테스트할 때 사용된다. 터미널에서 다음 명령어를 실행하여 expo-cli를 글로벌 패키지로 설치한다 : npm install -g expo-cli이 명령어를 실행하면 ex..
[React Native] #1-1. 리액트 네이티브 시작하기 2025. 2. 1. 리액트네이티브의 시작여러 개발 경험을 통해 결국 수상하기 위해서는 사람에게 가장 가깝고 친숙한 기술이 필요하다고 생각하게 되었고, 이를 위해 필수적인 요소는 직관적인 UX와 UI를 갖춘 완성도 높은 애플리케이션이라고 판단했다. 기존에는 백엔드와 프론트엔드를 명확히 구분하는 개발 방식을 고수했지만, 모바일 환경에서의 최적화와 사용자 경험을 직접 개선하기 위해서는 앱 개발 전반에 대한 이해가 필수적이라고 느꼈다. 이에 따라, React Native를 선택했다. React Native는 하나의 코드베이스로 iOS와 Android에서 모두 동작하는 크로스 플랫폼 앱을 개발할 수 있어, 개발 효율성을 극대화할 수 있다. 또한, 기존의 React 기반 웹 개발 경험을 살려 JavaScript와 JSX 문법을 활용할..
728x90
반응형

티스토리툴바