1. 리액트 tailwindcss 알림(Alert) 컴포넌트란? 리액트와 tailwindcss는 현대적인 웹 개발에서 인기 있는 프레임워크 및 라이브러리입니다. 리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이고, tailwindcss는 스타일링을 위한 CSS 프레임워크입니다. 이 둘을 결합하여 리액트 tailwindcss 알림 컴포넌트를 만들 수 있습니다. 알림 컴포넌트는 사용자에게 중요한 정보를 전달하거나 상호 작용을 유도하는 데 사용됩니다. 예를 들어, 경고, 성공 메시지, 알림 메시지 등을 표시할 수 있습니다. 이러한 알림은 웹 애플리케이션의 사용자 경험을 향상시키고 사용자에게 필요한 정보를 제공하는 데 도움이 됩니다. 2. 왜 리액트와 tailwindcss를 함께 사용하..

Confirm Password * { if (watch('password') != val) { return 'Your passwords do no match'; } }, })} /> {errors.confirm_password?.type === 'required' && ( Confirm Password is required )} {errors.confirm_password?.type === 'validate' && ( Confirm Password is not same Password )} React Hook Form은 React 애플리케이션에서 폼을 만들고 유효성을 검사하기 위한 간편한 방법을 제공하는 인기 있는 라이브러리입니다. 그러나 때로는 React Hook Form을 사용하는 동안 발생할 수 있..

리액트 버튼 컴포넌트(React Button Component) with Tailwindcss 소개 리액트는 현대적인 웹 애플리케이션 개발에서 매우 인기 있는 자바스크립트 라이브러리입니다. 리액트를 사용하면 재사용 가능한 컴포넌트를 쉽게 만들 수 있으며, 이는 개발자들에게 큰 편의성을 제공합니다. 이 중에서도 특히 버튼 컴포넌트는 사용자 상호작용과 인터페이스 디자인에 중요한 역할을 합니다. 이 기사에서는 리액트 버튼 컴포넌트와 Tailwind CSS를 함께 사용하는 방법에 대해 알아보겠습니다. 리액트 버튼 컴포넌트란? 리액트 버튼 컴포넌트는 재사용 가능한 버튼 요소를 쉽게 만들기 위해 리액트 라이브러리에서 제공되는 기능입니다. 리액트에서는 컴포넌트를 사용하여 UI 요소를 작성하는데, 버튼 컴포넌트는 사용..

웹페이지 최적화하기 위해서 하는 방법 중에 하나인 Lazy Loading. 중요하지 않은 리소스를 식별하고 필요할 때만 로드하는 전략으로 페이지 리소스를 줄여 페이지 로드 시간이 단축된다. Lazy Loading이란? https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading Lazy loading - Web performance | MDN Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical renderi..

useRef란? useRef는 구성 요소 렌더링 간에 지속되는 변경 가능한 참조를 만들 수 있는 React의 후크입니다. 즉, 속성이나 상태의 변경으로 인해 구성 요소가 다시 렌더링되더라도 동일한 참조를 사용하여 값이나 DOM 요소에 액세스하고 업데이트할 수 있습니다. useRef는 불필요한 재렌더링을 방지하여 성능을 최적화할 뿐만 아니라 구성 요소 내의 여러 함수 또는 후크에서 액세스해야 하는 DOM 요소에 대한 값 또는 참조를 저장하는 데 유용할 수 있습니다. 공홈 참조 https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref scrollIntoView() scrollIntoView()는 요소를 브라우저 창의 보이는 영역으로 부드럽게 스크롤할 수..

