그래도 해야지. 어떡해

💼 작업기간 (약 3주) • 디자인 1주 • 코딩 2주 📌 주요 기능 1. 비주얼 1-1. aos, vivus 라이브러리 사용 1-2. svg 스크롤 이벤트 2. 프로젝트 2-1. 아이템 필터 2-2. 필터 버튼 클릭 시, 투명도 조절 2-3. ( 앨범형 / 리스트형 ) 보기 방식 변경 2-4. 모바일형 필터 버튼 3. 스와이퍼 적용 4. 반응형 레이아웃 5. 페이지 색상 변경 이벤트 1. 비주얼 1-1. 타이틀 : AOS, vivus 라이브러리를 이용해 모션 추가 • vivus.js https://maxwellito.github.io/vivus-instant/ 1-2. svg 스크롤 이벤트 • 스크롤의 속도에 따라 배경에 있는 svg의 위치(transformY)를 바꾸기 - js const $deco1..

피그마 시안) 1. 왼쪽 즉, 슬라이드 시작점에 여백이 있어야한다. 2. 슬라이드를 넘기면 좌우 여백없이 공간을 모두 차지해야한다. 진짜 무슨 생각으로 슬라이드를 이런 시안으로 만들었을까. 이왕 만들었으니 해결은 해야지.. 어떡해 💢 문제점 처음에는 의도대로 진행되는줄 알았다. 슬라이드를 감싸는 태그에 margin-left 값을 줬다. 하지만 마지막 슬라이드는 오른쪽이 조금 잘려 전체 이미지를 볼 수 없는 문제가 생겼다 문제 영상) 마지막 슬라이드는 마우스로 땡겨야 간신히 볼 수 있다. [ swiper 옵션 확인하기 ] swiper가 이런 것도 해결 못 할리가 없다는 좌절감에 공식문서를 찾아보았다. 생각보다 간단하게 해결할 수 있었다. 옵션 기능 slidesOffsetAfter : number 슬라이드 ..

⚠ 저작권 주의 공식사이트 라이선스를 보면서 웹폰트 변환이 가능한지 꼭 확인하자. TTF 파일을 구매했더라도 웹폰트 사용까지 허용한 것은 아니기 때문에 웹폰트로 무작정 변환해서 사용하면 절대 안된다. TTF 파일은 용량이 크기 때문에 변환해서 사용하는 것을 권장한다. 웹폰트(WOFF, WOFF2, OTF)로 변환하기 사이트 접속 : https://convertio.co/kr/ttf-woff/ 혹시 사이트가 사라져도 구글에 [ ttf to woff ] 라고 검색하면 비슷한 사이트들이 우수수 나온다. TTF WOFF 변환 (온라인 무료) — Convertio ttf 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요. convert..

2월에 날씨 앱을 만들다 중단된 프로젝트를 진행하면서 깃허브에 당당히 노출된 내 소듕한 Api Key를 숨기려고 한다. 1. dotenv 패키지 설치 // with yarn yarn add dotenv // with npm npm install dotenv 2. .env 파일 생성 💡 프로젝트의 루트 디렉토리에 생성해야한다! 3. 생성한 파일에 API Key 추가 접두사 REACT_APP를 꼭 써줘야 환경 변수가 제대로 인식되니 주의 REACT_APP_API_KEY=your_API_KEY 4. .env 파일을 .gitignore에 추가 .gitignore 파일은 Git 저장소에서 버전관리를 원하지 않는 파일을 명시하는 파일이다. 이 파일에 기록된 파일은 Git으로 관리되지 않으며, 커밋에 포함되지 않는다..

이전 글 [React] Todo List 만들기 (#1 개선사항 정리) [React] Todo List 만들기 (#2 필터링 개선하기) 🔧 목표 • 로컬 스토리지(Local Storage)를 사용하여 데이터를 저장한다. 리스트에 추가한 데이터는 새로고침/재접속을 할 때마다 초기화 된다. 이는 별도의 데이터베이스를 사용하지 않고 브라우저 내에서만 데이터가 처리되기 때문이다. 이번 포스팅에서는 이러한 문제를 해결하기 위해 로컬 스토리지를 활용하여 데이터를 저장하는 방법을 다룰 것이다. 💡 Tips - Local storage : 브라우저를 종료하고 재시작해도 데이터가 유지된다. (ex. 자동 로그인) - Session storage : 브라우저 세션이 종료되면 데이터는 자동으로 삭제된다. Local Stor..

[React] Todo List 만들기 (#1 개선사항 정리) 문제점 ‘active’ 필터링 후, 체크된 리스트가 다시 체크해제되는 오류 수정 Component 패널을 열어 확인해 보니, 리스트 첫 줄(좌측 사진)을 보면 check가 풀려있다. 그런데(우측 사진) class는 -completed가 들어갔고 checked: true로 되어있었다. #1. 기존 코드 1.1 Header.jsx handleFilter('all')}>All handleFilter('active')}>Active handleFilter('completed')}>Completed 1.2 TodoList.jsx const [filter, setFilter] = useState('all'); // 1. 체크 const toggleChe..

[ yarn 설치하기 ] 1. 터미널을 열어 아래 명령문을 입력한다. yarn create react-app "폴더명" 1-1. 프로젝트가 생성되면서 터미널창에 yarn 명령법이 나온다. yarn start 실행 yarn build 배포하기 위한 프로젝트 빌드 yarn test 테스트 스크립트 실행 yarn eject 설정 변경 (원본 변경) + 기본적으로 git도 함께 설치된다. [ Error 해결하기 ] 최신 Yarn 설정하기 react에서 yarn start를 실행했을 때, 에러가 발생하는 경우가 있다. 원인은 create-react-app과 yarn에서 충돌이 일어나서 그렇다. eslint 관련하여 수동적으로 수정이 필요하다. 2. 터미널을 열어 아래 명령문을 입력한다. yarn add eslin..

[React] Todo List 만들기 (#2 필터링 개선하기) 이틀 동안 React로 투두리스트를 만들었다. 리스트 추가하는 것부터 다크모드까지 구현하는 데에 시간이 많이 걸렸다. 강의를 듣고나서 내가 만들었던 투두리스트를 수정해보려고 한다. 1. 목표 무작정 리액트로 만든 투두리스트 개선사항을 정리하고 하나씩 해결해본다. 1.1 프로젝트에 사용할 기술 React useState, useEffect, useContext 등 리액트 훅을 사용한다. PostCSS creact-react-app으로 기본 탑재되어 있는 PostCSS를 사용하며 활용법을 익힌다. 1.2 완료 목록 리스트 추가하기 리스트 삭제하기 다크모드 구현 2. 개선할 사항 2.1 컴포넌트 정리 하나로 작성된 파일에서 컴포넌트를 분리한다. ..