개발일지 🖥️

https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj Feature-Sliced Design: The Best Frontend ArchitectureIntroduction Frontend developers often face a problem related to application architecture....dev.to 소개프론트엔드 개발자들은 종종 애플리케이션 아키텍처와 관련된 문제에 직면합니다. 이러한 문제는 손쉽게 확장 가능하고 애플리케이션 모듈간 느슨한 결합과 높은 응집도를 제공할 수 있는 아키텍쳐를 요구합니다.이 글에서는 Feature-Sliced Design(FSD) 아키텍쳐에 대해서 다룹니다. F..

Context : 부모 컴포넌트가 트리 아래에 있는 모든 컴포넌트에 깊이에 상관없이 정보를 명시적으로 props를 통해 전달하지 않고도 사용할 수 있게 해줍니다.  Context를 사용하는 이유가 무엇일까요? Context를 사용하는 이유는 'Props Drilling' 문제를 해결하기 위해서입니다. Props Drilling 문제는 리액트 컴포넌트 계층 구조에서 컴포넌트 간에 값을 전달할 때 발생합니다. Props는 컴포넌트 트리에서 언제나 부모에서 자식으로 단방향으로 전달됩니다. 리액트에서는 자식의 자식, 즉 트리에서 2단계 이상 떨어져 있는 컴포넌트에 직접 데이터를 전달하는 것이 불가능합니다. 컴포넌트 간에 데이터를 전달하기 위해 Props를 사용하는 방식은 Props를 트리를 통해 깊이 전달해줘야..

forwardRef : 부모 컴포넌트에서 자녀 컴포넌트로 ref를 전달할 때 사용하는 기법 부모 컴포넌트가 자녀 컴포넌트의 DOM 요소에 접근할 때 사용할 수 있습니다. // App.jsimport React, { useRef } from "react";function App() { const inputRef = useRef(); const focus = () => { inputRef.current.focus(); }; return ( 포커스 );}export default App;위의 코드는 ref를 하나 생성하고, 만든 ref를 input 태그 안에 ref 속성으로 넣어주면 ref는 input의 돔 노드를 참조하게 됩니다.그리고 버튼이 클릭될 때마다 f..

JSX ( JavaScript XML ) : JavaScript 문법 확장자 JavaScript 내에서 HTML과 유사한 구문을 사용하여 UI 컴포넌트를 정의할 수 있게 해주는 React의 확장 문법이다.JSX는 브라우저에서 직접 실행되지 않는다. JSX는 선택 사항이지만 대부분의 React 프로젝트는 편의성을 위해 JSX를 사용한다.로컬 개발에 권장하는 모든 도구는 JSX를 기본으로 지원한다. JSX는 HTML보다 엄격하다. 같은 태그를 반드시 닫아야 한다. 또한, 컴포넌트는 여러 개의 JSX 태그를 반환할 수 없다. 반드시 ... 나 빈 ... wrapper 같은 공통된 부모 요소로 감싸야 한다. function AboutPage() { return ( About Hell..

리액트 앱은 여러 개의 컴포넌트로 구성된다.컴포넌트란 UI ( 사용자 인터페이스 ) 의 한 부분으로, 자체적인 로직과 외관을 가지고 있다.컴포넌트는 버튼처럼 작을 수도 있고, 전체 페이지처럼 크게 만들 수도 있다. 리액트 컴포넌트는 마크업을 반환하는 자바스크립트 함수이다. function MyButton() { return ( I'm a button );} MyButton을 선언했으므로, 다른 컴포넌트 안에 중첩 시킬 수 있다.export default function MyApp() { return ( Welcome to my app );}  이 대문자로 시작하는 것을 주목해보자. 이것이 리액트 컴포넌..

React : The library for web and native user interfaces 리액트는 웹과 네이티브 사용자 인터페이스를 위한 라이브러리이다.  주요 특징컴포넌트 기반 아키텍쳐 : 리액트에서는 UI를 독립적이고 재사용 가능한 컴포넌트들로 나눈다. 각 컴포넌트는 자신의 상태와 로직을 가지고 있어 코드의 재사용성과 관리가 용이하다.Virtual DOM : 리액트는 실제 DOM 조작을 최소화하기 위해 가상 DOM 을 사용한다. 변경 사항이 발생하면 리액트는 가상 DOM에서 차이를 계산하여 필요한 부분만 실제 DOM에 적용한다. 이를 통해 성능이 크게 향상된다.단방향 데이터 흐름 : 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐른다. 이는 데이터의 추적과 디버깅을 쉽게 만들어 준다.JSX :..