개발공부 임고미

목차 1. 슬라이드 세팅 2. 간격주기 / hover 효과 영역 3. 드래그중 클릭 막기 드래그중 클릭 막기 1. slick APi이용 상태값을 이용해 드레그 중인것을 캐치하고 그 동안 클릭을 막는 방법을 이용합니다. const [dragging, setDragging] = useState(false) const handleBeforeChange = useCallback(() => { setDragging(true); }, []); const handleAfterChange = useCallback((i: number) => { setDragging(false); }, []); const settings = { ..., beforeChange: handleBeforeChange, afterChange:..

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 / hover 효과 영역 3. 드래그중 클릭 막기 간격주기 1. css custom 간격을 주기위해선 slick slide의 css를 수정해줭하는 수밖에 없습니다. [기본] //오른쪽으로 20px만큼 간격주기 .slick-list { marign-right: -..

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 3. 드래그중 클릭 막기 슬라이드 세팅 1. 패키지 로드 리엑트에서 slick을 세팅하기위에선 몇가지 패키지를 다운로드 해야합니다. //react slick npm install react-slick --save npm install slick-carousel -..

기본 1. import 안한경우 2. import 하고 component 만들어줬는데, 잘못만들어준경우 //x const styledComponent = styled.div``; //o const StyledComponent = styled.div``; 이 또한 컴포넌트를 만드는것이므로, 대문자로 시작해줘야합니다. 3. 컴포넌트에 styled를 적용하고 싶은데 잘못한 경우 //x const StyledComponent = styled.Component``; //o const StyledComponent = styled(Component)``; 컴포넌트는, 일반 태그들과 달리 () 괄호로 묶어줘야합니다. 4. 위와같이 잘했는데도 안되는경우 이 상황을 겪고 이 포스팅을 하게 되었는데 해결은 하였지만 모든 원..

들어가며! 처음에 csv파일과 xlsx의 차이를 잘 몰라 어떤것을 선택해 엑셀로 변환시킬까 고민하다가 두 타입의 차이점을 알아보았다. csv 1. MS-Excel, Google Sheet등 과 같은 다양한 스프레시트에서 사용할 수 있습니다. 2. xlsx에 비해 쉽고 빠르게 읽을 수 있다. 3. 단순 읽고 쓰는 정도라면 csv추천 xlsx 1. 기능이 많다. 2. csv에비해 무겁다. 참고 : https://wisenrich.com/%EC%97%91%EC%85%80xls%ED%8C%8C%EC%9D%BC%EA%B3%BC-csv-%EC%9A%A9%EB%8F%84-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80/ ------- 둘 중 필요한거..

1. 앤트디 적용했는데 스타일이 안들어오는 문제를 확인했다.. import 'antd/dist/antd.css'; 했더니 스타일이 적용되긴 되었다. 2. 커스텀하려고 craco 로 세팅 다운 받아야하는 라이브러리 2가지는 "@craco/craco": "^5.5.0", "craco-antd": "^1.19.0", 버전을 함께 올려놓은 이유는, craco-antd를 사용하기 위해선 caraco를 로드해야하는데 craco 버전 이슈가 있어서 5.5.0으로 세팅하였다. package.json의 스크립트 부분을 수정해 줘야합니다. "scripts": { "start": "craco start", "build": "react-scripts build", "test": "react-scripts test", "eje..

간단한 스타일을 줄때 활용했는데 제대로 활용해보기 위한 정리 styled component 의 API Reference 와 Getting start 부분을 참고해 작성 1. 활용가능 : 태그 or 컴포넌트(tag / component) //태그 : .button const Button = styled.button` background: palevioletred; border-radius: 3px; border: none; color: white; ` //컴포넌트 : (ComponentName) const TomatoButton = styled(ComponentName)` background: tomato; ` 2. 조건에 따른 스타일링 (props) //props로 background를 받아와서 색을 넣..

// base import React, { useState, useEffect, ReactNode } from 'react'; import { useHistory } from 'react-router'; // packages import { Menu } from 'antd'; import { HomeOutlined, FileDoneOutlined, BarChartOutlined, TeamOutlined, } from '@ant-design/icons'; // modules import { Link } from 'react-router-dom'; export const MainNav = () => { const roots = ['sub1', 'sub2', 'sub3', 'sub4']; const userM..