본문 바로가기

Frontend Dev

(147)
Section3 Unit6 [네트워크] 심화 Section3 Unit6 [네트워크] 심화 📌 Chapter1. TCP/IP • TCP (Transmission Control Protocol) 신뢰성 있는 데이터 전송을 지원하는 연결 지향형 프로토콜. TCP는 통신을 하기 전에 먼저 서로의 컴퓨터에 연결을 설정하여 전송 과정에서 패킷의 손실을 검사하고 순서가 바뀌지 않도록 보장한다. → 안전성이 높은 통신을 가능하게 해준다. 주로 파일이나 이메일을 전송하는 등 신뢰성이 중요한 통신에서 자주 사용된다. • UDP (User Datagram Protocol) 신호 절차 없이 일방적으로 데이터를 전달하는 비연결형 프로토콜. 데이터의 신뢰성은 낮지만 속도가 빠름. (실시간 스트리밍 등에서 많이 사용되고, 최근 http3 버전이 나오면서 기존에 TCP 방식으..
Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성- 과제 웹 표준 & 접근성 개선 2 Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 과제 웹 표준 & 접근성 개선 2 ⭐️ 과제. 웹 표준 & 접근성 개선 - Cmarket Redux 리팩토링 ✔️ Bare Minimum Requirement ✅ 과제에는 총 8개의 문제가 있습니다. 문제의 내용과 문제 가이드 내용을 따라 실습을 진행하시면 됩니다. ✅ Cmarket Redux 리팩토링은 Cmarket Redux 레퍼런스 레포지토리를 클론하여 진행합니다. Cmarket Redux 리팩토링도 과제 안에 가이드가 있습니다. 가이드 내용을 따라 진행하시면 됩니다. 과제: What I Learned Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 과제 웹 표준 & 접근성 개선 Section3 Unit5 [..
크로스 브라우징(Cross Browsing)과 크로스 브라우징 워크 플로우 👾 크로스 브라우징이란? 크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다. 여기에서 중요한 포인트는 ‘동일한’이 아니라 ’동등한’이라는 표현을 쓴다는 것이다. 크로스 브라우징은 모든 브라우저에서 완전히 똑같은 화면이 보이도록 만드는 것이 아니라, 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다. (애초에 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능하다.) 👾 인터넷 익스플로러와 ActiveX, 그리고 크로스 브라우징 👀 ActiveX가 뭔데? ActiveX는 마이크로소프트사에서 개발한 인터넷 익스플로러용 플러그인으로, 웹 브라우저와 ..
Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 과제 웹 표준 & 접근성 개선 Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 과제 웹 표준 & 접근성 개선 ⭐️ 과제. 웹 표준 & 접근성 개선 ✔️ Bare Minimum Requirement ✅ 과제에는 총 8개의 문제가 있습니다. 문제의 내용과 문제 가이드 내용을 따라 실습을 진행하시면 됩니다. ◻️ Cmarket Redux 리팩토링은 Cmarket Redux 레퍼런스 레포지토리를 클론하여 진행합니다. Cmarket Redux 리팩토링도 과제 안에 가이드가 있습니다. 가이드 내용을 따라 진행하시면 됩니다. → 내일 과제 과제: What I Learned 1. Semantic 요소 사용: 📌 시맨틱 요소를 사용한 마크업이 중요 2. styled-components도 html과 css 관심사 분리가 되어 있기..
웹 콘텐츠 접근성 지침, 웹 접근성을 준수한 웹개발하기 👾 웹 콘텐츠 접근성 지침 웹 접근성이란 장애인이나 고령자 뿐만 아니라 모든 사용자들이 개인의 능력에 상관없이 웹 페이지의 정보에 접근할 수 있도록 보장하는 것을 의미한다. 한국형 웹 콘텐츠 접근성 지침은 W3C의 웹 접근성 권고안인 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 조금 수정한 한국형 웹 콘텐츠 접근성 지침으로 2022년 12월 30일 2.2가 업데이트 된 것을 한국웹접근성인증평가원 홈페이지에서 확인할 수 있다. 웹 콘텐츠 접근성 지침에는 웹 접근성 제고를 위한 4가지 원칙과 각 원칙을 준수하기 위한 14개 지침 및 해당 지침의 준수 여부를 확인하기 위해 33개의 검사항목을 제시하고 있다. ✔️ 인식의 용이성(percei..
웹 표준과 웹 접근성, 간단하게 알아보기 👾 웹 표준이란? 웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙이다. → 동일한 컨텐츠란 완벽히 똑같은 화면을 의미하는 것이 아닌, 모든 플랫폼에서 동등한 수준의 정보에 접근이 가능함을 의미하는 것이다. 웹 표준은 팀 버너스 리를 중심으로 한 W3C(World Wide Web Consortium)의 토론에 의해 결정된다. 크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원한다. 따라서 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 앞서 언급된 브라우저 호환 때문에 화면이 제대로 표시되지 않거나 기능이 작동하지 않는 등의 문제 상황을 방지할 수 ..
Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 웹 표준, 웹접근성과 SEO Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 웹 표준과 SEO 📌 Chapter1. 웹 표준 • 웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙이며, 웹 접근성은 장애인이나 고령자 뿐만 아니라 모든 사용자들이 개인의 능력에 상관없이 웹 페이지의 정보에 접근할 수 있도록 보장하는 것을 의미한다. 👀 유어클래스에서 학습한 내용을 바탕으로 웹 표준과 웹 접근성, 그리고 인터넷 익스플로러의 지원 종료로 이제는 한결 수월해진 크로스 브라우징에 대해 간단하게 정리해 보았다. ↓ 웹 표준과 웹 접근성, 간단하게 알아보기 👾 웹 표준이란? 웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹..
React의 Props Drilling과 상태관리 👾 Props Drilling이란? Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다. 👾 Props Drilling의 문제점 • 코드의 가독성이 나빠진다. • 코드의 유지보수가 어렵게 된다. • state 변경 시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. → 웹 성능에 악영향을 줄 수 있다. 👾 Props Drilling을 방지하기 위한 방법 1. 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법 2. 상태관리 라이브러리를 사용하는 방법 → 상태관리 라이브러리를 사용하게 되면 ..

반응형