Ella 프론트엔드일지

0. API(Application Programming Interface) - 서로 다른 프로그램 간에 소통할 수 있게 도와주는 통신 규약 - 웹에서는 클라이언트와 서버간의 통신규약 - 아주 쉽게 말하면, 서버에게 요청해서 데이터 가져오는 방법이 API 임 1. REST API(Representational State Transfer) - API 들을 어떤식으로 만들어야 좋은 API 일까? 에 대한 답이 REST API - REST 는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것. HTTP URI를 통해 자원을 명시하고 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CR..

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를 반환한다...