WireTony

발자국을 남기기 위한 공간

프로그래밍/리액트

React 에는 다양한 Hook 들이 존재합니다. 이번 글에서는 useState, useEffect 을 소개하려고 합니다. useState : 상태값을 관리해주는 훅 아래는 코드는 useState() 에 초기값을 빈문자열로 선언해 주고 있다. useState는 Object, bool, string, number 형이 들어갈 수 있다. const [keyword, setKeyword] 가 있는데 keyword는 데이터 그 자체이고 setKeyword 는 keyword에 접근하여 수정할 수 있는 함수이다. 이렇게 array 안에 두개의 return 값을 갖는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 c..

2021. 12. 1.

프로그래밍/Spring

저는 Spring을 처음접하고 React만 경험하였기에 초보자들이 이해하도록 글을 작성하였습니다. Spring과 React를 같이 쓰는 기업은 빅테크 기업들이 사용한다. 스프링과 React를 연동하는 방법은 흔히 Axios 를 사용하여 localhost:8080 에 있는 데이터를 가져오는 것입니다. 그리고 같은 프로젝트에 넣는 것인데 resource 파일 안에 빌드된 React .js파일과 .html 파일을 집어넣거나 Gradle 설정으로 React 빌드를 하게 하고 동시에 서버를 시작하는 것이다. ( 그전에 CROS 에러를 해결하고 시작해야 한다 ) 공식문서에 나와있는 React.js and Spring Data REST 와 같이 하면 될 것 같아서 참조하였다. ( webpack 에 대해 알아야 한다 ..

2021. 11. 9.

프로그래밍/자바스크립트

저는 주언어를 JavaScript 로 정해서 관련된 프레임워크를 찾아보다가 일렉트론을 찾았는데 크롬 같이 애플리케이션 위에서 동작하도록 하는 것인데 JS코드를 어떻게 번들링하는 것인지 의아했고 신기했습니다. JavaScript 로 응용프로그램을 만드는 것에 초점을 두고 학습하기로 마음먹었습니다!!! 구글링 하고 오픈채팅 방에서 물어보다가 Electorn 과 Tauri 를 찾게 되었습니다. ◆ Electorn 이란? Electron 은 JavaScript, HTML, CSS 로 윈도우 또는 Mac, 리눅스 데스크톱 애플리케이션을 만들 수있는 프레임워크이다. 오픈 소스 프레임워크의 하나로 지금은 Github에 의해 개발되고 있다. 원래 웹 애플리케이션을 위해 개발된 프론트엔드와 백엔드 구성 요소를 사용하여 ..

2021. 9. 13.

프로그래밍/리액트네이티브

개요 - Modal : 특정 이벤트에서 새창을 띄었을때 원래 하던 작업을 계속 이어갈 수 있게 해놓은 것이 모달리스이다. 특정 이벤트에서 확인하거나 특정 이벤트를 날려주지 않으면 원래 하던 작업을 계속 이어갈수 없는 새창을 모달이라고 한다. ex) 팝업창 - Pressable : touchableopacity 와 같이 버튼의 역할을 하지만, 더 다양한 press 단계를 추적할 수 있다. - Refreshcontrol : ScrollView 또는 ListView 내에서 화면을 끌어내려서 새로 고침을 추가하는데 사용된다. import React, { useState } from "react"; import { Alert, Modal, StyleSheet, Text, Pressable, View } from ..

2021. 6. 8.

프로그래밍/리액트네이티브

리액트 네이티브의 이미지 컴포넌트(Image , ImageBackground) 와 포커스되어 있으면 KeyboardAvoidingView가 자동으로 스크롤 되도록 하는 것을 학습한다. 1. Image import React from 'react'; import { View, Image, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { paddingTop: 50, }, tinyLogo: { width: 50, height: 50, }, logo: { width: 100, height: 200, }, }); const DisplayAnImage = () => { return ( ); } export defaul..

2021. 6. 4.

프로그래밍/리액트네이티브

ActivityIndicator 란? ● 로딩바를 표시하는 컴포넌트이다. 공식문서 도우미: https://reactnative.dev/docs/activityindicator ActivityIndicator · React Native Displays a circular loading indicator. reactnative.dev props animating ( Type : bool ) - true 일 때 indicator 활성화 - false 일 때 indicator 비활성화 ( IOS는 false 일 때 일시정지 상태로 렌더링 된다. Android는 비활성화 한다. ) size ( Type : enum('small', 'large') ) - enum 유형이다. 작은 or 큰따옴표에 문자열을 입력하면 ..

2021. 5. 23.