개발자를 위한 웹 기술 :: mdn web docs

https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에developer.mozilla.orghttps://developer.mozilla.org/ko/docs/Web/CSS CSS: Cascading Style Sheets | MDNCascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 ..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 12. 12.
• textsms

EUC-KR vs UTF-8: 문자 인코딩 방식의 차이

문자 인코딩은 컴퓨터가 텍스트 데이터를 처리하고 저장하는 방식입니다. 특히, 한국어 텍스트를 다룰 때 EUC-KR과 UTF-8이 자주 사용됩니다. 이번 포스팅에서는 두 인코딩 방식의 차이점과 장단점에 대해 알아보겠습니다.1. EUC-KR: 완성형 인코딩특징완성형 인코딩 방식: 이미 조합된 11,172개의 완성형 한글만을 지원합니다.2바이트로 인코딩: 모든 한글은 2바이트로 표현됩니다.한국어에 특화된 문자 집합으로, 영어와 한국어를 함께 지원합니다.한국어 이외의 특수 문자 지원이 제한적입니다.장점과거 한국어 중심의 서비스에서 주로 사용되었기 때문에, 기존 시스템과의 호환성이 높습니다.한국어 텍스트만 포함된 파일에서는 상대적으로 파일 크기가 작습니다.단점조합형 한글(예: 가 + ㄱ + ㅏ 같은 비표준 조합)..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 12. 11.
• textsms

HTML 기본 구조 이해: HTML, HEAD, BODY, TITLE 태그 설명

웹 페이지를 제작할 때 가장 먼저 접하게 되는 태그가 바로 HTML 문서의 기본 구조입니다. 모든 웹 페이지는 이 구조를 기반으로 만들어지며, 각 태그는 특정한 역할을 담당합니다. 이번 포스팅에서는 HTML 문서에서 핵심이 되는 ,  3. 태그역할HTML 문서에서 사용자에게 실제로 보이는 콘텐츠를 포함합니다.텍스트, 이미지, 동영상, 버튼 등 모든 시각적 요소가 태그 안에 작성됩니다.특징 태그 안의 내용이 브라우저 화면에 표시됩니다.레이아웃을 설계하거나 다양한 콘텐츠를 추가할 때 사용됩니다.예제 HTML 기본 구조 이 문서는 HTML, HEAD, BODY, TITLE 태그를 설명합니다. 4. 태그역할HTML 문서의 제목(title)을 정의합니다.이 제목은 웹 브라우저의 탭과 검색 엔진 결..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 12. 10.
• textsms

HTML - 블록레벨 (Block level) 요소와 인라인(Inline) 요소

블록 요소와 인라인 요소: 차이점과 활용 방법웹 페이지를 디자인할 때, HTML 요소는 크게 블록 요소(Block Element)와 인라인 요소(Inline Element)로 나뉩니다. 이 두 가지 요소는 레이아웃과 스타일링에 중요한 역할을 하며, 각각의 특징과 활용 방법을 이해하는 것이 필수적입니다. 이번 포스팅에서는 블록 요소와 인라인 요소의 차이점, 그리고 그 활용 방법에 대해 예제를 포함해 알아보겠습니다.1. 블록 요소 (Block Element)특징가로 너비: 화면에서 사용 가능한 최대 너비를 차지합니다.크기 지정: width와 height를 통해 크기를 설정할 수 있습니다.위치: 요소들이 수직으로 쌓입니다.스타일: margin과 padding을 위, 아래, 좌, 우 모두 적용할 수 있습니다.용..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 12. 10.
• textsms

Progressive Web App 셋팅 & 앱 발행 방법

프로젝트 생성 방법 기존 프로젝트를 pwa 형식으로 변경하는 방법이 존재 하지 않기 때문에 새 프로젝트를 생성해주고 기존 코드를 복사 해주는 방식을 사용해야한다 터미널 안에서 다음 코드 작성후 세 프로젝트 생성 해준다 npx create-react-app '프로젝트 명' --template cra-template-pwa PWA 파일의 조건은 생성된 파일안에 manifest.json(앱 설정 파일)과 service-worker.js 파일이 들어있어야한다 시작할 때 PWA 형태로 파일을 생성해주면 자동으로 생성 되어있음 manifest.json 설정 앱의 설정 파일로 앱의 이름, 아이콘, 시작 url, 테마 색상, 배경 색상의 기본 설정을 다룰 수 있다 service-worker.js 설정 service-w..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 2. 2.
• textsms

