![]()
오늘은 브라우저의 동작 원리에 대해서 살펴볼 예정입니다. 프론트엔드 개발자 면접에서도 많이 나오는 질문이기도 하고요. 우선 브라우저가 먼지 먼저 살펴볼까요 ?브라우저란 ?인터넷을 통해 웹 페이지를 탐색하고 보는 데 사용되는 소프트웨어입니다.브라우저의 내부 구성다들 많이 보신 기억이 있는 사진일 거 같은데요.브라우저는유저 인터페이스 : 유저의 상호작용을 받는 부분으로 브라우저에 위쪽에 보면 뒤로, 앞으로 가기 버튼, 새로고침, 주소 입력창, 북마크 등이 있는 영역입니다.브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 엔진입니다.렌더링 엔진 : 요청받은 내용을 화면에 표시합니다.네트워킹 : 네트워크 호출을 하고 통신, 보안의 역할도 수행합니다.자바스크립트 해석기 : 자바스크립트 코드..
![]()
최근에 나온 React 19, Next js 15와 제가 좋아하는 Css 라이브러리 Panda Css로 Sns를 간단하게 만들어 보겠습니다. 깃 레포는 여기 있습니다.React 19, Next 15 init우선 초기 세팅을 해볼 건데요. 저는 이 블로그 글을 참고해서 세팅을 했습니다.React 19 + Next js 15 설치pnpm create next-app@rc이 명령어를 입력하면 여러 질문들이 나오는데요. 저는Typescript 사용Eslint 사용Tailwind 사용 Xsrc 사용App Router 사용Turbopack 사용 X@ import alias 사용 X이렇게 세팅을 했습니다.React 컴파일러 설치이번에 React 19에 새로 등장한 컴파일러인데요.pnpm add -D babel-plu..
![]()
오늘은 웹 어셈블리에 대해서 글을 써보려고 합니다.간단히 웹 어셈블리가 뭔지 알아보고 Rust를 사용해서 간단한 웹 어셈블리를 만들고 기존 Javascript와 어떤 점이 다른지 확인을 해보겠습니다.웹 어셈블리란 ?WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며, 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 소스 언어를 효과적으로 컴파일하도록 고안되었습니다.MDN 공식 문서쉽게 말해 C, C++, Rust 등 빠른 언어를 컴파일하여 브라우저에서 실행시킬 수 있는 바이너리 형식으로 만드는 기술을 의미합니다.웹 어셈블리, Javascript 처리과정 비교웹 어셈블리와 Javascript의 처리 과정을 비교..
