IT기록 isaac

React App 개발 Library 설치 cheatsheet 리액트 앱 프로젝트 파일 생성하기(Creating React App Project Files) * 리액트 앱을 설치하기 위해서는 node.js가 필요하다. (Node.js is required to install the React app.) npx create-react-app project-name 리액트 부트스트랩 라이브러리 설치하기 (Install the React Bootstrap library) npm install react-bootstrap bootstrap 리액트 라우터 라이브러리 설치하기 (Install React Router library) npm install react-router-dom@5 yarn add react-r..

React로 쇼핑몰 만들기 (2) 이전 글 2023.07.11 - [JS/react] - React로 쇼핑몰 만들기 (1) React로 쇼핑몰 만들기 두 번째 시간입니다. 이전 글에 이어서 작성한 글이므로 이전 글을 확인하시고 보시는 것을 권해드립니다. 지난 글에서 쇼핑몰의 메인 페이지를 구성해 보았습니다. Header는 부트스트랩을 이용한 Navbar로 구성을 했고, 그 아래에는 메인 이미지가 보이는 박스를 구성했습니다. 그리고 그 밑으로는 상품들이 진열되어 있는 카드 섹션으로 구성을 해보았는데요. 지난 글에서 상품-카드 섹션에 대해서 작성하지 못했는데, 이번 글에서 상세히 보려고 합니다. 현재까지의 구성을 보면 다음과 같습니다. 컴포넌트와 라는 컴포넌트를 사용해 상품-카드 섹션을 구성했습니다. 컴포넌..

React App에서 경고 메시지 끄기, warning message off React App Project를 생성하고 개발을 시작하면서 React App의 Console에서 Warning Message가 많이 나타납니다. 노란색으로 Warning message가 나타나는데 이는 'eslint'가 프로젝트에 적용되어 그렇습니다. 개발하는 중에는 변수를 선언하고 바로 사용하지 않는 경우도 존재하는데, React Project에서 사용하지 않는 변수 등에 대해서 Warning message를 띄우게 되어 있어 개발 중에 노란색 Warning message를 자주 보게 됩니다. 이 warning 메시지를 띄우지 않도록 eslint 기능을 off 해주어야 하는데요. 사용하는 data javascript 파일이나..

React에 Bootstrap 적용 및 사용하는 방법 (간단하게 적용하기) Bootstrap 많이 들어보셨을 겁니다. Web사이트에 디자인을 해야 하는데 디자인에 약하거나 디자인을 직접 하기 싫은 경우 대안으로 선택되는 웹 디자인 방법이라고 할 수 있습니다. Bootstrap은 설치가 간편하고 적용하기가 쉽습니다. 다만 Bootstrap에서 제안하는 방식을 적용해야 하고, Bootstrap 공식 사이트에서 제공하는 컴포넌트들을 적용해야 Bootstrap을 이쁘게 잘 사용할 수 있습니다. React에 Bootstrap 적용하는 방법을 알아보겠습니다. 먼저 React Project가 준비되어 있어야 합니다. 없다면 다음 설치 명령어를 사용해서 React Project를 생성해 줍니다. React Projec..

React - Components 사이에서 데이터 공유하기 & lifting State Up React에서 컴포넌트들 사이에서 데이터를 공유하는 방법에 대해 알아보자. 먼저 컴포넌트 간의 데이터를 공유하지 않는 예제를 보자. import { useState } from 'react'; export default function MyApp() { return ( Counters that update separately ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( Clicked {count} times ); } 위 코드로 만들어진 렌더..

React App Delete 기능 구현하기 Create, Update에 이어서 마지막 Delete 기능을 구현해 보자. 일반적으로 Delete 버튼은 Update 버튼과 함께 있다. 게시판 상세 페이지에 수정, 삭제 버튼이 있듯이. 이전 글에서 mode state가 'READ'일 때 Update 버튼을 추가했다. 이전 글 2023.06.21 - [JS] - React App Update 기능 구현하기 mode state가 'READ'일 때, 즉 상세 페이지를 확인할 때 Update 버튼 아래에 'Delete' 버튼을 추가한다. 삭제 버튼의 기능을 추가한다. 삭제(Delete) 기능은 Create, Update와 비교하면 비교적 간단하다. 구현 방법은 다양하겠지만 위 코드는 다음과 같다. 빈 배열 new..

React App Create 기능 만들기 현재 필자는 생활코딩 React를 보고 학습 내용을 작성하고 있다. 이 글을 쓰기 전까지 React의 Component, Props, Event, State에 대해서 알아보았다. 이번에는 응용 편이라고 할 수 있겠다. React App Create 기능 만들기 먼저 App.js 파일의 App 컴포넌트의 컴포넌트 배치 부분에서 본문이 보여지는 곳 아래에 Create 버튼(a tag)을 만들었다. 그리고 다른 a 태그들과 같이 기본 event는 막도록 하였다. 그리고 Header나 Nav 컴포넌트의 메뉴 리스트를 클릭했을 때 mode state가 변경되었던 것처럼, Create에서도 mode를 변경해 준다. 다른 화면을 띄우기 위해 mode를 변경하는 코드를 추가한..

React Props에 대해 알아보자. Component에 데이터 보내기 바로 이전 글에서 React 프로젝트 시작하기에 대한 글을 썼다. 이전 글 2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기 이전 글에 대해서 간략히 설명하자면 1. React Project를 시작하기 위해 nodejs를 설치 2. React Project 생성 3. Project 구조 파악 4. React Component에 대해서, Component 만들기 에 대해서 알아보았다. 이제 컴포넌트(Component)를 응용하고, 컴포넌트에서 사용되는 Props라는 개념에 대해 알아보려고 한다. 어제까지 작성했던 코드는 다음과 같다. /src/App.js function Head..

React.js Start 리액트 시작하기, React App 만들기 React Project 설치 & 생성하기 React를 시작하기 위해서는 먼저 node.js가 설치되어 있어야 한다. 설치하지 않았다면 node.js 공식홈페이지에서 설치를 먼저 진행해야 한다. nodejs 공식 홈페이지 https://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 학습하는 과정에서 Node 버전은 상관없다. LTS, Current 둘 중 하나 선택해서 Node.js 설치를 진행한다. node.js를 설치했다면 react 프로젝트를 생성한다. React 프로젝트 생성 명령어 npx c..

Next.js 시작하기, Next.js 프로젝트 생성하기 React 프레임워크 Next.js를 시작해 보자. 간단히 Next.js 프로젝트를 생성하는 방법에 대해 알아보자. 먼저 Next.js 공식 홈페이지로 접속한다. https://nextjs.org/ Next.js by Vercel - The React Framework Next.js Boilerplate A Next.js app and a Serverless Function API. Image Gallery Starter An image gallery built on Next.js and Cloudinary. Next.js Commerce An all-in-one starter kit for high-performance e-commerce sit..