Getting started web frontend

2024년 5월 25일 제주대학교 프론트엔드 클럽 첫 세미나 주제입니다.

Transcript

1. 김무훈 - iam@muhun.kim 웹 프론트엔드 시작하기 무엇을 어떻게 하면 될까
2. 소개 • 3년여 동안 웹 프런트엔드 업무 경험 • 펜슬컴퍼니 • 유니크굿컴퍼니 • 플라네타리움 • https://github.com/mu-hun 성수동 사무실에서 날씨 좋은 날에 찍은 사진
3. 외부와 내부 웹 프론트엔드는 어디에 있는가 웹 브라우저 HTTP 서버 데이터베이스 ajax api repo sql HTTP TCP 여기에 구동되는 부분을 통상 웹 프론트엔드, 외부라고 부름
4. 웹브라우저(외부) 웹서버 디비 ajax api repo sql 근데… 자세히 보면… (역시 파란색 글자는 자기 마음속에 아무거로나 대체하자) UI file kernel OS ??? 유저 *출처: 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) UI 입장에는 로직, 상태, 서버 통신이 내부인데..? 웹 브라우저 입장에는 자신이 내부인데? 로직, 상태, 서버 통신 데이터베이스 입장에서 웹서버는 프론트엔드, 외부인데?
5. 웹브라우저 웹서버 디비 ajax api repo sql 이건 안되나요..? -> 서버도 프론트엔드가 될 수 있다 UI file kernel OS ??? 유저 GUI ??? 유저 *출처: 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran)
6. 웹브라우저(클라이언트) 웹서버 ajax api 그럼 이건 어떤가요…? UI ??? 유저 GUI ??? 유저 웹브라우저(서버?) P2P P2P UI ??? 유저 웹브라우저(클라이언트) P2P UI ??? 유저 P2P *출처: 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran)
7. 도대체 뭐가 서버고 뭐가 클라이언트란 말인가 *출처: 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran)
8. 외부와 내부가 있을 뿐 그것이 어플리케이션이니까… *출처: 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran)
9. 유저 웹프론트엔드 웹서버 Interaction UI ajax api 다시 돌아와서… event http 내부 완 충 지 대 완 충 지 대 외부 외부 오늘 이야기할 부분 *출처: 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran)
10. 웹 프론트엔드의 역할 및 중요성 = 외부와 내부를 이어주는 다리, 웹 브라우저 • 기기 및 환경에 제약이 낮도록 설계된 웹 브라우저 위에 구동되는 소프트웨어 • 동일한 소스코드로 동일한 기능을 다양한 환경에 제공하게 설계된 무독과점 플렛폼 • '내부'에서 '외부'의 수많은 환경을 지원할 수 있도록 브라우저라는 완충지대가 있음
11. 웹 프론트엔드의 역할 및 중요성 = 외부와 내부를 이어주는 다리, 웹 브라우저는 세상에서 가장 복잡한 소프트웨어 • 브라우저 표준을 기술한 W3C 명세의 모든 단어를 합 하면 1억 1,400만 단어에 달합니다. (2020년 기준) • C11, C + + 17, UEFI, USB 3.2, POSIX, all 8,754 published RFCs 명세를 합쳐도 W3C 보다 한참 모 자르다. • Intel x86 ISA 메뉴얼 5,038 페이지 분량을 네번 곱 해야 분량이 비슷함 • 새로 웹 브라우저를 만들다는 건 불가능하다. 제공하 는 기능과 대처할 문제가 너무 많기 때문이다. 운영체 제 만큼이나, 혹은 그 이상으로 어렵다. • 상용 브라우저마다 동작이 약간 차이가 남. 같은 기획 서(명세)에 구현된 방안은 제조사마다 차이를 내지 않 으려해도 차이가 생기기 때문에... https://caniuse.com/ruby *The reckless, infinite scope of web browsers - March 18, 2020 on Drew DeVault's blog
12. 웹 프론트엔드를 시작한 이유 내부를 넘어 외부와 소통하는 역할 • 다양한 분야에서 웹 서비스에 대한 수요가 많아 커머스, 콘텐츠, 금융, 법률 등 제품 개발에 깊게 관여할 기회가 열려 있다. • 서비스의 가장 끝에 위치한 내부를 직접 책임지며 하는 복합적인 소통 요구 • 외부와 내부를 이어주는 기술을 다루는 역할로 프로그래밍을 넘어, 사용자 관점과 서비스 제공자 입장을 동시에 고민 및 구현해야하는 위치 • 마치 게임 제작에서 클라이언트 프로그래머 위치와 비슷하다.
13. 웹 프론트엔드를 시작한 이유 역공학하기 쉬운 내부 • 다른 플렛폼과 달리 내부가 차량 본넷 열듯이 구성되어 있어 조사하고 수정하 는데에 제약이 없다. • 최종 사용자의 사용 환경이 개발자의 환 경과 동일한 도구라서 가능하다. • 열어둔 웹 서비스에서 당장 브라우저 개 발자 도구를 열어서 프로그래밍이 가능 하다. • 스스로 분해하고 재조립하는 편의성이 높은 편 https://www.mozilla.org/en-US/firefox/developer/
14. 필수 기술 소개 생태계 간단 톺아보기 • HTML + CSS = DOM • 비유) 틀: HTML, 작화&채색: CSS • DOM 상에 틀(HTML) 와 채색(CSS) 을 API를 거쳐 유동적으로 변경 가능 • JavaScript 로 제공되는 Web API 와 브라우저 제공 개발자 도구 기능으로 변경함 https://w.wiki/A6H3, Document Object Model - Wikipedia
15. 필수 기술 소개 생태계 간단 톺아보기 • 태초의 웹은 고정된 문서였으나, 유동적인 "애플 리케이션"으로 성장하면서 모든 리소스를 직접 만들고 관리하기에는 복잡성이 매우 커짐 • Java Applet 과 Adobe Flash가 있었으나... • NodeJS 실행 환경 출현 • 외부 의존성 관리, 빌드 및 번들링 최적화 도구 가 생기고 생태계가 성장함 • 브라우저 측 JavaScript 만 보지 말고 도구가 실행되는 환경도 좀 봐 • HTML5, ECMAScript 2015판 이후 새 표준 제 정 가속화
16. 효율적 학습
17. 프로젝트 참여 스스로 또는 팀으로 만들기 • 개인 취미로 무언가를 만들기 • 브라우저 확장 제작 추천 • 자그만한 코드 조각이라도... • 커뮤니티 단위로 같이 만들기 • 가수 음원 정보 웹 서비스 • 모든 팬덤마다 하나씩 만들어 운 영할 정도로 문화로 자리잡음 https://modrinth.com/mods BTS 음원정보팀 - https://52hz.kr
18. 오픈소스 프로젝트 기여 이미 돌아가고 있는 프로젝트에 도움 주기 • 문제 제보하기. 코드를 작성하는 것 만 큼 다른 사람에게 자신이 처한 상황을 설명하는 일이 중요합니다. • 스스로 고칠 수 있겠다 싶으면 직접 기 여해보세요. • 서로 코드를 많이 읽어 보며 자주 소통 하기 https://github.com/chakra-ui/zag/issues/622
19. 오픈소스 프로젝트 기여 이미 돌아가고 있는 프로젝트에 도움 주기 • 문제 제보하기. 코드를 작성하는 것 만 큼 다른 사람에게 자신이 처한 상황을 설명하는 일이 중요합니다. • 스스로 고칠 수 있겠다 싶으면 직접 기 여해보세요. • 서로 코드를 많이 읽어 보며 자주 소통 하기 https://github.com/chakra-ui/zag/issues/622 https://github.com/mu-hun?tab=overview&from=2022 - 12 - 01&to=2022 - 12 - 31
20. 모임 커리어 관리 • 국내에 많은 커뮤니티가 있습니다. • 네이버, 토스, 당근 주최 개발자 세미나 • 컨퍼런스 대표 예 • JSConf Korea, FEConf • 인프런 (인프콘) • https://conf.react.dev/ • 휘발성 모임을 넘어 종종 만나서 이야기하 는 같은 직군 사람을 만들면 좋음
21. 모임 커리어 관리 • 국내에 많은 커뮤니티가 있습니다. • 네이버, 토스, 당근 주최 개발자 세미나 • 컨퍼런스 대표 예 • JSConf Korea, FEConf • 인프런 (인프콘) • https://conf.react.dev/ • 휘발성 모임을 넘어 종종 만나서 이야기하 는 같은 직군 사람을 만들면 좋음