(역시 파란색 글자는 자기 마음속에 아무거로나 대체하자) UI file kernel OS ??? 유저 *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) UI 입장에는 로직, 상태, 서버 통신이 내부인데..? 웹 브라우저 입장에는 자신이 내부인데? 로직, 상태, 서버 통신 데이터베이스 입장에서 웹서버는 프론트엔드, 외부인데? 사람으로 다이어그램을 넓히면 웹 브라우저, 프론트엔드 애플리케이션의 상당 부분이 내부가 됩니다. 그리고 입장이 바뀜에 따라 프론트엔드라 불리는 곳이 달라지죠. 그런데 잘 생각해보면 그건 너무 단편적인 모습일지 모릅니다. 사실 잘 보면 어디든 그런 구조인데 말이에요.
http 내부 완 충 지 대 완 충 지 대 외부 외부 오늘 이야기할 부분 *출처 : 토스 프다클 2024.02.23 (금) - 아 ᆫ 저 ᆫ 하 고 새 ᆼ사 ᆫ성 노 ᇁ으 며 추저 ᆨ 가 느 ᆼ 하 고 모니터리 ᆼ 가 느 ᆼ 하 ᆫ API 호추 ᆯ하 기 - 스마트푸드네트웍스 김태균(Sooran) 우리의 웹 프론트엔드도 외부와 내부가 있습니다. 가장 대표적으로 유저와 소통하게 해주는 DOM과 서버와 소통하게 해주는 API죠.
웹 브라우저는 세상에서 가장 복잡한 소프트웨어 • 브라우저 표준을 기술한 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
다양한 분야에서 웹 서비스에 대한 수요가 많아 커머스, 콘텐츠, 금융, 법률 등 제품 개발에 깊게 관여할 기회가 열려 있다. • 서비스의 가장 끝에 위치한 내부를 직접 책임지며 하는 복합적인 소통 요구 • 외부와 내부를 이어주는 기술을 다루는 역할로 프로그래밍을 넘어, 사용자 관점과 서비스 제공자 입장을 동시에 고민 및 구현해야하는 위치 • 마치 게임 제작에서 클라이언트 프로그래머 위치와 비슷하다.
달리 내부가 차량 본넷 열듯이 구성되어 있어 조사하고 수정하 는데에 제약이 없다. • 최종 사용자의 사용 환경이 개발자의 환 경과 동일한 도구라서 가능하다. • 열어둔 웹 서비스에서 당장 브라우저 개 발자 도구를 열어서 프로그래밍이 가능 하다. • 스스로 분해하고 재조립하는 편의성이 높은 편 https://www.mozilla.org/en-US/firefox/developer/
= DOM • 비유) 틀 : HTML, 작화&채색 : CSS • DOM 상에 틀(HTML) 와 채색(CSS) 을 API를 거쳐 유동적으로 변경 가능 • JavaScript 로 제공되는 Web API 와 브라우저 제공 개발자 도구 기능으로 변경함 https://w.wiki/A6H3, Document Object Model - Wikipedia
문서였으나, 유동적인 "애플 리케이션"으로 성장하면서 모든 리소스를 직접 만들고 관리하기에는 복잡성이 매우 커짐 • Java Applet 과 Adobe Flash가 있었으나... • NodeJS 실행 환경 출현 • 외부 의존성 관리, 빌드 및 번들링 최적화 도구 가 생기고 생태계가 성장함 • 브라우저 측 JavaScript 만 보지 말고 도구가 실행되는 환경도 좀 봐 • HTML5, ECMAScript 2015판 이후 새 표준 제 정 가속화 태초에 JS를 아예 대체할 목표로 Java Applet 과 Adobe Flash가 있었으나...
만들기 • 브라우저 확장 제작 추천 • 자그만한 코드 조각이라도... • 커뮤니티 단위로 같이 만들기 • 가수 음원 정보 웹 서비스 • 모든 팬덤마다 하나씩 직접 만들어 운영할 정도로 문화로 자리잡음 https://modrinth.com/mods BTS 음원정보팀 - https://52hz.kr 이세계차트 - https://isegye.live
문제 제보하기. 코드를 작성하는 것 만 큼 다른 사람에게 자신이 처한 상황을 설명하는 일이 중요합니다. • 스스로 고칠 수 있겠다 싶으면 직접 기 여해보세요. • 서로 코드를 많이 읽어 보며 자주 소통 하기 https://github.com/chakra-ui/zag/issues/622
문제 제보하기. 코드를 작성하는 것 만 큼 다른 사람에게 자신이 처한 상황을 설명하는 일이 중요합니다. • 스스로 고칠 수 있겠다 싶으면 직접 기 여해보세요. • 서로 코드를 많이 읽어 보며 자주 소통 하기 https://github.com/chakra-ui/zag/issues/622 https://github.com/mu-hun?tab=overview&from=2022 - 12 - 01&to=2022 - 12 - 31
토스, 당근 주최 개발자 세미나 • 컨퍼런스 대표 예 • JSConf Korea, FEConf • 인프런 (인프콘) • https://conf.react.dev/ • 휘발성 모임을 넘어 종종 만나서 이야기하 는 같은 직군 사람을 만들면 좋음 토스 - 프론트엔드 다이빙 클럽 인프콘 2022 기념품
muhun
mayuki
afilina
cer
uskey512
layerx
little_rubyist
tnagao7
mackey0225
1024jp
manfredsteyer
gam0022
yusukebe
thekraken
denniskardys
mclloyd
chrislema
geoffreycrofte
iamctodd
sferik
geeforr
jonyablonski
tammielis
michaelherold
matthewcrist
![김무훈 - [email protected] 웹 프론트엔드 시작하기 무엇을 어떻게 하면 될까](https://files.speakerdeck.com/presentations/55167088d1664c57a909d589299101b8/slide_0.jpg){kind=link}
