할 일과 유용한 것들

목차

프론트엔드 개발자 시작하기 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.2. HTML 소개 (~8/14)

https://developer.mozilla.org/ko/docs/Learn/HTML 여기를 참고해서 작성.

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML

HTML 시작하기

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

HTML 텍스트 기본

하이퍼링크 만들기

텍스트 조작 고급기법

문서와 웹사이트 구조

HTML 디버깅

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

https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding

HTML 이미지

비디오와 오디오 컨텐츠

로부터 까지 — 기타 임베딩 기술

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

반응형 이미지

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

https://developer.mozilla.org/ko/docs/Learn/HTML/Tables

HTML 테이블 기본

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

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

https://developer.mozilla.org/en-US/docs/Learn/Forms

HTML의 폼 검증에 대한 글 쓰기

첫 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

https://developer.mozilla.org/ko/docs/Learn/JavaScript

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

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps

JavaScript가 뭔가요?

JavaScript에 발 담그기

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

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

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

문자열 다루기 — 문자열

문자열 제대로 다루기

배열(Arrays)

Silly story generator

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

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks

판단 내리기 - 조건문

반복문

함수 - 코드 재사용

함수 만들기

함수 반환값

이벤트 입문

3.3. Javascript 객체(~8/21)

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects

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)

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous

Introducing asynchronous JavaScript

How to use promises

Implementing a promise-based API

현재 여기까지 와 있다. 중간에 Nextjs, 리액트 난입

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

  • Routing (~9/4)
  • Data fetching (~9/4)
  • Rendering (~9/4)
  • Caching (~9/4)
  • Styling (~9/5)
  • Optimizing(~9/5)
  • Configuring(~9/6)
  • Deploying(~9/6)
  • Upgrading(~9/7)
  • API Reference - Components(~9/7)
  • API Reference - File Conventions(~9/8)
  • API Reference - Functions(~9/9)
  • next.config.js options(~9/11)
  • create-next-app, Edge Runtime(~9/12)
  • next.js CLI(~9/13)

추후 2회독 하면서 블로그에 조금씩 정리할 예정

블로그 마이그레이션 천천히..

리액트 공식문서

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)

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Client-side_web_APIs

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

JS 안내서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Introduction

3.6. Javascript 중고급 주제들(~9/6)

https://developer.mozilla.org/ko/docs/Web/JavaScript

https://developer.mozilla.org/ko/docs/Web/JavaScript#%EC%A4%91%EA%B8%89

물론 참고서 섹션에도 볼만한 게 많다.

JavaScript 데이터 구조

동등성 비교 및 동일성

속성의 열거 가능성과 소유권

클로저

상속과 프로토타입 체인

JavaScript 형식화 배열

메모리 관리

Concurrency model and Event Loop

3.7. AJAX(~9/10)

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX

4. 접근성(~9/20)

https://developer.mozilla.org/ko/docs/Learn/Accessibility

4.1. 접근성 소개

접근성이란?

HTML : 접근성의 좋은 기반

CSS 와 JavaScript의 접근성 모범 사례 (en-US)

WAI-ARIA 기초 (en-US)

멀티미디어 접근성 (en-US)

모바일 접근성

접근성 트러블슈팅

8. 웹 보안

https://developer.mozilla.org/ko/docs/Web/Security

8.1. 콘텐츠 보안(~9/29)

콘텐츠 보안 정책(CSP)

8.2. 연결 보안(~10/5)

전송 계층 보안(TLS)

HTTPS

HTTP Strict-Transport-Security

인증서 투명성

혼합 콘텐츠

혼합 콘텐츠가 차단된 웹사이트를 고치는 방법 (en-US)

보안 컨텍스트

보안 컨텍스트로 제한된 기능

Weak signature algorithms (en-US)

8.3. 데이터 보안(~10/10)

HTTP 쿠키 사용

로컬 스토리지

8.4. 정보 유출(~10/13)

리퍼러 헤더 정책: 개인 정보 보호 및 보안 문제 (en-US)

