React (12) 썸네일형 리스트형 App.js 다이어트 개인적으로 app.js는 간결하고 가독성이 좋은 것을 선호하지만막~~ 개발을 열심히 하다보면 어느 순간...import { ThemeProvider } from 'styled-components'import original from 'react95/dist/themes/original'import Layout from './components/layout/Layout'import BgIcon from 'components/bgIcon/BgIcon'import myComputer from 'asset/images/myComputer.png'import trashIcon from 'asset/images/trash.png'import networkIcon from 'asset/images/network.pn.. 컴포넌트 리팩토링 과정 대단한 건 아니고 개인 포르폴리오 사이트 제작 과정 중 있던 컴포넌트 리팩토링 과정을 뿌듯해서 포스팅하려 한다..import { MenuList, MenuListItem } from 'react95'import styled from 'styled-components'export default function HeaderMenu() { return ( File Edit View Help )}const MenuListContainer = styled(MenuList)` margin: 0; box-shadow: none; padding: 0 4px; border-right: none; border-left: none;`import { MenuLis.. 깃허브 페이지와 커스텀 도메인 깃허브 페이지를 사용해 개인 도메인을 할당하는 방법에 대해 알아보자 1. 도메인 구매 https://xn--220b31d95hq8o.xn--3e0b707e/ 내도메인.한국 - 한글 무료 도메인 등록센터 한글 무료 도메인 내도메인.한국, 웹포워딩, DNS 등 무료 도메인 기능 제공 xn--220b31d95hq8o.xn--3e0b707e 도메인을 구매할 돈이 없는 거지이므로 위 사이트에서 도메인을 하나 구했다 도메인 검색 창에다가 사용하고 싶은 웹사이트 이름을 입력하면 하단에 결과가 나온다 나는 kro.kr 도메인이 그나마 깔끔한 것 같아 kro.kr 도메인을 등록하였다 2.도메인 설정 이후 상단의 도메인 관리 탭 -> 방금 등록한 도메인 옆의 수정 버튼을 클릭한다 그리고 위의 빨간색 박스 안에다 www.깃.. react-hook-form,react-query 사용한 몬스터도감 만들기 (2) https://kangcheon.tistory.com/100 react-hook-form,react-query 사용한 몬스터도감 만들기 (1) 제목은 몬스터 도감이지만 사실상 todoList입니다.. 사실 ToDoList 정도야 기본적인 CRUD 기능만 있으면 끝이므로 react-query,react-hook-form 까지 사용하지 않아도 상관없지만... 최근 두 라이브러리를 학습 kangcheon.tistory.com 이전 글에 이어서 이번엔 수정/삭제 기능을 구현해보자 전체 코드는 이곳에서 확인 가능하다 https://github.com/kangaroo19/common_component GitHub - kangaroo19/common_component Contribute to kangaroo19/co.. react-hook-form,react-query 사용한 몬스터도감 만들기 (1) 제목은 몬스터 도감이지만 사실상 todoList입니다.. 사실 ToDoList 정도야 기본적인 CRUD 기능만 있으면 끝이므로 react-query,react-hook-form 까지 사용하지 않아도 상관없지만... 최근 두 라이브러리를 학습하고 간단한 웹앱을 만들고 싶은 마음에 진행해 보았습니다 react-query : 서버상태관리 위해서 사용하였고, api호출 관련 코드는 전부 react-query로 구현하였음 zustand : 몬스터 수정관련(patch method)로직 구현위해 사용하였음 무엇보다 프롭 이리저리 왔다가는게 싫었음 react-hook-form : 인풋컴포넌트 상태값 관리위해 사용하였음, 인풋태그와 useState 사용 시 나오던 되게 뻔한 코드 (onChange 함수 안에 setSta.. react-hook-form을 이용한 인풋 컴포넌트 구현 https://kangcheon.tistory.com/95 인풋 컴포넌트 상태관리 https://kangcheon.tistory.com/94 재사용 위한 인풋 컴포넌트 버튼 컴포넌트에 이어서 이번엔 인풋태그 관련 컴포넌트를 만들어 보았다 시작하기 앞서 https://kangcheon.tistory.com/91 리액트 버튼 컴포넌트 재 kangcheon.tistory.com https://kangcheon.tistory.com/94 재사용 위한 인풋 컴포넌트 버튼 컴포넌트에 이어서 이번엔 인풋태그 관련 컴포넌트를 만들어 보았다 시작하기 앞서 https://kangcheon.tistory.com/91 리액트 버튼 컴포넌트 재사용 간단하게 공통으로 사용할 버튼 태그를 만들어 kangcheon.tistory.c.. 버튼 컴포넌트 css 파일 관리 https://kangcheon.tistory.com/91 재사용 위한 버튼 컴포넌트 간단하게 공통으로 사용할 버튼 태그를 만들어 보았다 사실 이렇게 굳이 버튼 컴포넌트를 만든 이유는 재사용,유지보수성은 다 제쳐두고 내가 편하려고 만들었다. 개발 시작! 열심히 코드 짬 열 kangcheon.tistory.com 위 포스트에서 적어놓은 단점을 개선 할 수 있는 방법을 찾아서 기록합니다 일단 문제점은 '하나의 css 파일을 여러명의 개발자가 사용하게 되어 협업에 있어 불편할 것 같다' 였다 그래서 git flow 전략처럼 개개인이 사용할 css 파일을 따로 두고 버튼 컴포넌트에서는 이 각각의 css 파일들을 하나로 뭉쳐서 import하면 되지 않을까 하는 생각이 스쳐 지나갔다 그래서 GPT 형님에게 물어보았.. 인풋 컴포넌트 상태관리 https://kangcheon.tistory.com/94 재사용 위한 인풋 컴포넌트 버튼 컴포넌트에 이어서 이번엔 인풋태그 관련 컴포넌트를 만들어 보았다 시작하기 앞서 https://kangcheon.tistory.com/91 리액트 버튼 컴포넌트 재사용 간단하게 공통으로 사용할 버튼 태그를 만들어 kangcheon.tistory.com 위 글에서는 customhook을 사용하여 각 값들을 사용하였는데 초기값 할당같은 문제가 있어 이번엔 상태관리 라이브러리 zustand를 사용하여 코드를 작성해 보았다 이에 따라 각 컴포넌트들의 코드가 달라진 점이 있다 먼저 상태관리 코드부터 살펴보자 useInputField.js /* eslint-disable */ import { create } from 'zust.. 이전 1 2 다음
