글

9월, 2023의 게시물 표시

MAC (Media Access Control) 주소

MAC (Media Access Control) 주소는 네트워크 장치들이 통신을 할 때 해당 장치를 구분하기 위한 고유의 주소입니다. MAC 주소는 보안 정보라기보다는 장치의 고유 식별자로 볼 수 있습니다. 그러나 MAC 주소는 다음과 같은 이유로 보안 측면에서 중요할 수 있습니다: 1. **트래픽 분석 및 추적**: MAC 주소가 알려지면, 공격자가 네트워크 내에서 해당 장치의 통신을 추적하거나 분석하는 데 사용될 수 있습니다. 2. **MAC 필터링 우회**: 많은 무선 네트워크에서는 MAC 필터링을 사용하여 특정 장치만 네트워크에 접근할 수 있게 제한합니다. 만약 공격자가 허용된 장치의 MAC 주소를 알면, 그 주소를 스푸핑하여 네트워크에 접근을 시도할 수 있습니다. 3. **장치 식별 및 위치 추적**: MAC 주소는 장치의 유형이나 제조사에 대한 정보를 포함할 수 있습니다. 이를 통해 공격자는 특정 유형의 장치를 대상으로 한 공격을 수행하거나 장치의 위치를 추적하는 데 활용할 수 있습니다. 4. **네트워크 망 분리**: 일부 고급 네트워크 설정에서는 MAC 주소를 기반으로 다른 네트워크 세그먼트와의 통신을 허용하거나 제한합니다. 잘못된 설정이나 MAC 주소의 노출은 네트워크의 망 분리 기능을 약화시킬 수 있습니다. 그렇지만, MAC 주소 자체만으로는 직접적인 공격을 수행하기는 어렵습니다. 다만, 공격자가 다른 정보와 결합하여 활용할 경우 보안 위협이 될 수 있습니다. 따라서 MAC 주소는 공개적으로 공유되지 않도록 주의하는 것이 좋습니다. MAC 주소는 전 세계에서 각 네트워크 인터페이스 카드 (NIC)에 고유하게 할당됩니다. MAC 주소는 일반적으로 48비트로 구성되며, "xx:xx:xx:xx:xx:xx"와 같은 형식으로 표현됩니다. 여기서 각 'xx'는 16진수로 된 두 자리 숫자입니다. MAC 주소의 할당 방법은 다음과 같습니다: 1. **OUI (Organiza...
댓글 쓰기
Read more »

react useRef

useRef는 프로그래밍에서의 "포인터" 개념과 유사한 방식으로 동작합니다. 다른 언어에서의 포인터는 메모리의 특정 주소를 가리키는데, JavaScript와 React에서의 useRef는 특정 DOM 요소나 변수를 "가리키는" 역할을 합니다. 즉, useRef를 사용하면: 특정 DOM 요소에 직접 접근할 수 있습니다. 렌더링 사이에서 변하지 않는 값을 저장하고 유지할 수 있습니다. 이를 통해 우리는 특정 요소나 값에 "포인터"처럼 직접 접근하고 작업을 수행할 수 있습니다. `useRef`는 React에서 특정 요소(예: 버튼, 입력란)를 "가리키고" 관리하려 할 때 사용합니다. "가리킨다"는 말은 그 요소에 대한 참조를 갖는다는 의미입니다. `useRef`를 사용하면: 1. 특정 요소에 직접 접근할 수 있습니다. (예: 입력란에 자동으로 커서를 위치시키기) 2. 값이 바뀌더라도 컴포넌트가 다시 그려지지 않도록 값을 저장할 수 있습니다. 간단한 예시로, 웹 페이지에 버튼이 있고, 버튼을 누르면 텍스트 입력란에 자동으로 커서를 위치시키고 싶다고 가정해봅시다. 이 작업을 위해서 `useRef`를 사용하여 입력란을 "가리킵니다". 그리고 버튼을 눌렀을 때, 그 "가리킨" 입력란에 커서를 위치시킵니다. ```html import React, { useRef } from 'react'; function MyApp() { // 입력란을 가리키기 위한 참조를 생성합니다. const myInput = useRef(); // 버튼을 누르면 입력란에 커서를 위치시킵니다. const handleClick = () => { myInput.current.focus(); }; return ( <div> <i...
댓글 쓰기
Read more »

html 하위 요소의 하위 요소... 접근하기

하위 요소의 하위 요소에 접근하려면, 연속적으로 `querySelector`나 `querySelectorAll`을 사용하면 됩니다. CSS 선택자 문법을 활용하면 다양한 방식으로 요소를 선택할 수 있습니다. 예를 들어, 아래와 같은 구조의 HTML이 있다고 가정합니다: ```html <div id="parent"> <div class="child"> <span class="grandchild">Text</span> </div> </div> ``` 1. **직접 CSS 선택자로 접근**: 직접적으로 `#parent .child .grandchild`와 같은 CSS 선택자를 사용해 원하는 요소에 접근할 수 있습니다. ```javascript let grandchild = document.querySelector("#parent .child .grandchild"); ``` 2. **단계적으로 접근**: 단계적으로 각 요소를 찾아 나갈 수도 있습니다. ```javascript let parent = document.getElementById("parent"); let child = parent.querySelector(".child"); let grandchild = child.querySelector(".grandchild"); ``` 이렇게 원하는 하위 요소에 접근하는 방법은 여러 가지가 있으며, 상황에 따라 적절한 방법을 선택하면 됩니다.
댓글 쓰기
Read more »

react className 여러개

원래 HTML에서 `class` 속성은 공백으로 구분된 여러 개의 클래스 이름을 가질 수 있습니다. 예를 들면: ```html ... ``` React의 `className`도 마찬가지로 여러 개의 클래스 이름을 가질 수 있습니다. 위에서 제시한 방법은 React에서 여러 개의 클래스 이름을 가진 문자열을 생성하는 방법입니다. 예제로, `styles.diary_page`가 `"diary_page"`이고, `className`이 `"another_class"`라고 가정해봅시다. 이 두 클래스 이름을 합치기 위해 문자열 연결을 사용하여 최종적으로 `"diary_page another_class"`와 같은 형태의 문자열을 만들어야 합니다. 이렇게 만든 문자열을 `className`에 전달하면 React는 해당 요소에 두 클래스 이름을 모두 적용합니다. `className`을 여러 개 설정하려면 문자열을 결합해야 합니다. 지금 작성하신 방식은 JavaScript의 쉼표 연산자를 사용한 것으로, 이는 첫 번째 표현식 (`styles.diary_page`)을 평가하고 그 결과를 무시한 후 두 번째 표현식 (`className`)의 결과를 반환합니다. 따라서, `className`에 두 개 이상의 스타일을 적용하려면 문자열을 결합해야 합니다. 문자열 템플릿이나 `+` 연산자를 사용하여 결합할 수 있습니다. 예시: 1. **문자열 템플릿을 사용하는 방법**: ```jsx className={`${styles.diary_page} ${className}`} ``` 2. **`+` 연산자를 사용하는 방법**: ```jsx className={styles.diary_page + " " + className} ``` 두 번째 방법은 조금 더 전통적인 방법입니다. 하지만 문자열 템플릿 (첫 번째 방법)은 E...
댓글 쓰기
Read more »

react google font 사용

구글 폰트를 웹사이트나 React 프로젝트에 적용하려면 몇 가지 단계를 따라야 합니다. 아래는 구글 폰트를 사용하는 방법에 대한 기본 지침입니다. 1. **구글 폰트 웹사이트 방문**: [Google Fonts](https://fonts.google.com/) 웹사이트에 접속하세요. 2. **폰트 선택**: 원하는 폰트를 검색하고 선택하세요. 3. **폰트 스타일 선택**: 폰트를 클릭하면 여러 스타일이 표시되며, 필요한 스타일을 선택합니다. 4. **Embed 링크 가져오기**: 선택한 폰트의 스타일을 모두 선택한 후, 오른쪽 패널의 "Embed" 섹션에서 `<link></link>` 태그를 복사합니다. 예시: ```html < link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"> ``` 5. **프로젝트에 적용**: - **HTML 프로젝트**에서는 `<head >` 섹션 내에 복사한 `<link ></link >` 태그를 붙여넣기 합니다. - **React 프로젝트**에서는 `public/index.html` 파일의 `<head>` 섹션에 복사한 `<link gt;</link>` 태그를 붙여넣기 합니다. 6. **CSS에서 폰트 사용**: 가져온 폰트를 CSS에서 사용하려면 `font-family` 속성을 적용하면 됩니다. 예시: ```css body { font-family: 'Roboto', sans-serif; } ``` 7. **오프라인 사용**: 오프라인에서도 폰트를 사용하려면...
댓글 쓰기
Read more »

package.json vs package-lock.json

`package.json`과 `package-lock.json` 두 파일 모두 npm을 사용하여 프로젝트의 의존성을 관리할 때 생성되고 사용되는 파일들입니다. 그러나 두 파일의 목적과 내용은 다르기 때문에 차이점을 이해하는 것이 중요합니다. 1. **package.json**: - **프로젝트 메타데이터**: 프로젝트의 이름, 버전, 설명, 스크립트, 라이센스 등의 기본 정보가 포함됩니다. - **의존성 목록**: 프로젝트에서 사용하는 외부 패키지들의 목록과 해당 패키지들의 "버전 범위"가 명시됩니다. 이 버전 범위는 `^`, `~`와 같은 특수 문자를 사용하여 표시되며, 이를 통해 특정 패키지의 어느 버전까지 허용할 것인지 결정합니다. - `npm install` 명령어를 사용하면 `package.json`에 명시된 의존성 버전 범위에 따라 패키지를 설치합니다. 2. **package-lock.json**: - **의존성 트리의 정확한 스냅샷**: 프로젝트의 모든 의존성과 해당 의존성의 **정확한 버전**, 그리고 그 의존성들이 의존하는 다른 패키지들에 대한 정보까지 포함합니다. - `package-lock.json`은 프로젝트의 의존성 트리를 "잠금"하여 동일한 의존성 구조가 항상 복원될 수 있도록 보장합니다. 이는 다양한 환경에서 일관된 설치를 보장하기 위한 목적으로 사용됩니다. - `npm install` 명령어가 실행될 때 `package-lock.json`이 있으면 이 파일에 기술된 정확한 버전의 패키지가 설치됩니다. 만약 이 파일이 없다면, `package.json`의 버전 범위에 따라 패키지가 설치되며, 이 과정에서 새로운 `package-lock.json`이 생성될 수 있습니다. **요약**: - `package.json`은 프로젝트의 의존성을 **선언**하는 파일입니다. - `package-lock.json`은 프로젝트의 의존성 트리의 정확한...
댓글 쓰기
Read more »

CSS를 사용하여 자식 요소를 부모 요소의 중앙에 배치

 CSS를 사용하여 자식 요소를 부모 요소의 중앙에 배치하려면 여러 가지 방법이 있습니다. 여기에서는 가장 일반적으로 사용되는 두 가지 방법을 소개하겠습니다: 1. **Flexbox 사용**:        Flexbox는 요소를 쉽게 중앙에 배치할 수 있는 방법을 제공합니다. 부모 요소에 대한 `display: flex` 및 `align-items: center; justify-content: center;` 속성을 설정하여 자식 요소를 수직 및 수평 중앙에 배치할 수 있습니다.        ```css    .parent {        display: flex;        align-items: center;        justify-content: center;        height: 100%; /* 또는 원하는 높이 */    }    ``` 2. **Absolute Positioning 사용**:        절대 위치 지정을 사용하려면 부모 요소에 `position: relative;`를 설정하고 자식 요소에 `position: absolute;`와 `top`, `left`, `transform` 속성을 설정하여 중앙에 배치합니다.        ```css    .parent {        position: relative;        height: 100%; /* 또는 원하는 높이 */    }    .child {        posit...
댓글 쓰기
Read more »

javascript에서 mod 연산은 음수가 나온다

수학에서 "modulo" 연산의 정의에 따르면, 나머지는 항상 양수여야 합니다. 예를 들어, -7을 5로 나눌 때의 나머지는 3입니다. 이러한 정의는 다양한 프로그래밍 언어에서 구현되기도 합니다. 그러나 JavaScript에서 제공하는 % 연산자는 나머지 연산자로 동작하며, 피연산자 중 하나가 음수라면 결과가 음수가 될 수 있습니다. 이는 특정 상황에서는 불편할 수 있으므로, 항상 양수의 결과를 원할 경우에는 추가 처리가 필요합니다. 요약하면, JavaScript의 % 연산자는 나머지 연산자로 동작하며, 수학적인 "modulo" 연산과는 결과가 다를 수 있습니다. 양수의 결과를 원하면 추가 처리가 필요합니다. JavaScript의 `%` 연산자는 "나머지 연산자"로서, 피연산자 중 하나가 음수일 경우 결과도 음수가 될 수 있습니다. 이는 일부 다른 프로그래밍 언어에서의 동작과 다를 수 있습니다. 예시를 들면: ``` console.log(7 % 5);   // 2 console.log(-7 % 5);  // -2 console.log(7 % -5);  // 2 console.log(-7 % -5); // -2 ``` 만약 항상 양수의 결과를 원한다면, 결과가 음수일 경우에 모듈로 (modulus) 값을 더해줄 수 있습니다: ```javascript function positiveMod(a, b) {     return ((a % b) + b) % b; } console.log(positiveMod(-7, 5)); // 3 ``` `positiveMod` 함수는 먼저 `%` 연산을 수행하고, 그 결과가 음수일 경우 `b`를 더해줌으로써 결과를 양수로 만들어 줍니다.
댓글 쓰기
Read more »

create-react-app의 index.js vs App.js

 `create-react-app` (CRA)은 React 기반 프로젝트를 시작할 때 주로 사용하는 도구입니다. CRA를 사용하여 새 프로젝트를 생성하면, 기본적으로 `App.js`와 `index.js` 두 개의 주요 파일이 생성됩니다. 각 파일의 용도는 다음과 같습니다: 1. **index.js**:     - **진입점**: 프로젝트의 진입점(entry point) 역할을 합니다. 여기서 React 코드는 실제 웹 페이지의 DOM에 렌더링됩니다.     - **ReactDOM.render()**: 이 함수는 React 컴포넌트를 DOM에 연결하는 역할을 합니다. `index.js`에서는 `<App />` 컴포넌트가 `root`라는 DOM 요소에 연결되도록 설정됩니다.     - **Service Worker**: CRA는 Progressive Web App(PWA) 지원을 위해 service worker 설정을 포함할 수 있습니다. 이는 `index.js`에서 설정되거나 제거될 수 있습니다.     ```jsx     import React from 'react';     import ReactDOM from 'react-dom';     import './index.css';     import App from './App';     ReactDOM.render(<App />, document.getElementById('root'));     ``` 2. **App.js**:     - **주요 컴포넌트**: 프로젝트의 주요 React 컴포넌트입니다. 초기에는 간단한 화면을 출력하도록 설정되어 있지만, 대부분의 개발자는 이 파일을 애플리케이션의 주요 레이아웃 및 로직을 포함하도록 확장합니다.     - **기본 레...
댓글 쓰기
Read more »

JavaScript - Default export, Named export

JavaScript에서 모듈을 다른 파일로부터 가져올 때, 내보내기(export)와 가져오기(import)의 방식에는 두 가지 주요한 유형이 있습니다: **기본 내보내기 (Default export)**와 **명명된 내보내기 (Named export)**입니다. 1. **기본 내보내기 (Default export)**     - 한 파일에 하나의 기본 내보내기만 가능합니다.     - 가져올 때 중괄호 `{ }`를 사용하지 않습니다.     ```javascript     // routes.js     const routes = [...];     export default routes;     // 다른 파일에서 가져올 때     import routes from './routes.js';     ``` 2. **명명된 내보내기 (Named export)**     - 한 파일에 여러 명명된 내보내기가 가능합니다.     - 가져올 때 중괄호 `{ }`를 사용합니다.     ```javascript     // routes.js     export const routes = [...];     export const anotherVariable = ...;     // 다른 파일에서 가져올 때     import { routes, anotherVariable } from './routes.js';     ``` 여러분의 코드에서 `routes.js` 파일에서 `routes`를 **기본 내보내기**로 내보냈습니다. 그래서 다른 파일에서 가져올 때는 `import routes from './routes.js';`와 같이 중괄호 없이 가져와야 합니다...
댓글 쓰기
Read more »

css에서 element의 디스플레이 특성

**block-level 요소:** 페이지 상에서 새로운 줄에서 시작하고, 다음 요소는 이 요소 다음의 새로운 줄에서 시작합니다. 즉, 전체 가로 너비를 차지합니다. 기본적으로 가로 너비는 부모 요소의 전체 너비를 차지하게 됩니다 (width 값이 명시적으로 설정되지 않았다면). width, height, margin, padding 등의 속성을 모두 적용할 수 있습니다. 예: div, h1, p, form 등. **inline-level 요소:** 페이지 상에서 새로운 줄을 시작하지 않고, 텍스트나 다른 인라인 요소와 동일한 줄에 연속해서 표시됩니다. 내용의 너비만큼만 영역을 차지합니다. 즉, 필요한 만큼의 너비를 차지하게 됩니다. width와 height 속성이 적용되지 않습니다. 그러나 padding, margin (오른쪽과 왼쪽만), border는 적용될 수 있습니다. 상하단의 margin과 padding은 적용되지만, 다른 요소를 밀어내지는 않습니다. 예: &lt;span&gt;, &lt;a&gt;, &lt;img&gt;, &lt;strong&gt;등. **inline-block:** inline과 block의 특성을 조합한 디스플레이 속성입니다. 요소는 인라인 수준에서 표시되지만, block처럼 width와 height 속성을 적용받을 수 있습니다. <span>과 같이 인라인 요소에 블록 레벨의 스타일링을 적용하고 싶을 때 유용합니다. **flex:** 요소를 유연한 박스 모델 레이아웃의 컨테이너로 설정합니다. 이렇게 설정하면 자식 요소들은 flex 아이템으로서 표시됩니다. flex 레이아웃은 복잡한 레이아웃과 정렬 문제를 쉽게 해결할 수 있도록 도와줍니다. 주요 관련 속성: flex-direction, justify-content, align-items, flex-wrap 등. **grid:** 요소를 그리드 레이아웃의 컨테이너로 설정합니다. 그리드는 행과 열의 2차원 레이아웃 시...
댓글 쓰기
Read more »

ipad 마우스 모션

ipad 마우스 모션 https://support.apple.com/ko-kr/guide/ipad/ipada39e5184/ipados  
댓글 쓰기
Read more »

js의 Element.tagName 은 반환 값이 대문자이다

 js의 Element.tagName 은 반환 값이 대문자이다 XHTML (또는 여느 XML 방식) 문서의 경우, 정의한 태그 명 그대로 가져오기 때문에, "span" 같은 소문자 태그명을 가져오게 될 것이다.그에 반해 HTML 문서에서는, 원본 문서에 정의된 태그명과 달리 대소문자를 무시하면서 대문자로만 이루어진 "SPAN" 값을 가져오게 된다. https://developer.mozilla.org/ko/docs/Web/API/Element/tagName
댓글 쓰기
Read more »

flutter drift vs hive

`Hive`와 `Drift`는 Flutter에서 로컬 데이터를 저장하기 위한 두 가지 인기있는 패키지입니다. 각각의 특징과 장단점을 알아보겠습니다. ### Hive #### 장점: 1. **성능**: Hive는 빠른 읽기 및 쓰기 연산을 제공합니다. 2. **간단함**: Hive의 API는 매우 간단하며, 객체를 빠르게 저장하고 검색할 수 있습니다. 3. **타입 안정성**: Hive는 Dart의 strong typing을 지원합니다. 4. **Zero Serialization**: Hive는 런타임 시 객체 직렬화가 필요 없습니다, 빠르게 데이터를 읽고 쓸 수 있습니다. 5. **다양한 데이터 유형 지원**: Hive는 간단한 키-값 스토어로도, 복잡한 JSON 객체로도 사용할 수 있습니다. 6. **크로스 플랫폼**: Android, iOS, 데스크톱 및 브라우저에서 사용할 수 있습니다. #### 단점: 1. **SQL 미지원**: Hive는 SQL 쿼리를 지원하지 않습니다. 따라서 복잡한 쿼리나 조인을 실행할 수 없습니다. 2. **데이터베이스 관계 미지원**: Hive는 관계형 데이터베이스가 아니므로, 테이블 간의 관계를 설정할 수 없습니다. ### Drift (moor) #### 장점: 1. **SQL 지원**: Drift는 SQLite를 기반으로 하므로 SQL 쿼리를 지원합니다. 2. **강력한 쿼리**: 조인, 서브쿼리, 복잡한 WHERE 절 등을 사용할 수 있습니다. 3. **타입 안전성**: Drift는 컴파일 타임에 쿼리 검사를 지원하여 타입 안전성을 제공합니다. 4. **반응형 프로그래밍**: Drift는 `Stream`을 이용한 반응형 프로그래밍을 지원합니다. 5. **데이터 마이그레이션**: 스키마 변경을 안전하게 관리할 수 있습니다. #### 단점: 1. **복잡성**: SQL과 스키마 마이그레이션 등을 관리해야 하므로 Hive보다 초기 학습 곡선이 높을 수 있습니다. 2. **성능**: Hive가 직렬화가 필요 없는 반면, Drift...
댓글 쓰기
Read more »