개발일기

컴포넌트에 props 전달하기부모 컴포넌트에서 전달받을 인자를 Avatar({person, size}) 이렇게 표현 !!!== function Avatar(props) { // 구조분해할당 let person = props.person; .. }props를 전달하지않거나, undefinded로 전달 되었을때 기본값이 사용된다.function Avatar({person, size = 100})https://ko.react.dev/learn/passing-props-to-a-component부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법const Parent = () => { return ;}const Child = (props) => { return ( 이름 : {props.name}, 나..

State를 통해 컴포넌트는 사용자 입력과 같은 정보를 기억할 수 있습니다. 폼 컴포넌트는 state를 사용하여 입력값을 저장하거나, 이미지 갤러리는 state를 사용하여 선택한 인덱스를 저장할 수 있다.컴포넌트에 state를 추가하려면, 두 가지 hook을 사용 가능핟.useState직접 업데이트 할 수 있는 State 변수를 선언, 리액트가 뭔가(첫번째 변수)를 기억하길 원한다면. 이 쌍의 이름은 const [something, setSomething]과 같이 지정하는 것이 규칙입니다.여러번 사용할 경우const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); https://ko.react.dev/le..

📌 AuthState는 interface로 유지하는 게 좋고, Notification 같은 데이터는 type이 적합해요! 😊 왜! ?AuthState는 interface가 좋은 이유확장 가능 해야 하기 때문로그인 상태를 관리하는 데이터, 만약 새로운 속성이 필요하면 extends로 확장할 수 있다.객체 기반 상태 관리에서 interface가 더 일반적상태 관리 라이브러리에서는 보통 interface를 사용한다.AuthState처럼 상태를 나타내는 객체는 interface가 더 많이 쓰이는 패턴이다(그래서 유지보수가 쉽다!)Notification은 type이 더 적합한 이유type은 유니온 타입(여러값 중 하나)을 쉽게 정의할 수 있음. (=type은 유니온타입을 지원한다.)Notification은 확..

React Query를 사용하여 API 호출과 비동기 데이터를 관리했음.서버 상태 관리를 위한 라이브러리로, 데이터 페칭, 캐싱, 동기화, 업데이트 등을 쉽게 처리할 수 있게 해준다.API 호출을 후 데이터 캐싱, 자동 리페칭, 로딩/에러 상태 관리 등을 자동으로 해준다.useState, useEffect 없이도 데이터 가져오기 가능핵심 기능데이터 캐싱queryKey를 기준으로 데이터를 자동 캐싱하여 불필요한 API 호출 방지. 새로고침 해도 데이터를 유지할 수 있음자동 리패칭(데이터 동기화)staleTime, refreshInterval 옵션을 사용하여 주기적으로 API 호출 가능백그라운드에서 데이터를 자동 업데이트,데이터 갱신(mutations)useMutation을 사용하면 POST, PUT, DE..

메모이제이션불필요한 리렌더링을 방지하는 기법React.memo컴포넌트를 메모이제이션props가 변경되지 않으면 컴포넌트를 리렌더링 하지 않습니다. 하지만 props가 객체나 함수인 경우 주의가 필요합니다.챗토리에선 이렇게 사용했어요. // MessageItem 컴포넌트 메모이제이션const MessageItem = React.memo(({ message, onDelete }) => { return ( {message.content} onDelete(message.id)}>삭제 );});useMemo계산 비용이 큰 값을 메모이제이션// MessageList.tsx에서 메시지 그룹화 로직 최적화const MessageList = () => { const messages..

는 외부 리소스와의 연결을 돕는 태그 요소이며, rel 속성 값인 preconnect, preload, prefetch는 리소스 로드의 우선순위를 설정하여 로드 성능을 최적화 하기 위해 사용됩니다.  1. preconnectpreconnect는 브라우저가 특정 origin에 대한 네트워크 연결을 미리 설정하도록 지시합니다. 이를 통해 DNS 조회, TLS 핸드셰이크, TCP 연결을 미리 완료하여 리소스 로드 지연을 줄일 수 있습니다. 외부 API나 CDN의 리소스를 사용할 경우 preconnect를 사용하면 첫 번째 요청의 대기시간을 줄일 수 있습니다. preconnect는 리소스 자체를 로드하지 않고, 요청할 origin 과의 연결만 미리 준비합니다. 자주 사용하는 외부 리소스의 도메인에 대해 적용하는..

웹 성능 최적화브라우저는 상단부터 차례대로 로드된다. HTML파일을 읽어온 후, 위에서부터 아래로 한 줄 씩 해석한다. 이 과정에서 css 파일이나 js 파일을 만나면 해당 파일을 해석하는 동안 웹 페이지 렌더링은 일시적으로 차단된다. 이러한 화면을 사용자가 보게 되면 페이지를 이탈하거나흰 화면의 대기 화면을 보게 되는것.. 좋은 성능의 웹을 만들기 위해서 웹 성능 최적화는 필수로 거쳐야 하는 과정이다. 성능 최적화 = 렌더링 최적화 + 로딩 최적화렌더링 최적화렌더링 차단 리소스란 브라우저 렌더링을 막는 소스들로 일반적으로 css, js를 말한다. 웹페이지 렌더링 최적화의 목표는 리플로우를 최대한 적게 발생시키면서, 빠르게 화면을 그리는 것리플로우브라우저의 스타일이 그려질 때, 레이아웃의 넓이, 높이, ..

CI(Continuous Integration) : 애플리케이션의 소스를 빌드, 테스트, 병합 CD(Continuous Delivery): 개발자의 변경사항이 레포를 넘어 유저에게 배포하는 것 까지를 의미한다.PipelineCI/CD 파이프라인을 젠킨스에 구현하기 위한 일련의 플러그인들의 집합이자 구성여러 플러그인들을 이 파이프라인에서 용도에 맞게 작성하고 정의함으로써 파이프라인을 통한 서비스가 배포된다.section구성-Agent-Post-State-StepsNode노드는 젠킨스 환경의 일부이며 파이프라인을 실행할 수 있는 시스템노드 block은 scripted 파이프라인 구문의 핵심Stage스테이지 block은 전체 파이프라인을 통해 수행된 별개 부분 집합을 개념적으로 정의한다.Step단일 업무Scr..

이전 섹션에서 엘리먼트 렌더링에서는 UI를 업데이트 하기 위해서 한 가지 방법만 배웠으며, 렌더링된 출력값을 변경하기 위해 root.render()를 호출했습니다.Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배울 것 입니다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매번 스스로 업데이트 할 것입니다.const root = ReactDOM.createRoot(document.getElementById('root'));function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. );}function tick() { root.render();}setInterva..

const element = Hello, world!;jsxjavascript 를 확장한 문법이다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX는 React “엘리먼트(element)” 를 생성합니다. 다음 섹션에서는 DOM에 어떻게 렌더링하는지 알아보겠습니다. 아래를 보면 JSX를 시작하기 위해 필요한 기본사항을 찾으실 수 있습니다.리액트라는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 리액트는 jsx사용이 필수는 아니지만,UI 관련 작업ㅇ을 할 때 시각적으로 도움이 된다고 생각합니다.JSX 사용하기어떤 프레임워크를 이용해 웹..