꿈많은 DEVELOPER

웹개발 필수 기술 리액트(React)란? 완벽 이해 가이드

웹개발 필수 기술 리액트(React)란?최근 몇 년간 웹 개발 트렌드를 이끌고 있는 핵심 키워드를 꼽으라면 단연 리액트(React)다.리액트는 단순히 하나의 프론트엔드 기술이 아니라현대 웹 애플리케이션 개발의 표준이자 생태계의 중심으로 자리 잡고 있다.이 글에서는 리액트의 개념, 구조, 핵심 원리, 그리고 왜 전 세계 개발자들이 이 기술을 선택하는지단계별로 정리해본다.1️⃣ 리액트(React)란 무엇인가?리액트는 페이스북(현 메타, Meta)에서 2013년에 공개한 UI 구축용 자바스크립트 라이브러리다.복잡한 사용자 인터페이스를 효율적으로 구축하기 위해 만들어졌으며컴포넌트 기반(Component-Based) 구조로 구성되어 있다. 즉 화면을 여러 개의 독립적인 블록(컴포넌트)으로 나누어각각의 컴포넌트가 ..

🤷‍♂️ 본론에 앞서 미들웨어 기본개념미들웨어는 서버 측에서 요청을 처리하기 전에 실행되는 함수이며 미들웨어를 통해서 요청에대한 작업을 사전에 수행할수 있도록 돕습니다.미들웨어 파일은 middleware.ts 또는 middleware.js 파일명으로 ./pages, ./app 폴더와 같은 계층에 위치해야됩니다. Next.js 버전 마다 루트 경로에 /pages, /app 다를수 있지만 /pages, /app 폴더와 같은 계층에 미들웨어 파일을 위치시키면 됩니다.미들웨어 파일명과 경로 규칙을 꼭 준수하셔야 미들웨어 함수가 동작합니다. "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ Middleware.ts 사용법미들웨어 사용방법import { NextResponse } from 'next/serve..

🤷‍♂️ react-csv란?리액트로 관리자단 프로젝트를 진행하다 보면 엑셀 파일, CSV 파일 등등 파일을 다운로드 해주는 기능이 필요합니다.  위와 같이 기간별, 유형별로 통계한 데이터들을 CSV 파일로 다운로드 해주는 기능입니다.   "> HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ react-csv 라이브러리 선택한 이유보통은 서버에서 데이터를 처리해 파일을 만들어 프론트에서 다운로드 받는 방식이 많이 사용됩니다. 그러나 저는 서버에서 파일을 처리하기보다 프론트에서 직접 CSV 파일을 다운로드하는 것이 더 효율적이라고 판단하여 react-csv 라이브러리를 사용해 기능을 구현했습니다. 이 라이브러리를 선택한 이유중에 하나는 주간 다운로드 횟수도 375,547 이며 가장 최근 까지 git활동이..

🤷‍♂️ Next.js, Prisma, Postgresql 프로젝트지금 Next.js, Prisma, Postgresql 활용해서 개인 프로젝트로 Vercel에 배포하려는 첨 보는 에러 메시지에 황당했습니다. 로컬에서 빌드도 잘되고 환경변수도 잘 세팅되어 있고 계속 문제해결을 위해서 골머리를 앓고 있었습니다.  "> HTML 삽입미리보기할 수 없는 소스 문제의 에러 메시지Learn how: https://pris.ly/d/vercel-build at fa (/vercel/path0/node_modules/@prisma/client/runtime/library.js:33:69) at new t (/vercel/path0/node_modules/@prisma/client/runtime/libra..

🤷‍♂️ 리액트와 타입스크립트 조합React와 Typescript는 강력한 조합으로 코드 베이스를 더욱 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.하지만 입문자 분들께서는 React hook에 Typescript를 정의하는 게 불편하고 까다로울 수도 있습니다. 이 글을 통해서 useState, useEffect, useContext, useRef 그리고 Custom Hook에서 Typescript를 정의하는 방법을 자세히 알아보겠습니다. React Hook 사용개념보다는 TypeScript를 정의하고 사용하는 방법에 대해서 자세히 다루고 있습니다.  "> HTML 삽입미리보기할 수 없는 소스 2024.07.31 - [React] - 리액트 useLayoutEffect 개념 및 사용법 리액트 ..

