꿈많은 DEVELOPER

Next.js vs React: 프론트엔드 개발자가 꼭 알아야 할 차이점 완전 정리웹 개발자라면 React와 Next.js를 한 번쯤 비교하게 된다.둘은 밀접하게 연결되어 있지만 목적, 역할, 사용 시나리오에서 분명한 차이가 있다.이 글은 SEO 관점(검색엔진 최적화), 성능, 개발 생산성, 배포·운영까지 고려해 언제 React만 쓰고, 언제 Next.js를 도입할지 명확히 안내한다.한줄 요약React = UI 라이브러리(컴포넌트 중심)Next.js = React 기반 풀스택 프레임워크(SSR, SSG, API 포함)1. 근본적인 역할의 차이: 라이브러리 vs 프레임워크React는 사용자 인터페이스를 구성하는 컴포넌트 라이브러리다.뷰(View) 계층을 구성하고 상태(state)와 이벤트를 관리하는 데 최..

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

🤷‍♂️ 본론에 앞서react-query는 React에서 데이터를 가져오고, 캐싱하고, 동기화하고, 데이터 관리를 위한 후크와 유틸리티를 제공하는 라이브러리입니다. 이 라이브러리의 활용은 React의 전반적인 성능을 향상시키고 사용자에게 부드러운 경험을 줄 수 있습니다. react-query 사용법에 대해 알아보기https://cometruedream.tistory.com/130 React-query 상태 관리📖React-query 알기전에 JSX란?JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다.JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다.JSX는 javascript 확장한 문법으로 바벨등등을cometruedream.tistory...

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

🤷‍♂️ 본론에 앞서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 적용..

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

🤷‍♂️ 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 없..

Trouble Shooting 이란? 시스템에서 발생하는 복잡한 문제들을 종합적으로 진단해 해결하는것. 즉 문제 해결이라고 생각하면 된다. 🔒 Problem Nginx에 Github Action 에이전트를 설치하는 도중 생긴 에러. Shasum command not found Github Action 으로 CI/CD 구축 중 self-hosted runner 를 Linux CentOS 7에 설치하는 도중 발생 $ echo "... actions-runner-linux-x64-2.299.1.tar.gz" | shasum -a 256 -c 🔓 Soultion shasum은 SHA 메시지 다이제스트, 암호화 체크섬 또는 암호화 해시코드를 계산하는 데 사용됩니다. Reference : https://linuxh..

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) 활용하자 기존 값을 업데이트 하..

현재 시점에서 가장 많은 사람들이 사용하는 javascript 라이브러리 Jquery 입니다. javascript비해서 jqeury 쉬운코드로 강력한 기능을 만들수 있기 때문입니다. 그래서 유지보수나 가독성이 뛰어난 효과를 볼수있습니다. 기본적인 문법을 알아봐요! 저는 기본적으로 Jquery CDN 사용합니다! " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 실무에서는 주로 Jquery 파일을 다운로드 받아서 프로젝트에 삽입해서 사용하는 경우가 많습니다. 이것을 다운받아서 사용하면 됩니다 Download the compressed, production jQuery 버전 이것을..