Rest 파라미터 (...)여러 개의 값을 " 하나의 배열" 로 모을 때 사용,함수 매개변수에서만 사용할 수 있다.Rest 파라미터는 함수 인자 선언 앞에 ... 을 붙여서 정의하는 문법이고, 배열로 넣어집니다!!function restData(...rest) { console.log(rest); // [1, 2, 3, 4, 5]}restData(1,2,3,4,5); 이런식으로, `...rest` 가 파라미터 자리에 있으니까 들어온 값들을 전부 하나의 배열로 묶어줌 Spread 문법 (...)배열이나 객체의 요소를 "펼칠 때" 사용함수 호출, 배열 리터럴, 객체 리터럴 등에 사용 가능 ( 함수, 배열, 객체 )let spreadArray = [ 1, 2, 3 ];console.log(...spreadAr..

CSS로 레이아웃을 구성할 수 있는 방법은 다양합니다.예전에는 `float`, `clear`, `position` 등을 활용해 구조를 잡는 경우가 많았지만,최근에는 `display` 속성을 활용해서 레이아웃을 잡는 방식이 가장 보편적이고 간결하게 쓰이고 있다고 생각합니다. 저도 앞으로 이 방식을 사용할 예정이라, 잊지 않기 위해 블로그에 정리합니다.! display 속성으로 레이아웃 잡기1. `display: flex` 블록 요소 (block) 처럼 동작하는 플렉스 컨테이너를 정의.자식 요소들이 flex-item 이 되며, 수평 또는 수직 정렬을 자유롭게 설정할 수 있음 .container { display: flex; } 2. `display: inline-flex`인라인 요소처럼 동작하는 flex ..

개인 GitHub를 정리하고 기록하는 과정에서,로컬 브랜치와 원격 브랜치 간의 싱크가 맞지 않는 문제,그리고 이전에 PR(Pull Request)에서 사용한 커밋 메시지가 반복해서 중복되는 문제가 발생했다. 심지어 브랜치를 삭제해도 동일한 커밋 메시지가 다시 나타나는 바람에프로젝트 히스토리가 어지러워졌고, 이 문제를 근본적으로 해결하고자 내용을 정리한다. 사용한 브랜치 구조`main` 브랜치 (기준 브랜치)`개인 브랜치` (작업용 브랜치)나는 주로 아래와 같은 방식으로 GitHub를 연습 및 사용해왔다. (개인 브랜치 재사용) 1. `git add .`> 해당 작업을 통해 내가 수정한 코드를 업로드 2. `git commit -m "커밋 메시지"`> 업로드한 코드를 commit 3. `git push ..

협업 중 반복되는 Conflict, 원인은 의외로 간단했다 프로젝트를 팀원들과 함께 진행하면서, `main` 브랜치에서 변경사항을 pull 받을 때마다잦은 충돌(conflict) 이 발생하는 일이 반복됐다. 처음에는 내가 작업하던 파일에서 충돌이 나는 줄 알았지만,자세히 들여다보니 내가 수정하지도 않은 파일에서도 충돌이 발생하고 있었다.그럴 때마다 해당 파일을 일일이 수동으로 수정하고,내 작업 브랜치에 push한 뒤 PR을 보내는 방식으로 진행했다. “왜 내가 수정하지도 않은 파일이 충돌을 일으킬까?”의문이 들었고, 결국 이 문제를 팀원들과 공유하며 원인을 함께 분석해보기로 했다. 나의 병합 방식나의 기본 작업 흐름은 다음과 같았다: # 개인 브랜치에서git add .git commit -m "작업 ..

React Context란?컴포넌트간의 데이터를 전달하는 또 다른 방법 ,기존의 `props`가 가지고 있던 단점( props drilling) 을 해결하기 위해 존재한다. 왜 필요할까?React에선 데이터를 전달하기 위해 props를 사용하는데요Props는 부모 -> 자식 으로만 값을 전달할 수 있습니다. App -> childA 이런 경우 문제?(불편함이)되지 않음, But App -> childA -> childB 이런경우 App이 childB로 데이터를 전달하려면 바로 전달하지 못하고 childA 가 중간 다리 역할을 해야함 // App 이 ChilB에 데이터를 넘기려면 //이런걸 Props drilling  그래서 childA에서 쓰지도 않는 데이터를 chil..

useRef란 뭘까? `useRef` 는 이름부터 Reference(참조) 를 만드는 Hook입니다.또,, `useState`와 비슷합니다.. 헷갈릴 수 있지만 사용 목적과 동작 방식은 꽤 다릅니다. useRef VS useState항목useRefuseState역할참조 객체 생성상태 값(State) 저장값 변경 시리렌더링 안 됨리렌더링 발생주요 용도DOM 접근 및 조작 가능, 값 유지용 변수UI 상태 관리 (ex. 토글, 입력값)값 접근 방식`ref.current`state 변수 이름 그대로 어떻게 사용할까요 ? import { useRef } from "react";const refObj = useRef(); // 초기값은 undefined 해당 refObj 를 console.log 로 찍어보면 `{..

useReducer은 뭘까?useState와 거의 비슷하다고 볼 수 있다..사실 더 정교하게 상태를 제어할 수 있는 Hook 입니다.모든 `useState` 는 `useReducer`로 대체가 가능합니다!특히 상태가 복잡해질수록 `useReducer`가 더 깔끔하고 유지보수에 좋습니다~~. 왜 `useReducer`를 써야할까? `useState`를 사용한다면, 컴포넌트 내부에 상태 관리 코드를 작성해야한다는 점이 있었죠, 그렇게 되면 코드가 섞이게 됩니다.(App에 작성하면 ,, 너무 복잡혀요)function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (c..

`useEffect` 란 무엇인가? 바로 이전 글에서 React의 생애주기 (Life Cycle) 를 살펴봤는데요이제는 그 생애 주기 속에서 일어나는 사이드 이펙트(Side Effect)를 제어하는 방법인 `useEffect` 에 대해 알아봅시다. 사이드 이펙트란? : 쉽게 말해서 렌더링 외에 발생하는 모든 행동이라 보면 됩니다.서버에 데이터 요청하기 ( API 요청 )콘솔에 로그 찍기DOM에 직접 접근하기이벤트 리스너 등록/해제 하기타이머 설정 및 정리하기이런 것들이 모두 다 사이드 이펙트라고 볼 수 있다. `useEffec` 는 그럼 뭘 할까요 ? 바로 : 사이드 이펙트를 실행하는 함수 라고 보면 됩니다. 이 함수는 컴포넌트의 생애 주기 ( Mount, Update, Unmount ) 를 따라 실..

리액트 컴포넌트도 사람처럼 생애 주기가 있습니다.유아기 컴포넌트, 청소년기 컴포넌트, 성인기 컴포넌트는 아니고요... React에서는 Mount, Update, Unmount라는 세 가지 단계로 생애 주기를 구분합니다.  1. Mount ( 탄생의 순간 ): 컴포넌트가 화면에 처음 나타날 때 발생합니다.즉, 처음 렌더링되는 시점이죠 주로 사용하는 경우는 서버에서 데이터를 불러올 때 (`fetch`, `axios` 등)초기에 이벤트 리스너 등록 등 초기 설정할 때2. Update ( 변화의 순간 ): 컴포넌트가 리렌더링 될 때 발생합니다.`state`나 `props` 가 바뀔 때마다 다시 그려지는 과정입니다. 주로 사용하는 경우는특정 값이 변경될 때 콘솔에 로그를 찍거나DOM에 직접 접근해 효과를 줄 때 ..

`useState` 란 React 훅(Hook) 중 하나로, 컴포넌트에서 상태 (State) 를 관리하기 위해 사용된다.  상태는 컴포넌트에서 바뀔 수 있는 데이터를 의미한다, 예를 들어, 사용자 입력값, 클릭 횟수, API 에서 받아온 데이터 등이 상태로 관리된다.  useState 사용법은 먼저 `import { useState } from 'react';` 로 import 해 준 다음,  최상단에 `const [ count, setCount ] = useState(초기값);` 으로 사용할 수 있다 예시코드 import { useState } from 'react';function App() { // useState 사용법 const [count, setCount] = useState(초기값); ..