seonhyungjo / frontend-note

FrontEnd Knowledge Package 📦

snyung

안녕하세요. 프로트엔드 7년차 개발자입니다.

• JS + Chromium을 이용한 솔루션 개발
• 스타트업에서 한 달만에 새로운 서비스(MVP)를 만들고 발전시키고, 투자를 받고 BM(이익을 창출하는 방식)을 만드는 경험
• React-Native 기반 Game Platform App 개발
• Flutter를 이용한 다양한 앱개발

📬 유용한 글을 공유 및 작성해요

개인 블로그 페이스북 페이지 - ImDeveloper

frontend-note's Issues

Chrome Debugger 사용하기

Chrome Debugger 사용하기

Factory Pattern

TDD란??

[HTML] DTD

표준모드 쿽스모드에 있는 DTD 추가 수정하

MixIn 패턴

MixIn 패턴

[업데이트] 하드웨어 가속화

[업데이트] 하드웨어 가속화

Functional Programming 다시 정리하기

Functional Programming

특징

1급객체

순수함수

고차함수

Preload & Prefetch

Preload & Prefetch

ES6 정리하기

[HTML] 이미지 - 비트맵, 벡터, WebP

이미지 - 비트맵, 벡터, WebP

[자료구조]Stack(스택)과 Queue(큐)

Stack(스택)과 Queue(큐)

프론트엔드 보안

프론트 보안 관련 추가적으로 정리 진행하기

참고

• https://jeong-pro.tistory.com/68
• https://www.vobour.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-react-%EC%95%B1%EC%9D%98-%EA%B0%80%EC%9E%A5-%ED%9D%94%ED%95%9C-xss-%EC%B7%A8%EC%95%BD%EC%A0%90-the-most-com

실행 컨텍스트 Execution Context

참고

• https://poiemaweb.com/js-execution-context

자바스크립트 DOM

자바스크립트 DOM

Delete

객체 속성을 지울 때는 Delete가 아니라 undefined나 null이 낫다?

MFA(micro front-end Archithecture)

• Micro Frontend Architecture and Best Practices

Adapter Pattern

NPX

npx란 간단하게 설명 진행

npx하는 김에 nvm도 같이 정리해보기

자바스크립트 클래스

자바스크립트 클래스

FeConf 2018

키노트

Section1

1. 미국 개발자, 그리고 한국 개발자 X
2. Reduc-saga - 제너레이터, 사이드 이펙트, 채널 X
3. webGL O
4. 웹폰트의 사용과 최적화 O
5. 개발자를 위한 UX programming O
6. Front-end 프로젝트의 Test code 경험기 O

Secion2

1. TC 39 스펙에 대한 주관적 참견 시점 O
2. 복붙없이 우리팀에 딱 맞는 엥귤러 프로젝트 만들기 X
3. React Component와 D3 Object를 유기적으로 연결하는 전략 X
4. 한편의 애니메이션 같은 CSS O
5. 자체 polyfill.io서버 구축하여 프론트엔드 최적화 하기 O
6. 은밀하게 신속하게 React 포팅 성공기 X

[업데이트] Reflow Repaint

[업데이트] Reflow Repaint

ARIA 당신은 무엇인가?

참고 사이트

• Why, How, and When to Use Semantic HTML and ARIA
• 레진 WAI-ARIA 가이드라인
• 왜 ARIA인가?

[업데이트] Cookie Session Local

[업데이트] Cookie Session Local

Javascript 메모리 관리

Javascript 메모리 관리

Browser IndexedDB, WebSQL이란?

Browser IndexedDB, WebSQL이란?

WebWorker

WebWorker

[ES3] ECMA-262-3 in detail. Chapter 4. Scope chain.

Mouse Event

다양한 마우스 이벤트에 대해서

MouseEnter와 Mouseover의 차이점

[HTML] 웹표준 W3C Validator

[HTML] 웹표준 W3C Validator

[업데이트] 최신 브라우저 내부 살펴보기

[업데이트] 최신 브라우저 내부 살펴보기

[업데이트]웹 브라우저 작동 원리

[업데이트]웹 브라우저 작동 원리

[업데이트] DOM이란?

[업데이트] DOM이란?

[ES5] Strict 모드에 관하여

https://moon9342.github.io/javascript-use-strict

Javascript Engine 모아보기

참고 자료

• https://velog.io/@godori/JavaScript-%EC%97%94%EC%A7%84-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0-mdjowmjlcb

README.md Contents수정하기

1. 새로 추가된 내용 추가하기
2. 기존내용 : new: 제거하기
3. functional 수정내용 관련 업데이트 올리기

HTML5 Tag 정리하기

HTML5 Tag 정리하기

window.history

window.history

NSIS에 대해서

[Secure] Session hijacking

[Secure] Session hijacking

자바스크립트 프로토타입

자바스크립트 프로토타입

Babel에 대해서

Babel에 대해서

[NEW] 레포 운영 방법 변경

레포 운영 방법 변경

Trigger

현재 Repo는 2018년 9월에 시작하여 일주일에 1개이상의 주제를 가지고 공부를 하거나 내가 이미 알고 있는 것도 새로이 리마인드를 할 수 있도록 해주는 공간이었다.

지금도 그 역할을 충분히 해내고 있다고 생각한다. 그러다 점점 내용이 많아지다 보니 전에 작성했던 내용 중에 잘못된 내용, 오타 등등 수정할 내용들이 보이게 되고 작성하는 주제가 겹치는 경우도 발생하게 되어 하나의 구조를 가지고 관리를 해야겠다는 생각에서 시작했다.

Issue

기존에도 Issue에 간간히 하고 싶은 내용을 적었으나 스스로 관리가 안되어 다시 지웠다.
글을 관리하는 새로운 룰을 추가하자면

• 흥미가 생겨 알아보고 싶은 주제, 내용이 생기면 To-Do label을 달고 Issue에 올린다.
• 일주일에 1개씩 작성하는 글은 Issue의 내용을 우선적으로 처리한다.
• 항상 작성한 글은 풀리퀘로 옮겨서 한번 더 확인을 거친후에 merge작업을 한다.
• 완료된 Issue는 링크첨부와 함께 Close 처리를 한다.

👏 이외 레포와 관련된 제안사항, 버그들은 언제나 환영입니다.
당연히 ⭐️도 환영입니다.

추가적으로

기존 레포는 개인공부 용도로 가져가고 있었는데 제안, 버그, 공부 등등을 하는데 있어서 다른 분들의 도움도 필요하다고 생각하였습니다.

모든 분들의 PR은 언제나 환영입니다. 😍

자바스크립트 map, reduce, filter

자바스크립트 map, reduce, filter

[Network] Cookie

[Network] Cookie

HTML Meta Tag

HTML Meta Tag

[업데이트] EventLoop

[업데이트] EventLoop

정규표현식

정규표현식

Test Issue

Test Issue

[업데이트] Event Loop Advanced

Event Loop Advanced

자바스크립트 this

자바스크립트 this