React를 어느정도 만들었다고 생각했는데, React도 패턴을 보니까 내가 만들던건 거의 원초적인 수준이더라. 알아보니 Container-Presenter 패턴에 대한 정리를 하기 위해서 내멋대로 이해한걸 글로 써본다. 우선 우리의 gpt께서는 다음과 같이 정리해줬다. Container-Presenter 패턴과 Redux를 이용한 React 개발 방식은 코드의 구조와 유지 보수성을 개선하기 위해 사용됩니다. 이 방식은 크게 3부분으로 나뉘어 집니다: Container, Presenter, 그리고 Index. 설명 정의 1. Container - Container는 데이터와 비즈니스 로직을 담당함. (프론트엔드에서 백단 기능 관련 담당) - Redux이용하여 애플리케이션 상태를 관리함. - 로직 처리 -..
설치 전 선 작업 touch ~/.zshrc vi ~/.zshrc 우선 zshrc 파일을 편집기로 열어줍니다. 맨 아래줄에 아래와같이 넣어줍니다. export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" nvm 설치 nvm을 설치해줍니다. brew install nvm 에러 발생 xcode error 발생 시 아래링크와 같이 해결해줍니다. 2023.10.22 - [FrontEnd 개발] - Error: You have not agreed to the Xcode license. Please resolve this by running: sudo xcodebuild -license accept for mac Error: You h..
아마 저번 에러에 이어서 이번에도 문제가 발생했다. 요약하자면 리로드가 안된다.. 흠 그러면 어떻게 해결했는지 알아보자. 이걸 보면 알 수 있다. 최근 react-scripts를 업데이트를했다. 그렇기 때문에 문제가 발생했는데, 4.x 버전에서는 scripts가 react-scripts start 로 먹혔는데, 바뀐듯싶다. 5.x 버전에는 다음과 같이 써야한다. "start": "WATCHPACK_POLLING=true react-scripts start", 다음과 같이 바꿔보자. 잘..된다. 1시간의 내 삽질 슬프다.
음 멀 다운로드했는지는 기억이 나지않지만, React 프로젝트에서 npm start를 할 때 저런 에러가 발생했다. 에러를 해결하기 위해서 다음과같은 절차를 진행해봤다. 1. BASH 권한 주기. sudo chown -R $USER 물론 권한문제는 아니겠지만, 그래도 넣어준다. 2. 캐시 삭제 npm cache clean --force 물론 캐시문제도 아니겠지만 그래도 해준다. (여기서 해결) 3.react-scripts 최신화 npm install react-scripts@latest 최신화 해서 해결완료
살다보면 스티커 메모처럼 위젯을 구현하고 싶을때가 온다.. 나만그럴수도있고 그럼 이 위젯을 어떻게 만들어야할까? 우선 GridLayout에서 만들것이므로 NewGrid.js import React, { useState } from "react"; import ResizableWidget from "./ResizableWidget"; import "./NewGrid.css"; const Grid = () => { const [widgets, setWidgets] = useState([ { id: "1", text: "Widget 1" }, { id: "2", text: "Widget 2" }, { id: "3", text: "Widget 3" }, ]); const handleRemoveWidget = (..
더보기 반응형 디자인 다크 모드 지원 미니멀리즘 디자인 그리드 레이아웃 인터랙티브한 애니메이션 타이포그래피 색상 팔레트 아이콘 라이브러리 사용 컴포넌트 라이브러리 활용 로딩 애니메이션 구현 사용자 피드백 제공 웹 접근성 사용자 피드백 제공 사용자의 행동에 따라 즉각적인 피드백을 제공하는 것이 중요하다. 버튼 클릭, 폼 제출 등의 상황에서 사용자에게 상태를 알려주는 것이 좋다. 또한 이걸 이용해서 다른 디자인에서도 뭔가 반응이 있다고 알려준다던지, 밋밋하지 않도록 Snackbar를 이용해서 보여주겠다. import library import { Button, TextField, Snackbar, Grid } from '@mui/material'; import { useState } from 'react';..
더보기 반응형 디자인 다크 모드 지원 미니멀리즘 디자인 그리드 레이아웃 인터랙티브한 애니메이션 타이포그래피 색상 팔레트 아이콘 라이브러리 사용 컴포넌트 라이브러리 활용 로딩 애니메이션 구현 사용자 피드백 제공 웹 접근성 컴포넌트 라이브러리 활용 UI 컴포넌트 라이브러리를 사용하면 일관된 스타일의 컴포넌트를 쉽게 구현할 수 있다. Material-UI, Ant Design, Bootstrap 등과 같은 라이브러리를 사용하면 더 빠르게 웹사이트를 구축할 수 있다. LoginForm.js import React from "react"; import { Box, Container, Typography, TextField, Button, FormControlLabel, Checkbox, } from "@mui/m..
더보기 반응형 디자인 다크 모드 지원 미니멀리즘 디자인 그리드 레이아웃 인터랙티브한 애니메이션 타이포그래피 색상 팔레트 아이콘 라이브러리 사용 컴포넌트 라이브러리 활용 로딩 애니메이션 구현 사용자 피드백 제공 웹 접근성 라이브러리 설치 npm install react-transition-group @mui/icons-material 색상 팔레트 좋은 색상 조합은 웹사이트를 더 매력적으로 만든다. 색상 팔레트를 선택할 때는 대조되는 색상이나 조화로운 색상을 사용하기가 좋다. 사이트 전체에서 일관된 색상 팔레트를 사용하면 더 전문적으로 보일 것이다. ColorPalette.js import React, { useState } from "react"; import { Box, Typography, Grid }..
더보기 반응형 디자인 다크 모드 지원 미니멀리즘 디자인 그리드 레이아웃 인터랙티브한 애니메이션 타이포그래피 색상 팔레트 아이콘 라이브러리 사용 컴포넌트 라이브러리 활용 로딩 애니메이션 구현 사용자 피드백 제공 웹 접근성 라이브러리 설치 npm install @react-spring/web @react-spring/core @mui/material @emotion/react @emotion/styled 인터랙티브한 애니메이션 사용자와 상호작용하는 애니메이션을 추가하면 웹사이트가 더 살아있게 느껴진다. framer-motion 같은 애니메이션 라이브러리를 사용하면 간편하게 애니메이션을 구현할 수 있다. 또한 @mui/system도 이용해서 구현해보겠다. 예시) framer-motion 와 @mui/syste..
더보기 반응형 디자인 다크 모드 지원 미니멀리즘 디자인 그리드 레이아웃 인터랙티브한 애니메이션 타이포그래피 색상 팔레트 아이콘 라이브러리 사용 컴포넌트 라이브러리 활용 로딩 애니메이션 구현 사용자 피드백 제공 웹 접근성 미니멀리즘 디자인 깔끔하고 간결한 디자인은 사용자들에게 인기가 많다. 불필요한 요소를 제거하고, 중요한 정보와 기능에 집중할 수 있도록 디자인해야 한다. MinimalLoginForm.js import React from "react"; import "../MinimalLoginForm.css"; const MinimalLoginForm = () => { return ( 로그인 로그인 ); }; export default MinimalLoginForm; MinimalLoginForm.cs..
더보기 반응형 디자인 다크 모드 지원 미니멀리즘 디자인 그리드 레이아웃 인터랙티브한 애니메이션 타이포그래피 색상 팔레트 아이콘 라이브러리 사용 컴포넌트 라이브러리 활용 로딩 애니메이션 구현 사용자 피드백 제공 웹 접근성 기초 설치 파일 npm install @mui/material @emotion/react @emotion/styled styled-components @mui/icons-material 반응형 디자인 다양한 디바이스에서 웹사이트가 제대로 작동하도록 반응형 디자인을 구현해야 한다. CSS의 미디어 쿼리를 사용하거나, 라이브러리나 프레임워크를 사용하여 구현할 수 있다. 예시) Material-UI를 이용한 반응형 디자인 import React from "react"; import { Cont..
시작하기 전 필요한 준비사항 React를 처음 설치하려면 Node.js와 npm(Node Package Manager)이 필요하다. 이 글에서는 Node.js와 npm의 설치 방법과 React 프로젝트를 생성하는 방법에 대해 설명할 것이다. Node.js 설치 및 확인 Node.js는 자바스크립트 런타임으로, React와 같은 라이브러리를 사용하여 웹 애플리케이션을 개발할 때 필요하다. Node.js를 설치하려면 다음 단계를 따르자. Node.js 공식 사이트에 접속한다. https://nodejs.org/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS 버전을 다운로드하고 설치한다..
저번 시간에 chatGPT api 를 이용해서 react - spring boot 방식으로 chat gpt를 구현해봤다. 2023.03.24 - [프로그래밍] - React - Spring boot로 gpt api를 가져와서 간단하게 응답하는 웹페이지 구현하기 React - Spring boot로 gpt api를 가져와서 간단하게 응답하는 웹페이지 구현하기 gpt api를 이용해서 웹페이지 구축 - 백엔드편 Spring Initializr 이 사이트를 들어가서 maven 프로젝트와 dependencies에 Spring WEB, Lombok을 추가한다. 프로젝트를 연다. 열고나서 간단하게 package는 3개 만든다 haleta.tistory.com 하지만 저번 대답이 시원 찮았던 이유가, api를 가져와..
gpt api를 이용해서 웹페이지 구축 - 백엔드편 Spring Initializr 이 사이트를 들어가서 maven 프로젝트와 dependencies에 Spring WEB, Lombok을 추가한다. 프로젝트를 연다. 열고나서 간단하게 package는 3개 만든다. 1. config 2. controller 3. service 우선 config부터 설정한다. 파일명에 따라 다르겠지만, 나는 WebConfig.java를 만들었다. WebConfig.java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org..
SpringBoot를 활용하여 React, JPA로 개발을 시작할 예정이다. 우선 기초적인 목표인 게시판부터 시작하는게 맞다고 생각이든다. Spring.io에서는 간단하게 SpringBoot 어플리케이션을 초기 세팅해주는 사이트를 운영하고있는데 아래 url 주소로 들어가보자. 프로젝트 생성하기 https://start.spring.io/ 본 글은 23년 2월 18일 글로 프로젝트, Spring Boot 버전 및 자바 버전이 다음과 같다는점을 알린다. SpringBoot 3.0.2, Java 11 버전 개발. 그다음 기초적으로 디펜던시를 설정해주겠다. (앞으로 사용하면서 추가될 디펜던시가 많을수도..) Dependencies Setting Lombok , Spring Web 두개만 들고 갈 생각이다. Lo..
| 내 블로그 - 관리자 홈 전환 |
Q
Q
|
|---|---|
| 새 글 쓰기 |
W
W
|
| 글 수정 (권한 있는 경우) |
E
E
|
|---|---|
| 댓글 영역으로 이동 |
C
C
|
| 이 페이지의 URL 복사 |
S
S
|
|---|---|
| 맨 위로 이동 |
T
T
|
| 티스토리 홈 이동 |
H
H
|
| 단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.