후니후니

✏️TypeScript 타입스크립트를 익히기 3탄  이번에는 TypeScript를 프로젝트에 맞춰 설정할 수 있게 필요한 tsconfig.js 파일에서 다루는 옵션을 설명하려고 합니다!이 포스팅에서는 아래 파일에 있는 옵션들이 어떤 역할을 하는지 알아볼게요. // tsconfig.js{ "include": ["src"], "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": false, "moduleDetection": "force", "skipLibCheck": true, }, "ts-node": { "esm": true }} include"incl..

SELECT topic.id AS topic_id, title, description, created, name, profile FROM topic LEFT JOIN author ON topic.author_id = author.id; LEFT JOIN : 왼쪽 테이블의 모든 정보를 포함하면서 오른쪽 테이블과 매칭되는 정보가 있을 경우 결합 ON : 결합 조건 지정 (topic.author_id = author.id) AS : 별칭 지정

데이터 베이스 생성 CREATE DATABASE mydb 테이블 생성 CREATE TABLE student_scores ( student_id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL, math_score INT, english_score INT, science_score INT, created datetime NOT NULL ); 데이터 추가 INSERT INTO table (name, math_score, english_score, science_score, created) VALUES('hoon', 90, 80, 90, NOW()) 데이터 수정 UPDATE table SET name='hoon1' WHERE id=1; 데이터 조회 SEL..

이번 포스팅에서는 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의 Mutation, Infinite Query 지난 포스팅에서는 React Query의 Stale과 Cache에 대해서 알아보았다. 이번 포스팅에서는 Mutation, Infinite Query에 대해서 알아보려고 한다. Mutation useQuery는 데이터를 조회하는 용도로 사용한다. 그러면 Post, Delete, Put 등의 HTTP Method를 사용하기 위해서는 어떻게 할까. useMutation을 사용할 수 있다. useMutation와 useQuery는 비슷하지만 조금 다르다. useMutation은 mutate 함수를 반환한다. useQuery와 달리 Query Key 값이 필요하지 않다. 캐시된 데이터가 없기 때문에 isLoading을 지원하지 않는다. 기본..

✏️ 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를 다룰 때 캐싱한다는 게 조금 생소했다. 그러..