developer_kcm

summary - 17.md -01 배포할 때 해야할 것 vite.config -> base 설정 react-router basename 가져오기 (routes => index.jsx) ----- summary - 17.md -02 글로벌 내비게이션 바 스타일링 수정 내비게이션 활성 링크 react router -> className (공식 문서 보기) routes => GlobalNavBar.jsx 12~31 줄 useLocation + tabindex 설정 스크롤바를 숨기지만 스크롤을 허용하는 css 설정 (main.css) ----- summary - 17.md -03 Tailwindcss '!important' 설정 방법 특정 위치로 부드럽게 스크롤 후, 상위 요소에 초점 이동 scrollInto..

Context API에 대해... Context API는 React에서 전역 데이터를 컴포넌트 트리 전체에 걸쳐 쉽게 공유할 수 있도록 하는 방법입니다. 이는 일반적으로 props를 통해 데이터를 수동으로 최상위 컴포넌트에서 하위 컴포넌트로 전달하는 것(prop drilling) 대신 사용됩니다. Context API를 사용하면 중첩된 여러 컴포넌트를 거치지 않고도 컴포넌트 트리의 어느 곳에서나 데이터에 접근할 수 있습니다. 컴포넌트간의 불필요한 props 전달을 방지하고 효율적으로 데이터를 제공해 프로젝트 구조를 보다 유연하게 만들어주는 것 같다. 오늘은, 채팅 앱을 만들어보면서 context API를 배웠다. 👇 Chat.jsx 코드보기 더보기 import { node } from 'prop-type..

const checkDuplication = (value) => { return () => { let isDuplicated; let userValue = userData[value]; if (value && userValue) { isDuplicated = usersData.some((user) => user[value] === userValue); } else { alert(`${value}를 입력해주세요.`); return; // userValue가 없는 경우 함수를 여기서 종료 } if (isDuplicated) { alert(`이미 사용중인 ${value}입니다.`); } else { alert(`사용 가능한 $..

환경설정 1. eslint (eslintrc.cjs) npm init @eslint/config // eslint의 설정 파일을 초기화하고 구성하기 위한 명령어 'eslint/config' 스코프를 붙여 구성 마법사를 실행하는데, 이때, 여러 가지 질문을 통해 최적의 eslint 설정을 구성합니다. 프로젝트의 환경과 사용하고 있는 프레임워크, 코드 스타일 가이드, 자바스크립트 버전, 모듈 시스템 등을 설정 생성한다. module.exports = { env: { browser: true, es2021: true, node: true, // 사용 하고 있는 번들러인 vite가 node 환경에서 실행되기 때문에 }, extends: [ 'eslint:recommended', 'plugin:react/reco..

리엑트 수업 2일차 코드까지 손코딩으로 작성하고 싶었지만, 엄청난 악필이여서 나중에 저도 못알아볼거 같아 코드는 캡쳐해서 가져왔습니다,, 배우고 느낀 점 JSX와 HTML과 유사하지만 차이점을 알 수 있게 되었다. JSX에서 데이터를 바인딩하는 방법과 인라인 스타일을 적용하는 방법을 알게 되었다. 함수의 상태 변수에 따라 리렌더링해 값을 바꿀 수 있다. 추가적으로 JSX에서 공백 처리하는 방법을 알게 되었다. ( {' '} )