Ella 프론트엔드일지

0. 깃충돌 - 개인 프로젝트만 해봤던 나... 테오 스프린트 팀 협업을 하면서 충돌이 오지게 났었다. - 충돌때메 엉엉 울게되었다.. 제대로 정리해보자! 마스터(main) 브랜치에서 let a = 'apple'로 처음에 지정하고 커밋. 브랜치를 freshman 이라고 새로 파서 let a = 'orange'로 바꾸고 커밋. 마스터 브랜치가 git merge freshman 으로 freashman 브랜치랑 합치려고 하니까 아래처럼 충돌이 났다. 충돌이 되고 나서 화면에 아래처럼 떴다. HEAD 는 지금 내가 현재 있는 브랜치 ======을 기준으로 HEAD는 현재 내가 있는 브랜치 밑에는 충돌된 브랜치 Accept Current Change : 지금 현재 내가 있는 브랜치 코드를 따라가 Accept In..

0. 리코일 왜 사용하는건데? -- 이 파트는 추후 정리해 보겠음 1. 리코일 사용법 1) RecoilRoot - 최상위 컴포넌트를 RecoilRoot 로 감싸주면 된다. - RecoilRoot가 감싼 하위 컴포넌트들은 이 컨텍스트를 통해 Recoil 상태와 관련된 동작을 할 수 있다. - Recoil 상ㅅ태가 변경될 때 하위 컴포넌트들에게 리렌더링을 트리거 한다. Recoil 상태가 변경되면 해당 상태에 의존하는 컴포넌트들은 자동으로 업데이트되어 새로운 상태를 반영한다. // App.tsx import React from "react"; import { RecoilRoot } from "recoil"; import Counter from "./Counter"; function App() { return..

0. useRef 특정 DOM 조작 측면 useRef 는 특정 DOM 을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다. 예를 들면, 엘리먼트의 크기를 가져오거나 스타일 변경, 포커스 등의 작업을 해야할 때 useRef를 사용하면 된다. 🔸스타일 변경하는 예제코드 import React, { useRef } from 'react'; function App() { const divRef = useRef(null); const changeColor = () => { divRef.current.style.color = 'red'; }; const changeFontSize = () => { divRef.current.style.fontSize = '24px'; }; return ( Hello, worl..

매번 복습하는데 까먹어서 정리하려고 한다! react-hook-form 라이브러리에 익숙해져서 useState 로 input 여러개를 기본적으로 관리하는 걸 까먹는것 같다 ㅠㅠ 0. input 여러 개일 때 상태관리하기 아래의 예제는 벨로퍼트에서 가져왔다. import React, { useState } from "react"; function InputSample() { const [inp, setInp] = useState({ realName: "", nickName: "", }); const { realName, nickName } = inp; //onChange 하나의 이벤트 핸들러로 2개의 input 값 제어 const onChange = (e) => { const { value, name } ..

✅렌더링 과정 지긋지긋한 아래의 counter 코드 그런데, 도대체 어떻게 이코드가 렌더링 되는지는 알지 못했다. 아래 코드와 함께 차근차근 렌더링 과정에 대해 알아보자. import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( {count} setCount(count+1)}> click me ); } 🔸요약 🔸 1) 상태 변경 전 초기 렌더링 2) 상태 변경 및 새로운 Virtual DOM 생성 3) Diffing 4) Reconcilation 5) commit 1. 상태 변경 전 초기 렌더링 리액트 컴포넌트가 처음으로 렌더링될 때, Example 컴포넌트는 JSX를 반환한다...

0. class - ES6 의 클래스가 도입되기 이전에는 생성자 함수로 프로토타입 기반의 인스턴스를 생성했다. - ES6 클래스 문법은 좀더 Java 스럽게 객체지향적으로 표현하기 위해 추가된 새로운 문법이다. - 결국엔 object 를 여러개 만들기 위해서 class 를 쓰는 것이다. 1. class 만드는 방법 🔸class 를 선언하는 방법 class 에는 constructor 라고 하는 키워드를 넣어야한다. 1)클래스 선언문 class MySelf { constructor(age, height) { this.age = age; this.height = height; } } 2) 변수에 클래스를 선언(기명 클래스 표현식) const MySelf = class MySelf { constructor(ag..