리액트로 간단한 환율 계산기로 만들어보고 싶었다. 그래서 환율 관련한 API가 필요로 했는데, 실시간 갱신되는 API는 유료이거나 무료면 API 호출수에 제한이 있거나 REST API 필터 기능에 제한이 있는 등 제한 사항이 많았다. (혹시 괜찮은 환율 무료 API가 있다면 댓글로 추천 부탁드려요) 그래서 실시간 갱신되는 것을 포기하고 하루에 한번만 갱신되는 Gihhub API를 구글 검색 찾았다. 물론 무료 API이고 하루에 몇번을 호출해도 제한이 없다. 하루에 한번씩 json 파일을 갱신한다. 다음은 응답 값인데, 업데이트 날짜와 환율 결과 값이 표기된다. (심지어 코인도 있다) 예시(유로 => 달러) https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/..

Next.js Dynamic Import(동적 가져오기): 성능 및 사용자 경험 개선 웹 개발 세계에서 성능과 사용자 경험은 성공적인 웹 사이트를 위한 두 가지 중요한 요소입니다. 인기 있는 React 기반 프레임워크인 Next.js는 개발자가 동적 가져오기를 사용할 수 있도록 하여 두 가지 모두를 향상시키는 솔루션을 제공합니다. 이 기사에서는 Next.js 동적 가져오기를 살펴보고 이것이 웹사이트 성능과 사용자 경험을 어떻게 향상시킬 수 있는지 살펴보겠습니다. Next.js Dynamic Import 무엇인가? Next.js 동적 가져오기는 개발자가 모든 것을 미리 로드하는 대신 필요에 따라 구성 요소 또는 모듈을 로드할 수 있도록 하는 기능입니다. 코드 분할이 가능하므로 필요할 때 코드의 필요한 부분..

Next.js 에서는 기본적으로 Environment Variables(환경변수)에 대해서 기본적으로 지원하고 있어서, 별도의 라이브러리 설치나 설정 없이 사용 가능하다. .env.local을 사용하여 환경 변수 불러옴 NEXT_PUBLIC 접두사 사용하여 환경 변수를 브라우저에 노출 * 환경변수(Environment Variables)란 무엇이고, 사용하는 이유? 환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이..

Next.js Image 컴포넌트 Next.js Image 컴포넌트는 SEO 최적화를 위하여 Next.js(Vercel)에서 개발한 컴포넌트이다. 보통 HTML에서 태그에서 width와 height 값을 입력하지 않으면 구글이나 기타 포털사이트에서 SEO 관련하여 나쁜 점수를 받게 된다. Cumulative Layout Shift(누적 레이아웃 이동, CLS)라는 항목인데, 초기 이미지 로딩시 이미지가 밀리는 현상을 말한다. 따라서 Next.js Image 컴포넌트를 쓰게 되면 필수적으로 `src, alt, width, height` 값을 필수적으로 입력해야한다. import Image from 'next/image' ... https://nextjs.org/docs/api-reference/next/i..

에러 증상은 페이지 이동시에는 새로 고침하면 API가 새로 호출되어 화면이 리렌더링 되고 있었으나, 뒤로가기 통해서 다시 해당 페이지 들어가면 리렌더링이 제대로 되지 않았다. debugger를 통한 디버깅해보니 state값이 제대로 변경되지 않고 있었다. 즉, 컴포넌트 리렌더링시 props 값은 변경되고 있으나, useEffect를 통한 state가 변경되고 있지 않았다. 비슷한 증상 stackoverflow 검색 내용을 첨부하니 참조하자. import React, { useState, useEffect } from "react"; import { Route, Redirect } from "react-router-dom"; import { checkLoggedIn } from "utils/Api"; ex..

에러 useRef를 사용시에 해당 ref(observedRef)를 console.log를 찍어보면 null로 찍힌다. function App() { const observedRef = useRef(null); console.log(observedRef.current); return ( Hello CodeSandbox Start editing to see some magic happen! ); } 해결방법 useRef는 리액트에서 DOM을 연결해주는 Hook으로써, 원하는 element에 ref 속성을 넣어주면 useRef가 객채를 반환하여 current 속성에 dom을 넣어준다. 바닐라 자바스크립트에서 document.getElementbyId. useRef 초기값에 어떤 값을 입력하더라도 null이 출..

