웹 개발자로의 한걸음

1. Firebase Realtime DB에서 값 불러와 Redux 전역변수로 저장하기 데이터는 수동으로 미리 저장해 두었다. alias를 이용해 데이터를 불러올 것이기 때문에 다음과 같이 설정했다. const { id } = useParams(); const dispatch = useDispatch(); const db = useRealtimeDB({ alias: id }); useEffect(() => { dispatch(updateWeddingData(db)); }, [id]); 미리 설정해 둔 Redux Slice에 내 데이터가 dispatch된다. 2. Redux 전역변수를 불러오기 const dbData = useSelector((state) => state.wedding); 이와 같은 방식으..

다른 프로젝트를 시작했더니, 요새 주로 진행하던 프로젝트에서는 되던 ESLint 자동수정이 안 되기 시작했다. 해결하려고 이래저래 설정을 바꾸다가 그만 원래 프로젝트에서도 ESLint 자동수정이 안 되는 문제가 발생하고 말았다. 해결은 완료했고, 또 이런 일이 생길까 봐 정보를 백업해 둔다. 설정에서 확장 > ESLint를 들어가면 이런 창을 볼 수 있다. Code Actions On Save를 설정해야 하는데, 이건 settings.json을 수정하는 수밖에 없다. https://tesseractjh.tistory.com/306 [VSCode/ESLint] ESLint 자동 수정이 적용되지 않을 때 vscode에서 eslintrc 설정 후 저장을 하면 eslint fix가 가능한 부분은 자동으로 수정이..

더보기 - 목차 - 1. 전역변수 상태관리의 이해 2. Redux 설치 3. Redux 개요 4. Redux의 핵심 컨셉 5. Redux 용어 설명 6. Redux의 작동 단계 진행 중인 개인 프로젝트에 상태관리 라이브러리를 도입하기로 했다. 다른 라이브러리도 있지만, 최근 면접본 기업이 Redux를 사용한다고 했기 때문이다. React 교재를 따라 공부할 때 Context API를 사용해본 적은 있었지만, 그때는 상태관리 라이브러리에 대해 제대로 이해하지 못했다. 이번 기회에 전역변수 상태관리 라이브러리에 대해 이해해보고자 한다. 전역변수 상태관리의 이해 전역변수 상태관리란, 여러 컴포넌트에서 참조하는 데이터를 컴포넌트 바깥에 저장해 두는 것이다. 전역변수를 사용하지 않는다면 상위 컴포넌트에서 데이터를..

grid 사용 시, span 옵션을 사용해 하나의 개체가 여러 개의 grid를 점유하게 만들 수 있다. 이것은 총 5개의 사진 중, 1번째 사진에는 grid-column: span 2를 주고 4번째 사진에 grid-column: span 2; grid-row: span 2; 옵션을 준 것이다. 그러나 위와 같이 사진 크기가 변하지 않는 문제가 발생했다. 다른 개체에 테스트해봤을 때 row span이 적용되지 않는 것은 아니었다. 실은 이 문제는 오류가 아니다. GPT에게 물어보면 다음과 같은 답변을 준다. Grid 속성 충돌: 요소의 다른 스타일이나 부모 요소의 스타일이 grid 속성과 충돌할 수 있습니다. 이 경우, 다른 스타일을 주석 처리하거나 임시로 제거하여 충돌을 확인해보세요. Grid 아이템 설..

vscode에서 새로운 파일 생성 후 코드 템플릿을 불러오고 싶었다. 방법은 간단하다. File > Preferences에서 Configure User Snippets을 누르면 된다. 나는 다른 workspace에서도 쓰고 싶어서 New Global Snippets file을 선택했다. 이름을 지정하고 나면 코드 스니펫 설정파일이 열린다. 다음과 같이 기본 설명 문서가 포함되어 있다. { // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where t..

최근 로컬스토리지 저장에 대해 배웠다. 기존에 배웠던 DB 저장 방식, 파일 저장 방식과 어떤 차이가 있는지 궁금해서 ChatGPT에게 정리를 요청해 보았다. 데이터를 저장하는 방법에는 여러 가지가 있습니다. 여기서는 데이터베이스(DB) 저장, 로컬 스토리지(Local Storage) 저장, 그리고 파일 시스템을 이용한 파일 저장에 대해 설명하겠습니다. 1. 데이터베이스(DB) 저장 데이터베이스는 구조화된 데이터를 효율적으로 관리할 수 있는 시스템입니다. SQL(Structured Query Language) 같은 쿼리 언어를 사용하여 데이터를 추가, 수정, 삭제, 조회할 수 있습니다. 장점 대용량 처리: 대용량의 데이터를 안정적으로 처리하고 관리할 수 있습니다. 동시성 제어: 여러 사용자가 동시에 접근..