모카 스터디 썸네일형 리스트형 서버 깃허브에서 main에 있는거 한방에 pull로 당겨오기 sudo git fetch —all // 원격 저장소에서 모든 변경 사항을 가져오기 sudo git reset —hard origin/main //로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정 sudo git pull //원격 저장소의 변경 사항을 로컬 저장소로 가져오고 병합 주로 다른 개발자가 main 브랜치에 변경 사항을 커밋하면 sudo git fetch --all을 사용하여 해당 변경 사항을 로컬 저장소로 가져온다. 그런 다음 sudo git reset --hard origin/main을 사용하여 로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정 한다. 이렇게 하면 로컬 저장소의 변경 사항이 모두 삭제되고 원격 저장소의 main 브랜치의 변경 사항만 남게 된다. 마.. 더보기 리액트 라우터 핵심 개념 정리 React Router Outlet 자식 경로 요소를 렌더링 하려면 부모 경로 요소에서 을 사용해야 한다. 이렇게 하면 하위 경로가 렌더링 될 때 중첩된 UI가 표시될 수 있다. 부모 라우트가 정확히 일치하면서 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다. 라우팅 설정 예시 (App.js): import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return ( ); } export default App; Ho.. 더보기 리액트 성능 최적화 Hook 개념정리 성능 최적화 useMemo 컴포넌트의 렌더링이 발생할 때마다 값을 계산하는 대신, 이전에 계산된 값을 재사용한다. 이로써 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있다. import React, { useState, useMemo } from 'react'; function ExpensiveCalculation({ value }) { // useMemo를 사용하여 계산 결과를 메모이제이션 const result = useMemo(() => { console.log('Calculating...'); return value * 2; }, [value]); // value 값이 변경될 때만 재계산 return Result: {result}; } function App() { const [inputValu.. 더보기 리액트 데이터 패칭 라이브러리 개념 정리 및 비교 (React Query,SWR,Redux-sagas,thunk) React Query (데이터 패칭) 데이터 페칭과 관련된 상태 관리와 로직을 효과적으로 처리하기 위한 라이브러리이다. 리덕스나 mobx와 같이 상태관리보다는 비동기 데이터 처리에 관해 주요 기능을 한다. API 호출, 캐싱, 리프레싱 등을 간단한 API를 통해 처리할 수 있으며, 컴포넌트의 데이터 요구사항을 관리하는 데 도움을 준다. import React from 'react'; import { useQuery } from 'react-query'; function UserProfile() { // useQuery 훅을 사용하여 데이터 페칭 처리 const { data, isLoading, error } = useQuery('userData', fetchUserData); if (isLoading) .. 더보기 리액트 상태관리 라이브러리 및 Hook 개념 정리 및 비교 (React Context API, useReducer, Redux) 해당 포스팅은 이전에 들은 강의를 토대로 핵심을 정리. React Context API (리액트 내장 API) 컴포넌트 트리 전체를 대상으로 데이터를 공급하는 기능 provider 사용 일반적으로 props을 통해 컴포넌트 간에 데이터를 전달하지만, 컴포넌트 간에 깊은 중첩이 있는 경우 데이터를 전달하기 번거로워 진다. 이때 useContext를 사용하면 중첩된 컴포넌트 간에 데이터를 쉽게 공유할 수 있다. import React, { createContext, useContext } from 'react'; // 컨텍스트 생성 const UserContext = createContext(); export function UserProvider({ children }) { const user = { us.. 더보기 리액트 기본 Hook 개념정리 usestate 상태를 관리할 수 있게 도와주는 기능 import React, { useState } from 'react'; function Counter() { // useState 훅을 사용하여 count 상태와 그 상태를 업데이트하는 setCount 함수를 가져옵니다. const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment ); } export default Counter; useRef DOM 요소나 변수를 참조하고 관리하는 데 사용 import React, { useRef } from 'react'; function InputFocus() { // useRef 훅을 사용하여 input.. 더보기 리액트 기본 개념 정리 해당 포스팅은 이전에 들은 강의를 토대로 핵심을 정리. 조건부 렌더링 JSX 리스트와 키 li 엘리먼트를 사용할 때는 key속성을 추가 해줘야하 한다. 작은 컴포넌트로 나누기 단일 책임 원칙을 위해 한 컴포넌트는 한 가지 역활만 가지게 한다. 상태 끌어 올리기 동일한 데이터에 여러 컴포넌트가 의존하는 경우가 생기는데 이럴 경우에는 가장 가까운 부모 컴포넌트로 state를 끌어올리는 것이 좋다 SearchForm에서 관리했던 searchKeyword를 부모 컴포넌트인 App의 state로 끌어 올렸다(1). 이 값(searchKeyword)을 SearchForm의 props로 전달하고(3) 값을 갱신할 목적으로 onChange에 콜백 함수도 전달했다(4). 콜백함수는 handleChangeInput() 메.. 더보기 프론트엔드 CORS 개념 정리 https://www.youtube.com/watch?v=bW31xiNB8Nc&ab_channel=%EC%96%84%ED%8C%8D%ED%95%9C%EC%BD%94%EB%94%A9%EC%82%AC%EC%A0%84 얄박한 코딩사전 채널을 토대로 정리 프론트 개발을 하던 중 만들고 있는 웹사이트에서 외부 API에서 정보를 받아 오려고 할때 주로 발생한다. 즉, 한 사이트에서 주소가 다른 서버로 요청을 보낼 때 발생 Postman이나 다른 익스텐션 어플로 테스트를 하면 이상이 없지만 웹사이트(브라우저)에서의 요청에서는 CORS 에러가 나온다. 해당 하는 서버에서 요청을 막는 것이 아니라 브라우저(크롬) 쪽에서 연결을 막는 것이다. 주로 브라우저에서 접속하는 사이트 들은 당연하게도 되부 사이트여서 의심을 하는.. 더보기 이전 1 2 3 4 5 6 7 8 ··· 16 다음