🤷‍♂️ 리액트 폼 요소란?리액트에서 폼(form) 요소에 상태값을 다루는 방식에 따라 제어 컴포넌트(controlled component)와 비제어 컴포넌트(uncontrolled component) 방식으로 나눠집니다. 이 두 가지 접근 방식엔 장단점이 있으며 상황에 맞게 선택해서 효율적으로 사용할 수 있습니다.  "> HTML 삽입미리보기할 수 없는 소스  2024.07.31 - [React] - 리액트 useLayoutEffect 개념 및 사용법 리액트 useLayoutEffect 개념및 사용법🤷‍♂️ Rendering란?useLayoutEffect에 대해서 알아보기 전에 리액트에서 가장 중요한 렌더링 과정 간단하게 알아보겠습니다. 렌더링(Rendering)이란?쉽게 설명해서 HTML, CSS..

🤷‍♂️ Rendering란?useLayoutEffect에 대해서 알아보기 전에 리액트에서 가장 중요한 렌더링 과정 간단하게 알아보겠습니다. 렌더링(Rendering)이란?쉽게 설명해서 HTML, CSS, JavaScript 문서를 읽고 브라우저에 UI 그리는 과정을 말합니다.  "> HTML 삽입미리보기할 수 없는 소스  React hooks useSate 에 대해서https://cometruedream.tistory.com/73 React hooks useSate 에 대해서리액트 프레임워크중에 꼭알아야할 React hooks 중에 가장 중요한 useState 상태관리 입니다. useState 간단하게 컴포넌트 상태를 간단하게 생성하고 업데이트를 시킬수있는 도구를 제공합니다. 기본cometruedre..

🤷‍♂️ 본론에 앞서react-query는 React에서 많이 사용되는 라이브러리이며 다양한 훅과 유틸리티를 제공해 주며 개발자의 편리성과 생산성을 높여줍니다.본론에 앞서 아래의 글들을 읽고 오시는 것을 추천드립니다. useMutation대한 글을 이해하는데 많은 도움이 됩니다. "> HTML 삽입미리보기할 수 없는 소스 react-query 사용법에 대해 알아보기https://cometruedream.tistory.com/130 React-query 상태 관리📖React-query 알기전에 JSX란?JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다.JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다.JSX는 javascript 확장한 문법으..

🤷‍♂️ 본론에 앞서풀스택 개발을 진행하면서 사용자의 입장을 우선으로 하여 사용자 경험을 최우선으로 개발하려 노력합니다. 얼마 전에 읽은 책에서"개발하는 사람이 수고롭다면 사용하는 사람이 편리하고, 개발하는 사람이 편리하다면 사용하는 사람이 수고롭다" 라는 말을 되새겨 봅니다! Prefetching이란 무엇인가?프리페칭은 데이터가 실제로 필요하기 전에 미리 데이터를 가져와 캐시에 저장하는 과정을 말합니다. 이러한 프리페칭 기술을 통해 데이터를 미리 캐싱하면 사용자 경험을 향상할 수 있습니다. 간단히 설명하면💡 미리 필요할 수 있는 데이터를 가져오는 것을 의미합니다. 대표적으로 페이지네이션과 특정 탭을 누를 확률이 높은 곳에서 프리페칭을 많이 사용합니다.화면이 부드럽게 이동하고 캐싱데이터에 액세스 해서..

🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하지 않고 className 속성을 활용해서 CSS 스타일링 해야 했습니다.   기존에 방식으로 한줄 효과 스타일링을 하려고 했으나 tailwind CSS 방식이 달라서 다른 좋은 방법을 찾았습니다. 한줄 효과 기존 CSS 방식p { width: 6rem; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clam..

🤷‍♂️ 본론에 앞서Tailwind란?Tailwind CSS는 React와 Next 프레임워크에서 많이 사용되는 CSS 프레임 워크입니다. Tailwind CSS는 ‘utility-first’ 목적을 기반으로 다른 CSS 라이브러리와 달리 CSS 파일 & style 태그를 사용하지 않고 class 속성으로 CSS 스타일링 할 수 있습니다.  Tailwind CSS 사용하는 이유?Tailwind CSS 프레임워크를 통해서 UI를 빠르고 유연하게 디자인하고 스타일링할 수 있습니다. class(className) 기반의 화면을 스타일링 하기 때문에 개발자의 생산성과 빠르게 화면을 만들 수 있는 장점이 있습니다.   🤷‍♂️ Tailwind 사용법Next.js or React에서 Tailwind CSS 적용..

🤷‍♂️ 본론에 앞서프론트엔드 번들러 개념과 webpack vs vite 비교에 대해서 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교https://cometruedream.tistory.com/224 프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교🐣모듈 번들러? 모듈 번들러는 분리된 코드 조각들을 하나로 압축 하는 개발 도구입니다. 핵심 작업은 HTML, CSS, JAVASCRIPT 여러 파일을 하나로 결합하여 단일 파일로 만드는 것이다. 압축시킨 단일cometruedream.tistory.com 🤷‍♂️ 로컬 개발 환경 CORS 오류?프론트 개발을 하다 보면 로컬 환경에서 API CORS 오류가 빈번..

🤷‍♂️ 본론에 앞서프로젝트를 시작하기에 앞서 폴더 구조, 설계에 대한 아키텍처를 만드는 것은 상당히 어렵다. 이번 프로젝트에 React FSD 폴더구조 아키텍처를 설계할 예정이라서 FSD 아키텍처에 대해서 알아보겠습니다.  🤷‍♂️ FSD 아키텍처란?FSD는 Feature Sliced Desing 의미이며 작은 규모의 프로젝트나 점진적으로 규모가 확장될 필요가 없는 프로젝트라면 모놀리스 형식으로 프로젝트를 설계하면 되지만 점진적으로 소프트웨어의 규모가 커지고 확장해 나갈 예정이라면 FSD를 적용할 필요가 있다.  프론트 프로젝트 보일러플레이트 개념 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유https://cometrued..

🤷‍♂️ 본론에 들어가기 앞서 React 프로젝트 중에 input 입력 후에 Enter or 등록 버튼 후에 모든 테스트를 선택해야 되는 기능을 만들어야 했다. 나는 자바스크립트에 addeventlistener 메소드를 활용해서 하려고 했지만 더 좋은 방법이 있기 때문에 기억보다는 기록으로 남겨본다. 🤷‍♂️ focue가 맞춰지면 React를 사용하여 입력 요소의 모든 텍스트를 선택 input 포커스가 되면 입력요소에 모든 텍스트를 선택하는 select() 요소를 활용해서 포커스가 있을 때 모든 텍스트를 선택하는 방법 select() 요소를 활용해서 input 요소에 모든 텍스트를 선택하는 이유는 똑같은 값을 사용하거나 전체 삭제를 효과적으로 사용할 수 있기 때문에 필요한 기능이다. EX: App() {..

🤷‍♂️ React에서 동일한 파일 업로드 구현 프로젝트중에 PDF 파일 업로드 기능 구현 당시 동일한 파일을 업로드 하는 경우 input태그의 onChange 이벤트 핸들러 함수가 정상적으로 동작하지 않는 문제가 발생했다. 파일 업로드 과정 브라우저에서 PDF 업로드를 클릭하면 파일 탐색기 창이 열리고 파일을 선택후에 파일을 업로드한다. 여기서 오류는 동일한 파일을 두번 이상 업로드시 onChange 이벤트가 발생하지 않는 문제였다. 20230920001_00_40.pdf 파일을 업로드하고 다시 20230920001_00_40.pdf 파일을 업로드하면 onChange 이벤트가 발생하지 않는다. 정리: React에서 동일한 파일을 연속해서 선택했을 때 input 태그에 onChange 이벤트 핸들러 함수..

immer 란? React에서 불변성을 유지하느라 난잡해진 코드를 짧고 간결하게 불변성을 유지할수 있게 도와주는 라이브러리이다. 반대로 immer 사용함으로 짧은 코드가 길어지는 경우도 있다. 불변성 개념 불변성이란 기존의 상태 값을 유지하면서 새로운 상태 값을 추가하는 것을 의미한다. 불변성을 지키는 이유 만약에 list OR 상태 값을 리렌더링 하고 싶을때가 있다고 가정한다. state.push({ title: "값 추가" })을 통해서 배열에 직접 10이라는 값을 추가한다. React에서는 해당 state라는 값은 새로운 참조값으로 바뀐것이 아니기 때문에 push 이전에 값가 push 이후에 값에 state 참조하는 메모리값이 같다고 판단하여 리렌더링이 일어나지 않는다. 이러한 이유로 state 값..

리액트 & 타입스크립트 활용해서 장바구니 기능 구현했다. 웹/앱 개발에서 중요한 CRUD 기능 및 useReducer 활용해서 생산성이 좋게 설계해서 만듬. 기본적인 프로그래밍에 개념과 가장 기본적이 hooks 활용에 대해서 깊이 공부할 수 있다. javascript filter, reduce, map, switch 활용했다. useReducer 미리 숙지하고 하면 유용하게 사용할 수 있다. useReducer: useState처럼 state생성하고 관리하는 hook 이다. useReducer 잘사용하려면 3가지를 알아두면 좋다. Reducer, Dispatch, Action Reducer: State 상태를 업로드하는 역할 Dispatch: Reducer 요구를 하는 역할 Action: 어떤 요구를 보..

리액트 & 타입스크립트를 활용해서 FAQ(자주 묻는 질문) 을 구현했다. 많은 웹사이트에서 활용되며 유기적으로 사이트로 유입시키고, 트랙픽 증가을 시키고자할 때 많이 사용된다. 사용자에게 정보를 제공할때 사용된다. 🙆‍♂️ 리액트 재렌더링 조건을 미리 숙지하고 있으면 이러한 기능을 만들때 유용하다. 렌더링 조건 1. state(상태) 변경이 되었을때 렌더링 2. 새로운 props가 전달될때 렌더링 3. 기본 props가 업데이트될때 렌더링 4. 페이지에 처음 들어올때 렌더링 Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/react-camp GitHub - yoogukhyeon/react-camp Contribute to yoogukhye..

Next.js typescript 프로젝트 구축, 보일러 플레이트처럼 만들어 놓고 쓰면 좋을꺼 같다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/next-boilerplate GitHub - yoogukhyeon/next-boilerplate Contribute to yoogukhyeon/next-boilerplate development by creating an account on GitHub. github.com structure 구조 pages, components, config, public, styles, .babelrc pages: next에서 auto routing 되는 페이지를 생성한다. components: 재사용 ..

🤷‍♂️ React 로그인후 로그인 이전페이지로 이동하는 방법. 1. 커뮤니티에서 페이지 이동시 navigate에 state에 pathname 값을 할당 2. 커뮤니티에서 login 페이지로 이동하고 로그인 후 다시 커뮤니티 페이지로 이동 Router Header Login 이동 1. react-router-dom에 useLocation 사용 2. pathname으로 현재 페이지 path값을 찾고 login 이동시 state에 현재 페이지 path를 넣어준다. Sign in 이동 1. react-router-dom에 useLocation 사용 2. useLocation에 state 찾는다. 3. 로그인 성공 후에 navigate에 받아온 state 값으로 이동시킨다. url로 접속 하게되면 state 없..

git address: https://github.com/yoogukhyeon/react-study-group/tree/api 🤷‍♂️ json-server란? 프론트엔트 사이드프로젝트 혹은 개발을 하다보면 server 데이터가 필요합니다. 백엔드 개발에 많은 시간을 사용할 수 없다면 json-server를 활용해서 API서버를 만들수 있습니다. 이런 경우에 필요한 도구가 json-server 입니다. 참고로 이 도구는 프로덕션에서 사용하기위하여 만들어진것입니다. 실제 운영에서는 사용하시면 안됩니다. * 프론트엔드 테스트 용도 1. json-server npm 설치 npm i -D json-server //dev에 설치 프로젝트 package.json에 scripts 추가 "scripts": { "sta..

📖React-query 알기전에 JSX란?JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다.JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다.JSX는 javascript 확장한 문법으로 바벨등등을 사용하여 트랜스파일러로 javascript 형태의 코드로 변환이 된다.JSX 문법은 반드시 부모요소 하나가 감싸는 형태 여야한다. 문법으로 부모요소를 만드는 경우가 많다. JSX에서 javascript 표현식을 작성하려면 {}로 코드를 감싸줘야한다. {isLoading && Loading} JSX에서 class사용이 아닌 className을 사용한다.🤳React-query 란?  React-query는 서버 상태 라이브러리 입니다. 서버와 클라..

리액트 프레임워크중에 꼭알아야할 React hooks 중에 가장 중요한 useState 상태관리 입니다. useState 간단하게 컴포넌트 상태를 간단하게 생성하고 업데이트를 시킬수있는 도구를 제공합니다. 기본 문법은 useState import시키고 import React, {useState} = 'react'; const [state, setState] = useState(초기값) 이런 문법으로 사용하실수있습니다. state를 변경시키고 값을 할당할때는 setState로 값을 할당할수있고 state변수에 저장된다. useState 활용방법 입니다. **** setNumber(number + 1) 보다는 setNumber(preNumber => preNumber + 1) 활용하자 기존 값을 업데이트 하..