후니후니

이번 포스팅에서는 React Native의 Core Components에 대해서 알아보겠습니다. 다시 한번 Core Components가 어떤 건지 짚어보자면.. React Native의 Core Components는 React Native에서 렌더링 되는 기본적인 UI 요소들을 말합니다. 이러한 Core Components를 사용하여 React Native 앱을 개발할 수 있습니다. 어떤 컴포넌트가 있을까요? 주로 사용되는 Core Components를 알아보겠습니다. 1. View는 React Native에서 가장 기본적인 컴포넌트 중 하나입니다. 이는 다른 컴포넌트들의 컨테이너 역할을 하며, CSS의 div와 유사합니다. import { View, StyleSheet } from 'react-na..

안녕하세요. 앱 개발에 관심이 생겨 제가 주로 사용하는 React와 비슷한 React Native 공부를 시작하게 됐습니다. 이번 포스팅에서는 React Native가 어떤 건지 간단하게 이야기해보려고 합니다. 제가 공부한 내용을 정리한 문서임을 참고해주세요. React Native란? React Native는 Facebook에서 개발한 오픈소스 모바일 애플리케이션 개발 프레임워크입니다. 이 프레임워크는 웹 개발에 사용되는 React와 유사한 방식으로 작동하지만, 이를 이용해 네이티브 모바일 애플리케이션을 개발할 수 있습니다. React Native의 동작 원리를 간단히 설명하자면, 우리가 작성하는 React 컴포넌트는 React Native를 거쳐서 Bridge라는 중간체를 통해 iOS와 Android..

✏️ React Query의 Stale 저번 포스팅에서는 React Query의 기초적인 부분에 대해서 알아보았다. 이번 포스팅에서는React Query의 Stale과 Cache에 대해서 적어보려고 한다. Stale React Query에서 Stale은 만료되었다는 뜻을 가지고 있다. React Query Devtools를 보면 Stale, Fetching, Fresh, Inactive 등의 상태를 확인할 수 있다.여기서 Stale에 표시되는 Query는 만료된 데이터를 뜻한다. 만료된 데이터라는 것을 무엇일까? Stale이란 신선하지 않은.. 이라는 뜻을 가지고 있다. 데이터가 신선하지 않고, 서버에서 다시 새로운 데이터를 받아야 하는 뜻으로 볼 수 있을 것 같다. React Query에서는 Stale..

✏️ React Query는 무엇일까 요즘 React 기반의 프로젝트를 보면 비동기 통신에 React Query를 많이 사용하고 있는 걸 볼 수 있다. 필자는 최근에서야 실무에서 React를 주로 사용하게 되었고, 이전에는 Vue를 주로 사용하다 보니 비동기 통신은 Axios만 사용했었고, Axios로 데이터를 가져오면 Vuex로 관리하게 되었는데 요즘은 React Query + Recoil 조합을 꽤 많이 사용하는 것 같다. 우선, React Query는 자신을 비동기 상태 관리라고 설명한다. 서버에 있는 데이터를 가져오고, 캐싱하고, 비동기 통신에서 발생하는 Error 혹은 Loading 단계를 쉽게 처리할 수 있도록 도와준다. 처음 React Query를 다룰 때 캐싱한다는 게 조금 생소했다. 그러..

✏️React를 경험해보자 6탄 Redux의 흐름부터 파악을 해야 할 것 같다. 저번에 createStoreWithMiddleware 함수를 통해 store를 생성했고, reducer라는 인자를 넘겨주었다. // user_reducer.js import { LOGIN_USER } from "../_actions/types"; export default function (state = {}, action) { switch (action.type) { case LOGIN_USER: return { ...state, loginSuccess: action.payload }; default: return state; } } // reducers/index.js import { combineReducers } fr..

✏️React를 경험해보자 5탄 4탄에서 Provider를 통해 App에서 Store 접근을 할 수 있게 만들었다. 5탄에서는 리덕스를 이용해서 로그인 기능을 만들어보려고 한다. import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { loginUser } from "../_actions/user_action"; function LoginPage(props) { const dispatch = useDispatch(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const onEmailHa..

✏️React를 경험해보자 4탄 3편에서는 Proxy 설정을 통해 Cors 문제를 해결했다. 4편에서는 node.js (server)와 react (client) 서버를 동시에 실행할 수 있는 Concurrently, 상태관리 라이브러리인 Redux를 적용해볼까 한다. - 서버와 클라이언트를 동시에 실행할 수 있는 Concurrently Backend + Frontend를 같이 사용하는 프로젝트를 하다보면, 둘 다 서버를 켜줘야 한다. 매번 귀찮게 두번 명령어를 입력할 필요 없이, 한번의 명령어로 두개의 서버를 켜주는 착한 라이브러리이다. www.npmjs.com/package/concurrently concurrently Run commands concurrently www.npmjs.com npm i..

✏️React를 경험해보자 3탄 2편에서 Axios를 통해 get을 호출했는데 Cors에러가 발생해서 API호출에 성공하지 못했다. 3편에서는 이처럼 Cors 에러를 해결할 수 있는 Proxy 설정을 하려고 한다. - Cors?? 우선 Cors에러가 발생하는 이유는, 다음과 같다. Front서버는 localhost:3000 포트를 사용 중이고, Backend는 localhost:5000 포트를 사용중이다. 이처럼 다른 포트를 사용중일 때, 보안 상의 이유로 Cross Origin Resource Sharing 에러가 발생한다. 이 문제를 해결할 수 있는 방법은 여러가지가 있지만, 나는 Proxy를 통해 해결하려고 한다. - Proxy ?? 네이버에 Proxy 단어를 검색했을 때 나오는 뜻은 "대리, 대리..

✏️React를 경험해보자 2탄 1편에서는 간단하게 React 설치에 대해 작성을 해봤다. 이번 편에서는 라우트와, Axios를 경험(사용)해보려고 한다. - 라우트 사용을 위해 react-router-dom 을 설치해보자 npm install react-router-dom --save 설치가 완료되었다면, App.js에 react-router-dom을 import하고, 라우팅할 컴포넌트도 같이 import 해준다. import React from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/Landi..

✏️React를 경험해보자 1탄 신입 시절, 아니 신입도 아닌 취준생 시절.... 자바스크립트 프레임워크/라이브러리는 Vue.js, Angular.js, React.js 등이 있다는 정도만 아는 상태로 취업을 해버렸다. 취업하고 나니 실무 프로젝트에서는 Vue.js를 사용한다고 하여 몇개월동안 죽어라 Vue.js만 공부하고, 일을 하다 보니 벌써 Vue.js를 사용한지는 1년이 다 되어간다. Vue.js 3이 은근 인기가 있는 것 같은데, 요즘 채용 공고들을 보면 React.js 사용을 하는 회사들이 Vue.js를 사용하는 곳보다 훨씬 많다는 것을 정말 알게되었다. Vue.js도 참 좋은데... Vue.js 밖에 안 써봐서 뭐라 설명할 수가 없네... 그래서...!! React를 공부하려고한다! 우선, ..