잘 배우겠숩니따

쿼리 키동일한 쿼리 키를 사용하는 경우 트리거가 있을 경우에만 Refresh가 일어남그러나 쿼리 키는 동일하지만, 식별자가 있는 경우 각 쿼리마다 캐시를 공유하지 않고 자신만의 공간을 만들 수 있음 (라벨링)식별자를 쿼리 키 배열의 두 번째 요소에 추가하여 종속성 배열을 다르게 구성더보기💡 트리거가 일어나는 조건컴포넌트 다시 마운트창에 리포커싱useQuery 반환된 Refetch 함수 수동 실행지정된 간격에서 자동으로 재검색변형 후 쿼리를 무효화

React Query리액트쿼리는 클라이언트에서 서버 데이터 캐시를 관리하는 것으로 리액트 코드에서 서버데이터가 필요할 때 Fetch나 Axios를 사용하지 않고 React Query 캐시를 요청한다역할데이터를 관리 (서버의 새 데이터를 업데이트 설정은 사용자 몫)서버에 데이터 일치하는지 확인명령형 : 쿼리 클라이언트에 있는 데이터 무시 후 캐시에 교체할 새 데이터를 서버에서 가져오게 지시선언형: 리패치를 트리거하는 조건을 구성서버 상태 관리에 도움이 되는 많은 툴 제공서버에 대한 모든 쿼리의 로딩 및 오류 상태 유지사용자를 위해 페이지네이션 무한 스크롤이 필요한 경우 데이터 조각을 가져올 수 있는 도구 제공사용자가 언제 필요할지 미리 예상한 후 프리패치데이터의 변이나 업데이트 관리쿼리는 키로 식별되므로 ..

