전체 글148 [Javascript] DOMContentLoaded와 onload DOM (Document Object Model)HTML내 원하는 위치에 접근하기 위한 하나의 방식, W3C의 표준문서 객체 모델(DOM)은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.**Dom Tree:**브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델 DOMContentLoaded 이벤트란?돔트리 분석이 끝나면 발생즉, 돔트리가 다 만들어진 후에 돔에 접근이 가능하기때문에, 돔이 생성되기전 돔을 조작하는 자바스크립트 코드가 실행되어 원하지 않는 결과를 내는것을 막을 수 있다.document.addEventListener("DOMContentLoaded", ()=> { console.log("원하는 코드 적기")});lo.. 2025. 4. 1. [JavaScript] window function Window 객체는 웹 브라우저의 창을 나타내는 객체.브라우저 창 안에 존재하는 모든 요소의 최상위 객체로서, 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 Window 객체의 프로퍼티.Window 객체의 메소드는 전역 함수이며, Window 객체의 프로퍼티는 전역 변수.HTMl / JavaScript 부분에서 export / import를 쓸 수는 없음(기본적으로는 안 됨)순수 JS 환경에서는 window에 올려야 전역 접근 가능 ,왜냐면 export / import는 모듈 시스템(ESM) 또는 번들러(Vite, Webpack) 가 있을 때만 작동해.window.translateNames= function(elementId, value){ return value} 2025. 4. 1. [Ubuntu] htop 을 이용한 하드웨어 사용량 모니터링 htop 설치하기터미널에서 apt 명령어로 htop 을 설치한다.```sudo apt-get install htop``` htop 실행하기터미널에서 htop 을 실행한다.```htop```터미널에서 htop 을 실행하면 다양한 시스템 상태, 정보, 성능을 볼 수 있다.상단에 CPU Core 의 실시간 점유율, 메모리 사용량이 있다.하단에 실행중인 프로세스 별, CPU 점유율, 우선순위, 메모리 사용량 등이 표시된다.F1~F10 키로 설정을 변경하거나, 프로세스 실행을 변경할 수 있다 2025. 3. 26. UBUNTU Screen Capture 분투에서 딱히 프로그램설치 하지않아도 스크린 캡처가 가능한데 나는 맥이랑 키보드가 달라서 상당히 불편해서 맥이랑 같이 단축키를 설정했따. 가서 “영역 스크린샷 클립보드로 복사” 에서 지정하고자 하는 캡처 단축키를 눌러주면 바로 설정된다. 2025. 3. 26. [React] Bundle 최근 CRA가 종료되어서 CRA 였던 프로젝트들을 Vite로 묶어가는 과정중에 있다. 그러다보니 Bundle이라는 부분에 대해 명확하게 알고 있어야 기존의 프로젝트 속성 그리고 다른 OS환경과의 연동관의 문제점을 발견해야했다.번들은 React 자체 기능은 아니고, React 앱을 웹에서 실행 가능하게 묶어주는 과정이다.💡 React에서 "번들(bundle)"이란?여러 개의 JavaScript, CSS, 이미지 파일 등을👉 하나(또는 몇 개)의 최종 실행 가능한 파일로 묶는 작업예를 들어 React 앱에 다음처럼 다양한 파일이 있다면:1234567src/├── App.tsx├── List.tsx├── styles.css├── utils.ts cs".. 2025. 3. 26. Typescript – 동기 / 비동기 단일 스레드로 동작하는 자바 스크립트Thread는 CPU가 프로그램을 동작시키는 최소 단위. 운영체제에서 프로그램이 실행되고 있는 상태를 프로세스라고함. 프로세스는 한개의 주 스레드와 여러개의 작업 스레드를 동작시킴.자바 스크립트 코드는 항상 한개의 작섭스레드에 실행되며 웹 브라우저나 Node.js에서 프로그램 자체에서 다중 스레드를 지원하지만 자바스크립트는 단일 스레드에서 동작.동기 / 비동기동기(synchronous)란, 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식을 의미한다. 즉, 작업이 완료될 때까지 다음 코드의 실행을 멈추고 기다리는 것이다. 이러한 방식은 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다.비동기(asynchronous)란, 어떤 작업을 실행.. 2025. 3. 21. React 프로젝트 구조와 폴더 설명 React는 효율적인 UI 개발을 지원하는 강력한 라이브러리입니다. React 프로젝트를 체계적으로 관리하기 위해 적절한 폴더 구조를 설계하는 것은 매우 중요합니다. 이번 글에서는 React 프로젝트의 기본 구조와 주요 폴더의 역할에 대해 자세히 알아보겠습니다.프로젝트 기본 구조React 프로젝트의 기본 폴더 구조는 다음과 같습니다:java코드 복사react-project/│├── build/├── node_modules/├── public/├── src/│ ├── components/│ ├── containers/│ ├── pages/│ ├── store/├── package.json1. build/npm run build 명령어를 실행하면 생성되는 배포 폴더입니다. 이 폴더는 브라우저에.. 2025. 3. 21. [WEB] HTTPS WEB 응답코드 WEB 응답코드 웹서비스에서 반환되는 상태 코드는 HTTP STATUS CODE라고 불리우며, 대표적인 상태 코드로는 "404 Not Found"가 있습니다. 상태 코드는 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1에서 5까지 제공됩니다. 첫번째 자리가 4와 5인 경우는 정상적인 상황이 아니기 때문에 사이트 관리자가 즉시 알아야 하는 정보입니다. 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다. 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했.. 2023. 7. 24. [AWS]CloudTrail CloudTrail AWS CloudTrail 이란? AWS 계정에서 AWS Service가 수행하는 작업들은 CloudTrail에 이벤트로 기록됩니다. 이 때 이벤트는 AWS Management Console, AWS CLI, AWS SDK, API에서 수행하는 모든 작업들을 말한다. AWS CloudTrail을 사용해 AWS 인프라 전반에 걸친 계정활동을 확인, 검색, 다운로드, 보관, 응답할 수 있다. 따라서 AWS 계정 활동에 대한 CloudTrail을 통한 가시성 확보는 보안 및 운영에서 매우 중요하다. CloudTrail 작동 방식 CloudTrail은 생성 시 AWS 계정에서 활성화된다. AWS 계정에서 이루어진 활동이 CloudTrail 이벤트에 기록되고, AWS Console의 Event.. 2023. 7. 15. [AWS] AWS Solutions Architect — Associate certificate Study — 공식 문서 정리 Part3 - 보안 보안 프로세스의 개요 AWS 인프라 보안 물리적 및 환경적 보안 : AWS 직원의 데이터 센터에 대한 물리적인 접근은 모두 기록되며 정기적으로 감사를 받으며, 여러 안전 대책에 의해 데이터 센터가 안전하게 보호됨. 연속성 관리: 모든 데이터 센터는 온라인으로 고객에게 서비스를 제공하며, 어떤 데이터 센터도 “정지(cold)”되지 않음. 또한 전 세계에 데이터 센터가 분산되어 있어 높은 가용성을 가진다. 보안 네트워크 아키텍처: AWS는 DDOS, MITM, IP Spoofing, 포트 스캐닝 , 패킷 스니핑 등의 공격 방어를 위해 강력한 보안 결함 차단 방식을 지원. AWS 계정 보안 기능 AWS IAM : AWS 계정 내에서 여러 사용자를 생성하고, 이러한 사용자 각각의 권한을 관리 , 임시 보안 자격.. 2023. 7. 15. [AWS] AWS Solutions Architect — Associate certificate Study — 공식 문서 정리 Part3 - 보안 보안 프로세스의 개요 AWS 인프라 보안 물리적 및 환경적 보안 : AWS 직원의 데이터 센터에 대한 물리적인 접근은 모두 기록되며 정기적으로 감사를 받으며, 여러 안전 대책에 의해 데이터 센터가 안전하게 보호됨. 연속성 관리: 모든 데이터 센터는 온라인으로 고객에게 서비스를 제공하며, 어떤 데이터 센터도 “정지(cold)”되지 않음. 또한 전 세계에 데이터 센터가 분산되어 있어 높은 가용성을 가진다. 보안 네트워크 아키텍처: AWS는 DDOS, MITM, IP Spoofing, 포트 스캐닝 , 패킷 스니핑 등의 공격 방어를 위해 강력한 보안 결함 차단 방식을 지원. AWS 계정 보안 기능 AWS IAM : AWS 계정 내에서 여러 사용자를 생성하고, 이러한 사용자 각각의 권한을 관리 , 임시 보안 자격.. 2023. 7. 15. [AWS] AWS Solutions Architect — Associate certificate Study — 공식 문서 정리 Part AWS ElastCache FAQ 클라우드 상에 메모리 기반으로 구성된 데이터 스토어 또는 캐시를 쉽게 운영할 수 있는 서비스 — In-Memory 방식 사용 Memcached 및 Redis와 호환되는 프로토콜이므로 기존 Memcached 또는 Redis 환경에서 현재 사용하는 코드, 애플리케이션 및 주요 도구를 Amazon ElastiCache에서 문제없이 사용할 수 있다. In-Memory : 방대한 양의 데이터를 하드디스크가 아닌 메모리에 보관, 실시간으로 분석하여 DB를 거치지 않고 즉시 얻을 수 있도록 함. 하드디스크에 비해 약 100배정도 속도 차이가 난다. AWS CloudFront Part 1 참조 Amazon Machine Image:AMI AMI란? 인스턴스를 시작할 때 필요한 정보를 .. 2023. 7. 15. 이전 1 2 3 4 ··· 13 다음
