리액트 썸네일형 리스트형 [React] Nutriguide 프로젝트 코드 리뷰 이어서 InputMenuPage입니다. 식단 입력 페이지인데 이 부분은 어느정도 chatGPT의 도움을 받았기 때문에 리뷰를 해보려고 합니다. U.I는 antd라는 프레임워크를 사용했습니다. import React, { useState } from 'react';import { Typography, Input, Form, Button, Select, message, Modal } from 'antd';import styles from '../css/Button.css';import '../css/InputPage.css';function InputMenuPage({ }) { const { Option } = Select; // 각 요일에 해당하는 식단과 선택된 요일을 관리하는 state const.. 더보기 [React] 영양제 추천 사이트 - 졸업 작품 예행 연습(1) 안녕하세요 오랜만에 돌아왔네요. 개강 후 수강신청하고 졸업작품 준비하느라 시간에 허덕이고 있습니다. 다행히 지금은 방향이 정해져서 프론트엔드 쪽으로 일단 진행하고 백엔드 부분을 도와주는 식으로 나아갈 것 같습니다. 아직 파트 분배를 하지 않았지만 미리 사이트를 만들고 있습니다. 저희 조는 영양제를 추천해주는 웹사이트를 만들기로 했습니다. 사용자의 건강 정보와 식단을 입력받으면 사용자의 영양소 섭취량과 권장 섭취량을 비교해서 나온 수치로 부족한 영양소 성분을 보충해주는 영양제 사이트 입니다. 먼저 디자인의 방향성을 잡기 위해 로고를 만들었습니다. 로고 1도 괜찮았지만 좀 더 범용성이 넓을 것 같은 로고 2를 채택했습니다. 사이트 이름은 로고처럼 NUTRIGUIDE가 될 것 같습니다. 먼저 랜딩페이지를 만들.. 더보기 [CSS] Antd CSS Framework 처음 사용해 본 CSSs Framework는 React BootStrap이었는데 이번 프로젝트에서는 Antd라는 Framework를 사용해 볼 예정입니다. Framework를 사용하면 좋은 점은 CSS에 시간과 노력을 투자할 필요가 줄어든다는 점입니다. 그래서 기능에 더 집중할 수 있게 됩니다. 그 중에서도 Antd는 중국에서 만든 FrameWork로 기능이 많고 깔끔한 디자인인게 장점이고 그렇기 때문에 용량 문제가 단점으로 꼽힐 수 있습니다. Ant Design of React - Ant Design Ant Design of React - Ant Design An enterprise-class UI design language and React UI library with a set of high-qu.. 더보기 [MongoDB, React] Mongoose로 MongoDB와 연결하기 (feat.에러들) npm install express mongoose 를 터미널에 입력해서 리액트 17.0.2 버전에서 몽구스를 설치하려 했는데 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @testing-library/react@13.4.0 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! peer react@"17.0.2" from react-dom@17.0.2 npm ERR! node_modules/react-dom npm ERR! react-dom@"^17.0.2" from the root project npm ERR! pee.. 더보기 [React] 리액트 버전 다운그레이드 서버를 만드는 도중에 리액트 18버전에서는 여러가지 종속성 문제가 발생하였습니다. 서버를 구축해서 몽고db를 연결해 보고 싶은데 생각대로 되지 않네요. 그래서 버전을 다운그레이드 해서 진행해보려고 합니다. react 18에서 17.0.2로 다운그레이드하는 방법 - DEV Community How to downgrade from react 18 to 17.0.2 I might not be the only one who is really scared of change in technology causing a break in my code,... dev.to 링크로 걸어둔 페이지를 참고하였습니다. 가장 많이 쓰는 버전인 17.0.2버전으로 바꿔보겠습니다. npx create-react-app . 먼저 프로젝.. 더보기 [React] useReducer 복습 useReducer는 개발을 하면서 많이 사용할 것 같아서 복습하는 시간을 가져보도록 하겠습니다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; function Users() { const [users, setUsers] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchUsers = async () => { try { // 요청이 시작 할 때에는 error 와 users 를 초기화하고 setError(null); set.. 더보기 [React] API 연동 백엔드를 무작정 코딩하면서 공부해보려고 했는데 엄두가 안나서 기본 개념부터 배워보려고 합니다. 오늘은 API 연동에 대해서 공부해 보려고 하는데 알고 있어야 할 개념이 있습니다. (벨로퍼트님의 강의를 참고하였습니다.) 비동기 처리 함수라는 것이 있는데 비동기라는 말은 작업을 동시에 처리하는 것을 의미합니다. 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다. 비동기 처리는 보통 Promise나 async/await함수를 사용합니다. const myPromise = new Promise((resolve, reject) => { // 구현.. }) Promise함수의 형태입니다. 성공할 때는 resolve를 호출하고 .. 더보기 [Git] 리액트 프로젝트 깃허브 Repository에 올리기 안녕하세요 오랜만에 왔네요 : ) 오늘은 리액트 프로젝트를 Git Bash를 이용해서 깃허브에 올려보겠습니다. 먼저 create-react-app 으로 만든 리액트 프로젝트가 필요합니다. 프로젝트 폴더가 생성되면 우클릭 후 Open Git Bash here를 클릭합니다. 그러면 이렇게 Git Bash 터미널 창이 뜹니다. 경로는 프로젝트 폴더로 지정되어 있습니다. 다음은 올리기 위해 수행해야 할 단계입니다. 1. 명령어란에 git init을 쳐줍니다. - git init은 내 프로젝트를 git에 등록하는 과정입니다. 2. git add . 을 입력해줍니다. - git에 등록하여 commit 상태로 만들어줍니다. 3. git commit -m "first commit" 을 입력해 줍니다. - 커밋이 가능한.. 더보기 이전 1 2 3 다음
