일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- next.js
- Redux-Toolkit
- 프로그래머스코테
- 프로그래머스알고리즘
- next.js 에러
- 프로그래머스
- 프로그래밍
- 알고리즘공부
- 프로그래머스 코딩테스트
- 프로그래머스 Lv.0
- 코딩
- 코테공부
- CSS
- 코테스터디
- mysql
- 1일1코테
- 자바스크립트
- 프로그래머스 알고리즘
- 프로그래머스 레벨0
- 코테준비
- 코딩테스트
- 프로그래머스 코테
- 알고리즘문제
- 알고리즘스터디
- js
- 정처기기출
- html
- 프로그래머스코딩테스트
- 정보처리기사
- 개발자
- Today
- Total
목록전체 글 (186)
계발하는 개발자
이번에 next.js로 뮤직플레이어 기능 구현했던 것을 정리로 남겨본다. 먼저 전체적인 코드는 아래와 같다! HTML, CSS .progress { width: 182px; height: 3.2px; border-radius: 3px; background: rgba(255,255,255,0.4); } .pin { position: absolute; top: -5px; width: 16px; left: 96.5%; height: 16px; border-radius: 50%; background: #fff; pointer-events: all; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); } .bar { position: relative; background: #fff; ..
코드 스크롤바 css 커스텀 설정을 위해선 각 아래에 대한 CSS 코드를 추가해주면 된다. ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 컨텐츠가 클라이언트 높이를 초과했을 때 스크롤바가 생기는 body 요소에 직접 줄 수도 있고, 내가 overflow-y 속성을 준 요소를 지정해서 커스텀 스타일을 입힐 수 있다. body::-webkit-scrollbar { width: 5px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ backgro..
먼저 파비콘 생성하는 방법은 아래 사이트를 이용하면 편하다! https://wizlogo.com/ko/favicon-generator 무료 Favicon 생성기, 이미지 변환-Wizlogo 무료로 몇 초 안에 귀하의 웹 사이트에 대한 즐겨 찾기 아이콘을 생성하십시오. 이미지 파일 (GIF, JPG 및 PNG)을 업로드하고 즐겨 찾기 아이콘 (ICO) 또는 앱 아이콘으로 변환하십시오. wizlogo.com 위 사이트를 통해 파비콘을 생성하고나서 next.js 프로젝트에서 파비콘을 설정하려고 public 폴더 안에 파비콘 이미지를 추가했더니 자꾸만 설정이 안됐다. 암만 새로고침해봐도 안됐음.. 그러던 중에 ctrl+shift+r을 눌러 강력 새로고침을 하니 그제야 됐다.
사전 준비 - redux 세팅에 필요한 패키지 설치 npm i @reduxjs/toolkit react-redux Redux 세팅하기 - redux.js 파일 생성 redux.js 파일 생성후 아래와 같은 코드를 붙여넣는다. (2번의 store.js 파일에 합쳐도 상관없음) - store.js 파일 생성 store.js 파일 생성후 아래와 같은 코드를 붙여넣는다. store 파일을 생성했다면, layout.js 파일로 가서 컴포넌트로 children을 감싸주면 된다. - Provider 로 root 컴포넌트 랩핑 자세한 설명은 아래 이전 포스팅 참고 ⬇️ [Next.js 13] Error: could not find react-redux context value; please ensure the comp..