4) React-Native Props와 State

4) React-Native Props와 State

props와 state는 컴포넌트가 UI뿐만 아니라 다양한 기능을 담당할 수 있도록 하여 더욱 다양한 역할을 수행할 수 있도록 해준다.1. propsprops란 properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다.부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 수 있지만 변경하는 것은 불가능하다.props의 변경이 필요할 경우 props를 설정 및 전달한 부모 컴포넌트에서 변경해야 한다. props 전달하고 사용하기먼저 부모 컴포넌트에서 props를 자식 컴포넌트로 전달하는 방법에 대해 알아보자!앞에서 Button 컴포넌트를 사용하면서 Button 컴포넌트의 title 속성을 지정했다.이 코드처럼 Butt..

  • format_list_bulleted React-Native
  • · 2024. 10. 23.
  • textsms
3) React-Native 컴포넌트

3) React-Native 컴포넌트

컴포넌트란 재사용이 가능한 조립 블록으로 화면에 나타나는 UI요소이다.지금까지 봤던 App.js 파일도 App이라는 컴포넌트이다.컴포넌트는 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 props이나 자신의 state에 따라 표현이 달라지고 다양한 기능을 수행한다.즉 컴포넌트는 데이터와 UI 요소의 집합체라고 할 수 있다.1. 내장 컴포넌트Button 컴포넌트를 사용하고 title과 onPress 속성을 지정해 보자.title 속성은 버튼 내부에 출력되는 텍스트이며, onPress 속성에는 버튼이 눌렸을 때 호출되는 함수를 지정할 수 있다.src폴더를 생성하고 App 컴포넌트를 작성할 App.js파일을 생성한다.src/App.jsimport React from "react";import { Vie..

  • format_list_bulleted React-Native
  • · 2024. 10. 23.
  • textsms

2) React-Native JSX

컴포넌트는 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI요소라고 생각하면 이해하기 편함 먼저 프로젝트를 생성하게되면 아래와 같은 코드가 생성 됨import React from 'react';import {View, StyleSheet, Text} from 'react-native';const App = () => { return ( Open up App.js to start working on your app! );};const styles = StyleSheet.create({ container: { flex:1 , justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff..

  • format_list_bulleted React-Native
  • · 2024. 10. 23.
  • textsms
1) 리액트 네이티브란

1) 리액트 네이티브란

※ npx expo init [프로젝트 명]※ npx expo start --tunnel리액트 네이티브의 장점과 단점리액트 네이티브가 출시되면서 Objective-C 또는 Java를 사용하여 개발하지 않아도 웹 개발자가 익숙한 기술을 이하여 모바일 개발을 할 수 있게 됨특히 리액트에 익숙한 개발자라면 조금 더 수월하게 RN을 익힐 수 있음장점작성된 코드 대두분 플랫폼 간 공유가 가능해서 iOS, 안드로이드를 동시에 개발할 수 있다모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있으면 시작 가능작성된 구성 요소들이 재사용 가능함패스트 리프레쉬 기능을 제공함변경된 코드를 저장하면 자동으로 변경된 내용이 적용된 화면을 확인 가능기존에 수정 → 새로고침, 수정 → 컴파일 → 새로고침이라는 번거로운 작업을 ..

  • format_list_bulleted React-Native
  • · 2024. 10. 23.
  • textsms
[Docker] Docker 배포 시 Timezone 설정 문제 해결하기 (실행 시점에 타임존 설정)

[Docker] Docker 배포 시 Timezone 설정 문제 해결하기 (실행 시점에 타임존 설정)

서버에 애플리케이션을 배포할 때 시간대(Timezone) 문제는 종종 발생하는 문제 중 하나입니다. 저도 기존에 수동으로 서버에 배포할 때, 빌드된 JAR 파일을 실행하면서 서버의 시간대가 한국 시간(KST)과 맞지 않아 고생했던 경험이 있습니다. 이를 해결하기 위해 JAR 파일을 실행할 때 아래와 같은 옵션을 사용해 시간을 맞췄습니다:2024.09.18 - [백엔드/AWS] - [AWS] EC2 내부 MariaDB 시간 설정 [AWS] EC2 내부 MariaDB 시간 설정1. 문제 발생졸업 작품을 진행하던 도중, 게시글을 올렸을 때 시간이 현재 시간보다 9시간 느리다는 것을 발견했다.서버의 시간을 KST로 설정해 놓았기 때문에 시간이 맞아야 했지만, 왜 이런 문mike705114.tistory.com-..

  • format_list_bulleted 백엔드/Docker
  • · 2024. 10. 16.
  • textsms
[Docker] AWS Access Key 유출 방지 및 GitHub Secrets 활용하여 안전한 Docker 배포 방법

[Docker] AWS Access Key 유출 방지 및 GitHub Secrets 활용하여 안전한 Docker 배포 방법

최근 AWS Access Key를 깃허브에 실수로 유출한 경험이 있었습니다. 다행히 AWS에서 해당 키가 노출되었다는 이메일을 통해 알게 되어 즉시 키를 비활성화하고 보안을 강화할 수 있었습니다. 이 일을 계기로 민감한 정보를 어떻게 관리할지 고민하게 되었고, GitHub를 통해 배포할 때 안전하게 키를 관리하고 배포하는 방법을 정리하게 되었습니다. 민감한 정보 관리 방식로컬 환경에서는 일반적으로 application-SECRET-KEY.properties와 같은 설정 파일을 통해 민감한 정보를 관리하고, 서버 배포 시에는 수동으로 해당 파일을 생성하여 사용했습니다. 하지만 Docker를 활용한 자동 배포 환경으로 전환하면서 수동 파일 관리 방식의 한계가 드러났습니다. 이를 개선하기 위해 GitHub의 ..

  • format_list_bulleted 백엔드/Docker
  • · 2024. 10. 16.
  • textsms