전체 글
-
React에서 순환 참조 문제 해결하기Front-end/React.js 2024. 10. 23. 18:13
React 프로젝트를 진행하다 보면 종종 순환 참조(Circular Dependency) 문제에 직면할 때가 있습니다. 순환 참조는 두 개 이상의 모듈이 서로를 직접적으로 또는 간접적으로 참조하는 경우 발생합니다. 이 문제는 런타임 에러를 발생시키고 애플리케이션이 제대로 동작하지 않게 만듭니다.이 글에서는 React에서 React.lazy()와 import()를 사용하여 순환 참조 문제를 해결하는 방법에 대해 알아보겠습니다.문제 상황React와 Material-UI(MUI)를 사용하여 커스텀 텍스트 필드와 셀렉트 필드 컴포넌트를 개발하던 중 순환 참조(circular dependency) 문제에 직면했습니다. 구체적으로, StyledSelectField 컴포넌트가 CustomTextField를 참조하고,..
-
React 프로젝트에서 SVG 파일 최적화 및 컴포넌트화Front-end/React.js 2024. 10. 21. 10:00
React 프로젝트에서 SVG 파일을 효율적으로 사용하려면, SVGR을 이용해 SVG 파일을 React 컴포넌트로 변환하고, SVGO를 사용해 파일을 최적화할 수 있습니다. 이 글에서는 pnpm, Vite, React, TypeScript 환경에서 이를 구현하는 방법을 단계별로 설명합니다.1. 필수 패키지 설치하기먼저, 필요한 패키지를 설치합니다. pnpm을 사용하여 프로젝트의 개발 의존성으로 추가합니다.pnpm add -D @svgr/rollup @svgr/cli svgo@svgr/rollup: Vite에서 SVGR을 사용할 수 있게 해주는 플러그인입니다.@svgr/cli: SVGR의 CLI 도구로, SVG를 React 컴포넌트로 변환합니다.svgo: SVG 파일을 최적화하는 도구입니다.2. Vite ..
-
Shadow DOMDOM/HTML5 2022. 12. 9. 13:57
[출처: https://javascript.info/shadow-dom] Shadow DOM Shadow DOM은 캡슐화를 위해 사용됩니다. 이를 통해 구성 요소는 고유한 "섀도우" DOM 트리를 가질 수 있으며 기본 문서에서 실수로 액세스할 수 없으며 로컬 스타일 규칙 등을 가질 수 있습니다. Built-in shadow DOM 복잡한 브라우저 컨트롤이 어떻게 생성되고 스타일이 지정되는지 생각해 본 적이 있습니까? (예 ) 브라우저는 그것들을 그리기 위해 내부적으로 DOM/CSS를 사용합니다. 그 DOM 구조는 일반적으로 우리에게 숨겨져 있지만 개발자 도구에서 볼 수 있습니다. 예를 들어 Chrome에서는 개발자 도구에서 "Show user agent shadow DOM" 옵션을 활성화해야 합니다...
-
대체 텍스트 가이드DOM/HTML5 2022. 10. 5. 21:24
구체적이고 간결하다 가능한 한 적은 수의 단어를 사용하십시오. 개체의 색상이 관련이 있습니까? 배경의 날씨가 관련이 있습니까? 사람의 머리색이 중요합니까? 콘텐츠 작성자는 이 정보가 메시지에 추가되거나 삭제되는지 여부를 판단해야 합니다. *문자 제한은 100-150입니다. (권장 125자) 미학이 아닌 정보를 기술하라 "밝은 파랑새의 그래픽"과 같이 그림이 어떻게 보이는지 설명하지 마십시오. "트위터 아이콘"과 같이 이미지 콘텐츠가 무엇이며 어떤 역할을 하는지 설명합니다. 이미지의 기능에 대해 생각하기 콘텐츠 작성자는 이유가 있어 웹 페이지에 이미지를 추가합니다. 내가 왜 이것을 포함하고 있는지 자문해 보십시오. 그것을 포함함으로써 내가 전달하려는 메시지는 무엇입니까? 이 설명을 포함하지 않으면 어떤 추..
-
대용량 이미지 분기 처리DOM/HTML5 2022. 9. 30. 20:34
사용 배경 페이지 로드시 바로 보여지는 화면인 경우 대용량 로드로 인해 흰 화면 노출로 성능 이슈 야기 모니터 해상도 증가 및 retina 디스플레이 등 1920을 훨씬 상회하는 이미지로 인해 PC는 1920, 2560, 3840 각각 해상도에 맞게 지원 필요 사용 범위 메인 이미지나 Stories 등에 배경처럼 전체사이즈로 들어가는 이미지 적용 사항 webP를 활용하여 이미지 용량 개선 (통상적으로 jpg, png 보다 가벼우나 추출 설정상 jpg가 더 가벼운 경우에는 jpg 사용 - DP 팀과 협의) (iOS11 이상 지원이므로 iOS10 이하 브라우저 지원할 지 여부 체크 - DP 팀과 협의) 웹/모바일 디바이스에 따른 반응형 이미지 동적 로드가 가능한 태그 사용 (웹/모바일간 비율이 상이하며 나타..
-
AxiosJavascript/ECMAScript 2015 (ES6) 2022. 9. 28. 20:02
Axios 서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있습니다. Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있습니다. 설치하기 NPM을 사용하여 설치 npm install axios Yarn을 사용하여 설치 yarn add axios 그 후 프로젝트에서 import 해야 합니다. import axios from "axios"; 만약 브라우저에서 Axios를 사용한다면 아래와 같이 CDN을 사용할 수 있습니다. 문법 fetch와 문법은 비슷하나, 다양한 방법으로 요청할 수 있습니다. axios(url, { // 설정 옵션 }); HTTP 메서드를 붙일 수도 있습니다. axios.get(url, { // 설정 옵션 })..
-
Cross-site Scripting(XSS)INFO/WEB 2022. 9. 27. 20:50
정의 HTML 삽입(HTML Injection) 취약점이 발생하는 지점은 웹 브라우저에서 전달되는 값이 HTML 내에 출력되는 곳이다. HTML삽입이 가능하면 대부분의 공격은 자바스크립트(Javascript)를 이용한다. 이 때문에 다른 곳에서(cross-site) 전달되는 스크립트를 실행(scripting)한다고 하여 일반적으로는 크로스 사이트 스크립트(Cross-site Script, Cross-site Scripting)라고 많이 알려져 있다. XSS 종류와 공격 방법 XSS 종류 1. Reflected XSS 이름 그대로 반사하는 형태의 공격이다. DB에 저장하여 공격하는 게 아닌 1회용 공격으로 볼 수 있다. 이유는 클라이언트가 직접 누르도록 유도하기 때문이다.기본적으로 URL을 통해 스크립트 ..
-
도메인 (domain) - 인터넷 기본 도메인 , 호스트, 포워딩 알아보기 | 생활코딩INFO/WEB 2022. 3. 17. 14:12
도메인 IP란? 인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등등)들은 각각의 장치를 식별할 수 있는 주소. 예) 115.68.24.88 도메인이란? IP를 이해하고 기억하기 쉽게 각 IP에 이름을 부여한 것 도메인의 구성요소 컴퓨터의 이름과 최상위 도메인으로 구성되어 있다. opentutorials.org - opentutorials : 컴퓨터의 이름 - org : 최상위 도메인 - 비영리단체 daum.co.kr - daum : 컴퓨터의 이름 - co : 국가 형태의 최상위 도메인을 의미 - kr : 대한민국의 NIC에서 관리하는 도메인을 의미 URL의 이해 도메인은 장치를 식별하기 위한 주소 URL은 서버가 가지고 있는 다양한 컨텐츠를 식별하기 위한 주소 (URL = 도메인 + 경로..