728x90 반응형 전체 글107 [WEB] 2024 웹 생태계 정리(라이브러리, 프레임워크 기능별 분류) 개요2024년 React 생태계를 정리한 뒤, WEB 생태계 전반으로 범위를 확장하여 살펴보고자 한다.React를 사용하는 개발자로서, 널리 사용되는 기술과 최신 트렌드를 파악할 수 있는 좋은 기회라고 생각한다. 2024년 React 생태계 포스팅 바로가기https://sillimmouse.tistory.com/85 내용02 프레임워크 03 도서관 04 데이터 05 호스팅 06 지속적인 통합 07 마이크로 프런트엔드 08 패키지 관리자 09 자바스크립트 런타임 01 타입스크립트 02 브라우저 기술 03 프로그레시브 웹 앱 04 디자인 시스템 05 스타일링 도구 06 테스트 07 코드 관리 08 로코드/노코드 09 건축도구 10개의 운영 체제5장. 추세와 미래 01 인공지능 02 접근성 03 미래 트.. 2024. 11. 22. [CS] GB와 GiB: 기가바이트와 기비바이트의 차이점 GB, GiB 이란 무엇인가요?공통점두 접두사 모두 디지털 기기의 측정 단위 차이점GB : 전통적인 단위입니다,metric 1GB는 1,000³ 바이트에 해당하는 측정 스타일GiB : 바이너리 메서드를 사용한 컴퓨터 저장장치의 단위,1 GiB는 1024³ 바이트 에 해당하는 측정 스타일 GiB 사용하는 경우바이너리 메서드는 메모리 크기 즉, 컴퓨터의 저장장치의 용량을 말한다.GiB는 메모리나 저장장치의 용량을 보다 정확하게 계산하고 표기하는 데 활용한다.예시)컴퓨터의 RAM이나 SSD/HDD의 용량은 실제 데이터 저장 공간을 바이트 단위로 나열하는 방식이므로, 이진 접두사인 GiB, TiB 등을 사용해 용량을 표시하는 것이 보다 정확한 표현이 됩니다.GB vs GiB-왜 소문자 'i'인가요?기비바이트.. 2024. 11. 15. [Node.js] NPM, CDN 차이 NPM, CDN 차이npm(Node Package Manager):주로 Node.js 및 웹 개발에 사용되는 패키지 관리자입니다.프로젝트에 필요한 패키지(라이브러리, 도구 등)를 관리하고 설치하는 데 사용프로젝트에서 필요로 하는 라이브러리나 도구들을 npm을 통해 설치npm은 패키지 관리와 의존성 관리에 사용CDN(Content Delivery Network):정적 파일(예: JavaScript, CSS, 이미지 등)을 배포하고 제공하는 서비스전 세계에 분산된 서버로부터 파일을 제공하여 사용자에게 빠르고 안정적인 다운로드를 제공정적 파일을 제공하는데 사용됩니다. 웹 페이지에서 필요로 하는 JavaScript 라이브러리나 CSS 스타일시트 등을 CDN을 통해 불러 옴정적 파일을 배포하고 제공하는 데 사용 .. 2024. 11. 8. [Node.js] npm install - 패키지 종속성 유형 설치(dependencies, devDependencies) package.json프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보가 명시되는 파일 패키지 버전 정보실제로 어플리케이션 운용에 필요한 의존성 여부dependencies: 실제 런타임에서 사용되는 패키지devDependencies: 개발 모드일 때만 의존하고 있는 패키지{ "dependencies": { "dayjs": "1.11.1" }, "devDependencies": { "@types/node": "17.0.25" }} npm install$ npm install 플래그 효과 package.json 에 포함된 의존성 패키지들이 일괄적으로 설치-P패키지를 설치하고 프로젝트의 dependencies 목록에 추가한다.—save-prod패키지를 설치하고 프로젝트의 depen.. 2024. 11. 8. [Git] Git submodule CLI 배경 다른 프로젝트의 기능을 앱에 추가하는 방법으로 모노레포 방식을 사용할 수 있지만, 각 프로젝트를 독립적으로 관리해야 하는 경우에는 적합하지 않다.Git Submodule은 메인 프로젝트에서 외부 링크 형태로 서브 프로젝트를 연결해 두었다가, 필요할 때 최신 변경 사항을 가져와 작업한다.이 방식은 서브 프로젝트의 별도 사본을 만들지 않으며, 원래 저장소의 최신 상태를 유지하면서 개발을 진행할 수 있게 해줍니다. 서브 프로젝트는 독립적으로 버전 관리를 유지하면서도, 메인 프로젝트와 쉽게 통합할 수 있습니다. 노드 프로젝트 submodule 내부 구조main-project/├ src/└ submodules/ # 서브모듈들을 모아두는 디렉토리 ├── my-submodule/ .. 2024. 9. 27. [Window] 윈도우 10 단축키 완벽 정리 개요효율적으로 윈도우를 사용하기 위해, window 에서 자주 사용하는 단축키를 알아보자 가장 많이 사용하는 TOP 10 Ctrl + C : 선택한 항목 복사Ctrl + V : 선택한 항목 붙여 넣기Ctrl + X : 선택한 항목 잘라내기Ctrl + Z : 작업 실행 취소Ctrl + A : 모든 항목 선택Alt + Tab : 열려 있는 앱 전환Alt + F4 : 활성 항목 종료 (앱 또는 창 닫기)윈도우 키 + D : 바탕 화면 숨기기 또는 표시윈도우 키 + L : 로그인 화면으로 이동 (컴퓨터 잠금)Ctrl + F : 문서나 웹 페이지에서 찾기 단축키 상세기본 단축키Ctrl + X : 선택한 항목 잘라내기Ctrl + C (또는 Ctrl + Insert) : 선택한 항목 복사Ctrl + V (또는 S.. 2024. 9. 27. [Docker] Node.js - How to use this image? Node.js란 무엇인가요?Node.js는 확장 가능한 서버 측 및 네트워킹 애플리케이션을 위한 소프트웨어 플랫폼입니다. Node.js 애플리케이션은 JavaScript로 작성되며 변경 없이 Mac OS X, Windows 및 Linux에서 Node.js 런타임 내에서 실행할 수 있습니다.Node.js 애플리케이션은 비차단 I/O 및 비동기 이벤트를 사용하여 처리량과 효율성을 극대화하도록 설계되었습니다. Node.js 애플리케이션은 단일 스레드로 실행되지만 Node.js는 파일 및 네트워크 이벤트에 여러 스레드를 사용합니다. Node.js는 비동기적 특성으로 인해 실시간 애플리케이션에 일반적으로 사용됩니다.Node.js는 내부적으로 Google V8 JavaScript 엔진을 사용하여 코드를 실행합니다.. 2024. 9. 26. [WEB] 웹페이지 접근성 높히는 방법, 인클루시브 디자인(inclusive design) 이란? 개요디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자 인클루시브 디자인 (Inclusive Design) 이란?다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인.. 2024. 9. 26. react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 오류 메시지react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 원인value로 받는 타입과 리턴으로 받는 타입이 일치하지 않아서 발생하는 메시지이다.정해진 타입으로 받을 수 있도록 코드를 수정해야 한다.해당 코드const value: string;onChange: (_e: React.ChangeEvent) => void;const handleChange = () => { if (maxLength) { if (value.length > maxLen.. 2024. 9. 19. 이전 1 2 3 4 ··· 12 다음 728x90 반응형
