본문 바로가기

전체 글282

CPU, 메모리 개념 [ CPU ]CPU는 각종 연산을 수행하고 기억장치에 기억되어 있는 명령어들을 수행하는 컴퓨터 시스템을 이루는 핵심 부품즉, CPU는 컴퓨터의 두뇌로 메모리에 저장된 명령어를 읽어 들이고, 읽어 들인 명령어를 해석하고 실행하는 부품 ▶ CPU 구조내부 구성은 크게 산술/논리 연상 장치(ALU), 제어 장치와 레지스터로 구성되어 있음 산술논리 장치(Arithmetic Logic Unit, ALU)쉽게 말해 계산기로 가산기, 보수기, 누산기, 기억레지스터, 데이터 레지스터 등으로 구성캐시나 메모리로 부터 읽어 온 데이터는 레지스터에 저장숫자의 산술연산과 배타적 논리합, 논리곱 같은 논리연산을 계산을 담당하는 장치배타적 논리합 - true 연산, 배타적 논리곱 - and 연산레지스터(Register)CPU가 .. 2024. 3. 2.
React v18 - 2 [ 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를 만.. 2024. 2. 24.
React v18 - 1 [ React ] ▶useId const id = useId() usdId는 클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있는 새로운 훅 이는 주로 고유한 'id'가 필요한 접근성 API와 사용되는 컴포넌트에 유용할 것으로 기대됨 고유 ID를 생성하려면 구성 요소의 최상위 수준에서 호출해야함 굳이 전역 변수를 증가시키는 것보다 useId를 권장하는 이유는 클라이언트 구성 요소가 hydration(수화)되는 순서가 서버 HTML이 생성된 순서와 일치하지 않을 수 있으므로 증가하는 카운터로 이를 보장하는 것은 매우 어려움 useId를 호출하면 하이드레이션이 작동하고 출력이 서버와 클라이언트 간에 일치하는지 확인할 수 있음 import { useId } fro.. 2024. 2. 16.
Socket [ Socket ] 소켓(Socket)은 TCP/IP 기반 네트워크 통신에서 데이터 송수신의 마지막 접점. 즉 네트워크 상에서 돌아가는 두 개의 프로그램 간 양방향 통신의 하나의 엔드 포인트 - 엔드포인트 아이피 주소와 포트 번호의 조합을 의미. 모든 TCP 연결은 2개의 엔드 포인트로 유일하게 식별되어질 수 있음 따라서 클라이언트와 서버 간 여러 개의 연결이 맺어질 수 있음 소켓은 클라이언트 소켓과 서버 소켓으로 구분되며, 소켓간 통신을 위해서는 네트워크상에서 클라이언트와 서버에 해당되는 컴퓨터를 식별하기 위한 IP주소와 해당 컴퓨터내에서 현재 통신에 사용되는 응용프로그램을 식별하기 위한 포트번호가 사용됨 소켓통신은 이러한 소켓을 통해 서버-클라이언트간 데이터를 주고받는 양방향 연결 지향성 통신을 말함.. 2024. 2. 4.
JWT [ JWT 사용하는 이유 ] ▶ Cookie 클라이언트가 웹 사이트에 접속할 때 그 사이트가 사용하게 되는 일련의 작은 기록 파일이라고 생각하면 됨 서버가 클라이언트에 정보를 전달할때 저장하고자 하는 정보를 응답 헤더(Cookie)에 저장하여 전달 Key-Value 형식의 문자열 형태로 저장됨 쿠키는 로그인을 했을때 Set-Cookie의 형태로 반환을 받은 쿠키를 토대로 로그인이 필요한 요청을 할 때마다 받은 쿠키를 던져 요청을 하는 동작 구조를 가짐 로그인이 필요한 요청마다 ID와 PW를 보내야했다면 매우 번거로웠을태지만 이것을 쿠키로 대체한것 Cookie 단점 쿠키는 노출이 되었을 때 id, pw에 대한 민감 정보까지 다 노출이 되어 보안이 좋지 않음 조작당해서 들어올 가능성이 있음 웹 브라우저마다 .. 2024. 2. 4.
솔리드 원칙 솔리드 원칙은 소프트웨어 디자인의 다섯 가지 기본 원칙 이 원칙들은 소프트웨어를 더 견고하고 유연하며 유지보수가 쉽도록 만드는 데 도움이 되는 지침을 제공 ▶ 단일 책임 원칙 (Single Responsibility Principle - SRP) 클래스는 단 하나의 책임만 가져야 함 이유와 장점 유지보수성 향상 각 클래스나 모듈이 하나의 책임만을 갖도록 설계하면 코드의 유지보수가 쉬워짐 특정 기능을 변경해야 할 때 해당 기능에 대한 코드만 이해하고 수정할 수 있음 코드의 가독성 증가 각 클래스 또는 모듈이 특정 책임에 집중하면 코드가 명확하고 가독성이 향상 다른 개발자들도 해당 코드를 이해하기 쉽게 되어 협업이 용이 재사용성 증가 단일 책임을 갖는 모듈은 다른 부분에서 쉽게 재사용 특정 기능이 변경되어도.. 2024. 1. 20.
CSS vs CSS-in-CSS vs CSS-in-JS [ CSS ] CSS는 지금까지 사용하면서 명확한 단점이 존재했음 모듈화가 어려움 클래스 이름의 최소화 문제(방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯함) CSS의 우선순위를 파악하기 어려움 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해졌지만 아직 불편한 점이 많이 있음 [ CSS-in-CSS ] Pre-/Post-processors (CSS 전처리기) CSS Frameworks CSS Modules ▶ Pre-/Post-processors 흔히들 알고 있는 CSS 전처리기를 의미 자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램 CSS가 변수와 중첩을 제공하기 이전부터, 전처리기를 통해 변.. 2024. 1. 12.
CSS in JS [ CSS in JS ] CSS스타일을 추상화한 JS객체 대신, CSS스타일 문법을 그대로 사용하여 스타일 컴포넌트로 사용할 수 있는 것 현재 사용 중인 스타일만 DOM에 포함 JS와 CSS 사이의 상수 및 함수를 교환할 수 있음 Global namespace로 클래스명을 다르게 짓기 위한 고충을 피할 수 있음 미사용 코드를 검출 가능 CSS 로드 우선 순위 이슈를 해결할 수 있음 [ styled-components ] 손쉬운 유지보수(컴포넌트에 영향을 미치는 스타일을 찾기 위해 여러 파일을 검색할 필요 x) 고유한 CSS 클래스 생성 - 스타일 컴포넌트를 추척해서 css 로 작성된 `` 스타일을 고유한 css 클래스 이름으로 변경 스타일 컴포넌트에 의해 자동 생성된 고유 CSS 클래스 이름은 sc-접두.. 2024. 1. 12.
Context API 개발을 하다보면 전역상태로 관리할 상태가 많지 않을때 전역상태라이브러리를 쓰는 것보다는 ContextApi를 사용하는 것이 낫지 않을까라는 생각이 들기에 이번에 ContextApi를 파보기로 함 [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할수 있게 해주는 기능 주로 전역적(global)으로 필요한 값을 다룰 때 사용하며 꼭 전역적일 필요는 없음 따라서 리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이라고 접근하는 것이 좋음 Props로만 데이터를 전달하게 되면 깊숙히 위치한 컴포넌트에 데이터를 전달해야할 경우 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 해 불편하고 가독성이 떨어지고 비효율적이며 실수할 가능성이 높아짐(Pr.. 2024. 1. 1.

티스토리툴바