더 알아보기/기능84 [React] 방 추가, 삭제 기능 만들기(객체 삽입, 삭제, 수정) 방을 추가하고, 삭제 할 수 있는 기능으로써 특정 방을 삭제하면 해당 방의 데이터만 삭제되고 나머지 값들은 자동으로 앞당겨 오도록 구현했다. (목적) 삭제 버튼 클릭 시 해당 행의 방만 삭제 되도록 구현 (예를 들어 방 1 ~ 3까지 있는 상태에서 방 2를 삭제 할 경우 방 2의 값은 삭제되고, 방 3의 값은 방 2로 앞당겨 져야 한다.) (과정) 방 하나를 구성하고 있는 객체는 form이다. 삭제 버튼을 클릭 시 해당 행의 고유값(i)를 삭제 함수(deleteRoom)의 인자(파라미터)로 넘겨준다. 해당 고유값을 지니고 있는 key 값을 삭제한다. (delete form[`room${i}`]; 삭제된 key 값 다음으로 있는 key 값들의 value를 하나씩 앞당긴다. (앞당겨 오는 과정에서는 http.. 2022. 5. 24. [CSS] animation, @keyframes를 사용한 화면 전화 CSS 프로젝트 진행 중 페이지 이동 할 때 뚝뚝 끊기는 느낌이 있는 데 스무스 하게 이어지는 느낌으로 변경 해달라는 요청을 받아서 이틀동안 열심히 구글링 해보고, 수정 과정을 거친 결과 animation과 @keyframes를 사용하여 구현했다. 🤔 라이브러리 대신 JS/CSS를 사용한 이유는? : react-transition-group, gatsbyJS 라이브러리 예제를 찾아보고 시도 해봤는 데 내가 원하는 대로 커스텀 하기도 어렵고 과정이 자세히 나온 자료를 찾지 못해서 JS/CSS를 사용하여 가볍고 내가 원하는 모습으로 구현했다. 😮 미리보기 두개를 비교 해보면 확실히 차이가 보이는 데 사용 전에는 마이페이지, Nav 아이콘 로딩 상태에서 사용자가 이질감을 느낄 수 있었는 데 수정 후에는 그런 모습이 .. 2022. 5. 13. [Next.js] Chart.js 라이브러리로 구현한 도넛 차트의 tooltip이 말썽을 부린다. 바야흐로 2022년 4월 6일 입사 입사 1달 하고도 10일 조금 넘은 신입사원이였던 나는 Chart.js 라이브러리로 차트를 구현 했었다. 이때는 몰랐다. 한달 뒤 이런 문제가 발견 될 줄은.. 😥😥 [Next.js] Chart.js Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.or.. eundol1113.tistory.com 처음에는 뭐가 문제인 지 모르겠어서 Chart.js 공식문서만 뚫어져라 쳐다 .. 2022. 5. 12. ToolTip (2) - Bootstrap/react-tooltip 앞 게시물에서는 HTML/CSS로 ToolTip을 구현하는 방법을 정리했고, 이번 게시물에서는 Bootstrap과 react-tooltip와 같은 외부 라이브러리로는 어떻게 ToolTip을 사용 할 수 있는 지 관련 블로그를 찾아보았다! ToolTip (1) - HTML/CSS 마우스를 올렸을 때 부가적인 설명을 보여주기 위한 수단으로 ToolTip(툴팁)을 많이 사용하는 데 구현하는 과정에서 크게 두 가지 방법이 있어 이를 정리해보았다. 이번 게시물에서는 HTML/CSS로 만 eundol1113.tistory.com Bootstrap (HTML) 이 블로그는 평소에도 회사 업무 할 때 Bootstrap 관련된 기능에서 도움을 많이 받고 있어 추천하고 싶다. Bootstrap 4 / Tooltips / .. 2022. 5. 11. ToolTip (1) - HTML/CSS 마우스를 올렸을 때 부가적인 설명을 보여주기 위한 수단으로 ToolTip(툴팁)을 많이 사용하는 데 구현하는 과정에서 크게 두 가지 방법이 있어 이를 정리해보았다. 이번 게시물에서는 HTML/CSS로 만들 수 있는 ToolTip에 대해 정리하고, 다음 게시물에서 Bootstrap/react-tooltip으로 만들 수 있는 ToolTip에 대해 정리해보았다. 아래 블로그를 참고하여 프로젝트에 적용하였는 데 [CSS] 툴팁(tooltip) 구현하기 Engineering Blog by Dale Seo www.daleseo.com 이외에도 화살표 방향도 설정할 수 있는 블로그도 있어 참고하면 좋을 것 같다. [HTML/CSS] 툴팁 적용하는 방법 (title 및 커스텀 툴팁) html과 CSS를 이용하여 특정 .. 2022. 5. 11. IOS에서 input focus 시 자동으로 zoom 되는 현상 막기 기존에 HTML, JS(jQuery), CSS로 만들어진 프로젝트를 수정하던 중 IOS에서만 input을 focus 할 때 화면이 자동으로 zoom-in 되는 현상이 일어났고, 이 문제를 해결하기 위해 몇일동안 삽질을 했다. (다른 프로젝트 진행 하면서 짬내서 했던 거라 삽질이 좀 길었다.) 첫번째 시도 때는 CSS에 zoom 속성을 사용하였는 데 변화는 없었다. /* Keyword values */ zoom: normal; zoom: reset; /* values */ zoom: 50%; zoom: 200%; /* values */ zoom: 1.1; zoom: 0.7; /* Global values */ zoom: inherit; zoom: initial; zoom: revert; zoom: reve.. 2022. 4. 25. [react-datepicker] 달력 만들기_v2 [React] 달력 만들기(react-datePicker)_v1 - 참고 블로그 더보기 - 라이브러리 추천 React에서 활용 가능한 DatePicker Library 정리 datepicker library 사용 후기 velog.io - react-datePicker 커스텀 && , || : 네이버 블로그 당신의 모든 기록을 담는.. eundol1113.tistory.com react-datePicker 라이브러리를 사용하는 자세한 설명은 위 게시물(v1)을 참고하는 게 더 많은 도움이 될 것이라고 생각한다. v2에서는 v1 코드를 기본으로 사용하면서 조금씩 변형 시키는 과정과 추후 내 업무를 인수인계 해드려야 할 경우를 대비한 안내문이라고 볼 수 있다. HTML 삽입 미리보기할 수 없는 소스 결과 Te.. 2022. 4. 15. [React] 부트스트랩 페이징 구현하기 Bootstrap 4 / Pagination / 이전 또는 다음 페이지로 연결하는 링크 꾸미기 글이 많을 때 다음 글 또는 이전 글, 다음 글 목록 또는 이전 글 목록으로 이동하는 링크를 만듭니다. 이를 페이지네이션(Pagination)이라고 하는데, Bootstrap에서는 페이지네이션을 쉽게 꾸밀 수 있 www.codingfactory.net 위 블로그의 기본 코드를 참고하여 구현하였다. Previous 1 2 3 4 5 Next 1. Paging.js라는 파일을 생성 후 컴포넌트를 하나 만들어 준다. ( + react의 useState, useEffect / styled-components import 해주기 ) import { useState, useEffect } from "react"; impo.. 2022. 4. 11. [Next.js] Chart.js Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 더 알아보기 Chartjs tutorial with React — Nextjs with examples Creating amazing charts with in React with Chartjs itnext.io Chart.js 시작하기 안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 .. 2022. 4. 6. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90
