🚧 오해방지. 글 작성자가 전문가라는 이야기가 아님을 미리 말씀드립니다.
CSS에 대한 인사이트가 많으신 종찬님과 CSS 기초에 대해 큰 카테고리로 파악해보고 기초를 어떻게 바라봐야할지에 대해 깊이 이야기를 나눠봤던 내용을 정리하고 공유하기 위해 작성한 글입니다.
혹시나 읽게 될 독자 분들에게도 조금의 도움이 되었으면 좋겠습니다.
미소에서 리액트 네이티브를 1년간 주 무기로 사용했지만 정작 깊이 있는 학습을 못했던 경험이 남아있어서 이번에는 What is ~~의 주제로 Bridge에 대해 소개를 해보겠습니다.
우아한 형제들 프론트엔드 개발자 면접에서 리액트 네이티브를 주도로 사용했는데 Bridge에 대해서 설명을 해달라는 요청을 받았던 기억이 있습니다. 분명 어렴풋이 알고는 있지만 깊이 있게 이해를 시도했본 경험이 없기에 답할 수 없었던 것 같습니다.
이번 글을 작성하면서 스스로도 제대로 개념을 익혀볼 기회가 됐으면 좋겠습니다.
RN개발자가 Bridge를 어느 정도로 받아들이면 될지도 한번 생각해보겠습니다.
웹 프론트엔드 성능을 최적화의 중요성을 최근 많은 면접을 보면서 유사한 질문을 받아왔고 부족함이 느껴져서 스스로 정리할 필요성이 생겼습니다.
이번 글을 정리하면서 성능을 저하시키는 요인들을 시각화해서 정리해본 것입니다.
그리고 각 요인별로 로딩 성능, 렌더링 성능 문제들로 나눌 수 있습니다.
각 항목 별로 어떤 문제들이 존재하고 어떻게 해결할 수 있는지 알아보겠습니다.
이 글에서 다룰 내용인 ReactJS - "Escape Hatch" 문서는 React 훅들을 제대로 이해하는데 도움이 많이 되었던 글입니다. 이번 글을 통해 React에서 말하는 Effect의 개념을 깊이 이해하고 리액트 컴포넌트를 만들 수 있기를 기대합니다.
Escape Hatch의 의미는 직역하면 안전한 곳을 벗어나는 것을 의미하는데 이 문서에서는 리액트 자체(렌더링 시스템)에서 벗어나서 외부 시스템들과의 연결할 수 있도록 하는 것을 의미합니다. 다소 멀게 느껴지지만 문서에서 다루는 예제들을 보면 쉽게 이해할 수 있습니다.
이번 글에서는 전체 내용을 다루지않고 각각의 챕터에서 중요한 부분만 남겨두겠습니다. 특히, useEffect, useRef의 사용법 자체는 이미 익숙하다는 가정하에 글을 남기도록 하겠습니다. 만약 내용이 이해되지않는다면 각 링크에 들어가서 문서를 읽어보고 예제들을 직접 테스트해보시길 권장드립니다.
최근 React JS의 공식문서가 리뉴얼되고 있다는 소식이 종종 들립니다.(beta.reactjs.org) 이전 문서에서도 불만은 없었던터라 왜 리뉴얼을 했을지 궁금했습니다. 리액트팀의 운영 기조(트렌드)가 바뀌었을까? 아니면 과거 문서에 문제점이 있었을까?
가끔 블로그 글을 적거나 프로젝트를 하면서 markdown으로 PR description이나 comment를 남길 때 복잡도 있는 내용을 설명할 때 너무 많은 텍스트를 작성해야할 경우가 있습니다. 그 때마다 다이어그램을 그려서 캡쳐를 하거나 gif를 만들어서 설명에 함께 첨부하는 것이 이해를 도와주곤 합니다. 하지만 시간이 지나면서 그 다이어그램에 부가적인 요소를 추가하거나 수정사항이 생기면 다시 이미지를 만들어야하는 귀찮은 상황이 발생합니다. 결국 이런 귀찮음은 문서화를 소홀히하게 되는 원인이 되곤합니다. (그 이외에도 이유는 많긴합니다.)
이런 문제를 해결하기 위해 다른 팀원들과 수정가능하고 히스토리를 기억할 수 있는 mermaid라는 도구를 학습해보려합니다.
블로그에 글을 자주 쓰고 싶지만 주제 선택에 너무 신중해서 자주 쓰지 못하고 있는 것 같습니다. 하지만 조금 더 가볍게 쓰는 습관을 들이고 피드백도 받아보고 싶어서 사소한 기술 공부에 대한 글도 남겨보려합니다.
간단히 Docusaurus 프레임워크에 깃 이슈를 통해 답글을 남길 수 있도록 하기위해서 Utterances 플러그인을 적용하는 방법을 글로 남겨보겠습니다.
react native 프로젝트를 웹 프로젝트들과 함께 관리하면 용이할 것 같아서 구성을 해보게 되었습니다.
NX를 이용해서 React Native 프로젝트를 포함한 모노레포를 구성할 때 3가지 옵션이 있습니다.
npx react-native init 으로 구성 (no-hoist 옵션)npx react-native init 으로 구성 (스크립트들의 경로를 직접 수정)2022 패스트 캠퍼스에서 진행하는 inner circle 디자인시스템 스터디에서 진행했던 내용을 기반으로 작성한 글입니다.
스터디에서 진행할 프로젝트의 주제를 정하기까지 꽤 많은 고민을 했습니다. 왜냐하면 디자인 시스템의 정의 자체가 조직, 프로젝트마다 달라질 만큼 추상적인 주제였기에 팀원들간의 합의점을 찾는 것이 어려웠습니다.
그래서 다른 조직이 사용하는 디자인 시스템의 형태를 집중하기보다는 현재 개발자와 디자이너가 협업하는데에 있어서 방해가 되는 문제에 대한 문제정의를 해보고 그 문제를 해결하는 도구 혹은 워크플로우를 한번 개선해보는 방향으로 고민을 시작해보았습니다.
안녕하세요. 블로그 주인입니다.
앞으로 전문적인 프론트엔드 개발자로 성장하기 위해서 다양한 좋은 글들을 작성해보겠습니다.
잘못된 내용 혹은 수정이 필요한 내용이 있다면 아낌없이 피드백이 주시면 감사할 것 같습니다.
글쓰는데 재주는 없지만 많이 해봐야 늘거라고 생각이 듭니다! 감사합니다.