React

useOptimistic 이걸 활용하려고 하다가 생각보다 이해가 잘 안되서 글까지 쓰게 되었다. 이전의 쇼핑몰 프로젝트를 하면서 하트의 좋아요 버튼을 구현한 적이 있다. 그런데 바로바로 업데이트되지 않고 서버에는 데이터가 갔지만 사이트에서는 그게 보이기까지 걸리던가, 아니면 새로고침을 해서 서버에 전달됨을 알려야 했다.그러다가 이 글을 보게 되어 유익하다고 느꼈다.1. Optimistic이란?: "낙관적"이라는 뜻으로, 클라이언트가 서버에서 응답을 받지 않고도 낙관적으로 요청이 성공적으로 끝났다고 가정하는 것을 말합니다. 즉, 사이트에서 서버의 요청을 받은 것처럼 행동하는 것을 의미한다.예를 들어) 멀티플레이어 게임 서버를 생각해 봅시다. 만약 게임 클라이언트가 optimistic하게 동작하지 않는다면 ..

우연히 글을 보다가 트리 구조의 메뉴를 만드는 것을 보고 나중에 참고할 수 있을 것 같아서 글을 쓴다.1. react-arborist 맛보기1) 설치하기npm install react-arborist2) 데이터 셋팅export const data = [ { id: "1", name: "public", children: [{ id: "c1-1", name: "index.html" }] }, { id: "2", name: "src", children: [ { id: "c2-1", name: "App.js" }, { id: "c2-2", name: "index.js" }, { id: "c2-3", name: "styles.css" } ] ..

react로 이미지 슬라이드를 쉽게 구현하고자 한다.✍🏻 기술스택 : React, tailwind.css나의 경우 두가지 경우로 구현하였다.1. animation을 이용하여 구현하기작동 방식보여주고 싶은 카드들의 배열을 만들고, 이를 복제하여 나타낸 뒤 번갈아 가며 보여주는 방식이다. 내가 만들고자 하는 컴포넌트들의 컨테이너를 배너라고 칭한다.[원본 배너]- 원본 배너와 복제 배너를 한 방향으로 이동시켜주는 애니메이션을 실행시킨다-  원본 배너가 배너 너비만큼 이동하면, 복제 배너의 뒤로 이동시킨다.-  원본 배너는 다시 배너 너비만큼 이동한다.[복제 배너]-  복제배너는 일정 방향으로 배너크기의 2배만큼 이동시켜주면 된다.-  사용자는 마치 하나의 배너가 무한으로 렌더링되는 것처럼 보인다..-  사실..

⚒ 개발 환경Frontend: TypeScript + React + Next.jsBackend: Express + TypeScript + Node.js + MongoDBKAKAO DEVELOPER에서 선행작업하기 ⚠️ Kakao developer 해당 사이트에 들어가서 해야 할 선행 작업을 수행한다.1. 애플리케이션 만들기→ 앱 아이콘, 이름, 사업자명, 카테고리 등을 넣어 등록한다. 나의 경우 개인으로 추가한 것이기에 사업자명은 내 별명을 넣어주었다.해당 애플리케이션 만들어졌다.2. REST API 키 등록하기애플리케이션을 만들면 자동으로 만들어진다. 여기 중 REST API를 따로 저장해놓는다.3. 사이트 도메인 설정하기내 애플리케이션 > 앱 설정 > 플랫폼에 들어가면 맨 하단에 설정할 수 있다.나중..

Toast토스트 메시지란 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소이다. 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 사라진다.→ 이를 사용하게 된 계기는 alert창을 쓰다가 단조로워서 바꿀까하다가 우연히 보게 참고 사이트 글을 보게 되어 사용하게 되면서 글을 쓰게 되었다.react-hot-toast 사용하기1) 패키지 설치하기npm i react-hot-toast2) 앱에 toaster 넣기import toast, { Toaster } from 'react-hot-toast';해당 패키지를 설치했으니, 이를 가져온다.const App = () => { return ( Make me a toast );};toast를 쓰기 위해서 Toaster를 앱에 맨 위..

사람은 역시 공부해야 하는 동물이구나 느끼면서 글을 작성하고자 한다.styled-resetstyled-reset은 브라우저의 기본 스타일을 리셋시켜주는 node.js 패키지이다. 내가 css를 적용할려고 했는데 브라우저에 기본적으로 적용되어 있는 스타일 때문에 적용이 안 된 경우를 많이 보았을 것이다. 그 때 reset을 시켜줘야 하는데, 구글에 쳐봤을 때 리셋시켜주는 코드를 쉽게 구할 수 있다.그러나, react에서 reset시켜주는 라이브러리가 존재한다. 이를 쓰면 원하는 스타일링을 하기 앞서 기본 세팅을 리셋해주는 것이 좋다. 또한 styled-reset을 시켜주는 가장 큰 이유는 크로스 브라우징 때문이다. ✅ 브라우저마다 HTML 시맨틱 태그에 대한 기본값의 차이를 없애주기 위함이다.styled-..

설치하기npm install react-modal위와 같이 설치했는데 오류가 걸리는 경우가 존재한다. 내가 그랬기 때문이다.npm i --save-dev @types/react-modal타입 정의 라이브러리를 사용하면 오류가 나지 않는다.import하기import Modal from 'react-modal';import를 해주고 modal을 사용해주면 된다.useState 셋팅해주기나의 경우에 button을 클릭했을 때 modal을 보여주게 하고 싶기에 변수를 button과 modal을 연결해놓으면 된다.import React, { useState } from 'react';import Modal from 'react-modal';function App() { const [modalIsOpen, set..

개념Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, **flex**와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.코드의 길이 Not Pretty Code 😵내가 이 글을 쓴 계기는 코드의 가독성때문에 찾다가 쓰게 되었다.그래서 구글링해서 찾아보았더니, styled-component를 쓰던가 아니면 apply방식을 썼다.가독성 좋게 만들기1) styled-componentimport styled from "styled-components";const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; fon..