FE26 [React] 리액트 carousel 라이브러리 없이 직접 구현하기 캐러셀(carousel)이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소이다. 버튼을 눌러 옆으로 사진이 넘어가는 모션이 마치 회전목마와 비슷하다고해서 붙여진 이름이다. 캐러셀은 용도에 따라 자동재생되게 하거나, 사용자가 수동으로 넘기도록 구현할 수도 있다. 대중적으로 이용되는 라이브러리 react-slick이라는 라이브러리가 가장 대중적으로 사용되는 캐러셀 라이브러리이다. 장점이라면 역시 문서보고 따라하면 잘 작동하는 캐러셀을 쉽게 구현할 수 있다는 점? 그리고 커스텀도 상당히 자유롭다고한다. 사실 직접 해당 라이브러리를 사용해보진 않아서 모르겠지만 많은 사람이 이용하는만큼 최적화도 잘 되어있으리라 짐작된다. 위 데모를 보면 1. 양옆 버튼을 눌러 앞뒤로 슬라이드가 부드럽게 .. 2023. 5. 6. [React] 모바일 웹 status bar 색상 변경하기 항상 크롬 inspect 모바일 뷰만 보고 개발을 해서 몰랐었는데, 배포 후 디자이너 분께서 상태바 색상을 테마에 맞게 흰색으로 변경해주실 것을 요청해주셨다. 찾아보니 크롬과 사파리 설정을 따로 해주어야한다는 글이 많았는데, 직접해보니 theme-color 메타 태그만으로도 safari 상태바 색상이 적용이 되었다. 그래서 MDN에서 찾아보니 safari도 15버전 이후로는 적용이 된다고 쓰여있었다. 웬만하면 15v 이상이지 않을까 싶으면서도.. 2021년 적용이면 비교적 최근이라는 생각이 들어서 그냥 아래 코드까지 모두 작성해주었다! **CRA로 만든 리액트 프로젝트의 경우, public폴더에 index.html에 theme-color meta tag는 기본적으로 포함되어있는데, 색상만 원하는 색상으로.. 2023. 5. 2. [TypeScript] 타입스크립트 2주 챌린지 (노마드코더) 이 글은 노마드코더 챌린지 진도에 맞게 노마드코더 Typescript로 블록체인 만들기 강의를 듣고 그 내용을 정리한 것입니다. 챌리지의 과제는 노마드코더 챌린지 규칙상 공유드릴 수 없음을 알려드립니다. 1. Introduction누가 타입스크립를 사용해야할까?왜 자바스크립트는 문제인가?2. Overview of TypescriptImplicit Types vs Explicit TypesTypes of Typescript part.ITypes of Typescript part.IITypes of Typescript part.III3. FunctionsCall signatureOverloadingPolymorphism(다형성) : Generic(제네릭)4. Classes and InterfacesClass.. 2023. 4. 28. [React] axios interceptor header 토큰 갱신 이전 글 [React] 리액트 refresh token 구현 (with. axios interceptor) 이전 코드 import axios from 'axios'; //토큰이 불필요한 경우 export const publicApi = axios.create({ baseURL: `${process.env.REACT_APP_SERVER_IP}`, }); //토큰을 함께 보내는 instance export const privateApi = axios.create({ baseURL: `${process.env.REACT_APP_SERVER_IP}`, headers: { Authorization: `Bearer ${localStorage.getItem('accessToken')}`, }, }); //리프레시토큰.. 2023. 4. 28. [TypeScript] error 2322: React Prop 전달 시 IntrinsicAttributes 타입 에러 에러 메세지 BoardMain 라는 부모 컴포넌트에서 PostList라는 자식 컴포넌트에 filterProp을 넘기고 싶은 상황입니다. PostList에서는 다음처럼 filterProp인수를 받아 사용하고 있습니다. (설명에 필요하지 않은 코드는 생략하였습니다.) // PostList.tsx export default function PostList(filterProp: IFilter) { const { data, isLoading } = useInfiniteQuery( ['articles', filterProp.filterProp], ({ pageParam = 1 }) => getArticles(filterProp.filterProp, { pageParam })); return } 에러 원인 문제는 위.. 2023. 4. 27. [React] github action 리액트 .env file 추가하기 이전 글 [React] react프로젝트 github action으로 CI/CD 구축하기(aws S3, cloudfront) 문제상황 : .env 파일이 github action으로 S3에 올라가지 않는다 이전 글에서 github action을 통한 클라이언트 배포자동화 과정에 대한 글을 다뤘습니다. 배포 이후 프로덕트에 들어가보니, 요청 URL에 undefined가 들어오는 것을 확인했습니다. 제가 만든 프로젝트에 server url은 .env파일에 넣어 환경변수로 사용하고 있었는데, 이 .env 파일은 보안상의 이유로 대개 gitignore로 관리됩니다. github에 푸시되지 않았으니 .env 파일 없이 빌드되어 이 같은 문제가 발생한 것입니다. github action으로 .env 파일 생성하기 .. 2023. 4. 25. 이전 1 2 3 4 5 다음
