Homile

📌 오늘부터 3일간 로그인관련 내용을 학습을 하게된다. 쿠키... 토큰... 소셜 로그인 관련이다... 이부분은 프로젝트에 사용할 수 있는 부분이기 때문에 열심히해보자!!!

📗 오늘 학습한 내용

HTTPS 프로토콜

• HTTP + Secure
• 요청의 내용을 한번 암호화하기 때문에 유출이 되어도 어떤 내용인지 알 수 없다.
• 인증서, CA, 비대칭 키 암호화방식을 이용한다.
• 인증서
  • 데이터를 제공하는 서버가 진짜인지 인증확인하는 용도이다.
  • 인증서의 내용에 서버에 도메인 관련 정보가 있어서 데이터 제공자의 인증을 용이하게 한다.
  • 요청을 받은 서버는 인증서와 함께 응답을 전송하고, 응답을 받은 클라이언트는 인증서에 작성된 도메인과 응답 객체에 작성된 도메인을 비교하여 같다면 데이터를 제공해주는 서버가 진짜라는 것을 알 수 있습니다.
• CA (Certificate Authority)
  • 인증서를 발급하는 공인된 기관이다.
  • 각 브라우저는 신뢰하는 CA의 정보를 가지고 있어 인증서의 차이가 있다.
• 비대칭 키 암호화
  • 암호화 및 복호화 가능
  • A키로 특정 데이터를 암호화하면 해당 키를 복호화하는데 A키의 쌍인 B키로만 가능하다.

암호화

• 제 3자가 서버와 클라이언트가 주고받는 정보를 탈취할 수 없도록 하는 것이다.
• 서버와 클라이언트는서로가 합의한 방법으로 데이터를안호화하여 주고 받는다.
• 중간에 제 3자에게 데이터가 탈취되더라도 그 내용을 알아볼 수 없다.
• 일련의 정보를 임의의 방식을 사용하여 다른 형태로 변환하여 해당 방식에 대한 정보를 소유한 사람을 제외하고 이해할 수 없도록 '알고리즘'을 이용해 정보를 관리하는 과정이다.

mkcert

• 로컬 환경에서 신뢰할 수 있는 인증서를 만든다.
• 로컬을 인증된 기관으로 추가한 뒤 로컬 환경 인증서를 생성한다.

// 설치
brew install mk cert

// 로컬을 인증된 발급기관으로 추가
mkcert -install

// 로컬 환경 인증서 생성
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

Hashing

• 어떤 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것
  1. 모든 값에 대해 해시 값을 계산하는데 오래걸리지 않아야 한다.
  2. 최대한 해시 값을 피해야 하며, 모든 값은 고유한 해시 값을 가진다.
  3. 아주 작은 단위의 변경이라도 완전히 다른 해시 값을 가져야 한다.

Salt

• 암호화해야 하는 값에 어떤 '별도의 값'을 추가하여 결과를 변형하는 것
  1. 암호화만 해놓는다면 해시된 결과가 늘 동일하다.
     해시된 값과 원래 값을 테이블(레인보우 테이블)로 만들어서 decoding 해버리는 경우도 생긴다.
  2. 원본값에 임의로 약속된 별도의 문자열을 추가하여 해시를 진행한다면 기존 해시값과 전혀 다른 해시값이 반환되어 알고리즘이 노출되더라도 원본값을 보호할 수 있도록 하는 안정 장치이다.
  3. 기존: 암호화 하려는 값 -> hash 값
     Salt: 암호화 하려는 값 + Salt 용 값 => hash 값

Cookie

• 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다.
• 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.
• 특징
  • 서버가 클라이언트에 특정한 데이터를 저장할 수 있다.
  • 데이터를 저장한 이후 아무 때나 데이터를 가져올 수 는 없고, 데이터를 저장한 후 특정 조건들이 만족돼야 다시 가져올 수 있다.

1. Domain

