CS겸 취준까지

1. 디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여, 해결 할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것을 의미한다. 2. 싱글톤 패턴(singleton pattern)이란? 싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는데 쓰이며, 보통 데이터베이스 연결 모듈에 많이 사용된다. class Singleton { static instance; constructor() { if (Singleton.instance) { return Singlet..

브라우저 렌더링 원리를 알아야 하는 이유 C는 직접 운영 체제에서 실행되고, Java는 가상 머신 위에서 실행된다. C는 컴파일 언어로, 소스코드가 기계어로 변환된 후 실행된다. Java는 소스코드가 바이트코드로 컴파일되어 JVM에서 해석 및 실행된다. 반면 JavaScript는 웹 브라우저에서 실행된다. (물론 Node.js를 통해 서버 사이드에서도 실행될 수 있다.) JavaScript를 클라이언트 사이드에서 사용할 경우 웹 브라우저에서 HTML, CSS, JavaScript가 실행되므로 브라우저 렌더링 원리를 이해하는 것은 중요하다. 더보기 -(JVM이란?) JVM은 하드웨어와 운영 체제 사이의 추상화 레이어로 작동하는 소프트웨어이다. 보통 자바 개발 키트(JDK)에 포함되어 컴퓨터에 설치된다. -..

개요 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에서 사용한던 것보다 편리하..