블로그 이름을 입력해주세요

저번 Aceternity UI를 소개로 UI 컴포넌트 라이브러리를 하나 더 소개 합니다 팀원 분이 이런 것도 있다고 소개 해줬는데 완성형 컴포넌트로 제공 한다는 점에 있어 간단한 테스트 케이스만 만들어 바로 적용 할 수 있다는 점이 장점이 될 수 있을거 같습니다또한 빠르게 깃허브 스타가 올라가고 있다는 점도 많은 프론트엔드 개발자들이 관심 있게 보고 있다는 지표가 될거 같습니다 https://reactbits.dev/ React BitsAn open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces...

JS를 사용하는 프론트 개발자들이 한번 쯤 들어봤을 유명한 차트 라이브러리인 echarts를 회사 요구사항에 맞춰 사용해 보았다 그 중 line chart를 만들어 보았다 다양한 차트의 종류는 공식 doc를 통해 확인 할 수 있다 https://echarts.apache.org/examples/en/index.html Examples - Apache ECharts echarts.apache.org Javascript Reactinstallnpm install echarts echarts-for-react LineChart.js// LineChart.jsimport React from 'react';import ReactECharts from 'echarts-for-react';c..

들어가면서코드를 설명하기 전  SSR(Server-Side Rendering)이 중요한 이유를 알아야 한다리액트는 CSR방식을 채택함으로써 웹을 앱처럼 별도의 새로고침 과정이 없이 데이터를 동적으로 핸들링할 수 있게 하여 사용자는 깜빡이는 현상을 느끼지 않고 웹을 경험할 수 있게 만들었다하지만 시간이 지날수록 다시 SEO가 중요해졌고 CSR은 페이지에서 보이는 데이터의 양이 많을수록 느리다는 단점이 있어 이를 보완하고자 나온 게 Next.js라고 할 수 있다리액트로 개발을 즐겨했던 개발자라면 대부분 알고 있는 리액트와 리액트 쿼리(구)를 사용 했을텐데 Next.js에서 리액트 쿼리를 쓸 필요가 있나 하는 의견들도 간혹 있었지만 현재 Tanstack Query (구) react-query는 Next.js에..

react-hook-form 활용해보기 2 전 글에 이어 이번에는 react-hook-form의 useForm을 사용하여 email과 password에 값을 넣을 수 있는 방법을 보도록 하겠습니다 useState를 통해 사용하였던 로그인을 그대로 이용하겠습니다 export default function UseForm() { return ( Login 아이디 비밀번호 ); } react-hook-form에 주요 기능인 useForm을 사용하겠습니다 useForm의 주요기능을 하나씩 봅니다 useForm의 세팅 import { useForm } from "react-hook-form"; export default function useForm() { const {} = useForm(); return( ....

react-hook-form 최근 회원가입을 구현 하면서 효율적으로 사용하고 있는 react의 라이브러리 react-hook-form을 복습 합니다 사용해보고 느낀 react-hook-form의 장점 비제어 컴포넌트로 폼을 관리할 수 있습니다 에러를 효율적으로 관리 할 수 있습니다(실시간 유효성검사) input마다 값을 받는 state를 만들지 않아도 됩니다 (객체로 관리하는 state도) 지속적으로 업데이트를 꾸준히 해주는거 같습니다 공식문서가 친절합니다 바로 사용해보기 최소단위의 로그인 폼을 구현 해봅니다 next.js로 프로젝트 시작하기 npx create-next-app@latest --typescript next.js 프로젝트의 설정을 물어보는데 프로젝트 이름, 테일윈드css(no), app 디..

전에도 상세하게 올려보겠다던 계산기 코드를 이제야 올려본다 처음부터 로직을 생각하고 구현 해보았기에 의미 있고 실용성 있는 계산기가 되길 개인적으로 바란다 리액트로 계산기를 만드는 사람들은 많지 않을 것 이다 대부분이 자바스크립트를 기반으로 하고 있고 복잡한 구현이 아니기 때문에... 그렇지만 누군가가 나처럼 계산기를 리액트로 무조건 만들어야 하는 상황이 있다면 이 글을 읽고 꼭 도움이 되길 바란다 리액트 계산기 확인하기!!(클릭) 바로 코드를 치기 전 생각을 해보자 계산기의 동작 원리가 뭘까? 숫자 입력 >> 연산해줄 연산자 입력 >> 숫자 입력 >> 등호(=) 입력 >> 결과 출력 내가 생각한 계산기의 동작원리를 그대로 코드를 구현하면 된다고 생각했다 1. React Project 생성 CRA를 통한..

react에서 대부분의 UI를 구현할 때 map() 함수를 자주 사용한다 사실 거의 반 필수로 사용하는거 같은데 데이터가 배열 객체 형태로만 존재할 경우 쉽게 데이터를 가져올 수 있다 하지만 점점 데이터의 형태가 복잡해진다면 한번의 map으로 내가 원하는 데이터를 가져올 수 없다 예시를 통해 알아본다 map()을 활용하기 위한 데이터 만들기 const productData = [ { id: 1, name: '블랙 셔츠', }, { id: 2, name: '하얀 반팔티', }, { id: 3, name: '파란 에어리즘', } ]; 상품 데이터라는 배열안에 상품 한 개에 해당하는 객체가 존재한다 여기서 이 객체는 배열의 인덱스[0], [1], [2]에 해당한다고 볼 수 있다 이 상품 전부의 name이 필요..

드디어 코로나에 걸려버렸다... 이틀 차까지는 몸살감기처럼 많이 아팠는데 약 먹고 잠을 엄청나게 자고 나니 목감기 수준으로 내려와 블로그 쓸 힘도 생겨 버렸다 가장 문제는 본가에서의 자가격리 7일 동안 팀원들과의 커뮤니케이션 문제인데 이걸 어떻게 하면 좋을지, 좋은 판단은 무엇인지 고민해야 할 것이다 우리 팀은 스카이스캐너라는 항공권, 호텔, 렌터카를 한 번에 할 수 있는 사이트를 모티브로 새로 기획하여 프로젝트를 만드는 것이다 프로젝트 명 : WeScanner 팀원 : 프론트엔트 3명, 백엔드 1명 담당 기능 : 메인 페이지, 리뷰 기능 이번 프로젝트에서는 기능 구현에 집중하고자 특별한 디자인이나 UI가 화려한 건 없는 거 같다 기능 구현에 필요한 데이터가 많고 1차 때보다 좀 더 복잡한 구조로 되어 ..