IT기록 isaac

Next.js에서 img tag 안 쓰고 Image Component 쓰는 이유 Next.js는 정적인 자료들을 프로젝트 root의 public 디렉토리에 보관합니다. pages 디렉토리처럼 public 디렉토리 내부의 파일들은 Application에서 참조할 수 있습니다. 현재 public 폴더 아래 다음과 같이 구성이 되어 있습니다. profile.jpg 이미지는 아래와 같이 생긴 이미지 입니다. 이걸 페이지에서 보려면 HTML에서는 img tag를 사용하면 됩니다. 일반적인 HTML 처럼 img tag를 사용해서 이미지를 띄울 수 있습니다. 하지만 이 이미지 소스는 최적화되지 않은 상태로 이미지를 사용하게 됩니다. 요즘 웹에서는 화면 크기에 따라서 이미지 크기가 반응하도록 하고, 최적화되어야 하며,..

Next.js 페이지 연결, Routing 먼저 실습을 하기 위해 프로젝트 샘플을 생성합니다. Next.js 튜토리얼에서 샘플 프로젝트 생성 명령어를 입력하면, Next App 프로젝트 디렉터리가 생성됩니다. Next.js App 예제 생성하기 npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" 생성된 프로젝트 디렉터리를 보면 pages라고 하는 폴더가 있습니다. Next.js에서는 pages 폴더의 하위 파일들에 대해서 file system routing을 할 수 있도록 구성되어 있습니다. 따라서 file 이름이 곧 pat..

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로 쇼핑몰 만들기 (1) 공부했던 React를 복습 삼아 React 웹앱을 만들어 보려고 합니다. 전에 제가 작성했던 내용 정도만 알아도 충분히 만들 수 있는 정도의 작업만 해볼 것입니다. React App을 시작하려면 필요한 것이 node.js입니다. 설치되지 않았다면 node.js를 먼저 설치해 주세요. node.js 공식사이트 node.js와 npm이 설치가 끝났다면 다음은 React App 프로젝트를 생성합니다. 다음 명령어를 통해서 React App 프로젝트를 구성할 수 있습니다. npx create-react-app project-name 위 명령어를 입력하면 react app project 폴더가 생성됩니다. 해당 폴더로 들어가서 npm start로 실행하면 react 로고가 돌아가..

React Router 설정하기, Route 사용하기 웹 사이트 내에서 페이지 이동은 어떻게 할까요? 기본 html에서의 페이지 이동은 a 태그를 사용하여 페이지를 이동합니다. React에서는 Router라는 개념을 사용해 페이지를 이동할 수 있습니다. 실제로는 이동하는 것은 아니고 내부 페이지를 바꿔치우는 것이라고 볼 수 있습니다. React App에서 a 태그도 사용할 수는 있지만 React App에서 내부 페이지 이동과 같은 동작을 구현할 땐 Route를 설정하고 관련 기능들을 활용해 페이징 처리를 구현합니다. 먼저 React App Project에 Router를 설치하여 Router를 적용해 줍니다. react-router-dom 라이브러리 설치하기 명령어 yarn add react-router-..

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 파일이나..

Javascript 특정 문자 사이의 문자열 추출하기 (substring 사용) 다음과 같은 문자열이 있다고 가정합니다. "[Hello], (Hello)" 문자열에서 대괄호([ ]), 소괄호(()) 같은 특정한 문자들 사이의 문자열을 추출하고 싶은 경우가 있습니다. Javascript에서 특정 문자 사이의 문자열을 추출하려면 문자열과 관련된 함수를 사용해 추출할 수 있습니다. P. 문자열 "[Hello]"에서 특정 문자 "[ ]" 사이의 문자열 "Hello" 추출하기 var str = "[hello]" console.log(str) var s = str.indexOf("[") + 1 var e = str.indexOf("]") var res = str.substring(s, e) console.log(r..

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 ); } 위 코드로 만들어진 렌더..