• www.google.com과 같은 서버에 접속할 수 있는 이름

2. Path

• 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미한다.
• 설정된 경로를 포함하는 하위 경로로 요청을 해도 쿠키를 서버에 전송할 수 있다.

3. MaxAge or Expires

• 쿠키가 유효한 기간을 정하는 옵션
• MaxAge: 시간을 초 단위로 설정
• Expires: 날짜 설정
• 세션 쿠키: MaxAge, Expires 옵션이 없는 쿠키(임시 쿠키)
• 영속성 쿠키: MaxAge, Expires에 지정된 유효시간만큼 사용가능한 쿠키

4. Secure

• 사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션이다.
• Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다.

5. HttpOnly

• JS에서 브라우저의 쿠키에 접근 여부를 결정한다.
• 옵션이 true인 경우 js로 쿠키에 접근이 불가하다.

6. SameSite

• Cross-Orgin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 된다.

쿠키를 이용한 상태 유지

• 기본적으로 쿠키는 오랜 시간 유지할 수 있고, HttpOnly 옵션을 사용하지 않았다면 JS를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.

Session

• 서버가 Client에 유일하고 암호화된 ID를 부여
• 중요 데이터는 서버에서 관리

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

axios 사용방법

📝 중요한 내용

• 쿠키: 서버가 클라이언트에 데이터를 저장하는 방법
• 세션: 사용자가 인증에 성공한 상태
• axios로 서버와 통신가능 (fetch와 같은 기능, 실무에서 많이 사용)

추가 비교 표: https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/

📌 어제 배운 내용을 바탕으로 실제 웹 접근성을 고려해보는 과제가 주어졌다. 하면서 이런점이 있으면 몸이 불편하신 분들에게 도움이 될 수 있고, 코드를 보고 '아! 어떤 내용이 담긴 코드이구나!' 라는 것을 알 수 있다는 것을 다시 한번 깨닫는 계기가 되었습니다.

📗 오늘 학습한 내용

alt 속성

• 속성의 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다.
• 느린 네트워크 환경이나 src 속성의 오류, 시각 장애인용 스크린 리더 등을 사용할 때 대체 정보를 제공한다.

for 속성

• for의 값과 id의 값이 같은 태그를 연결시켜준다.

<label for='name'> </label>
<input id='name'> </input>

크롬 플러그인 Screen Reader

• 웹 페이지의 내용을 읽어주는 플러그인 (alt, label, aria 등을 읽어준다.)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

스터디 모집 프로젝트에 관해 틀을 조금 더 명확하게 기획해보기(토이프로젝트)

📝 중요한 내용

• 웹 접근성을 지키면서 코드를 작성해야 한다. (법적으로 뭔가 있다했음)
• 2013년 4월 11일부터 차별 금지법에 의해 웹 접근성 보장을 의무화하고 있다고 적혀있다.

📌 이제 first프로젝트까지 남은기간은 약 5주이다. 5주동안 정말 내가 프로젝트를 완성할 수 있는지 할 수 있다면 어떤 기능을 구현할 수 있는지 직접 겪어보는 시간이 필요할 것 같다. 기획 → 와이어프레임 → 구현까지의 과정을 한번 해봐야 할 듯 하다. 기능으로는 React Router 설정 및 회원가입, 로그인 구현은 가장 기본적이기 때문에 CRUD프로젝트와는 다르게 다시 해봐야겠다.

📗 오늘 학습한 내용

웹 접근성

• 누구든지 화면을 볼 수 없거나, 소리를 들을 수 없거나, 마우스 없이 키보드밖에 사용할 수 없는 등 정보 접근에 제한을 받을 수 있는 상황을 해결하고자 노력하는 것이 웹 접근성(Web Accessibility)이다.
• 웹 접근성을 갖추면 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다.

웹 접근성을 갖추면 얻을 수 있는 효과

1. 사용자층 확대
2. 다양한 환경 지원
3. 사회적 이미지 향상

