React 썸네일형 리스트형 [React] 캡스톤 디자인 진행과정 안녕하세요 오랜만에 돌아왔네요. 1학기 동안 캡스톤 디자인을 진행했습니다. 저는 인공지능 서버와 프론트엔드 페이지 설계를 도맡아 진행했습니다. 서버는 Flask라는 파이썬을 이용했고, 프론트엔드는 리액트와 AntiDesign 툴을 주로 활용했습니다. 오늘은 페이지의 UI를 보여드리고 개발이 완료되면 코드 리뷰를 하도록 하겠습니다. 먼저 메인페이지입니다. 페이지에 대해 간단히 설명하고 영양성분 설명 버튼을 누르면 성분 설명 페이지로 이동합니다. 성분 설명 페이지입니다. 네모 박스를 누르면 해당 영양소에 대한 설명을 보여줍니다. 다음은 AI 질문 페이지입니다. 질문을 하면 ChatGPT API를 기반으로 답변을 생성해 줍니다. Navbar에서 추천 받기 버튼을 누르면 위 페이지로 이동하고 추천.. 더보기 [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를 호출하고 .. 더보기 [React] 투두리스트 로그인 구현하기2 이번 시간에는 리액트 라우터 돔의 라우팅을 통해 메인페이지, 로그인, 회원가입 페이지를 분리해보도록 하겠습니다. 먼저 app.js에 루트(경로)들을 만들어 줍니다. import {BrowserRouter, Routes, Route} from "react-router-dom"; import를 해주고 function App() { return ( ); } 루트를 만듭니다. import React, { useState } from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; const TodoTemplateBlock = styled.div` width: 512px; height: 7.. 더보기 [React] 투두리스트 로그인 구현하기1 안녕하세요! 주말동안 갑자기 열이 나서 아무것도 못했습니다,, 오늘은 회원가입 페이지의 간단한 UI부분을 만들고 백엔드 쪽도 공부해서 로그인 기능까지 차근차근 구현해 보도록 하겠습니다. 베이스는 기존 투두리스트 웹을 이용하여 진행할 예정입니다. 기존 TodoTemplate을 이용하면 될 것 같습니다. import React from 'react'; import styled from 'styled-components'; const TodoTemplateBlock = styled.div` width: 512px; height: 768px; position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */ background: white; border-radius: 16px; .. 더보기 [React] 투두리스트 웹 만들기3 에러가 난 원인이 components에 있는 TodoContext함수를 인식을 못해서 였는데 폴더 이름과 함수 이름을 바꿔 보아도 해결되지 않아서 TodoContext함수만 따로 빼주었습니다. + 버튼을 누르면 45도 회전시켜서 X버튼으로 보이게 하고 할일을 입력할 수 있는 인풋 창이 생성됩니다. 여기서 처음 알게 된 것은 box-sizing: border-box; 라는 css 속성인데 border-box로 설정하면 요소의 width 값은 '콘텐츠 크기 + 좌우 padding 값 + 좌우 border 값'으로 계산되는 것입니다. width: 100%; 즉 width값이 100%이기 때문에 요소의 크기와 width 값이 동일하게 적용됩니다. 이제 UI 부분은 모두 구현된 것 같고 기능을 구현해 보도록 하겠.. 더보기 이전 1 2 3 다음
