김무훈 - [email protected] 웹 프론트엔드 시작하기 무엇을 어떻게 하면 될까 제주대학교 프론트엔드 클럽 첫 세미나 - 2024년 5월 25일 1 / 22 

소개 자칭 "웹 프론트엔드 마법사 🪄" 성수동 사무실에서 날씨 좋은 날에 찍은 사진 https://frontend.moe/resume 2 / 22 

외부와 내부 웹 프론트엔드는 어디에 있는가 웹 브라우저 HTTP 서버 데이터베이스 ajax api repo sql HTTP TCP 여기에 구동되는 부분을 통상 웹 프론트엔드, 외부라고 부름 3 / 22 

웹브라우저(외부) 웹서버 디비 ajax api repo sql 근데… 자세히 보면… (역시 파란색 글자는 자기 마음속에 아무거로나 대체하자) UI file kernel OS ??? 유저 *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) UI 입장에는 로직, 상태, 서버 통신이 내부인데..? 웹 브라우저 입장에는 자신이 내부인데? 로직, 상태, 서버 통신 데이터베이스 입장에서 웹서버는 프론트엔드, 외부인데? 사람으로 다이어그램을 넓히면 웹 브라우저, 프론트엔드 애플리케이션의 상당 부분이 내부가 됩니다. 그리고 입장이 바뀜에 따라 프론트엔드라 불리는 곳이 달라지죠. 그런데 잘 생각해보면 그건 너무 단편적인 모습일지 모릅니다. 사실 잘 보면 어디든 그런 구조인데 말이에요. 4 / 22 

웹브라우저 웹서버 디비 ajax api repo sql 이건 안되나요..? -> 서버도 프론트엔드가 될 수 있다 UI file kernel OS ??? 유저 GUI ??? 유저 *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) 그런데 여기서 이건 안될까요? 안된다고요? 왜 안되죠? UI는 프론트엔드 만의 일인가요? 서버는 UI를 가지면 안되나요? 저건 어떤 유저의 것이냐고요? 그게 중요할까요? 5 / 22 

웹브라우저(클라이언트) 웹서버 ajax api 그럼 이건 어떤가요…? UI ??? 유저 GUI ??? 유저 웹브라우저(서버?) P2P P2P UI ??? 유저 웹브라우저(클라이언트) P2P UI ??? 유저 P2P *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) 그런 이런건 어떤가요? 프론트가 서버가 되는거에요. 안되나요? 기술적으로는 되는데요? 6 / 22 

도대체 뭐가 서버고 뭐가 클라이언트란 말인가 *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) 7 / 22 

외부와 내부가 있을 뿐 그것이 어플리케이션이니까… *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) 사실 그런건 중요하지 않습니다. 어플리케이션 개발에 있어 서버와 클라이언트라는 단순한 위상적인 구분보다 외부와 내부가 있음이 더 중요합니다. 8 / 22 

유저 웹프론트엔드 웹서버 Interaction UI ajax api 다시 돌아와서… event http 내부 완 충 지 대 완 충 지 대 외부 외부 오늘 이야기할 부분 *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) 우리의 웹 프론트엔드도 외부와 내부가 있습니다. 가장 대표적으로 유저와 소통하게 해주는 DOM과 서버와 소통하게 해주는 API죠. 9 / 22 

웹 프론트엔드의 역할 및 중요성 = 외부와 내부를 이어주는 다리, 웹 브라우저 • 기기 및 환경에 제약이 낮도록 설계된 웹 브라우저 위에 구동되는 소프트웨어 • 동일한 소스코드로 동일한 기능을 다양한 환경에 제공하게 설계된 무독과점 플렛폼 • '내부'에서 '외부'의 수많은 환경을 지원할 수 있도록 브라우저라는 완충지대가 있음 10 / 22 

웹 프론트엔드의 역할 및 중요성 = 외부와 내부를 이어주는 다리, 웹 브라우저는 세상에서 가장 복잡한 소프트웨어 • 브라우저 표준을 기술한 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 11 / 22 

웹 프론트엔드를 시작한 이유 내부를 넘어 외부와 소통하는 역할 • 다양한 분야에서 웹 서비스에 대한 수요가 많아 커머스, 콘텐츠, 금융, 법률 등 제품 개발에 깊게 관여할 기회가 열려 있다. • 서비스의 가장 끝에 위치한 내부를 직접 책임지며 하는 복합적인 소통 요구 • 외부와 내부를 이어주는 기술을 다루는 역할로 프로그래밍을 넘어, 사용자 관점과 서비스 제공자 입장을 동시에 고민 및 구현해야하는 위치 • 마치 게임 제작에서 클라이언트 프로그래머 위치와 비슷하다. 12 / 22 

