웹 개발자로의 한걸음

Next.js 환경에서 Tailwind를 사용해 보려고 한다. 다음 공식 문서를 참고해 설치할 수 있다. Install Tailwind CSS with Next.js - Tailwind CSS Setting up Tailwind CSS in a Next.js v10+ project. tailwindcss.com 프로젝트를 생성한 다음, 아래의 명령어를 사용하여 Tailwind CSS를 설치한다. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p tailwind.config.js와 postcss.config.js 파일이 생성되어야 한다. 만약 생성되어있지 않다면, 파일을 생성하고다음 설정을 추가해야 한다. tailwind.con..

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가 가능한 부분은 자동으로 수정이..

CORS (Cross-Origin Resource Sharing) 1. 교차 출처 리소스 공유 정책과 동일 출처 정책 CORS (Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹페이지가 다른 도메인의 리소스를 요청할 수 있게 하는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처 (도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행하게 된다. CORS 요청은, 트랜잭션 메시지의 추가 HTTP 헤더를 통해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 것이다.[1] 기본적으로 웹 브라우저는 보안 상의 이유로 클라이언트가 클라이언트의 URL과 동일한 오리진의 리소스로만 요청을 보낼..

더보기 - 목차 - 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 아이템 설..