자격 증명 없는 IFrame (en-US)

8.5. 무결성(~10/15)

동일 출처 정책

하위 리소스 무결성 (en-US)

HTTP Access-Control-Allow-Origin

HTTP X-Content-Type-Options (en-US)

8.6. 클릭재킹 보호(~10/18)

HTTP X-Frame-Options

CSP: frame-ancestors (en-US)

8.7. 사용자 정보 보안(~10/21)

안전하지 않은 비밀번호

개인 정보 및 :visited 선택자 (en-US)

9. HTTP

https://developer.mozilla.org/ko/docs/Web/HTTP

9.1. HTTP 기본(~10/25)

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP

HTTP 개요

HTTP의 진화

HTTP 버전 협상

HTTP 메시지

전형적인 HTTP 세션

HTTP/1.x 연결관리

프로토콜 업그레이드 메커니즘

9.2. 리소스와 URIs(~10/27)

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web

웹의 리소스 식별하기

데이터 URL

MIME 타입 소개

www와 non-www URL

9.3. HTTP 보안(~10/30)

콘텐츠 보안 정책(CSP)

HTTP strict transport security

X-Content-Type-Options

X-Frame-Options

X-XSS-Protection

HTTP Public Key Pinning

Mozilla Observatory

사이트 보안 등을 체크할 수 있는 듯

https://observatory.mozilla.org/

9.4. 기타 이슈(~11/2)

HTTP 접근제어(CORS)

HTTP 인증

HTTP 캐싱

HTTP 압축

HTTP 조건부 요청

HTTP 컨텐츠 협상

HTTP 쿠키

HTTP range 요청

HTTP 리다이렉트

HTTP 명세

Permissions policy

5. 웹 퍼포먼스

https://developer.mozilla.org/en-US/docs/Learn/Performance

5.1. 웹 퍼포먼스 소개

The "why" of web performance

What is web performance?

How do users perceive performance?

Measuring performance

Multimedia: images

Multimedia: video

JavaScript performance optimization

HTML performance optimization

CSS performance optimization

The business case for web performance

참고할 만한 블로그

비사이드소프트의 글들 https://www.bsidesoft.com/

김민지 님의 블로그 https://mnxmnz.github.io/

김용찬 님의 블로그 https://yceffort.kr/

안도형 님의 블로그 https://www.rinae.dev/

여러 번역 글이 있다 https://www.rinae.dev/posts/a-complete-guide-to-useeffect-ko

정인교 님의 블로그 https://ingg.dev/

Javascript

JS 동작 원리

참고 https://velog.io/@wish/JavaScript%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%90%A0%EA%B9%8C

JS Worker에 관하여

fetch API에 쓰이는 Request, Response 객체

Promise를 받을 때 등에 쓰이는 blob이란 무엇인가?

https://developer.mozilla.org/en-US/docs/Web/API/Response/blob

AJAX 에 대해

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

WebGL

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

HTTP

https://developer.mozilla.org/ko/docs/Web/HTTP

웹브라우저에 대하여

웹브라우저 주소창에 google.com 쓰고 엔터를 누르면 무슨 일이 일어나는지, 각 과정에서 개발자는 어떻게 개입할 수 있는지 5분간 설명해보세요.

Intersection Observer API

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

window, navigator 등 몇몇 전역 객체에 대해

https://developer.mozilla.org/en-US/docs/Web/API/Window

https://developer.mozilla.org/en-US/docs/Web/API/Navigator

call, apply 등으로 this 조작

== 등으로 비교하는 로직

호이스팅, 실행 컨텍스트, 클로저 etc.

이터레이션 프로토콜

strict mode

Map, Object diff

DOM

JS 가비지 컬렉터

JS Error 객체

제네릭 T 타입으로 객체 초기화하기

https://stackoverflow.com/questions/71358061/generic-useform-hook

React

useState의 작동 원리

리액트 커스텀 훅

useEffect 원리

기타

rem, px, vw의 차이와 언제 써야 하는지

react-query 탐구 이어쓰기