에러 Context API를 이용하여 state를 전역관리하고 있다. 그런데 router.push를 이용하면 state 업데이트가 공유가 되지 않고 있다. 혹은 새로 고침시에도 state가 찾을 수 없다고 한다. 해결방법 이럴 때는 localStorage을 활용해보자. 리액트 사용자는 localStorage를 custom Hook, utils, Context API와 결합하여 사용할 수도 있다. 혹은 중요한 정보는 SessionStorage을 활용하자 *localStorage : 데이터를 사용자 로컬에 보존하는 방식으로, 데이터를 저장하고 덮어쓰기, 삭제 등 자바스크립트로 조작이 가능하며, 모바일에서 사용이 가능하다. *SessionStorage : 로컬스토리지는 브라우저 창을 닫더라도 데이터가 유지되는..

자바스크립트의 조건문 자바스크립트에서는 다양한 조건문이 있다. 리액트에서는 특히 JSX 템플릿을 쓰면서 If 문 if 문 안에 있는 조건식이 참인 경우 해당하는 조건식의 영역을 실행. 조건문은을 여러 개 조합히기 위해서는 else if를 사용. 조건문의 조건이 어느 것도 충족되지 않으며 그대로 skip 하거나 else 구문을 실행. ** 다른 언어에서도 많이 쓰이는 구문이다 ** 조건식을 거짓을 판단하는 반환값 false undefined null 0 빈 문자열("") NaN(Not a Number // 표현 불가능한 수치형 결과) if .. else graph TD A[start] --> B{Condition} B -->|true| C[if block] B -->|false| D[else block] ..

[공지사항] 푸샤 깃허브 블로그 업데이트 사항 checked & defaultChecked 기본 엘리먼트에서는 checked 속성으로 사용하지만 react 에서는 defaultChecked값이 추가되었습니다. 이 두 가지 속성은 역할은 같지만 작은 차이가 있습니다. // radio // checkbox checked checked값을 사용하면 onChange값과 함께 사용하여 컨트롤할 수 있습니다. 만약 onChange 값이 없으면 해당 컴포넌트는 readOnly로 바뀌어 체크를 변경할 수 없습니다. this.setState({ foo: !this.state.foo })} checked={this.state.foo}/> checked: {this.state.foo ? 'true' : 'false'} de..

Youtube 동영상을 React로 불러올때 iframe으로 불러오는데, 이때 유용하게 사용할 수 있는 라이브러리가 React Player 이다. 다만 스타일링 하지 않으면, 반응형 디자인으로 할때 높이랑 넓이가 비율 대로 잘 맞지 않는다. 구글링 해보니 아래와 같이 작성하면 모바일도 비율에 맞게 잘 표기 된다. 리액트 플레이어 상단 div 를 하나 더 만들어 아래와 같이 스타일링해주니 해결되었다. (리액트 플레이어는 width, height 인라인으로 100% 지정해줘야 기기에 맞게 지정된다) 출처 github.com/CookPete/react-player/issues/145

개인적으로 세 가지 프론트엔드 프레임워크를 경험해보았다. (Vue의 경우는 짧게 1달만 사용해봐서 정확히 판단하기는 어렵지만 그럼에도 이 세가지 프레임워크(?)를 주관적으로 비교해보려고 한다. 비교 (차이점 위주로) Angular React Vue 모델 MVC Virtual DOM(Flux) Virtual DOM(Flux) NPM Trends(28.02.2021) 541,128 10,499,740 2,388,670 특징 비유 데스크탑 모바일 태블릿 데인터 바인딩 및 큰 변화 양방향, Angularjs → Angular 단방향, class → functional 양방향 구조 객체 지향, HTML/CSS/Typescript 객체 지향(Class) → 함수형, js.jsx vue 사용 용도 Enterprise..