React’s Context API 컴포넌트나 컴포넌트 레이어간의 데이터 공유를 용이하게 해주는 리액트 내부 기능으로 useContext 컴포넌트에서 context를 읽고 구독할 수 있게 해줌 기능 컨텍스트 값을 생성하고 해당 값 제공하며 이 컨텍스트를 묶어주는데, 이것은 다수의 컴포넌트 또는 앱의 모든 컴포넌트를 묶어주는 것에 있음 → 리액트 상태를 해당 컨텍스트 값에 연결하면 앱 전체에 제공되는 방식으로 사용 import { useContext } from 'react'; function MyComponent() { const theme = useContext(ThemeContext); // ... 장점 state(상태)와의 연결이 쉬움 여러 컴포넌트 레이어를 통해 상태를 전달하거나 상태 업데이트 기..

개발 초기에는 형상관리 플랫폼 중 GitHub만 알고 그것만 썼는데 생각보다 다양한 플랫폼이 많더라구요!그래서 오늘 소개해드릴 플랫폼은 GitHub, GitLab, Bitbucket이고 세 개 모두 소프트웨어 개발을 위한 버전 관리 시스템을 제공하는 플랫폼입니다!GitHub가장 유명한 플랫폼으로 주로 오픈 소스 프로젝트 중심지로 인식되고 있습니다.특징대규모 생태계: 많은 개발자와 기업이 사용하여, 풍부한 통합 옵션과 커뮤니티 지원이 있음Github Actions: 챠/CD 지원을 내장하여 코드를 자동으로 빌드, 테스트 배포할 수 있음협업 도구: 이슈 트래커, 프로젝트 보드, 코드 리뷰, 팀 관리 등 다양한 협업 도구 제공Marketplace: 다양한 개발 도구와 서비스를 통합할 수 있는 마켓플레이스 제공..

State(상태) 상태 값은 상태 업데이트 함수를 통해 변화가 있을 경우 컴포넌트가 재실행 UI에 바로 반영되어야 하는 값에 사용 시스템 내부에 보이지 않는 쪽에서 다루는 값 혹은 UI에 직접적인 영향을 끼치지 않는 값에는 사용하지 않음 Refs(참조) 참조 값이 바뀌어도 컴포넌트가 재실행되지 않음 DOM 요소에 직접적인 접근이 필요할 때 사용 forwardRef(render) 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있음 import { forwardRef } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { // ... }); 매개변수 render 함수: 컴포넌트의 렌더링 함수로 부모로부터 받은..

도커란? 애플리케이션을 개발, 배포, 실행할 수 있는 오픈 플랫폼으로, 도커를 사용하면 애플리케이션을 인프라로부터 분리하여 소프트웨어를 빠르게 제공할 수 있다. 도커는 애플리케이션을 컨테이너라는 격리된 환경에서 실행할 수 있게 해주며, 이는 여러 컨테이너를 동시에 호스트에서 실행할 수 있게 해준다. 관련 용어 이미지(Image) 컨테이너를 생성하기 위한 읽기 전용 템플릿 이미지는 애플리케이션을 실행하는 데 필요한 모든 것(코드, 런타임, 라이브러리, 환경 변수 등)을 포함 일반적으로 이미지는 다른 이미지를 기반으로 하여 추가 사용자 정의가 이루어짐 컨테이너(Container) 이미지를 실행한 인스턴스 컨테이너는 도커 API나 CLI를 사용하여 생성, 시작, 정지, 이동, 삭제할 수 있음 컨테이너는 네트워..

Vanilla Styling import './Header.css'; 장단점 장점 CSS 코드는 JSX 코드에서 분리됨 CSS 코드를 작성할 수 있음 다른 사람이 해당 코드에 작업할 수 있고, 다른 사람이 스타일링을 한다고 해도 방해나 간섭을 받지 않고 컴포넌트에 작업을 할 수 있음 단점 CSS를 알아야 함 범위지정이 되어있지 않아서 다른 컴포넌트 간에 스타일 충돌이 일어날 수 있음 Inline Styling Hello World! 장단점 장점 쉽고 빠르게 추가할 수 있음 추가하는 요소에만 영향을 미침 동적으로 스타일링 하는 것이 쉬움 단점 모든 요소를 개별적으로 스타일 해야 함 CSS와 JSX 코드 사이의 구분이 없어 스타일 작업을 할 때 방해나 간섭을 받음 CSS Module 장단점 장점 CSS 코드..

setup() 반응형 API ref를 사용하여 반응형 상태를 선언하고 setup() 객체를 반환하여 템플릿에 노출할 수 있다. 반환된 객체의 속성은 템플릿 및 기타 옵션 API 훅에 노출 가능 setup에서 반환된 refs는 템플릿에서 접근할 때, .value를 사용할 필요가 없습니다. 또한 옵션 API 방식을 사용하면 this로 해당 객체에 접근하면 자동으로 언래핑이 됨 {{ count }} Composition API에서 setup 함수 인자 props 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용 컴포넌트에 정의된 props 옵션에 따라 해당 속성을 반응형으로 만들 수 있음 props를 통해 부모 컴포넌트에서 전달된 데이터를 읽을 수 있으며, 이 데이터는 자식 컴포넌트 내부에서 사용될..

Methods 이벤트 바인딩 데이터 바인딩 텍스트 보간 {{}} HTML 보간 v-html Attribute 보간 v-bind 메서드는 컴포넌트의 리렌더링 주기에 맞춰 매번 실행하므로, 변동 사항이 생기면 템플릿 재평가하고 해당 템플릿에 호출된 모든 메서드 다시 호출 Computed 데이터 바인딩 연산 프로퍼티는 다른 데이터를 기반으로 하는 데이터를 가져오기에 유용하며 의존하는 데이터가 바뀔 때만 Vue에 의해 재평가하거나 재실행된다는 장점이 있음 따라서 연산 프로퍼티는 다른 데이터에 의존하는 데이터에 사용해야 함 Watch 템플릿에 직접 사용되지 않음 특정 프로퍼티를 감시하며, 데이터 변경에 대한 반응을 코드로 실행할 수 있음 주로 데이터가 아닌 업데이트에 감시자를 사용 (바뀌는 데이터를 토대로 데이터..