CS겸 취준까지

개요 React DOM Client React DOM server Automatic batching Concurrent Feature 기타 변경 사항 ✅ React DOM Client 📦 createRoot 사용 React 18버전의 새로운 기능과 API를 사용하기 위해서는 기존에 render만을 사용해서 root를 생성하는 것이 아닌 createRoot를 사용해야 한다. before & after 더보기 before import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( , document.getElementById('root') ); after import React from "react"; import ReactDO..

[ React DOM Client ] react-dom/client에 새로운 API가 추가되었음 ▶ createRoot(domNode, options?) createRoot는 브라우저 DOM 노드 안에 React 컴포넌트를 표시하는 루트를 생성할 수 있음 'ReactDOM.render' 대신 사용하며, 리액트 18의 새로운 기능은 이것없이 동작하지 않음 import { createRoot } from 'react-dom/client'; const domNode = document.getElementById('root'); const root = createRoot(domNode); root.render(); 리액트는 domNode를 위해서 root를 만들것이고, 그 안에 있는 DOM을 관리 root를 만..

[ React ] ▶useId const id = useId() usdId는 클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있는 새로운 훅 이는 주로 고유한 'id'가 필요한 접근성 API와 사용되는 컴포넌트에 유용할 것으로 기대됨 고유 ID를 생성하려면 구성 요소의 최상위 수준에서 호출해야함 굳이 전역 변수를 증가시키는 것보다 useId를 권장하는 이유는 클라이언트 구성 요소가 hydration(수화)되는 순서가 서버 HTML이 생성된 순서와 일치하지 않을 수 있으므로 증가하는 카운터로 이를 보장하는 것은 매우 어려움 useId를 호출하면 하이드레이션이 작동하고 출력이 서버와 클라이언트 간에 일치하는지 확인할 수 있음 import { useId } fro..

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

[ Socket ] 소켓(Socket)은 TCP/IP 기반 네트워크 통신에서 데이터 송수신의 마지막 접점. 즉 네트워크 상에서 돌아가는 두 개의 프로그램 간 양방향 통신의 하나의 엔드 포인트 - 엔드포인트 아이피 주소와 포트 번호의 조합을 의미. 모든 TCP 연결은 2개의 엔드 포인트로 유일하게 식별되어질 수 있음 따라서 클라이언트와 서버 간 여러 개의 연결이 맺어질 수 있음 소켓은 클라이언트 소켓과 서버 소켓으로 구분되며, 소켓간 통신을 위해서는 네트워크상에서 클라이언트와 서버에 해당되는 컴퓨터를 식별하기 위한 IP주소와 해당 컴퓨터내에서 현재 통신에 사용되는 응용프로그램을 식별하기 위한 포트번호가 사용됨 소켓통신은 이러한 소켓을 통해 서버-클라이언트간 데이터를 주고받는 양방향 연결 지향성 통신을 말함..

[ JWT 사용하는 이유 ] ▶ Cookie 클라이언트가 웹 사이트에 접속할 때 그 사이트가 사용하게 되는 일련의 작은 기록 파일이라고 생각하면 됨 서버가 클라이언트에 정보를 전달할때 저장하고자 하는 정보를 응답 헤더(Cookie)에 저장하여 전달 Key-Value 형식의 문자열 형태로 저장됨 Set-Cookie에 던진 쿠키를 확인할 수 있음 쿠키는 로그인을 했을때 Set-Cookie의 형태로 반환을 받은 쿠키를 토대로 로그인이 필요한 요청을 할 때마다 받은 쿠키를 던져 요청을 하는 동작 구조를 가짐 로그인이 필요한 요청마다 ID와 PW를 보내야했다면 매우 번거로웠을태지만 이것을 쿠키로 대체한것 Cookie 단점 쿠키는 노출이 되었을 때 id, pw에 대한 민감 정보까지 다 노출이 되어 보안이 좋지 않음..

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

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

솔리드 원칙은 소프트웨어 디자인의 다섯 가지 기본 원칙 이 원칙들은 소프트웨어를 더 견고하고 유연하며 유지보수가 쉽도록 만드는 데 도움이 되는 지침을 제공 ▶ 단일 책임 원칙 (Single Responsibility Principle - SRP) 클래스는 단 하나의 책임만 가져야 함 이유와 장점 유지보수성 향상 각 클래스나 모듈이 하나의 책임만을 갖도록 설계하면 코드의 유지보수가 쉬워짐 특정 기능을 변경해야 할 때 해당 기능에 대한 코드만 이해하고 수정할 수 있음 코드의 가독성 증가 각 클래스 또는 모듈이 특정 책임에 집중하면 코드가 명확하고 가독성이 향상 다른 개발자들도 해당 코드를 이해하기 쉽게 되어 협업이 용이 재사용성 증가 단일 책임을 갖는 모듈은 다른 부분에서 쉽게 재사용 특정 기능이 변경되어도..

고차 컴포넌트 하나의 개발 패턴으로 컴포넌트를 인자로 받아서 새로운 컴포넌트로 변환해 반환하는 방식으로 인자로 넘긴 컴포넌트에게 추가되길 원하는 로직을 HOC에서 가지고 있다가 로직이 적용된 엘리멘트를 반환하게 된어 횡단 관심사 문제를 해결하는 역할을 한다. 횡단 관심사란? 대표적인 예시로 인증 & 인가 서비스, 로깅, 트랙젝션 처리, 에러처리 등등이 있으며 계층 분리를 통해서 기능을 분리한다고 하여도 중복된 코드가 생길 수 밖에 없는 경우가 있다 이러한 계층에 상관없이 공통적으로 필요한 관심사가 있는데 이것이 횡단 관심사이다. 즉 어플리케이션 전반에 공통적으로 필요한 문제를 횐단 관심사라고 부를 수 있다. // 이렇게 관심사 분리를 통해서 분리를 해도 공통적으로 필요한 로직이 있는 경우가 있다 언제 사..