할 일과 유용한 것들

2023. 01. 01

study

써야 할 글
1. HTML
- 1.1. HTML 기본
- 1.2. HTML 소개 (~8/14)
- 1.3. 멀티미디어와 임베딩 (~8/14)
- 1.4. HTML 테이블 (~8/14)
  - HTML 테이블 기본
  - HTML 테이블 고급 기능 및 접근성
- 1.5. HTML 폼 가이드 (~8/16)
3. Javascript
- 3.1. Javascript 첫걸음(~8/17)
- 3.2. Javascript 구성요소(~8/19)
- 3.3. Javascript 객체(~8/21)
- 3.4. Javascript 비동기성(~8/26)
Nextjs 13 공식 문서 보기 - 1회독
리액트 공식문서
- Describing the UI(~9/15)
- Adding interactivity(~9/16)
- Managing State(~9/19)
- Escape Hatches(~9/21)
  - Introducing asynchronous Workers
  - Sequencing asynchronous operations
- 3.5. 클라이언트 사이드 Web API(~8/30)
- JS 안내서
- 3.6. Javascript 중고급 주제들(~9/6)
- 3.7. AJAX(~9/10)
4. 접근성(~9/20)
- 4.1. 접근성 소개
8. 웹 보안
- 8.1. 콘텐츠 보안(~9/29)
  - 콘텐츠 보안 정책(CSP)
- 8.2. 연결 보안(~10/5)
- 8.3. 데이터 보안(~10/10)
  - HTTP 쿠키 사용
  - 로컬 스토리지
- 8.4. 정보 유출(~10/13)
  - 리퍼러 헤더 정책: 개인 정보 보호 및 보안 문제 (en-US)
  - 자격 증명 없는 IFrame (en-US)
- 8.5. 무결성(~10/15)
- 8.6. 클릭재킹 보호(~10/18)
  - HTTP X-Frame-Options
  - CSP: frame-ancestors (en-US)
- 8.7. 사용자 정보 보안(~10/21)
  - 안전하지 않은 비밀번호
  - 개인 정보 및 :visited 선택자 (en-US)
9. HTTP
- 9.1. HTTP 기본(~10/25)
- 9.2. 리소스와 URIs(~10/27)
- 9.3. HTTP 보안(~10/30)
- 9.4. 기타 이슈(~11/2)
5. 웹 퍼포먼스
- 5.1. 웹 퍼포먼스 소개
참고할 만한 블로그
Javascript
- JS 동작 원리
- JS Worker에 관하여
- fetch API에 쓰이는 Request, Response 객체
- Promise를 받을 때 등에 쓰이는 blob이란 무엇인가?
- AJAX 에 대해
- WebGL
- HTTP
- 웹브라우저에 대하여
- Intersection Observer API
- window, navigator 등 몇몇 전역 객체에 대해
- call, apply 등으로 this 조작
- == 등으로 비교하는 로직
- 호이스팅, 실행 컨텍스트, 클로저 etc.
- 이터레이션 프로토콜
- strict mode
- Map, Object diff
- DOM
- JS 가비지 컬렉터
- JS Error 객체
- 제네릭 T 타입으로 객체 초기화하기
React
- useState의 작동 원리
- 리액트 커스텀 훅
- useEffect 원리
기타
- rem, px, vw의 차이와 언제 써야 하는지
- react-query 탐구 이어쓰기
- 운영체제 7단원 식사하는 철학자들 문제, 8단원 데드락
6. 도구와 테스팅
- 6.1. 클라이언트 사이드 웹 개발 도구
- 6.2. 클라이언트 사이드 프레임워크 소개
- 6.3. 크로스 브라우저 테스팅
7. 서버사이드 웹사이트 프로그래밍
- 7.1. 첫걸음
- 7.2. Django
- 7.3. Express web framework
10. 프로그레시브 웹 앱
CSS
- 2.1. CSS 첫번째 단계
- 2.2. CSS 구성요소
- 2.3. 텍스트 스타일링
- 2.4. CSS 레이아웃
- 2.5. CSS 핵심 개념
- 2.6. CSS 고급
개발자 가이드
11. 디자인 패턴
기타
- 1.6. 고급 주제 (~8/18)
- 1.7. 기타 (보류)
  - 콘텐츠 카테고리
  - 호환성 모드와 표준 모드

프론트엔드 개발자 시작하기 https://developer.mozilla.org/ko/docs/Learn/Front-end_web_developer

써야 할 글

aria 접근성 다루기

aria Patterns 분석 https://www.w3.org/WAI/ARIA/apg/patterns/

https://ant.design/ 같은 안 좋은 선례 분석과 함께 다른 디자인 시스템에서는 접근성을 어떻게 소화해냈는지에 대한 분석

https://react-spectrum.adobe.com/react-aria/

2023년 8월에 시작된 기본기 다지기 계획

1. HTML

1.1. HTML 기본

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics

할 일과 유용한 것들

써야 할 글

1. HTML

1.1. HTML 기본

1.2. HTML 소개 (~8/14)

HTML 시작하기

head 안에는 무엇이 있나? HTML 메타 데이터

HTML 텍스트 기본

하이퍼링크 만들기

텍스트 조작 고급기법

문서와 웹사이트 구조

HTML 디버깅

1.3. 멀티미디어와 임베딩 (~8/14)

HTML 이미지

비디오와 오디오 컨텐츠

Vector graphics 웹에 추가하기 (en-US)

반응형 이미지

1.4. HTML 테이블 (~8/14)

HTML 테이블 기본

HTML 테이블 고급 기능 및 접근성

1.5. HTML 폼 가이드 (~8/16)

첫 HTML 폼

HTML 폼 구조화

Basic native form controls

HTML5 input types

Other form controls

Styling web forms

Advanced form styling

UI pseudo-classes

Client-side form validation

Sending form data

How to build custom form controls

Sending forms through JavaScript

CSS property compatibility table for form controls

3. Javascript

3.1. Javascript 첫걸음(~8/17)

JavaScript가 뭔가요?

JavaScript에 발 담그기

뭐가 잘못됐을까요? JavaScript 문제 해결

필요한 정보를 저장하기-변수

JavaScript의 기본적인 연산 - 숫자와 연산자

문자열 다루기 — 문자열

문자열 제대로 다루기

배열(Arrays)

Silly story generator

3.2. Javascript 구성요소(~8/19)

판단 내리기 - 조건문

반복문

함수 - 코드 재사용

함수 만들기

함수 반환값

이벤트 입문

3.3. Javascript 객체(~8/21)

JavaScript 객체 기본

Object prototypes

Object-oriented programming

Classes in JavaScript

JSON으로 작업하기

Object building practice

Adding features to our bouncing balls demo

3.4. Javascript 비동기성(~8/26)

Introducing asynchronous JavaScript

How to use promises

Implementing a promise-based API

Nextjs 13 공식 문서 보기 - 1회독

리액트 공식문서

Describing the UI(~9/15)

Adding interactivity(~9/16)

Managing State(~9/19)

Escape Hatches(~9/21)

Introducing asynchronous Workers

Sequencing asynchronous operations

3.5. 클라이언트 사이드 Web API(~8/30)

Introduction to web APIs (en-US)

Manipulating documents (en-US)

Fetching data from the server (en-US)

Third party APIs (en-US)

Drawing graphics (en-US)

Video and audio APIs (en-US)

Client-side storage