[React] useTranstion ,useDeferredValue 사용하기

state 1,state 2, state 3 가 존재하는 경우, 변경할 때마다 재렌더링 되는 것이 아니라 마지막에 변경되는 state 값 이후에 재렌더링 해주는 것을 batching 이라고 한다 하지만 ajax, setTimeout 내부라면 baching이 일어나지 않는다 React 18 버전 이후부터는 이러한 성능 문제를 해결하기 위해서 useTranstion 과 useDeferredValue 기능이 나오면서 위의 문제를 해결가능하게 되었다 useTranstion import {useTransition} from 'react' 다음 코드는 10000개의 배열 안에 input 값을 출력 해준다 let a = new Array(10000).fill(0) function App() { let [name, s..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 2. 2.
• textsms

[React] memo / useMemo 사용하기

memo props가 변할 때만 렌더링을 해준다 memo를 사용하기 위해서는 import { memo } from "react"; 함수를 improt 해준다 그리고 필요할 때 재 렌더링 할 컴포넌트를 memo 함수를 사용해서 컴포넌트를 생성해주어야 한다 //memo 사용안함 function Child(){ console.log('다시불러와지나') return child } //memo 사용 const Child = memo(function Child(){ console.log('다시불러와지나') return child }) memo 사용하기 전 memo 사용하기 후 기존의 props와 신규 props를 비교해서 props의 값이 변했으면 재렌더링 해주는 기능으로 너무 많이 사용하면 비교를 계속 하게 되면..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 2. 2.
• textsms

[React] memo / useMemo 사용하기

memo props가 변할 때만 렌더링을 해준다 memo를 사용하기 위해서는 import { memo } from "react"; 함수를 improt 해준다 그리고 필요할 때 재 렌더링 할 컴포넌트를 memo 함수를 사용해서 컴포넌트를 생성해주어야 한다 //memo 사용안함 function Child(){ console.log('다시불러와지나') return child } //memo 사용 const Child = memo(function Child(){ console.log('다시불러와지나') return child }) memo 사용하기 전 memo 사용하기 후 기존의 props와 신규 props를 비교해서 props의 값이 변했으면 재렌더링 해주는 기능으로 너무 많이 사용하면 비교를 계속 하게 되면..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 2. 2.
• textsms

[React] memo / useMemo 사용하기

memo props가 변할 때만 렌더링을 해준다 memo를 사용하기 위해서는 import { memo } from "react"; 함수를 improt 해준다 그리고 필요할 때 재 렌더링 할 컴포넌트를 memo 함수를 사용해서 컴포넌트를 생성해주어야 한다 //memo 사용안함 function Child(){ console.log('다시불러와지나') return child } //memo 사용 const Child = memo(function Child(){ console.log('다시불러와지나') return child }) memo 사용하기 전 memo 사용하기 후 기존의 props와 신규 props를 비교해서 props의 값이 변했으면 재렌더링 해주는 기능으로 너무 많이 사용하면 비교를 계속 하게 되면..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 2. 1.
• textsms

[React]lazy import를 사용해 파일 나누기

lazy 파일을 나누는 이유는 React 는 Single Page Application으로 만든 파일들을 모두 HTML/CSS/JS 파일로 변환해서 사용하는데 리액트는 많은 파일들이 하나씩 만들어지기 떄문에 모든 데이터가 하나에 들어가 있기 때문에 파일 사이즈가 크다 파일 사이즈가 커지면 페이지를 열어 데이터를 불러오는데 느려지기 때문에 여는데 로딩속도가 느려진 가능성이 크다 위의 페이지는 다른 페이지에서 사용되는 js 파일이라서 메인 페이지에서 로드할 필요가 없기 때문에 lazy 속성을 추가 해서 필요할때 improt 할 수 있게 해줌으로써 메인 페이지의 속도를 개선 할 수 있다 import {lazy} from "react"; 다음과 같이 Lazy 함수를 이용하면 사이트를 내보낼 때도 js 파일로 분..

• format_list_bulleted PROGRAMING📚/Web Dev📑
• · 2024. 2. 1.
• textsms