웹 프론트엔드를 시작한 이유 역공학하기 쉬운 내부 • 다른 플렛폼과 달리 내부가 차량 본넷 열듯이 구성되어 있어 조사하고 수정하 는데에 제약이 없다. • 최종 사용자의 사용 환경이 개발자의 환 경과 동일한 도구라서 가능하다. • 열어둔 웹 서비스에서 당장 브라우저 개 발자 도구를 열어서 프로그래밍이 가능 하다. • 스스로 분해하고 재조립하는 편의성이 높은 편 https://www.mozilla.org/en-US/firefox/developer/ 13 / 22 

필수 기술 소개 14 / 22 

필수 기술 소개 생태계 간단 톺아보기 • HTML + CSS = DOM • 비유) 틀 : HTML, 작화&채색 : CSS • DOM 상에 틀(HTML) 와 채색(CSS) 을 API를 거쳐 유동적으로 변경 가능 • JavaScript 로 제공되는 Web API 와 브라우저 제공 개발자 도구 기능으로 변경함 https://w.wiki/A6H3, Document Object Model - Wikipedia 15 / 22 

필수 기술 소개 생태계 간단 톺아보기 • 태초의 웹은 고정된 문서였으나, 유동적인 "애플 리케이션"으로 성장하면서 모든 리소스를 직접 만들고 관리하기에는 복잡성이 매우 커짐 • Java Applet 과 Adobe Flash가 있었으나... • NodeJS 실행 환경 출현 • 외부 의존성 관리, 빌드 및 번들링 최적화 도구 가 생기고 생태계가 성장함 • 브라우저 측 JavaScript 만 보지 말고 도구가 실행되는 환경도 좀 봐 • HTML5, ECMAScript 2015판 이후 새 표준 제 정 가속화 태초에 JS를 아예 대체할 목표로 Java Applet 과 Adobe Flash가 있었으나... 16 / 22 

커뮤니티 주도 학습 17 / 22 

프로젝트 참여 스스로 또는 팀으로 만들기 • 개인 취미로 무언가를 만들기 • 브라우저 확장 제작 추천 • 자그만한 코드 조각이라도... • 커뮤니티 단위로 같이 만들기 • 가수 음원 정보 웹 서비스 • 모든 팬덤마다 하나씩 직접 만들어 운영할 정도로 문화로 자리잡음 https://modrinth.com/mods BTS 음원정보팀 - https://52hz.kr 이세계차트 - https://isegye.live 18 / 22 

오픈소스 프로젝트 기여 이미 돌아가고 있는 프로젝트에 도움 주기 • 문제 제보하기. 코드를 작성하는 것 만 큼 다른 사람에게 자신이 처한 상황을 설명하는 일이 중요합니다. • 스스로 고칠 수 있겠다 싶으면 직접 기 여해보세요. • 서로 코드를 많이 읽어 보며 자주 소통 하기 https://github.com/chakra-ui/zag/issues/622 19 / 22 

오픈소스 프로젝트 기여 이미 돌아가고 있는 프로젝트에 도움 주기 • 문제 제보하기. 코드를 작성하는 것 만 큼 다른 사람에게 자신이 처한 상황을 설명하는 일이 중요합니다. • 스스로 고칠 수 있겠다 싶으면 직접 기 여해보세요. • 서로 코드를 많이 읽어 보며 자주 소통 하기 https://github.com/chakra-ui/zag/issues/622 https://github.com/mu-hun?tab=overview&from=2022 - 12 - 01&to=2022 - 12 - 31 20 / 22 

모임 커리어 관리 • 국내에 많은 커뮤니티가 있습니다. • 네이버, 토스, 당근 주최 개발자 세미나 • 컨퍼런스 대표 예 • JSConf Korea, FEConf • 인프런 (인프콘) • https://conf.react.dev/ • 휘발성 모임을 넘어 종종 만나서 이야기하 는 같은 직군 사람을 만들면 좋음 21 / 22 

모임 커리어 관리 • 국내에 많은 커뮤니티가 있습니다. • 네이버, 토스, 당근 주최 개발자 세미나 • 컨퍼런스 대표 예 • JSConf Korea, FEConf • 인프런 (인프콘) • https://conf.react.dev/ • 휘발성 모임을 넘어 종종 만나서 이야기하 는 같은 직군 사람을 만들면 좋음 토스 - 프론트엔드 다이빙 클럽 인프콘 2022 기념품 22 / 22