고래강이네 고래강이네

구버전

• [React] 18버전의 추가된 새로운 기능 (step- 1)

  구버전/React 2024. 2. 17. 19:59

  📋 개요 useId startTransition, useTransition useDefferedValue useInesrtoinEffect ✅ useId 최상위 수준에서 호출되어 고유 ID를 생성하는 React Hook으로, 접근성 속성에 전달될 수 있다. key 는 데이터 식별을 위해 사용되므로 데이터에서 생성되는 것이 더 바람직하며, 너무 많은 호출이 일어나기 때문이다. 📦 사용하는 이유) 하드코딩의 횟수를 줄이자 컴포넌트를 여러번 사용하더라도 id 속성이 겹치지 않는다. 더보기 예시) 사용자의 이름 정보를 받기 위해 input을 컴포넌트로 받아서 id값을 name이라고 하였다. 이때 이 컴포넌트를 반복해서 사용하게 된다면 id가 name인 input이 여러 개 생기게 되는데 이는 좋은 상황이 아니다..

  Read More
• [CS Study] 브라우저 랜더링 과정

  구버전/CS Study 2024. 2. 14. 22:39

  개요 1. WHY? 2. 브라우저 랜더링 과정 3. Reflow / Repaint 4. CRP ✅ why? 📦 내가 느끼는 브라우저 랜더링이 중요한 이유 대부분의 프로그래밍 언어는 운영체제 또는 가상머신에서 실행되지만 자바스크립트의 경우 클라이언트에서 실행되기에 랜더링 과정을 통해서 어떻게 실행되는지 파악해야한다.(Node.js에서 실행시에는 다름) 브라우저에서 HTML, CSS, JS는 함께 실행된다. 화면이 그려지는 원리에 대해 파악함으로써 어느 부분에서 문제가 일어났는지 예측할 수 있고 이를 토대로 효율적이고 의도에 맞게 코드를 작성할 수 있다. 사용자 경험을 향상시키기 위한 성능 최적화 시에 어떤 부분을 얼마만큼 최적화 시켰는지 최적화 시킬 수 있는 요소는 어떤 것이 있는지 알 수 있다. 클라이언..

  Read More
• [CS Study] 디자인 패턴

  구버전/CS Study 2024. 2. 4. 12:32

  정의 소프트웨어를 개발하는 과정의 반복되는 일반적인 문제들에 대해 기준이 되는 해결책을 제공하는 중요한 개념으로 소프트웨어의 특정 구현을 직접 제공하지는 않지만, 반복되는 문제 상황들을 최적화된 방법으로 해결하도록 돕는 컨셉들이다. ⚠️ 주의사항 모든 문제에 대해서 적용할 수 있는 묘책이 아니다. 억지로 적용하려고 하면 안된다. 과도하게 고민하지마라. 올바른 방식으로 사용하고 있는지에 대해서 고민해라. Hooks 패턴 전통적인 디자인 패턴들이 Hooks로 다수 교체될 수 있게 됨에 따라서 생명주기와 관련된 메서드를 사용하지 않게 되었다. Hooks가 디자인 패턴이 아닐 순 있지만 React에서 중요한 역할을 한다. state, effect, 기타 커스텀 훅을 통해서 class에서 사용한던 것보다 편리하..

  Read More
• [CS Study] 프레임워크와 라이브러리

  구버전/CS Study 2024. 1. 26. 18:40

  프레임워크 개발자가 소프트웨어를 개발함에 있어 코드를 구현하는 시간을 줄이고 재사용성을 증가시키기위한 일련의 클래스 묶음이나 뼈대, 기반구조라 불리며 제어의 역전 개념이 적용된 대표적 기술이다. 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합이다. 특징 개발할 수 있는 범위가 정해져 있고 개발자는 이러한 따라야하는 가이드를 제공 받는다. 프레임워크는 다양한 도구 및 플러그인을 제공한다. 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있어 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의한다. 컴포넌트의 재사용이 가능하며 높은 수준에서 패턴들을 조작화할 수 있다. 예시 Django, Ruby, React Native, Flutter, A..

  Read More