__나의 기록

netlify 배포링크를 새로고침했을 때 자꾸 Page Not Found가 나오는 것을 볼 수 있었다. 원인 1) 기본적으로 Netlify에 등록한 페이지 접속하면 index.html과 연결되어 잘 작동된다. 2) 그러나 만약 url 파라미터를 붙여서, url/home 이렇게 접속하게 되면, url에 맞는 자원이 존재하지 않기 때문에 서버는 해당 요청에 해당하는 파일을 찾지 못하고 404를 보내게 된다. 3) react는 SPA 이기 때문이다. 개발 모드일 때는 CRA에 내장된 서버가 요청에 응답하도록 처리가 되어 있어서 에러가 나지 않지만, build할 때는 별도로 처리를 해줘야한다. 해결방법 1. public 폴더 밑에 _redirects 파일을 생성 _redirects /* /index.html 2..

netlify 배포 직후 모습은 이렇게 되어야 하는데,, 배포하니까 styled-components 가 적용이 하나도 안된 모습이었다. 그래서 열심히 구글링 하던 중 발견한 코드의 문제점은 !! import { createGlobalStyle } from 'styled-components'; const Style = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap'); @font-face { font-family: 'PartialSansKR-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectn..

+ 버튼 클릭 시 모달창 생성 1. useState 생성 const [isOpenModal, setOpenModal] = useState(false); useState를 사용해 초기값을 false로 설정 2. + 버튼 클릭 시 함수 호출 + 버튼 클릭 시 onClick함수를 통해 handleMakeFolder 함수를 호출 3. handleMakeFolder 함수 const handleMakeFolder = () => { setOpenModal(true); }; 모달창을 보여주기 위해 setOpenModal을 통해 isOpenModal을 true로 설정 4. cloeModal 함수 const closeModal = () => { setOpenModal(false); }; 모달창을 닫는 함수 추가 5번의 M..

Redux란 ? 자바스크립트 상태관리 라이브러리이다. Redux 사용하기 전에 알아야 할 세가지 1. store - 스토어라는 공간이 따로 있어서 스토어 안에서 필요한 상태를 담는다. - 상태 정보가 필요할 때 스토어에 접근한다. 2. action - 스토어에 운반할 데이터를 의미 - 자바스크립트 객체 형식으로 되어있다. 3. reducer - action -> store 가 아닌 action -> reducer로 전달한다. - reducer가 action을 보고 store의 상태를 업데이트하는 것이다. - action을 reducer로 전달하기 위해 dispatch() 메소드를 사용해야한다. 위 개념을 바탕으로 내가 짠 코드 homeslice.tsx import { createSlice } from '..

문제 export const infoList = [ { img:"../img/telephone-icon.png", info:"이름", detail:"메롱이닷" }, { img:"../img/birth-icon.png", info:"생년월일", detail:"1993.00.00" } ] 이런식으로 데이터를 담아두고 {infoList.map((info, index) => ())} map을 사용하여 하나씩 보여주게끔 하였다. 하지만 !! 분명 local에서는 잘 돌아갔는데 netflify 배포 url에 들어가보니 위 그림처럼 이미지 엑박이 떴다 해결방법 엑박 뜰 때에는 import phoneImg from "../img/telephone-icon.png" export const infoList = [ { im..

srollbar css 커스텀 방법 :-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 scrollbar는 padding, margin 적용 x scrollbar 사이 여백 주는 방법 ::-webkit-scrollbar-thumb { background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-thumbd의 background-clip을 padding-box로 설정하고, border을 투명으로 해서 여백이 있는 것처럼 사용 가능하다

FullCalendar 이벤트 및 일정을 표시하고 관리하는 라이브러리 FullCalendar를 사용하면 월별, 주별, 일별로 일정을 시각적으로 표현 가능 필요 기능들과 관련 문서들이 친절하게 잘 나와있어서 한 번쯤 사용해도 좋을 것 같다..!! 정말 편해,, 캘린더 뷰 사용법 1. ref={this.calendarRef} 캘린더에 일정을 추가하기 위해 사용한 코드다. 그냥 간단하게 events={일정} 넣어도 된다. 이게 더 쉬울지도ㅎㅎ const Events = [{ title: '전과신청', start: '2024-01-15',end:'2024-01-19', color:'#b1aee5'}]; 위와 같은 형식으로 일정을 넣을 수 있고, background-color도 추가 가능하다 2. plugins=..