'Project/Toy-project' 카테고리의 글 목록

시간 계산기 만들기 (4) 설명 popover (Chakra UI) + 배포

2023.10.03· Project/Toy-project

일단 좀 그럴듯해보이게 설명 pop-over 창을 만들었다. https://chakra-ui.com/docs/components/popover/usage Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React aSimple, Modular and Accessible UI Components for your React Applications. Built with Styled Systemchakra-ui.com근데 막상 편하게 하려고 chakra UI를 쓰려 보니 다른 css와 충돌이 일어났다 ㅜㅜ 그래서 이것저것 수정하고, !import..

시간 계산기 만들기 (3) 뺄셈 기능 추가

2023.10.03· Project/Toy-project

덧셈 기능가지고 사실 내가 쓸 기능은 충분하지만 (...) 그래도 뺄셈기능까지 구현해서 넣었다. ㅜㅜ 처음에 handleAdd 함수 밑에 handleSubtract 함수를 똑같이 만들다보니, 아 이거 그냥 파라미터 받아서 하나의 함수로 합치면 되겠구나! 하고 재빨리 수정했다! 마치 처음부터 계획했던 것처럼 ㅎㅎ 뺄셈 기능 const handleOperation = (operator: string) => { const t1 = state.time1.includes(":") ? state.time1.split(":") : [state.time1, "00"]; const t2 = state.time2.includes(":") ? state.time2.split(":") : [state.time2, "00"];..

시간 계산기 만들기 (2) 시간 누적 덧셈, HISTORY로 보여주기

2023.10.03· Project/Toy-project

지난 게시글에서 숫자 입력할 때 자동으로 시간 구분 (":") 해주는거랑 엔터키 입력으로 + 구현을 했다. 근데 내가 원하는 것은 근무 시간을 전부 더해야하기 때문에, 더한 것에 또 더하고 또 더하고 또 더하는 이런~ 계산기 같은 기능이 필요했다. 시간 누적해서 더하기 const result = `${adjustedHours .toString() .padStart(2, "0")}:${adjustedMinutes.toString().padStart(2, "0")}`; setState({ time1: result, time2: "", result: "", }); 결과값에 (덧셈을 한 후) result 를 time1에 넣어준다. 그리고 원래 time2 의 초기값이 00:00 이었는데 이것도 빈 문자열로 바꾸어..

시간 계산기 만들기 (1) Enter키로 시간 더하기 + 'onKeyPress' is deprecated.

2023.10.02· Project/Toy-project

근무시간 계산할 때 계산이 잘 맞나.. 확인할 때마다 시간 계산을 하는 사이트를 검색하는데 그게 내가 딱 필요한! 기능만 있지가 않아서 불편한 점이 있어 그냥 이정도는 만들어서 써보지 뭐.. 하고 시작하게 되었다. const [state, setState] = useState({ time1: "00:00", time2: "00:00", result: "", }); const handleAdd = () => { const t1 = state.time1.split(":"); const t2 = state.time2.split(":"); const hours = parseInt(t1[0]) + parseInt(t2[0]); const minutes = parseInt(t1[1]) + parseInt(t2[1]..

동물의 숲 정보 웹페이지 만들기 3 - Tanstack Table

2023.07.22· Project/Toy-project

간만에 다시 들어온 동숲 프로젝트는 오류 투성이였다 ^_^ 하루 종일 여기를 막으면 저기서 새어나오는 오류를 잡았고 본론은 이제서야 시작! https://tanstack.com/table/v8 TanStack Table | React Table, Solid Table, Svelte Table, Vue Table Headless UI for building powerful tables & datagrids with TS/JS, React, Solid, Svelte and Vue tanstack.com AG-grid를 쓸까, tanstack table을 쓸까 고민하다가 가장 최근에 썼던 tanstacktable이나 확실히 알고 가자 하고 결정했다 $ npm install @tanstack/react-tabl..

동물의 숲 정보 웹페이지 만들기 2 - 에러 기록 : Property 'map' does not exist on type 'never' & Argument of type 'null' ~

2023.06.21· Project/Toy-project

지난 번에 이 프로젝트를 통째로 타입스크립트 + next.js로 옮기는 작업을 했다. ( + tailwind) 그 중에 한동안 해결이 안되던 오류가 있었는데... Property 'map' does not exist on type 'never' 진짜 나를 한동안 피곤하게 만들었음. 인터넷에 나와있는 모든 방법을 총 동원했으나 이곳이 해결이 안되면 저곳이 빵구가 나고 .... 그랬는데 결국 조금~~은 허무한 해결이었다. 그래도 진짜 너무 속시원 일단 코드를 보면, export default function VillagerList() { const [data, setData] = useState(null); const [error, setError] = useState(null); const URL = "h..

인생네컷 만들기 프로젝트 3 - 화면 저장하기

2023.05.20· Project/Toy-project

html2canvas 지난 번에 작성했던 https://velog.io/@fairytale779/TIL-html2canvas 를 이용해서 쉽게 구현하였다 세팅은 위 게시글에 적혀있으니 넘어가고, 함수는 다시 적어보자면 이렇다 const onFullCapture = () => { html2canvas(document.querySelector(".App")).then( (canvas) => { const link = document.createElement("a"); link.download = "image"; link.href = canvas.toDataURL(); document.body.appendChild(link); link.click(); } ); }; const onFourCutCapture =..

인생네컷 만들기 프로젝트 2 - 이미지 크롭창 만들기 (실패 기록)

2023.05.20· Project/Toy-project

지난 번에 이미지 사이즈를 지정했더니 불러온 사진들이 비율 상관없이 찌부가 되는 것들을 막고자 새로운 기능을 공부해보았따. react-easy-crop 공식 github: https://github.com/ricardo-ch/react-easy-crop npm install react-easy-crop --save react-cropper 나는 두가지 중에 react-cropper를 이용했다. https://github.com/react-cropper/react-cropper ImageCrop.js import { useState, createRef } from "react"; import Cropper from "react-cropper"; import "cropperjs/dist/cropper.css..

인생네컷 만들기 프로젝트 1 - 틀 & 사진 업로드 & 저장

2023.05.20· Project/Toy-project

스파르타 코딩클럽에서 무료로 css,html 강의를 풀어줬는데, 이건 그냥 간단한 html,css니 듣지 않고 여기서 영감을 얻어... 리액트로 인생네컷 만들기를 해봤따. 반나절이면 간단히 끝낼 줄 알았는데, 이런 저런 복병을 마주쳐 결국 게시글도 두 개로 나뉘게 됨 ^_6 (세 개가 될 수도) 🪟 기본 틀 일단 만들고 블로깅하는 거라 현재까지 상황은 이러하다 왜 아이브고 장원영이냐면,... 아이브 신곡이 너무 좋고 원영이가 너무 이뻐서.. ㅠ 스타일 컴포넌트 쓰려다가 그냥 css 에다가 했다. 진행하면서 새로 알게 된 것들만 정리해봄 배경만 투명도 설정 위 사진에 보이는 배경은 사실 이러한 사진이다. 근데 만들어 놓고 보니 배경이 너무 정신이 없어서 ㅠㅠ 투명도를 조금 주고 싶었는데 App자체에 주게 ..

동물의 숲 정보 웹페이지 만들기 1 - API 불러오기

2023.05.20· Project/Toy-project

동물의 숲에 요즘 푹 빠져사는데, 내가 좋아하는 걸로 뭔가를 만들어보면 더욱 흥미가 생길 거 같아서 일단 냅다 동물의숲 api가 있나 찾아보았다. API 불러오기 https://api.nookipedia.com/ 여기서 api key를 요청한다고 폼을 작성해 보냈고, 보냈더니 며칠 만에 응원한다며 (ㅋㅋ) 키를 보내주었다. 일단 데이터를 잘 받아올 수 있나 테스트를 해보기위해 주민 목록부터 postman 으로 불러와 보았다. X-API-KEY에 내가 받은 키를 넣어주고 호출하면 이렇게 정보가 쭉~ 불러와진다. 리액트로 출력하기 프로젝트 생성 npx create-react-app 앱이름 App key 추가하기 .env 키는 일단 숨겨야 하는 내용이므로, .gitignore 에서 # API KEY .env ..

감정일기장 만들기 5 - 배포 & 후기

2023.05.20· Project/Toy-project

배포 준비 페이지 이름, 파비콘 수정 public/index.html ✚ en을 ko로 바꿔주지 않으면 번역하기~ 같은 게 나올 수도 있음! 각 페이지마다 바꿔 주기 index.html 에 있는 title을 찾아 바꾸어준다. 렌더링 될 때마다 바꾸어주게 하기 위해 useEffect 사용 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `달과 일기장 - ${id}번 일기`; }, []); 이걸 필요한 페이지에 넣어주면 된다. 그리고 list가 출력되는 home 에도 본래 타이틀을 추가해주어야, 새로 일기를 작성하고 리스트로 오고 나서도 타이틀이 바뀐다는거 명심명심 ..

감정일기장 만들기 4 - 최적화

2023.05.19· Project/Toy-project

최적화 최적화에는 직접 코드를 눈으로 하나하나 보고 판단하는 정적인 분석과정이 있고, 프로그램 도구를 이용해 찾아내는 동적 분석이 있다 근데 난 아직 바보니까 동적 분석을 이용해보기로 함..ㅎ 컴포넌트 탭에서 Highlight updates when components render 부분을 체크해 찾아보도록 하자 이 기능은 뭔가가 바뀌었을 때 어떤 state들이 변화가 되는지 보여주는 기능이다. 날짜 변화 날짜 변화시에 상단에 필터와 새 글쓰는 버튼이 계속 렌더가 되고 있는 모습을 볼 수 있음 근데 사실 월을 바꾼다고 해서 그부분이 새로 렌더 될 필요가 없다. 그 부분은 controlMenu로, Home컴포넌트에서 일단 increaseMonth, decreaseMonth로 날짜가 바뀌고, 또 그 자식 요소..

티스토리툴바