운영체제 7단원 식사하는 철학자들 문제, 8단원 데드락

6. 도구와 테스팅

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing

6.1. 클라이언트 사이드 웹 개발 도구

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools

Client-side tooling overview

Command line crash course

Package management basics

Introducing a complete toolchain

Deploying our app

6.2. 클라이언트 사이드 프레임워크 소개

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction

React, Ember, Vue, Svelte 등등. 생략

6.3. 크로스 브라우저 테스팅

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing

Introduction to cross browser testing

Strategies for carrying out testing

Handling common HTML and CSS problems

Handling common JavaScript problems

Handling common accessibility problems

Introduction to automated testing

Setting up your own test automation environment

7. 서버사이드 웹사이트 프로그래밍

https://developer.mozilla.org/en-US/docs/Learn/Server-side

7.1. 첫걸음

https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps

Introduction to the server side

Client-Server overview

Server-side web frameworks

Website security

7.2. Django

생략

7.3. Express web framework

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs

10. 프로그레시브 웹 앱

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

CSS

웹 개발자 안내서의 CSS 부분 구조

https://developer.mozilla.org/ko/docs/Web/Guide

2.1. CSS 첫번째 단계

https://developer.mozilla.org/ko/docs/Learn/CSS 에서 발췌

https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps

CSS란 무엇인가?

CSS 시작하기

CSS 구조

CSS 작동 방식

2.2. CSS 구성요소

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks

CSS 선택자

Type, class and ID selectors

Attribute selectors

Pseudo-classes and pseudo-elements

combinators

계단식 및 상속

cascade layers

박스 모델

배경 및 테두리

텍스트 표시 방향 제어하기

콘텐츠 오버플로우

CSS 값과 단위

CSS에서 항목 크기 조정

이미지, 미디어 및 양식 요소

표 스타일링

CSS 디버깅

CSS 구성

기본적인 CSS 이해

편지지 만들기

A cool looking box

2.3. 텍스트 스타일링

https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text

기본적인 텍스트 및 글꼴 스타일

목록 스타일링

링크 스타일링

웹 글꼴

2.4. CSS 레이아웃

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout

CSS 레이아웃 입문서

일반 대열(normal flow)

Flexbox

Grids

Floats(부동체)

Positioning

Multiple-column Layout

Responsive design

미디어 쿼리 안내서

레거시 레이아웃 메서드

이전 브라우저 지원

2.5. CSS 핵심 개념

https://developer.mozilla.org/ko/docs/Web/CSS 이곳의 참고서에서.

언어 구문과 형태

명시도

상속

종속

CSS 값과 단위

CSS 함수 표기법

박스 모델

여백 상쇄

컨테이닝 블록

쌓임 맥락, 블록 서식 맥락

초기값, 계산값, 사용값, 실제값

CSS shortcut

CSS flexbox

CSS grid

CSS 선택자

미디어쿼리

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries

CSS 애니메이션

https://developer.mozilla.org/ko/docs/Web/CSS/animation

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations

2.6. CSS 고급

CSS 레이아웃에 관한 글 모음

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Layout

개발자 가이드

모질라에선 수많은 가이드를 제공하고 있다.

https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery

레퍼런스에 있는 수많은 항목들도 언젠가 봐야지..

11. 디자인 패턴

https://patterns-dev-kr.github.io/

기타

다양한 학습서와 교육 자료가 있는 학습서 https://developer.mozilla.org/ko/docs/Web/Tutorials

HTTP부터 합시다

1.6. 고급 주제 (~8/18)

https://developer.mozilla.org/ko/docs/Web/HTML 참고

HTML 참고서

https://developer.mozilla.org/ko/docs/Web/HTML/Reference

CORS 활성화 이미지

CORS 설정 특성

rel="preload"로 콘텐츠 미리 불러오기

1.7. 기타 (보류)

콘텐츠 카테고리

https://developer.mozilla.org/ko/docs/Web/HTML/Content_categories

다른 여러 주제들은 왼쪽 사이드바의 안내서참고

호환성 모드와 표준 모드