프론트엔드부트캠프 (71) 썸네일형 리스트형 Section3 Unit7 [Backend] 인증 / 보안 - Cookie/Session Section3 Unit7 [Backend] 인증 / 보안 - Cookie/Session 📌 Chapter1. Cookie/Session 웹에서는 사용자의 정보를 어딘가에 저장해야 하는데 HTTP는 상태를 저장하지 않는다. • Cookie 서버에 의해 클라이언트에 저장되는 데이터 파일로 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있으며, 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고, 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다. 쿠키는 로그인 상태 유지, 테마 상태 유지 등 장시간 보존해야 하는 정보 저장에 적합하다. 쿠키는 클라이언트에 데이터를 저장하기 때문에 서버의 부하가 .. 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 [.. Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 과제 웹 표준 & 접근성 개선 Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 과제 웹 표준 & 접근성 개선 ⭐️ 과제. 웹 표준 & 접근성 개선 ✔️ Bare Minimum Requirement ✅ 과제에는 총 8개의 문제가 있습니다. 문제의 내용과 문제 가이드 내용을 따라 실습을 진행하시면 됩니다. ◻️ Cmarket Redux 리팩토링은 Cmarket Redux 레퍼런스 레포지토리를 클론하여 진행합니다. Cmarket Redux 리팩토링도 과제 안에 가이드가 있습니다. 가이드 내용을 따라 진행하시면 됩니다. → 내일 과제 과제: What I Learned 1. Semantic 요소 사용: 📌 시맨틱 요소를 사용한 마크업이 중요 2. styled-components도 html과 css 관심사 분리가 되어 있기.. Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 웹 표준, 웹접근성과 SEO Section3 Unit5 [사용자 친화 웹] 웹 표준 & 접근성 - 웹 표준과 SEO 📌 Chapter1. 웹 표준 • 웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙이며, 웹 접근성은 장애인이나 고령자 뿐만 아니라 모든 사용자들이 개인의 능력에 상관없이 웹 페이지의 정보에 접근할 수 있도록 보장하는 것을 의미한다. 👀 유어클래스에서 학습한 내용을 바탕으로 웹 표준과 웹 접근성, 그리고 인터넷 익스플로러의 지원 종료로 이제는 한결 수월해진 크로스 브라우징에 대해 간단하게 정리해 보았다. ↓ 웹 표준과 웹 접근성, 간단하게 알아보기 👾 웹 표준이란? 웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹.. Section3 Unit4 [React] 상태 관리 - 과제 Cmarket Redux Section3 Unit4 [React] 상태 관리 - 과제 Cmarket Redux ⭐️ 과제. Cmarket Redux ✔️ Bare Minimum Requirement ✅ Action, Reducer를 직접 작성하고 테스트 케이스를 통과합니다. ✏️ 과제 구현 📌 리덕스의 데이터 흐름 Action → Dispatch → Reducer → Store 1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 2. Action 객체는 Dispatch 함수의 인자로 전달 3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달 4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 .. Section3 Unit4 [React] 상태 관리 - Redux Section3 Unit4 [React] 상태 관리 - Redux 📌 Chapter2. Redux • Redux를 사용하는 이유 React의 데이터 흐름에 따르면 상태는 상태가 사용되는 컴포넌트의 공통된 상위 컴포넌트에 위치시키는 것이 적절하다. 아래와 같이 컴포넌트3과 컴포넌트6에서 상태를 사용해야 한다면 최상위 컴포넌트에 상태를 위치시켜야 한다. 하지만 이런 상태 배치는 다음과 같은 이유로 다소 비효율적이라고 느껴질 수 있다. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있.. Section3 Unit4 [React] 상태 관리 Section3 Unit4 [React] 상태 관리 📌 Chapter1. 상태 관리 • 상태란, UI에 동적으로 표현될 데이터 • 로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태로 보통 컴포넌트 내에서만 영향을 끼친다. 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태로 input box, select box 등과 같이 입력값을 받는 경우가 이에 해당한다. • 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태로 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다. 만약 사본이 있다면, 두 데이터는 서로 동기화 되어야 하는데 이는 문제를 어렵게 만든다. 따라서 한 곳에서만 상태를 저장하고 접근하는 것이 중요하다. → 전역.. 이전 1 2 3 4 5 6 ··· 9 다음
