본문 바로가기
728x90
반응형

전체 글107

[WEB] 브라우저 렌더링 성능을 높히는 개발 1. 과도한 DOM 크기 지양하기DOM의 깊이가 렌더링 성능에 어떤 영향을 줄까요?페이지 크기가 동일한 경우에도 중첩된 트리가 있는 페이지가 성능이 낮다.1) body.children[4];2) body.children[0].children[0].children[0].children[0].children[0]; 주기적으로 DOM 크기와 깊이 확인하기Lighthouse 또는 PageSpeed Insights와 같은 도구를 사용하여 사이트의 DOM 크기와 깊이를 측정할 수 있습니다. 특정 시간에 페이지에 얼마나 많은 요소가 있는지 빠르게 확인하려면 브라우저의 콘솔에서 아래를 실행하면 됩니다.30~5000 사이document.querySelectorAll("*").length;CSS 선택자의 범위와 복잡성을 .. 2024. 5. 24.
[WEB] 웹 크로스 브라우징 테스트 및 구현 방법 크로스 브라우징이란?크로스 브라우징(Cross-Browsing)은 웹 개발에서 웹 페이지나 웹 애플리케이션이 다양한 웹 브라우저에서 일관되고 올바르게 작동하도록 만드는 작업 *크로스 브라우징의 중요성사용자 접근성 향상: 다양한 브라우저를 사용하는 사용자들에게 동일한 접근성과 기능을 제공하여 사용자 경험을 향상시킵니다.브랜드 이미지 강화: 모든 환경에서 일관된 사용자 경험을 제공함으로써 브랜드의 신뢰성을 높입니다.SEO 효과: 모든 브라우저에서 동일하게 잘 작동하는 웹 페이지는 검색 엔진 크롤러에 더 잘 인식되며, 이는 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다. *크로스 브라우징 구현 방법표준 준수: HTML, CSS, JavaScript와 같은 웹 표준을 준수폴리필(Polyfill) 사용:.. 2024. 5. 24.
TIL 작성 방법 TIP 개요기술 블로그나 개발일지를 작성하는 개발자라면 한번 정도는 TIL의 중요함을 알고 있다.자유롭게 작성하는 TIL도 좋지만, 처음 작성하는 분들과 혹은 템플릿을 만들고 싶어하는 분들을 위해 TIL 기본 구성을 정해보았다. TIL(Today I Learned)란?오늘 내가 배운 것을 작성하는 것 TIL 목차1. 제목 / 키워드2. 목차3. 개요4. 학습 내용5. 느낀점 / 자기 선언6. 레퍼런스 1. 제목 / 키워드- 분야, 범위, 언어 등 카테고리- 검색 키워드- 학습 내용 요약2. 목차3. 개요- 학습 키워드를 정리- 해당 주제와 해당 내용을 공부하게된 배경- 포스팅 목표 4. 학습 내용- 이번에 알게 된 개념의 특징을 정리- 예시- 활용 사례5. 느낀점 / 자기 선언 - 요약 정리- 학습하며 느끼거나.. 2024. 5. 24.
[WEB] 웹 표준 용어 / IT용어 / 단어 사전 해당 문서는 수시로 업데이트 되는 문서입니다.이름설명@anywhere앳애니웨어란 뉴욕타임즈 같은 언론사나 야후 같은 유명 사이트와 제휴를 해서 트위터 사이트로 이동하지 않고도 해당 사이트상에서 최근의 트위터 글을 바로 확인할 수 있는 새로운 플랫폼5 Forces5가지의 기업환경 관련 동인들에 대한 마케팅 전략 수립관련 분석기법, 신규 진입자의 위협, 대체재의 위협, 공급자와의 교섭력, 구매자와의 교섭력, 산업 내 경쟁기업과의 경쟁강도7S7가지의 인자를 바탕으로 한 기업 경쟁력 분석 기법 - Strategy, Structure, Systems, Staff, Shared Value, Skills, Styleabstract class추상 클래스는 구체 클래스에서 구현하려는 기능들의 공통점만을 모아 추상화한 클.. 2024. 5. 22.
[WEB] SSL인증서 TCP와 SSL/TSL 네트워크 통신 시 데이터의 안정적인 전송과 함께 안전한 통신을 제공하기 위해 밀접하게 협력하는데 사용하는 프로토콜 SSL/TLS (Secure Sockets Layer/Transport Layer Security)SSL과 TLS는 데이터 통신의 보안과 개인정보 보호를 위한 프로토콜SSL은 초기에 개발되었고, TLS는 SSL의 개선된 버전으로 발전SSL/TLS는 데이터를 암호화하고 인증하여 중간에 데이터를 가로채도 정보가 유출되지 않도록 보장주로 웹 서버와 브라우저 간의 통신에서 사용 TCP와 SSL/TSL 특징보안 통신SSL/TLS는 TCP와 함께 사용되어 안전한 통신을 제공합니다. SSL/TLS는 TCP를 기반으로 하여 데이터를 암호화하여 안전하게 전송합니다.포트 번호SSL/TLS는 TCP 위에서 동작.. 2024. 5. 22.
[WEB] 웹 프론트엔드 기초 - 4. 프론트엔드 개발자 로드맵: 모던 프론트엔드 가이드 2024년에 현대적인 프런트엔드 개발자가 되기 위한 단계별 가이드  프론트엔드 개발 로드맵   모던 프론트엔드가장 최신의 프론트엔드 개발 트렌드를 통틀어 지칭하는 용어 1. 개발환경 및 기술 스택 선정프레임워크1. ReactReact는 Facebook에서 개발한 프레임워크입니다. 가장 큰 특징은 가상 DOM을 사용한다는 점인데요, 이를 통해 UI 업데이트가 매우 효율적으로 이루어집니다. React는 컴포넌트 기반으로 설계되어 재사용성과 유지보수성이 높습니다. 2. AngularAngular는 Google에서 개발한 프레임워크입니다. 대규모 애플리케이션 개발에 적합한데, 이는 구조가 체계적이고 강력한 기능을 제공하기 때문입니다. 단, TypeScript라는 프로그래밍 언어를 필수적으로 사용해야 합니다. T.. 2024. 5. 22.
[React] React, JSX(Javascript + xml), Virtual DOM React프로젝트 규모가 커지고, 다양한 유저 인터렉션이 전달되면서 DOM요소의 변화가 많아지게 되면서 DOM 요소의 변화를 개발자가 직접 관리하는 어려움을 개선하기 위해 DOM 관리와 상태 변화 관리를 최소화하고, 개발자 오직 기능 개발, 사용자 인터페이스에 더 집중할수 있게 만들어진 프론트앤드 라이브러리, 프레임워크중 하나 이다.리액트에서는 컴포넌트 단위로 작성하여 하나의 컴포넌트를 여러 부분에서 재사용하여 생산성과 유지보수에 좋다.Virtual DOM을 사용하여 렌더링 효율성이 높다.React가 인기있는 이유는 무엇일까?기술 쏠림 현상을 가지고 있는 대한민국 IT문화상 Virtual DOM을 토대로한 장점으로 초기 독점을 하였고, 현재까지 유지되어 사용율 1위를 차지하고 있다.2024년 기준 리액트.. 2024. 5. 22.
[Git] 좋은 커밋 메시지 작성하기, 정책 만들기(git, commit, convention) 커밋 메시지 규칙제목은 영문 기준 50자 , 한글 기준 25자 이내제목은  명령문, 부정명령문 형식 사용제목 첫글자를 대문자로동명사보다 명사를 사용 (ing X)제목 끝에 . 금지제목과 본문을 한 줄 띄워 분리하기본문은 영문 기준 72자 , 한글 기준 36자 마다 개행 커밋 메시지 예)Fix member of values optional in ViewPropTypes[수정] 회원 가입의 버그를 수정 Refactor subsystem X for readabilityUpdate getting started documentationRemove deprecated methodsRelease version 1.0.0Merge pull request #123 from user/branch Github 이슈를 종료.. 2024. 5. 22.
[React] 리액트 시각화 & 차트 라이브러리 추천 및 비교 분석 차트 라이브러리 종류1. rechartshttps://recharts.org/en-US특징즉시 사용 가능한 차트뛰어난 구성선택적 구성 기능으로 인한 커스터마이징가장 사용자가 많다. 예시import { LineChart, Line } from 'recharts';const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];const renderLineChart = ( );   2. chart.jshttps://www.chartjs.org/특징즉시 사용 가능한 차트뛰어난 구성선택적 구성 기능으로 인한 커스터마이징가장 사용자가 많다. 예시   3. nivohttps://nivo.rocks/  특징즉시 사용 가능한 차트커스텀이 어려움 예시.. 2024. 5. 17.
728x90
반응형

티스토리툴바