리액트 썸네일형 리스트형 [React] map 함수안에 array 배열 뿌리기 Item.map((list) => ( {list.name} ) - 위와같은 map안에다 Array 배열을 추가로 뿌리고 싶어졌습니다... Item.map((list) => ( {list.name} {Array.from(Array(list.bodys), x => )} ) - map 으로 뿌려지는 배열 안에 BsStarFill 이란 객체를 뿌리는데 개당 객체를 list.body 의 갯수만큼 뿌려준다!!! 더보기 [React] React Project에서 간단한 탭 메뉴 만들기 import { useState } from "react"; const TabMenu = () => { const [menuNum, setMenuNum] = useState(1); const tabMenuToggle = (e) => { setMenuNum(e); } return( tabMenuToggle(1)}>Menu_1 tabMenuToggle(2)}>Menu_2 tabMenuToggle(3)}>Menu_3 tabMenuToggle(4)}>Menu_4 {menuNum === 1 ? Menu Contents1 : (menuNum === 2 ? Menu Contents2 : (menuNum === 3 ? Menu Contents3 : Menu Contents4) ) } ) } export default .. 더보기 [React]React 기초 - inline style 작성하기 React에 인라인 스타일링하기_1 첫번째 방법으로 객체형태로 스타일을 작성합니다. 단 주의할 점은 스타일 작성 중 - 이 들어가는 css style 의 경우 카멜 표기법을 활용하여 작성해야 합니다. import React from 'react'; const Test = () => { const name = '리액트'; const style = { width: 100, // px이나 rem 같이 단위를 붙여주지 않으면 자동으로 px로 인식된다. height: 5 + 'rem', // px 이외의 다른 단위를 사용하는 방식 color: 'red', // 일반적인 color 이름을 지정하는 방식 backgroundColor: '#efefef', // HEX 코드로 작성하는 방식 border: 10, // b.. 더보기 [React]React 프로젝트 git에 배포 시 Link _blank React Project 배포 시 react-router-dom React로 포트폴리오를 만들고 git에 배포할 때 react-router-dom 을 사용했을 경우 배포 전 처리할 부분이 아주 약간(?)있었습니다. react-router-dom 내의 기능인 Link 를 통하여 해당 프로젝트의 화면 이동을 구현했다면 BrowserRouter 에 basename={process.env.PUBLIC_URL} 을 추가해야 배포 후 화면이동이 정상적으로 이루어지는 것을 구글링을 통해 알아냈습니다. 혼자서 무턱대고 프로젝트를 진행했다보니 원리도 제대로 파익을 못한 상태로 진행해서 이 부분에 대해서도 상당한 삽질(?)을 거쳐 알아냈습니다… 대충 위의 코드처럼 Route 에 path가 Link 와 일치하는 경우 ele.. 더보기 [React] 자주쓰는 yarn commend 목록 npm 말고 yarn React Project 생성 시 Node.js 를 설치하면 기본적으로 설치되는 패키지 모듈인 npm 을 이용하는 법이 있지만 npm 보다 속도나 기능적인 면, 그리고 보안적인 문제에서도 조금 더 좋은 yarn 을 사용하려 합니다. 실제 yarn commend 는 npm과 크게 다르지 않아 어렵지는 않습니다. yarn은 yarn.lock이나 package.json으로부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하는 것을 보장하기 때문에 버전의 차이로 인해 생기는 버그 방지가 가능합니다. yarn package 설치하기 따로 파일을 다운받아 설치할 필요가 없습니다. 먼저 명령 프롬포트를 열거나 VSCode 내의 터미널 창에 아래의 코드를 입력하여 yarn .. 더보기 [React]filter, map, react-router-dom v6 활용기 filter 그리고 map 개인적으로 까먹지 않기 위해 기록한 코드입니다!!! 해당 코드가 무조건 맞는 것은 아닙니다! 분명 제가 작성한 코드보다 더 안전하면서 깔끔한 코드를 작성하신 분이 있을겁니다…. 개인적인 포트폴리오를 업그레이드 하는 중 NAS 를 집에 들여놓기엔 초기셋팅비용이 부담스럽고 서버를 대여하자니 현재로썬 그냥 단순하게 업그레이드하는 수준이라 그냥 DB를 사용하지 않고(?) github Page를 활용하기로 했습니다. React라면 REST API라도 사용해봐야하는데… JSON 대신 배열 컴포넌트를 활용하여 화면 구성을 진행하고 있습니다… 이상하게 꼬인 컴포넌트 구조 작성한 컴포넌트와 코드들입니다. 무작정 작성하며 나누다보니 이상하게 꼬인 경향이 있습니다… App.js에 Route를 모두.. 더보기 [React] Images 활용하기 React에서 img 사용하는 법! 일반적으로 html에서 img를 사용 할 때는 처럼 사용하지만 해당 방법을 사용하면 오류가 뜨지는 않지만 image가 정상적으로 출력되지 않습니다. React에서는 image를 사용할 때 조금 다른방식으로 사용합니다. import Img from '이미지경로'; const App = () => { return( ); }; export default App; React에서는 위의 코드와 같이 사용됩니다. 또한 추가로 alt값을 공백으로라도 둬야합니다. 만약 img 엘리먼트에 alt값을 추가하지 않았다고 오류를 출력하면서 프로젝트 구동이 안되는건 아니지만 console에서는 경고성 메시지를 뿜어냅니다. 그렇다면 React에는 위의 방법말고는 image를 사용 할 수 있는 .. 더보기 [React]React말고 next.js사용 next.js 프로젝트 생성하기 next.js 를 생성하는법은 React 프로젝트를 생성할 때 처럼 매우 간단합니다. // React // use npm npm create-react-app 프로젝트명 // use yarn yarn create react-app 프로젝트명 // next.js // npm npx create-next-app // yarn yarn create next-app 일반적인 React와 다를 것이 없습니다…. next.js 개발서버 구동하기 next.js 개발서버 구동도 어렵지 않습니다. // React // use npm npm start // use yarn yarn start // next.js // use npm npm run dev // use yarn yarn dev 더보기 이전 1 2 3 다음
