![]()
1. 구현방법React에는 여러 사진 슬라이드 기능을 제공하는 라이브러리들이 있지만, 사진 슬라이드의 경우 해당 라이브러리의 사용법을 알아야 하는 번거로움 보다 직접 구현하는 것이 훨씬 쉬운것 같아 직접 구현하는 내용을 포스팅 해보려고 한다. 사진 슬라이드 기능 구현은 여러 장의 사진이 x축 방향으로 한 장씩 넘어가는 기능을 말한다.데이터는 아래와 같이 이디야 신메뉴 4장으로 구성되어 있다. export const screenImgs = { maxIndex: 4, imgs: [ 'https://buza.biz/data/editor/2212/thumb-fba1c023d4b13d9e80fe0c4b2335d8ee_1670463786_1854_600x750.jpg', 'https://www.shi..
![]()
1. 문제상황/src/styles에 공통 theme을 적용하기 위하여 theme.ts를 작성하였다.export const theme = { colors: { standard: '#1E40AF', background: '#1e3a8a', // 생략} as const;export type Theme = typeof theme;export default theme;하지만 위 사진처럼 theme에서 DefaultTheme 형식에 'colors' 속성이 없다는 오류가 발생하였다.기존에 진행하는 프로젝트에서는 따로 styled.d.ts를 지정하지 않아도 정상적으로 읽어와졌었지만,신규프로젝트를 생성하면서 읽어오지 못하는 오류가 발생하였다. DefaultTheme 형식에 'colors' 속성이 없다는..
![]()
@@@결과 미리보기@@@ 1. 구현 1. 기본 로직 problemsData는 데이터 배열이다! - 현재 페이지 state, 한 페이지에 몇 개의 아이템을 보여줄지, 전체 페이지 수 const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 10; const totalPages = Math.ceil(problemsData.length / itemsPerPage); currentPage를 통해 현재 페이지를 useState로 선언해 주고, 한 페이지에 몇 개의 항목이 들어갈지 itemsPerPage를 통해 지정한다. 이후 전체 페이지 수를 구하기 위해서 (데이터/한 페이지에 몇 개의 항목이 들어갈지)를 올림 하여 계산한 totalP..
![]()
@@@결과 미리보기@@@ 1. 구현내가 이전에 만든 웹 화면은, 바로 위 gif와 같이 창을 전체화면으로 사용하기보다 한쪽으로 화면을 축소하여 사용하는 일이 많았다. 이에 화면이 반절로 되게 되면, 웹사이트에 불편함을 느껴 반응형을 도입하여 이문제를 해결하고자 하였다. 1. display: grid 기본적으로 display:flex로 구현되어 있는 컨테이너를 반응형을 위해 grid로 변경하였다.왜 grid냐? 현재 나는 왼쪽 사진과 같이 1열로 나란히 있는 요소들을 화면의 width가 줄어들면, 오른쪽과 같이 세로로 배치되기를 원하기 때문이다. display: flex;의 경우 일반 div의 성격인 세로로 쌓이는 것이 아닌, div가 가로로 쌓이게 된다. 이러한 경우 반응형으로 가로 세로 요소의 ..
![]()
프로젝트 진행 도중 왼쪽 화면을 구현해야 했었다. React.js로 styled-components방식을 사용하여 구현하였으며, 해당 페이지를 구현하면서 checkbox css가 적용이 안되었던 문제와, 클릭했을 때 가운데에 원이 생기는 css를 간단하게 구현하는 것에 대해 말해보고자 한다. input checkbox css 1. CSS속성이 구현되지 않는 이유? 처음 checkbox의 css를 완성했을 때의 코드는 아래 더보기를 누르면 확인할 수 있다.더보기 const CheckBoxStyled = styled.input` width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d0d5dd; position: ..
