Frontend

CSS 스펙 탐구하기

이 글은 사내 기술 블로그에 기고했던 https://tech.streami.co/state-of-css-by-deobi/ 글을 옮겨와 그대로 작성했습니다. 안녕하세요, 저는 스트리미 FE팀에서 이용자가 마주하는 고팍스의 인터페이스를 개발하는 프론트엔드 엔지니어 더비입니다. 이번 포스팅에서는 제가 지난 4분기 FE팀 기술 세미나에서 State of CSS라는 제목으로 발표했던 세션에 대해 소개할까 합니다. 세션 소개 세션 목차 1. 들어가며-이 주제를 선택한 이유는? 2. Subgrid 3. Writing Modes 4. CSS Logical Properties 5. Viewport-Percentage Length Units 6. blend-mode 7. Filters & Effects 8. backdro..

React에서 babel의 동작원리 & React와 Virtual DOM 이해하기

먼저 babel이란? Babel 은 자바스크립트 컴파일러이다. 최신 버전의 자바스크립트 문법은 브라우저가 이해할 수 없기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. 이로써 ES6, ES7 등의 최신 문법을 사용해서 개발을 할 수 있는것이다. React 에서 babel의 동작 function App() { return Tech Hello!; } 위와 같은 기본적인 jsx 코드가 있다. 이 코드는 babel을 거치게 되면 function App() { return /*@__PURE__*/ React.createElement( "h1", { id: "header", }, "Hello Tech" ); } 로 변하게 된다. React.createElement 두번째 줄을 보면 React의..

React Query는 어떤 기술일까?

현재 재직중인 가상자산 거래소 회사에서 올해 2분기 프론트엔드 세미나 진행당시 발표했던 React Query에 대해 조사한 내용입니다. React Query란 무엇인가요? React Query는 Server State를 관리하는 라이브러리로 React 프로젝트에서 Server와 Client 사이 비동기 로직들을 손쉽게 다루게 해주는 도구입니다. 현재 저희의 store에는 Client State, Server State 할것 없이 많은 것들을 저장하고 있습니다. (ex. 유저정보, 배너정보, 코인 가격 등...) React Query에서 Redux, Mobx 등 기존 상태 관리 라이브러리는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 그다지 좋지 않다고 말하고 있습니다. 공식 문서에서..