한국형 웹 콘텐츠 접근성 지침

• 인식의 용이성(Perceivable): 모든 컨텐츠는 사용자가 인식할 수 있어야 한다.
  1. 적절한 대체 텍스트 (alt 속성 사용)
  2. 자막 제공 (track 요소 사용)
  3. 색에 무관한 콘텐츠 인식 (테두리 및 레이블 달기)
  4. 명확한 지시사항 제공
  5. 텍스트 콘텐츠 명도 대비
  6. 자동 재생 금지
  7. 콘텐츠 간 구분
• 운용의 용이성(Operable): 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
  1. 키보드 사용 보장
  2. 초점 이동
  3. 조작 가능
  4. 응답 시간 조절
  5. 정지 기능 제공
  6. 깜빡임과 번쩍임 사용 제한
  7. 반복 영역 건너뛰기
  8. 제목 제공
  9. 적절한 링크 텍스트
• 이해의 용이성(Understandable): 콘텐츠는 이해할 수 있어야 한다.
  1. 기본 언어 표시(lang 속성 사용)
  2. 사용자 요구에 따른 실행
  3. 콘텐츠 선형 구조
  4. 표의 구성
  5. 레이블 제공
  6. 오류 정정
• 견고성(Robust): 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
  1. 마크업 오류 방지
  2. 웹 애플리케이션 접근성 준수

WAI (Web Accessibility Initiative)

• 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA (Accessible Rich Internet Applications)

• 장애가 있는 사람들이 웹 콘턴츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는 기술

WAI-ARIA의 필요성

• 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 사용한다.
• SPA처럼 AJAX를 사용하는 상황에서 사용한다.

WAI-ARIA 사용법

• 역할(role): HTML 요소의 역할을 정의하는 속성
• 상태(state): 요소의 현재 상태를 나타내는 속성
• 속성(property): 요소의 특징을 정의하는 속성(attribute)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

JavaScript 이분탐색 코드 분석 및 이론정리

📝 중요한 내용

• 웹 접근성이란?
• 웹 접근성을 통해 얻을 수 있는 효과
• WAI-ARIA

📌 웹 표준과 SEO는 개념을 알고 있긴 하지만 살짝 알고 있을 뿐이고 기술 면접에서 자주 나오는 부분이니 열심히 암기해야 하는 학습이다.!

📗 오늘 학습한 내용

인터넷 

• 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망

웹

• 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간

웹 표준

