끄적끄적

넥스트가 3달전에 새로운 버전을 공개했습니다! next13에서의 변경점이 여러가지가 있지만 가장 중요한건 Turbopack 이지 않을까 싶습니다. javascript으로 할 수있는 webpack의 성능의 한계를 느끼고 Rust로 개발한 새로운 제품으로 더욱 빨라졌습니다. 공식블로그에서는 다음과 같이 설명합니다. 1. Webpack보다 700배 빠른 업데이트 2. Vite보다 10배 빠른 업데이트 3. Webpack보다 4배 빠른 콜드 스타트 얼핏보기에도 번들 속도를 엄청 빠르게 만들었다는 것 같습니다. 버전을 업데이트 하면서 React와 Node의 최소 버전이 업데이트 되었습니다. - React 17.0.2 -> 18.2.0 - Node 12.22.0 -> 14.6.0 우선 가장 최신 버전의 파일들을 받..

현재 많은 라이브러리들이 제공하는 Modal창들이 있지만, 각각 생긴것 들이 모두 다르고, api가 달라 여러개를 동시에 쓰기가 쉽지 않습니다. 또한 react를 잘 이용하는 느낌으로 사용하기 위해 나만의 모달창을 하나 만들어 보겠습니다. 느낌새는 ant design의 모달과 약간 유사하게 제작을 해보았지만, 커스텀을 통해 어느정도의 수정이 가능하도록 해보겠습니다. 가장먼저 모달 컴포넌트의 본체를 만들겠습니다. 1. MyModal.js import React from 'react'; import styles from './MyModal.module.css'; export default function MyModal({ open, title, bodyStyle, children, onCancel, foot..

리엑트를 사용하는 사람들한테 가장 많은 실수를 유발시키거나, 문제를 일으키는 부분은 바로 state를 set시키는 과정이라고 생각합니다. 개인적으로 질문을 주시는 분들 중 절반정도의 분들은 setState의 비동기 문제때문에 원치않은 state를 사용하고 계셨습니다. 이처럼 setState는 비동기 작업으로 우리가 언제! 정확히 실행 되는지를 보장할 수 없습니다. 따라서 한 함수내에서 또는 같은 실행환경?에 있는 곳에서 같은 같은 state를 여러번 set시키는 것은 안됩니다. 하지만 꼭 사용을 하고 싶거나, 그래야만 하는 상황이 존재한다면 방법이 한가지 있습니다. 바로 함수형 setState입니다. 위와같이 객체의 형태가 아닌 함수의 형태이기때문에 큐에 넣고 순차적으로 실행할 수 있게 해줍니다. 위와 ..

PWA란 Progressive Web App의 줄임말입니다. 쉽게 웹사이트를 앱처럼 사용할 수 있도록 해주는 것입니다. 기존의 웹사이트들을 핸드폰에서 실행할 경우 성능상의 문제로 좋지 않은 경험을 느꼈을 수 있습니다. 하지만 PWA를 이용한다면 네이티브앱과 비슷한 성능의 앱처럼 사용할 수 있습니다. 제가 PWA를 사용하게 된 이유는 2가지입니다. 1. 웹사이트 주소를 매번 입력하여 들어오기 번거로우며, 해당 사이트의 특정 기능을 앱처럼 사용하고 싶다. 2. 핸드폰 푸쉬알림을 이용하여 사용자들의 서비스 질을 높이고 싶다. 이번 글에서는 NextJS로 만들어진 프로젝트를 PWA로 적용하는 법을 다뤄보겠습니다. ■필요한 library 설치하기 npm i next-pwa yarn add next-pwa ■web..

React 개발하다보면 콘솔 창에 한번쯤은 봤을 경고문이 있습니다. " Each Child in an array or iterator should have a unique 'key' prop " 특히 리스트 형식의 구조를 짜다보면 map 같은 반복문을 통해 요소를 return 하는 형식도 많이 사용합니다. 그럴때 각 요소의 식별을 위한 값이 바로 key 값입니다. 어떤 데이터들은 각 데이터들을 식별할 수 있는 고유의 값인 ID를 가지고 있지만, 그렇지 않은 것들에게 우리는 종종 index를 이용하여 key값에 부여했습니다. 하지만 이 index를 이용한 key값 부여에는 우리가 예상하지 못하는 오류가 생길 수 있습니다. 요소가 추가되거나 삭제될때 key값이 고유한 값이 아닌 index로 하게 되면 요소가..

개인적으로 구글 파이어베이스가 다른 플랫폼에 비해 사용하기가 쉽다고 생각됩니다. 가장 좋은건 파이어베이스 Auth를 통해 각종 소셜 로그인을 쉽게 구현할 수 있고 Realtime DB와 store를 통해 프로젝트를 쉽게 만들어볼 수 있습니다. 오늘은 React 프로젝트에서 구글Firebase연동을 통해 구글로그인을 할 수 있도록 설정해보겠습니다. 1. 파이어베이스에 로그인하여 프로젝트를 생성합니다. 2. 프로젝트를 등록하고 받은 firebase SDK를 저장해놓습니다. 3. 이제 다시 VSC로 돌아와 터미널에서 firebase를 설치해 줍니다. npm install firebase 그리고 아까 저장해두었던 SDK를 가지고 유틸 컴포넌트를 하나 만들어줍니다. // firebase_config.js impo..