프론트엔드/React18 npm install [-option] 최종 수정 : 2024-05-04 NPMNode Package Manager의 줄인 표현으로, 자바스크립트 패키지 매니저이다. node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다. dependencies에 등록되는 것과 devDependencies에 등록되는 것의 차이는 무엇인가? --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미이며, npm@5 부터는 --save 옵션을 기본 옵션으로 저장한다.-P (--save-prod)dependencies에 패키지를 등록한다. 프로젝트가 배포 시 사용될 의존성 모듈을 정의하고 설치한다.(default) -D (--save-dev)devDependen.. 2024. 5. 4. useId() 최종 수정 : 2024-05-03useId()접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하기 위한 React Hook입니다.어떤 매개변수도 받지 않는다.주의할 점useId()를 리스트의 key를 생성하기 위해 사용해서는 안 된다. Key는 데이터로부터 생성해야 한다. 페이지에서 컴포넌트는 몇 번이고 렌더링 될 수 있지만 ID는 고유해야 한다. ID를 직접 입력하는 대신 useId를 활용해서 고유한 ID를 생성할 수 있다.import { useId } from 'react';function PasswordField() { const passwordHintId = useId(); return ( Password: Th.. 2024. 5. 3. 컴폰넌트 설계 - 관심사의 분리 최종 수정 : 2024-05-01관심사의 분리컴퓨터 프로그램을 관심사 별로 구별해서 분리하는 설계 원칙을 말한다. 단순히 시스템을 분리되지 않는 파트들로 조각내는 것이 아니라 시스템을 반복하지 않고 각각의 책임을 가진 요소들로 구성하는 것을 목표로 한다. 여기서 말하는 책임은 특정 코드가 수행해야 하는 동작이라고 생각하면 된다. 분리를 위해서는 기준이 필요한다. 그 기준은 주어진 책임을 설명하는 논리적이거나 물리적인 제한을 의미한다. 소스 구성에 대한 프로젝트, 폴더 구조를 포함하기도 한다.효과컴포넌트의 불필요한 반복이 없어지고, 책임이 단일화되기에 전체 시스템을 유지보수하기 쉬워진다.시스템 전체의 유지보수성이 향상되므로 더 안정적이게 된다.각각의 컴포넌트가 단일 책임으로 자신의 관심사만 집중해서 확장 .. 2024. 5. 1. 리액트 컴포넌트의 라이프사이클(LifeCycle) 최종 수정 : 2024-04-20 라이프사이클(LifeCycle) 여기에서는 클래스 컴포넌트의 생명주기에 대해서만 다루겠다. 함수형 컴포넌트의 생명주기는 (링크 연결 예정)를 통해 확인할 수 있다. 라이프 사이클을 공부해야 하는 이유 동작 예측가능하게 만든다. 모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 이는 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사잘 때 끝난다. 라이프사이클 메서드를 통해 컴포넌트가 처음 렌더링할 때 보여주는 작업을 하거나, 컴포넌트의 값을 업데이트 하거나, 불필요한 업데이트를 방지하는 것을 수행할 수 있다. 라이프사이클 메서드의 종류는 총 9가지 이다.. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메.. 2024. 4. 20. Link, Navigete, useNavigate의 차이점 최종 수정 : 2024-04-19 Link, Navigete, useNavigate의 차이점 Link 컴포넌트 주소는 router를 통해 설정한 경로를 작성하면 되며, 사용자가 클릭해서 페이지를 이동할 수 있도록 만든다. 클릭만 하면 이동하기 때문에 다른 연산과정 없이 URL 경로가 바뀌면서 이동다. 개발자 도구에서는 로 보인다. a태그와는 무슨 차이가 있는가? 를 사용할 경우에는 전체 페이지를 재렌더링 시키기 때문에 SPA에 맞지 않다. 브라우저 주소로 이동하고 페이지 자체를 새로고침 하는 것이다. 따라서 상태 값이 유지되지 못하므로 사용할 수 없으며 속도가 저하된다. 반면 컴포넌트는 SPA의 특성에 맞게 필요한 부분만 재렌더링된다. 필요한 부분에서만 데이터를 불러올 수 있기 때문에 속도 개선에 도움이.. 2024. 4. 19. 이전 1 2 3 4 다음
