여씨의 개발이야기

사이드프로젝트에서 mui의 dialog component를 사용하고 있는데 background를 image로 적용해야하는 상황이 왔다. 일반적인 방법으로 적용이 안 되어서 꽤나 애먹었던 부분이다. 적용 방법은 정말 간단하다. Dialog의 속성값 중 PaperProps 속에 style을 아래와 같이 적용해주면 된다. 📇 소스보기 {selectedValue.grt_title} {selectedValue.grt_contents} handleItemClick()}>닫기

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 위 버그는 모듈을 모두 import하기 전에 변수나 상수를 선언할 경우 발생하는 버그였다. 아래는 버그가 발생한 코드이다. import firebase from '../firebase'; import { getFirestore, collection, addDoc, serverTimestamp } from "firebase/firestore"; const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 import Auth from "./auth"; function MainPage() { 🕸 어떻게 이 버그를 잡을까? import문 다음에 변수/상수를 선언해주자. import firebase from..

일반적인 repository > github.io 홈페이지 만들기로는 react app은 불가능해서 이런 저런 삽질을 한 결과 아래와 같은 홈페이지를 만들 수 있게 되었다. 개발자들은 꼭 만들어야한다는 github.io 홈페이지 만드는 방법을 알아보자. https://yeojisun.github.io/react-slick-card-multiple-row-carousel/ React App yeojisun.github.io 1. create-react-app을 통해 만든 react app 디렉토리 내의(git repository 위에 올라가있다는 전제하에) package.json에 hompage 속성값을 추가한다. ... "homepage": "https://yeojisun.github.io/react-s..

요즘 개발언어들이 버전 업그레이드를 하면서 단축해서 코딩을 할 수 있도록 하는 방법들이 많이 나오고 있다. 예를 들어서 (지금은 좀 오래 되었지만,) C#은 삼항연산을 이용하여 ?으로 조건문을 줄이기도 한다. 하지만 이렇게 코드를 줄이는 것이 마냥 좋은 방법은 아니라고 한다. 심지어 아래와 같은 한 줄짜리 코드도 지양하며 전부 컨벤션으로 작성하도록 한다. 특히 더 큰 기업에서는 지양하기를 권장한다. // No여요! if (true) return; // Yes여요! if (true){ return; } 이유는 "가독성", 그리고 코드 수정 시에 어떤 부분이 명확하게 바뀌었는 지 보기 위함이다.(마치 JS에서 trailing comma를 하기 위함과 비슷하다고 보면 된다.) 조직이 커질 수록 코드는 더 단순..

git에서 기존의 repository를 확장하는 법을 따로 찾지를 못 해서 새로운 repository를 생성해 기존 repository를 복사해서 별도의 repository로서 확장작업을 하려고 한다. 일단 아래와 같이 폴더가 존재한다. react-slick_multiple-row-carousel은 기존 repository, react-slick-card-multiple-row-carousel은 새로운 repository이다. 1. mirror clone git clone --mirror {기존 repository 주소} -- 특정 브랜치만 가져올 경우에는 git clone -b {브랜치명} --single-branch --mirror {repository 주소} clone이 정상적으로 됐다면 새로 만들..

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 구글링을 해보니 해당 버그가 발생하는 이유는 render가 되는 과정에서 state를 변화하는 function이 있다면 re-render가 반복적으로 일어나 Too many re-render 버그가 뜨는 것으로 확인됐다. handleClickOpen 함수안에서 state 상태값을 변경하는 함수가 있다. 즉, props를 통해 전달받은 변수를 setState에 넣을때 무한루프가 걸린다고 보면 된다. ... const handleClickOpen = (value) => { setOpen(true); setSelectedValue(value); }; ... // onClick 이벤트내의 handleClickOpen함수가 바로 리랜더링을 유도하는 함수였다. {c..

react 컴포넌트를 선언할 때 두 가지 방법이 있다. 바로 class방법과 function방법이다. 19년부터 function형 컴포넌트에 hook을 지원하면서 지금은 공식 문서에서 공개적으로 function형 컴포넌트와 hook을 같이 사용할 것을 권장하고 있다. 그렇지만, class를 자주 사용하지 않더라도 아직까지 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 1. function형 컴포넌트 import React from 'react'; function App() { const contents = 'hi'; return {contents}; } export default App; function형 컴포넌트는 class형 컴포넌트에 비..

1. CommonFunction.js에 공통 함수들을 선언해준다. (export 사용) export function timestamp(date) { // 날짜 포맷 변경(YYYY-MM-DD HH:mm:ss) date.setHours(date.getHours() + 9); return date.toISOString().replace('T', ' ').substring(0, 19); } ... 2. CommonFunction.js를 사용할 컴포넌트에 CommonFunction을 import한다. import * as common from '../../CommonFunction'; 3. CommonFunction의 timestamp 함수를 본문에 사용한다. ... {c.grt_date !== null ? co..

📢 이 버그 좀 보세요! 배열로 된 데이터를 map을 이용해서 뿌려줄 때 위와 같은 오류가 났다. 🐞 버그가 나타난 이유? map으로 데이터를 뿌려주는데 unique한 키값이 없어서 나는 오류이다. 맵 리스트 데이터는 고유한 키값이 꼭 있어야 한다. 🕸 어떻게 이 버그를 잡을까? 당연 키값을 만들어주면 된다. firestore의 document의 id를 배열에 추가해주었다. const fetchCard = async () => { const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 const q = query(collection(database, "users/SUE3vmEn1CixjZiBBxZZ/greetings")) getDocs(q).t..

🤔 제작동기 토이프로젝트 제작 중, 3*3 바둑판 형태를 띈 슬라이드식 리스트 UI를 만들어야하는 상황이 생겼다. 📚 사용할 라이브러리들 1. Slick 검색해본 결과 multiple row가 가능한 carousel list library는 대표적으로 slick이라는 라이브러리가 있는 것으로 파악이 되었다. 원래는 JQuery로 제공해왔는데, 최근에(아마도) react도 제공하는 것 같다. https://react-slick.neostack.com/docs/get-started Neostack The last react carousel you will ever need react-slick.neostack.com slick for react는 위의 링크를 타고 들어가서 설치하는 방법을 볼 수 있다. 필자..