728x90 FrontEnd/WEB20 [WEB] 모델1 모델2 2025. 2. 10. [WEB] INP 최적화, 리액트 성능 개선 INP (Interaction to Next Paint, 페인트에 대한 상호작용)웹 성능 지표 중 하나로, 사용자가 웹페이지와 상호작용(클릭, 키보드 입력 등)한 후 브라우저가 그에 반응하여 콘텐츠를 화면에 렌더링하는 데 걸리는 시간을 측정합니다. DOM (Document Object Model, 문서 객체 모델)HTML 문서 구조를 반영해서 만든 객체입니다.DOM의 계층은 트리 자료 구조로 구축돼요. 트리 자료 구조는 하나의 최상위 노드(Node)에서 다른 자식 노드들이 뻗어나가는 구조를 가지고 있습니다. DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 해요. DOM 생성되는 순서HTML 웹 페이지는 HTML 파서에 의해 DOM으로 변환됩니다.여기서 파서가 .. 2025. 2. 10. 웹페이지 접근성 높히는 방법, 인클루시브 디자인(inclusive design) 이란? 개요디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자 인클루시브 디자인 (Inclusive Design) 이란?다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인.. 2024. 9. 26. 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. 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. 웹 크로스 브라우징 테스트 및 구현 방법 크로스 브라우징이란?크로스 브라우징(Cross-Browsing)은 웹 개발에서 웹 페이지나 웹 애플리케이션이 다양한 웹 브라우저에서 일관되고 올바르게 작동하도록 만드는 작업 *크로스 브라우징의 중요성사용자 접근성 향상: 다양한 브라우저를 사용하는 사용자들에게 동일한 접근성과 기능을 제공하여 사용자 경험을 향상시킵니다.브랜드 이미지 강화: 모든 환경에서 일관된 사용자 경험을 제공함으로써 브랜드의 신뢰성을 높입니다.SEO 효과: 모든 브라우저에서 동일하게 잘 작동하는 웹 페이지는 검색 엔진 크롤러에 더 잘 인식되며, 이는 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다. *크로스 브라우징 구현 방법표준 준수: HTML, CSS, JavaScript와 같은 웹 표준을 준수폴리필(Polyfill) 사용:.. 2024. 5. 24. 웹 프론트 아키텍처, 모던 프론트엔드 가이드 웹 프론트 아키텍처프론트 아키텍처는 프로덕트 관리에서 중요한 부분이다. 플로우차트, 다이어그램을 활용하여 아키텍처( AS-IS, TO-BE)를 정리한다면, 적절한 상황에 비즈니스 대응을 할 수 있다. 웹 프론트 아키텍처 설계 고려사항컴포넌트 구조 (Atom → Molecule → Organism → Template(layout) → Page)MV* 구조 (MVC, MVP, MVVM, MVI)웹 애플리케이션의 구조 (SPA, MPA)렌더링 방식 (CSR, SSR)상태관리 도구폴더 및 파일 구조서비스 인프라 구조아키텍처를 그리는 도구https://app.diagrams.net/https://excalidraw.com/ 프론트엔드 개발 로드맵 모던 프론트엔드 아키텍처 개발모던 프론트엔드란?가장 최신의 프론.. 2024. 5. 22. 웹 프론트엔드 탄생 배경 - 프론트엔드, 백엔드 개요사용자와 인터렉션은 거의 없고 단방향의 단조로운 웹 방식에서 Web 2.0 시대 맞이한 후 웹 개발 시장이 변했다.Web 2.0에서는 홈페이지가 동적인 화면을 제공하여 클라이언트와 인터렉션하는 하는 방향으로 발전하게 된것이다.이후 Ajax, Javascript, Jquery등이 발전하게 되었다.사용자와의 인터렉션이 점점 증가하는 방향으로 발전한다고 해도 프론트앤드 쪽에서는 복잡한 로직이 없었기에 Frontend, ClientSide와 같은 개념은 존재 했지만, 전문성을 나누진 않았다. 프론트엔드, 백엔드 탄생 배경웹 산업은 점차 거대해지고, 사용자의 요구사항도 많아지면서, 웹의 복잡도가 올라갔다.서버는 비즈니스 로직을 처리하랴, 페이지도 계속 렌더링하랴, 부하가 심해졌다.이를 해소하기 위해 프론트엔드.. 2024. 5. 7. 브라우저 히스토리, 웹 프론트엔드 프레임워크 탄생 배경 웹 브라우저 탄생과 함께 LiveScript 부터Javascrpit, Adobe Flash , 웹 프론트엔드 프레임워크 탄생 배경까지 확인해보자 1991년1. Java 탄생Sun Microsystems에서 근무하는 소규모 엔지니어 팀이 개발한 "Oak"라는 프로젝트로 탄생1993년1. Mosaic Web Brower 브라우저 탄생 (1993.04)최초의 시각적 웹 브라우저 Mosaic Web Brower가 출시 1994년1. Yahoo 웹사이트 탄생 (1994.03)데이비드 플러먼(David Filo)과 제리 양(Jerry Yang)에 의해 창립되었습니다정보가 있는 사이트들을 찾아보기 쉽게 분류하는 웹사이트(검색엔진)로 시작, 미디어 기업으로 전략HTML, CSS, javascript를 사용하되 동적.. 2024. 4. 19. 이전 1 2 3 다음 728x90
