초보 개발자를 위한 웹 프론트엔드 개발 101
TRANSCRIPT
Working for SKplanet
Google Developer Expert for the Web tech.
GDG Korea WebTech 운Ý자
HTML5Rocks/KO & Web Fundamentals 번역 코디네이터
자기 소개를 굳이 한 이유는...
저는 101 진행을 하지 않습니다.
오늘 워크숍을 진행해주실 분들은...
첫번째 세션: 조은님, 우아한 형제들, 배달의 민족HTML & CSS 101
두번째 세션: 김정윤님, SKPlanet, 11번가프론트엔드를 여행하는 히치하이커를 위한 안내서
�신, 제가 오늘 하고 싶은 얘기는...초보 개발자로써 알았으면 하는 것들...
필요한 것이 없는 것이 당연하지 않다고 생각했으면...
시도해도 계속 없다면 더 좋은 곳으로 가야 합니다. :)
1. 버전 관리
지구 어디에서나 벌어지는 일
물론 git이 유일한 �안이 아닙니다만...
지역마다의 차이는 있지만...
회사에서 쓰고 있지 않거나 쓸 일이 없어서Git을 빨리 익히기 어렵다면...
코드로 기여하기 어렵다면, 간단한 번역으로 시작해도 좋습니다.
외국 개발자들 중에 한국어 잘하는 사람이 많지 않거든요. :)
읽어볼만한 문서
git ‑ 간편 안내서
Learn git branch
Pro git 2판 한국어 버전
git 한Ú 번역본 묶음
GUI 도구
Atlassian Sourcetree
GitHub Desktop
2. 프로젝트 구조
알아두면 좋은 단어: boilerplate
3. 궁금한 것이 있을 때
W3School은 제발 그만...
Ý문 표준이 어렵다면, 번역도 있습니다.
다른 표준에 �한 번역들도 있으니까, 검색해보세요.
구Ú링 팁: site:URL
검색 결과의 범주를 주어진 URL 로 제한
검색 쿼리에 MDN만 추가해도...
3. 개발 프로세스
개발, 소스 관리, 테스트 그리고 배포
뜨거운 물을 용기에 표시선까지 넣고, 3분 뒤에 드세요?
점점 커지는 복잡도/어려워지는 조합의 프론트엔드
우리는 원한다. 좋은 것을...
개발자는 코드와 모듈을 분리된 형태로 관리하고 싶어함
HTTP 호출을 최소화하기 위한 최적화된 코드
~!@#$%^&*(
의문: 의존성(Dependency)
#include , import , package , build system
프론트엔드는 그런거 없어?
We ♥ $ npm install
package.json님은 모든 것을 알고 계십니다.
minified, unified, uglified, ...
작게!! 하나로!!! 때로는 난독화도!!
Task Runner
그외에
Useful libraries?
"뭣이 좋은디?? 뭣이 중헌지도 모르고..."
좀 더 중요한 것
일단 웹 문서가 어떻게 구성되는지
DOM API를 어떤 것들을 제공하고 어떻게 동작하는지
브라우저에서 렌더링과 로딩의 과정이 어떻게 발생하는지
등등
때로는 CDN
https://cdnjs.com/
https://developers.google.com/speed/libraries/
https://fonts.google.com/ 혹은 early access
돈 없을 때 좋은, HTTPS가 필요하면 더 좋은 cloudflare
다시 말�드리지만...
w3school 그만 가고 올바른 문서에서부터 시작하는 습관을!!
궁금한 것은 좋은 검색부터
프로세스가 없을 수 있지만, 계속 없는 것이 당연한 것은 아닙니다.
이어서 다음 순서로 세션이 진행됩니다.
HTML & CSS 101 (조은님)
프론트엔드를 여행하는 히치하이커를 위한 안내서 (김정윤님)
감사합니다!