후니후니

안녕하세요! 이번 글에서는 Next.js에서 BailoutToCSR이 무엇인지, 언제 발생하는지, 그리고 이를 확인하는 방법에 대해 설명드리겠습니다.Next.js를 사용하다 보면 **"Bail out to client-side rendering"**이라는 메시지를 만나게 될 때가 있는데요,쉽게 만나진 못합니다. 콘솔에 에러가 표시되거나, 앱이 중단되거나 하는 이슈가 아니기 때문이에요. 그렇지만 Next.js로 프로젝트를 개발하신다면, 이는 꼭 알아야 하는 영역입니다!Bailout이 무슨 뜻이고, 왜 발생하는지, 어떻게 해결할 수 있는지 함께 알아보겠습니다.  1. Bailout이란?- Bailout의 뜻Bailout이라는 단어는 원래 "긴급 탈출" 또는 "구제"라는 의미를 가지고 있습니다.Next.js에..

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

✏️ Closure에 대해서 조금 더 알아보자 예전에 자바스크립트 클로저에 대해 간단하게 글을 올린적이 있다. 오늘은 클로저에 대한 예시 코드를 조금 보며 정리를 하려고 한다. 사람마다 다르겠지만 클로저의 정의를 내린다면 나는 이렇게 말할 것 같다. "선언될 때의 환경을 기억하고, 실행의 종료된 함수 안에 변수에 접근할 수 있는 것" const getIncrementCountFunc = () => { let count = 0; return () => { return ++count } } const incrementCount = getIncrementCountFunc() incrementCount() // 1 incrementCount() // 2 incrementCount() // 3 getIncreme..