Slowly, Steadily, Surely 👩‍💻

사이드 프로젝트 중, 아이콘을 누르면 음악이 재생되는 기능이 필요했다. Off 아이콘으로 보이면 음악이 꺼져있다는 것이고, Up 아이콘으로 보이면 음악이 실행중이라는 뜻이다. 이 둘 아이콘은 mui에서 가져왔다. const [isPlay, setIsPlay] = useState(false); const audio = new Audio(music); const onClickVolume = () => { // 재생 중 if (isPlay) { audio.pause(); setIsPlay(false); } else { audio.play(); setIsPlay(true); } }; 1. 첫 번째 오류 Cannot find module 'mp3 경로' or its corresponding type declara..

react 프로젝트에 리디바탕을 적용해보자. https://ridicorp.com/ridibatang/ 리디바탕 - 리디주식회사 RIDI Corporation 라이선스 안내 리디바탕 글꼴은 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공되며 자유롭게 수정하고 재배포하실 수 있습니다. 단, 글꼴 자체를 유료로 판매하는 것은 금지하며, ridicorp.com 여기서 폰트를 다운한다. fonts 폴더를 만들어서 otf 파일을 넣는다. body { margin: 0; font-family: "RIDIBatang", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "D..

- 상황 https://webstoryboy.co.kr/1934 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리 webstoryboy.co.kr 이 블로그를 참고하여 사이트를 만들었다. 이 사이트에서는 페이지가 하나였는데, 나는 메뉴별로 페이지를 만들고 싶어서 라우터를 사용하여 나누었다. 그런데, 계속 메뉴를 옮겨갈 때 execute 'removeChild' on 'Node': The node to be removed is not a child ..

// 선언문 function main(){} // 표현식 const main = () =>{} 이 둘의 차이는 무엇일까? 1. export default를 선언과 동시에 할 수 있는가 export default function main(){} 선언문은 가능하지만, 표현식은 불가능하다. 2. 호이스팅 호이스팅(Hoisting)은 JavaScript에서 변수 선언과 함수 선언을 해당 스코프의 최상단으로 끌어올리는 동작을 말합니다. 변수 선언은 호이스팅되지만 변수의 할당은 호이스팅되지 않습니다. 따라서 변수 선언은 최상단으로 끌어올려지지만, 실제로 변수에 값을 할당하는 부분은 원래 코드의 위치 그대로 남게 됩니다. 함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자..

- 목표 반응형웹에서 특정 버튼을 누르면 바로 밑에 edit box를 띄워지는 것 회사 프로그램 화면을 보여줄 수는 없으니 피그마로 대충 그려보았다. ※ Button과 Grid 모두 mui 사용 1. Button에 ref 변수를 설정하기 const buttonRef = useRef(null); const [showTextBox, setshowTextBox] = useState(false); // true일때 edit box 보여짐 Button {showTextBox ? ( ) : null} multipleButtonRef?.current?.getBoundingClientRect?.()?.bottom 이 부분이 핵심이라고 할 수 있다. multipleButtonRef?.current?.getBounding..

if (params.data.stgyField === 'attribute') { const temp = selectorDetailList2; for (let i = 0; i < temp.length; i += 1) { if (temp[i].stgyField === 'value' || temp[i].stgyField === 'minValue' || temp[i].stgyField === 'maxValue') { temp[i].stgyValue = ''; } } setSelectorDetailList2([]); setSelectorDetailList2(temp); } setSelectorDetailList2([]); 이 부분을 입력하지 않으면 그리드가 바로 바뀌지 않더라고. 왜 그럴까? `setSelecto..

{statData}

https://developer-talk.tistory.com/246 [React]객체 배열에서 값 변경 이번 포스팅에서는 React에서 객체의 배열을 가지는 state 값을 변경하는 방법을 소개합니다. 다음과 같이 객체의 배열(objArray)을 가지는 state가 있다고 가정합니다. state = { objArray: [ { code: "", name:.. developer-talk.tistory.com

어제 https://yejinrla.tistory.com/90 [ React ] 그리드 특정 셀 드롭박스로 변환 + 보여지는 건 다르게 하기 (ag-grid cellEditorSelector, valueForm 그리드 특정 셀을 이렇게 드롭박스로 변환시켜 선택할 수 있게 만드는 방법! https://www.ag-grid.com/react-data-grid/cell-editors/ React Data Grid: Cell Editors A Cell Editor Component is the UI that ap.. yejinrla.tistory.com 이 글을 썼었는데 저 글에 남겼듯이 문제점이 있었다. 어떻게든 해내고 싶어서 계속 찾다가 결국 해냄. https://www.ag-grid.com/javascri..

그리드 특정 셀을 이렇게 드롭박스로 변환시켜 선택할 수 있게 만드는 방법! https://www.ag-grid.com/react-data-grid/cell-editors/ React Data Grid: Cell Editors A Cell Editor Component is the UI that appears, normally inside the Cell, that takes care of the Edit operation. Download v28 of the best React Data Grid in the world now. www.ag-grid.com ag grid에서 설명해주는 거 따라하면 잘 된다 설정 (setting) 값 (value) 유형 Finte const cellEditorSelector..