• W3C(World Wide Web Consortium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'
• 사용자가 어떤한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작기법
• 웹 표준에 맞게 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.

웹 표준의 장점

• 유지 보수의 용이성
• 웹 호환성 확보
• 검색 효율성 증대
• 웹 접근성 향상

Semantic HTML

• semantic: 의미가 있는
• HTML: 화면의 구조를 만드는 마크업 언어

HTML을 사용하는 두 가지 방식

• <div>와 <span>으로 화면 구성
  • 두 가지의 요소만 알면 충분히 화면의 구조를 만들 수 있지만, 어떤 내용이 들어갈지는 명시되지 않아서 경험을 토대로 태그가 어떤 역할을 하는지 추측해야하는 어려움이 있다.
• 시맨틱 요소로 화면 구성
  • <header>, <nav>, <main>, 등 여러가지 태그를 사용하여 어떤 역할을 하는 하는지 확실하게 알 수 있다.

시맨틱 HTML의 필요성

1. 개발자간 소통
2. 검색 효율성
3. 웹 접근성

자주 틀리는 태그

• 인라인 요소 안에 블록 요소 넣기
  • 인라인 요소(<span>)
    • 컨텐츠가 차지하는 만큼 영역 지정
    • 항상 블록 요소 안에 들어가야 한다.
  • 블록 요소(<div>)
    • 가로로 넓게 화면 영역을 차지한다.
• <b>, <i> 요소 사용
  • 웹 표준을 준수하기 위해서는 이 요소들을 사용하지 않는 것이 좋다.
  • 표현을 기준으로 이름이 지어진 요소이기 때문이다.
  • 대신 <strong>, <em>을 사용하는 것이 좋다.
• <hgroup> 난발하여 사용
  • 글자에 스타일 속성을 적용하기 위한 목적으로 사용하면 안된다.
• <br/> 연속 사용
  • 이어지는 텍스트 흐름에 줄 바꿈을 하기 위해 사용
  • 요소 사이에 간격이 필요한 경우 별도의 단락으로 구별하거나, CSS 속성에 여백을 주는 것이 좋다.
• 인라인 스타일링 사용
  • HTML 요소 안에서 스타일링을 하는 방법보다 CSS 코드를 분리하여 작성하는 것이 좋다.
  • HTML 안에 작성할 경우 분리한 영역을 다시 합치는 것이 되기 때문이다.

크로스 브라우징(Cross Browsing)

• 웹 사이트에 접근하느 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
• 모든 브라우저에서 완전히 똑같이 화면이 보이도록 하는 것은 아닌, 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다.

크로스 브라우징 워크 플로우

1. 초기 기획
   • 어떤 웹 사이트를 만들 것인지 정확하게 결정
   • 어떤 컨텐츠와 기능, 디자인은 어떻게 할지 등의 사항을 결정한다.
2. 개발
   1. 코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 한다.
   2. https://caniuse.com/
3. 테스트 / 발견
   1. 안정적인 테스크톱 브라우저에서 테스트를 진행한다.
   2. 휴대폰 및 태플릿 브라우저에서 테스트를 진행한다.
   3. 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행한다.
   4. Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행한다.
4. 수정 / 반복
   • 버그의 수정을 하기 위함

SEO (Search Engine Optimization, 검색 엔진 최적화)

• SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출 될 수 있게끔 할 수 있다.
• On-Page SEO
  • 페이지 내부에서 진행할 수 있는 SEO, 제목과 컨텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
• Off-Page SEO
  • 웹 사이트 외부에서 이루어지는 SEO, 소셜 미디어 홍보, 백링크 등을 이용하는 방법

On-Page 통제 요소

1. <title> 요소
   • 검색 결과창에 제목에 해당하는 요소이며, <head>의 자식 요소이다.
   • 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다. (제목 길이를 짧게)
   • 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다. (핵심 키워드는 한번만 포함)
2. <meta> 요소
   • 메타 데이터를 담는 요소이며, <head>의 자식요소이다.
   • 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
   • 검색 결과창에서 제목 밑에 따라오는 설명글
3. <hgroup> 요소
   • 제목을 표시하는 용도
4. 컨텐츠
   • 개성있는 브랜딩
   • 복사 + 붙여넣기 금지
   • 간결한 제목과 설명글
   • 최대한 글자로 작성하기

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

[python] leetcode 문제풀이

[React] 혼자 제작한 CRUD 프로젝트 리팩토링

📝 중요한 내용

• 웹 표준이란?
• 웹 표준을 지켜야 하는 이유
• 웹 표준을 사용했을 경우의 장점
• 자주 틀리는 태그(시맨틱 태그를 활용하는 방법)
• 크로스 브라우징
• SEO, 검색 엔진 최적화

📌 어제 배운 내용의 React Redux를 사용한 과제를 다시 한번 복습하는 차원에서 푼다음에 파일의 전체적인 구조에 대해서 페어님과 함께 차근차근 뜯어보는 시간을 가졌습니다. 작은 쇼핑몰에서 물건을 장바구니에 담고 삭제하는 페이지였지만 많은 state와 컴포넌트가 존재하였고 어떻게 하나하나 작은 단위로 컴포넌트를 만들어야 하는지에 대해서 감을 익히는 시간이 되었습니다. 다음에 프로젝트를 하게 된다면 꼭 컴포넌트 분리를 작업 단위로 나눠서 재사용성을 높일 수 있도록 작업을 해야겠다는 마음가짐을 다시 잡는 하루였습니다!!

📗 오늘 학습한 내용

React-Redux

• Action을 정의하는 과정에서 Dispatch를 사용하여 Action안에서 Reducer를 실행 할 수 있도록 하는 것을 깨달았습니다. 물론 파일을 직접 분해해보고 Action안에 Dispatch(Reducer)가 있어서 생각할 수 있었습니다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

React-Redux-toolkit 공부해보기

📝 중요한 내용

• Redux를 사용하여 상태관리를 할 때에는 꼭 props드릴링이 발생하는지 확인하고 사용해야한다.
• 드릴링이 발생하지 않고 사용하게되면 Redux를 낭비하게 되는 것이다.

📌 Redux 상태 관리 라이브러리를 실습하는 날이다. 어제는 prop를 남발하여 prop drilling이 생겼다는 것을 알 수 있었다. 하지만 React-Redux를 사용하게 될 경우 store(상태 저장소)에서 상태를 관리(갱신, 수정, 삭제 등)를 하고 있기때문에 위의 문제점을 해결할 수 있다는 것을 알았고, Redux를 실제로 사용해보며 손에 익힐 수 있는 시간이 되었다!!

📗 오늘 학습한 내용

Redux

• 상태 관리 라이브러리 (React 없이도 사용 가능)
• 컴포넌트와 상태를 분리하는 패턴
• 상태 변경 로직을 컴포넌트로부터 분리하여 단순한 함수 컴포넌트를 만들 수 있게 해준다.

Redux를 사용하는 이유

1. 모든 컴포넌트에서 prop 없이 state를 직접 꺼낼 수 있다.
   • 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는데 하위 컴포넌트가 너무 많을 경우 사용한다.
   • state를 보관하는 파일을 하나 만들어서 state를 보관하여 모든 컴포넌트들이 props 없이 꺼내서 사용할 수 있다.
2. 상태(state)를 관리하기 용이하다.
   • 모든 컴포넌트에서 state를 변경하기 시작할 경우 Redux를 사용하지 않는다면 에러를 찾기 힘들지만 state 저장소에서 바로 찾을 수 있다.

Redux의 상태 관리 구조: (Action → Dispatch → Reducer → Store)

1. 상태가 변경되어야 하는 이벤트가 발생하면 변경될상태에 대한 정보가 담긴 Action 객체 생성
2. Action객체: Dispatch 함수의 인자로 전달
   • 어떤 액션을 취할 것인지 정의해 놓은 객체
   • type은 Action 객체가 어떤 동작을 하는지 명시해주는 역할을 하기 때문에 필수로 지정해야 한다.(대문자, Snake Case로 작성)
   •  payload* : 액션에 필요한 추가 데이터
3. Dispatch 함수: Action 객체를 Reducer 함수로 전달
   • Reducer로 Action을 전달해주는 함수
4. Reducer 함수: Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경
   • Dispatch에게서 전달받은 Action 객체의 type에 따라 상태를 변경하는 함수 (순수 함수)
5. 상태가 변경되면, React는 화면을 재 렌더링
6. Store: 상태가 관리되는 오직 하나뿐인 저장소의 역할

Redux의 세 가지 원칙

1. Single source of truth
   • 동일한 데이터는 항상 같은 곳에서 가지고 와야한다.
2. State is read-only
   • 상태는 읽기 전용이라는 뜻으로, Redux의 상태를 직접 변경할 수 없고, Action 객체가 있어야만 상태를 변경할 수 있다.
3. Changes are made with pure functions
   • 변경은 순수함수로만 가능하다.
   • 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Redux 복습해보기

📝 중요한 내용

• Redux의 구조: Action -> Dispatch -> Reducer -> Store
• Redux를 사용하는 이유
• Redux의 세 가지 원칙