Soony's House

커밋 메시지를 변경하기 위해 자식커밋쌍방향 재배치 를 클릭했는데 텅 비어있다. . Sourcetree에서 자식커밋 쌍방향 재배치(Interactive Rebase)가 나타나지 않는 이유 1. 브랜치가 HEAD 상태가 아닌 경우반드시 로컬 브랜치에 체크아웃되어 있어야 한다.Detached HEAD 상태에서는 해당 메뉴가 비활성화된다. → Sourcetree 상단에서 현재 브랜치가 정상적으로 선택되어 있는지 확인해야 한다. 2. 현재 브랜치에 커밋 수가 부족한 경우쌍방향 재배치는 최소 두 개 이상의 커밋이 존재해야 실행할 수 있다.커밋이 1개 이하일 경우, 메뉴가 나타나지 않는다. 3. 메인 브랜치(main/master)에서 실행한 경우 일반적으로 rebase는 기능 브랜치(featur..

Node.js는 JavaScript를 사용하여 서버 사이드 애플리케이션을 개발할 수 있는 런타임 환경이다. 간결하고 유연한 개발 환경을 갖추기 위해, 프로젝트 초기 설정은 매우 중요하다. Node.js 프로젝트를 처음 시작할 때 필수적으로 진행해야 할 설정 과정을 정리해보자☺️ 1. Node.js 설치Node.js를 설치하기 위해서는 공식 웹사이트에서 설치 파일을 다운로드하거나, nvm(Node Version Manager)을 사용하는 것이 좋다. nvm을 사용하면 여러 버전의 Node.js를 쉽게 관리할 수 있다.# nvm 설치 (Mac/Linux 기준)curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash# 원하..

💡최적화 코테를 준비하면서도, 애플리케이션 개발을 하면서도 항상 신경써야한다고 누누히 들은 코드 최적화.. ! 두둥.. 리액트 애플리케이션을 개발할 때 역시 마찬가지이다. 리액트에서는 '렌더링과 연산'이 성능에 큰 영향을 미친다.특히, 상태( state) 가 변경될 때마다 불필요한 연산이나 렌더링이 반복되면 전체 성능이 저하될 수 있다. 리액트 최적화를 위해 지양해야할 요소들은 아래와 같다. 1. 불필요한 렌더링2. 컴포넌트 내부의 불필요한 연산3. 컴포넌트 내부의 불필요한 함수 재생성 이중 useMemo 훅은 React의 불필요한 연산을 막아 최적화한다. 💡useMemo : 특정 연산의 결과를 메모이제이션(memoization) 하여 불필요한 연산(재연산)을 방지하는..

목차1. React.memo 메서드1-1. 커스텀 비교함수2. useCallback 💡1. React.memo 메서드저번에 useMemo 훅으로 불필요한 연산을 막았다면,React.memo는 불필요한 리렌더링을 막아주는 내장함수이다. : 함수형 컴포넌트를 메모이제이션(memoization) 하여, props가 변경되지 않으면 컴포넌트를 리렌더링하지 않는 기능을 수행한다. 기본형태는 아래와 같음.import { memo } from 'react';const MyComponent = (props) => { // ...};export default memo(MyComponent); props가 얕은 비교(shallow comparison)로 동일한 경우 해당 컴포넌트는 리렌더링되지 않는다. ..

React에서 '상태관리'에 사용되는 hook에는 useState와 useReducer가 있다.useState는 간단한 상태관리를 위해 사용되지만,복잡한 로직이 있는 경우에는 useReducer를 사용하는 것이 더 구조적이고 관리하기 쉽다. useReducer의 개념과 적용한 예시 코드를 정리해보자 ! 💡useReducer 란?useReducer 는 상태(state)의 변경 로직을 컴포넌트 밖으로 분리해줌으로써 보다 명확하게 관리하는 Hook이다. → 컴포넌트 외부에 상태 관리 코드를 분리ex.function reducer(){ //...}function App(){ const [todos, dispatch] = useReducer(reducer); //...} 기본적인 사용 형태co..

💡useEffect란?- React에서 컴포넌트의 라이프사이클을 다루기 위한 대표적인 Hook이다.- 생명 주기 별 특정 로직을 수행할 수 있도록 해준다.- 전통적인 클래스형 컴포넌트에서 사용하던 componentDidMount, componentDidUpdate, componentWillUnmount를 함수형 컴포넌트에서도 사용할 수 있게 해주는 Hook임 = 주기별 사이드 이펙트(side effect)를 제어한다. * 리액트 라이프사이클 ( life-cycle ): Mount(탄생)- Update(변화)- Unmount(죽음) 으로 구성 아래의 예시 코드를 통해 useEffect를 정리해보자.// App.jsximport './App.css'import Viewer from "./com..

TodoList 앱 개발 중 간략하게 정리하면 좋을 내용이 생겨 정리하기:) 목차1. Props에 {} 전달하는이유2. map() 함수 1. Props에 {} 전달 하는 이유 일단 Props 란 리액트에서 부모 컴포넌트로부터 전달받는 데이터이다. 부모 컴포넌트로부터 props 를 전달받을 때 두 가지 방식이 있다. 1. Props 전체를 받음 const List = (props) => { console.log(props.todos); // 접근하려면 props.todos} 구조분해할당을 하지 않고 전달 props를 전달 받으면, 객체 형태(object)로 전달된다. { todos : [...] } 형태로 전달 되는 것이다.객체(object)는 key- value 쌍으로 구성되어 ..

목차1. React Hook2. custom Hook 1. React Hook💡Hook이란? Hook은 React의 함수 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있도록 해주는 함수.기존에는 클래스형 컴포넌트에서만 가능했던 기능들을 함수형에서도 사용할 수 있도록 만들어준 리액트의 핵심 기능이다. Hook은 React 16.8에 새로 추가된 기능이며,Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다고 한다. ⚙️ 대표적인 Hook 종류useState: 컴포넌트의 상태값(state)을 저장하고 변경useEffect: 컴포넌트의 생명주기 관리 (마운트, 업데이트, 언마운트 등) useRef, useContext, useReducer, us..

목차1. useState와 set함수2. 간단한 회원가입 폼으로 흐름 살펴보기3. useRef React를 처음 배우면서 가장 먼저 접하는 Hook이 바로 useState이다. useState는 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 핵심적인 기능이다. 이번 글에서는 간단한 회원가입 폼 예제를 통해 useState와 함께 사용하는 set 함수가 어떻게 작동하는지를 자세히 설명해보고자 한다. 1. useState와 set함수 ✏️useState- 컴포넌트에 state 변수를 추가할 수 있는 React Hook.- 상태값을 만들고, 이를 제어할 수 있는 함수를 함께 제공한다. 💡사용법: 컴포넌트에 state 추가하기 컴포넌트의 최상위 레벨에서 useState를 호..

목차1. JSX 란?2. JSX 특징 및 주의사항3. JSX의 CSS 적용4. JSX 속성 사용방식 1. JSX 란? JSX는 JavaScript에 XML/HTML 형태의 마크업을 작성할 수 있게 해주는 JavaScript 확장 문법 Javascript에 XML 형식의 문법을 결합한 형태React에서는 렌더링 로직과 UI 로직이 연결되어 있다고 보기 때문에, 둘을 함께 구성하는 컴포넌트 단위로 관심사를 분리함. 2. JSX 특징 및 주의사항 💡 JSX의 특징 JS 표현식 포함 가능중괄호 {} 안에 JavaScript 표현식 사용 가능예: Hello, {name}JSX도 표현식이다!JSX는 JavaScript 코드처럼 변수에 할당하거나, 인자로 전달하거나, 함수에서 반환 가능속성 정의문..