728x90 반응형 frontend/WEB18 [WEB] 2024 웹 생태계 정리(라이브러리, 프레임워크 기능별 분류) 개요2024년 React 생태계를 정리한 뒤, WEB 생태계 전반으로 범위를 확장하여 살펴보고자 한다.React를 사용하는 개발자로서, 널리 사용되는 기술과 최신 트렌드를 파악할 수 있는 좋은 기회라고 생각한다. 2024년 React 생태계 포스팅 바로가기https://sillimmouse.tistory.com/85 내용02 프레임워크 03 도서관 04 데이터 05 호스팅 06 지속적인 통합 07 마이크로 프런트엔드 08 패키지 관리자 09 자바스크립트 런타임 01 타입스크립트 02 브라우저 기술 03 프로그레시브 웹 앱 04 디자인 시스템 05 스타일링 도구 06 테스트 07 코드 관리 08 로코드/노코드 09 건축도구 10개의 운영 체제5장. 추세와 미래 01 인공지능 02 접근성 03 미래 트.. 2024. 11. 22. [WEB] 웹페이지 접근성 높히는 방법, 인클루시브 디자인(inclusive design) 이란? 개요디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자 인클루시브 디자인 (Inclusive Design) 이란?다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인.. 2024. 9. 26. [WEB] WEB 구성요소 / Web, WebServer, WAS 차이점 WEB 구성 요소Web인터넷을 기반으로 정보를 공유, 검색 하는 서비스이며 Web Browser를 통해 다양한 서비스를 제공한다.HTML(Hypertext Transfer Protocol)언어를 기반으로 문서와 링크를 생성하여 웹사이트를 구성한다.HTTP(Hypertext Transfer Protocol) 프로토콜을 사용하여 정보를 공유한다.URL(Uniform Resource Locator)은 인터넷상의 리소스를 나타내는 주소이다.Web BrowserWeb server와 통신하여 HTML 문서나 파일을 출력하는 GUI형식의 소프트 웨어Web PageWeb Browser에 표시되는 각각의 화면Firefox, 구글 크롬, 오페라, MS 익스플로러나 엣지, 애플의 Safari 같은 웹 브라우저에서 보여지는 .. 2024. 5. 27. [WEB] HTTP/HTTPS Methods, status code HTTP(HyperText Transfer Protocol)웹 서버와 클라이언트 간의 데이터 통신을 위한 프로토콜데이터 전송 과정에서 암호화가 이루어지지 않기 때문에, 전송되는 데이터가 평문으로 전송중간에 데이터를 가로채거나 엿볼 수 있는 보안 취약점이 존재PORT : 80http://example.com HTTPS(HyperText Transfer Protocol Secure)보안 소켓 계층(SSL/TLS) 위에서 HTTP 통신을 하는 보안된 프로토콜HTTP의 보안 버전으로, SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터가 암호화되어 전송중간에 데이터를 가로채도 암호화된 데이터를 해독할 수 없어서 데이터의 기밀성과 무.. 2024. 5. 27. [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. [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. [WEB] 웹 프론트엔드 기초 - 3. 프론트엔드 탄생 배경: 프론트엔드, 백엔드 개요사용자와 인터렉션은 거의 없고 단방향의 단조로운 웹 방식에서 Web 2.0 시대 맞이한 후 웹 개발 시장이 변했다.Web 2.0에서는 홈페이지가 동적인 화면을 제공하여 클라이언트와 인터렉션하는 하는 방향으로 발전하게 된것이다.이후 Ajax, Javascript, Jquery등이 발전하게 되었다.사용자와의 인터렉션이 점점 증가하는 방향으로 발전한다고 해도 프론트앤드 쪽에서는 복잡한 로직이 없었기에 Frontend, ClientSide와 같은 개념은 존재 했지만, 전문성을 나누진 않았다. 프론트엔드, 백엔드 탄생 배경웹 산업은 점차 거대해지고, 사용자의 요구사항도 많아지면서, 웹의 복잡도가 올라갔다.서버는 비즈니스 로직을 처리하랴, 페이지도 계속 렌더링하랴, 부하가 심해졌다.이를 해소하기 위해 프론트엔드.. 2024. 5. 7. 이전 1 2 다음 728x90 반응형
