CHAYAN.LOG

리액트. 웹과 네이티브 사용자 인터페이스를 위한 라이브러리위 문구는 리액트의 공식 웹사이트를 방문하면 가장 먼저 마주칠 수 있는 리액트를 설명하는 한 줄의 문장이다.그렇기에 이 문장에서 선택된 단어가 가지는 의미는 크고 리액트를 이해하는 데 있어 한번 생각해볼만한 주제이다. 그만큼 라이브러리는 리액트에서 강조되는 키워드인 만큼 이 부분에 대해 간단히 정리해보려 한다.  프론트엔드 개발자로서 면접준비 좀 해봤다 하면 자주 마주치는 기본적인 질문 중 하나가"리액트는 라이브러리인가요? 프레임워크인가요? 그 둘의 차이를 아시나요?"라는 것이다.이 질문은 리액트의 역할에 대해 그만큼 많은 사람들이 혼란을 겪기 때문에 나왔다고 본다. 라이브러리와 프레임워크를 구분하는 가장 중요한 특징은 제어 흐름에 대한 주도권이 ..

여기 Chip라는 커스텀 컴포넌트가 있다. // 속성을 간결하게 표시할때 사용하는 Chip 컴포넌트 내용 이 Chip 컴포넌트를 구현하며 variant라는 prop을 통해 Chip의 배경색과 글자색을 지정해주는 일종의 프리셋을 구현했다. 내용 끝이 아니다. 사실 이 컴포넌트는 background-color와 text-color도 prop으로 받을 수 있다. 그러면 아래와 같이 컴포넌트를 사용할 수 있게 된다. 이 코드를 처음 보는 사람은 어떻게 생각할까. 왜 variant prop은 따로 존재하며, variant와 backgroundColor 혹은 textColor가 동시에 적용되었을때 어떤게 적용될것인가 등등... 결국 Chip 컴포넌트를 열어보는것을 참지 못하고 분석하기 시작할 것이다. 이 문제를 해..

효율성 있는 리스트를 구현하기 위해 react-virtualized를 사용하던 도중, 해당 라이브러릴 통해 구현한 리스트의 아이템이 스크롤 중간에 사라지는 문제가 발생했다. 이슈의 원인을 탐색한 결과, react-virtualized를 이용해 구현한 리스트 뷰 상단에 조건부 렌더링을 통해 보여지는 영역이 문제였다. 해당 조건부 렌더링을 통해 보여지는 영역의 height를 미리 잡아두면 리스트 뷰가 정상적으로 본인의 위치를 인지하지만, 미리 height를 잡아놓지 않은경우, 해당 조건부를 계산하는동안 해당 영역의 높이는 0일것이고 리스트 뷰는 이때의 위치를 본인의 위치로 인지하게 되어 문제가 발생한것이였다. 이를 해결하기 위해 react-virtualized의 WindowScroller 컴포넌트내 upda..

본론부터 말하면, 우선 첫 취업에 성공했다. 원래는 21년 하반기에 여러 기업에서 면접을 보며 요령과 숙련도를 쌓을 수 있었지만 좋은 결과로 이어지지 못했다. 그래서 이런 경험을 이용해 22년 상반기 공채를 준비하기로 결심했고 자기회고를 통해 뽑아낸 스스로 부족하다 느낀부분을 중심으로 준비해보기로 방향성을 잡았다. 그러던 중, 작년 우아한테크코스에서 같이 프로젝트를 진행했던 팀원이 본인이 취업한 곳에 나와 잘 맞을것 같다며 추천서를 써준다는 제안을 받았다. 그리고 회사의 지향점, 개발자 문화 및 방향성이 내가 개발자로서 추구하는 방향성과 비슷해 원서를 제출했다. 추천을 통해 기업에 지원하는 경험은 처음이였는데 뭐랄까 채용 과정에서 안좋은 모습을 보여주어 나뿐만 아니라 나를 추천해준 동료에게 안좋은 영향을..

영상(React VAC pattern - View 로직과 JSX의 의존성을 최소화 하자)의 내용을 기본으로 담았습니다. 리액트 VAC 패턴 프론트엔드 개발자와 UI 개발자가 있고 UI 개발자가 직접 html과 JSX를 작성하는 경우, 프론트엔드 개발자와 개발 영역이 겹쳐 conflict가 종종 일어난다. 이런 문제를 해결하기 위해서 VAC 패턴을 제안한다. VAC 패턴은 View Asset Component의 줄인말로, 쉽게 말해 View 로직과 JSX 를 분리해서 관리하는 패턴이다. 이렇게 분리된 JSX는 props를 통해서만 제어되고, 스스로의 상태를 관리하지 않는 stateleess 컴포넌트이다. 이는 즉 반복, 조건부 노출, 스타일 제어와 같은 렌더링에 관련된 처리만을 수행하는것을 의미한다. VA..

목차 webpack 5를 위한 스토리북 Storybook 6.2버전부터Storybook은 webpack5를 공식 지원하기 시작했다. 이 과정을 통해 Snowpack, EsBuild, Vite와 같은 차세대 빌더를 탐색할 수 있는 플러그형 빌더도 만들었다. Storybook은 본질적으로 편집한 컴포넌트, 테마, 스토리등등을 실시간으로 번들링 하는 빌드 툴이다. 이렇다보니 webpack의 메이저 버전 업그레이드는 Storybook에게 큰 문제였다. (웹팩자체 뿐만 아니라, 사용되는 다양한 플러그인 등등이 다 연관되어있다보니...) 그래서 Storybook 6.2버전부터 번들러 의존성, 플러그인 의전성, 구성 처리까지 추상화해 webpack 4와 5를 동시에 지원하기 시작했다. 현재, webpack 4가 디폴..

공식문서의 일부 내용을 번역 및 재해석한 글입니다. Storybook에서 Typescript 사용하기 Storybook은 기본적으로 Typescript를 내장하고 있어, 별도의 설정 없이도 Typescript 프로젝트에 사용할 수 있다. 기본 설정 기본적으로 ts 변환을 위해 babel-loader를 사용하고, 옵션으로 타입 체킹을 위한 fork-ts-checker-webpack-plugin을 제공한다. 더보기 [fork-ts-checker-webpack-plugin?] 간단하게 말하면 기본적으로 ts-loader, babel-loader와 같은 것들을 이용해 Typescript 컴파일을 수행하게 되면, 타입 변환과 타입 검사 과정을 수행하게 된다. 이때, 이 두 과정이 순서대로 이뤄지기에 컴파일하는데 ..

Storybook 사용중, 컴포넌트의 보여지는 순서가 코드에서 export한 순서가 아닌 문자순으로 자동정렬 되는 이슈가 있다. 이는 현재 최신 버전(v6.4.x )에서 발생하는 문제로 이미 이슈로 등록되었던 문제이다. 이 이슈를 해결하기 위해 개발자 측에서 v.6.5.0-alpha.17 의 prelease 버전을 내놓았고 npx sb upgrade --prerelease 명령어를 통해 v6.5.x를 사용함으로서 해결 할 수 있다. (만약 이를 원하지 않는다면 다운그레이드를 수행하는 수밖에...)

React Query의 공식문서 및 리액트 네이티브를 다루는 기술의 주요 내용을 정리한 글입니다. 목차 useQuery란 쿼리는 비동기 요청 데이터에 대한 고유 키(Unique key)입니다. 보통 GET 요청에 사용되고, POST와 같이 서버의 데이터에 수정이 필요한 경우엔 Mutation을 사용합니다. useQuery 기본 구조 캐시 키를 사용해 데이터를 캐시합니다. 한번 데이터를 받아온 뒤, 나중에 동일 요청시 데이터가 이미 존재시 기존에 있던 데이터를 바로 보여줍니다. 이때, 캐시 설정에 따라 데이터를 새로 불러오기도 합니다. // useQuery 구조 useQuery(캐시 키, 프라미스 반환 함수, 캐싱option?) useQuery Hook 반환 값 - status : API 요청 상태를 문자..

React Query의 공식문서의 주요 내용을 정리한 글입니다. React Query란 리액트 쿼리는 리액트 웹앱에서 서버의 상태(state)를 가져오기(fetching), 캐싱(caching), 동기화(synchronizing), 업데이트(updating)를 수행합니다. React Query 개발 동기 일반적으로 리액트 어플리케이션은 컴포넌트로부터의 데이터 가져오기 혹은 업데이트하는 방식을 제공하지 않습니다. 그래서 개발자들은 제각각 데이터를 자기만의 방식으로 가져오고 업데이트 합니다. (Promise와 async&await로 처리하거나 전역 상태관리 라이브러리를 사용해 비동기 다루는 방식) 이때 아래와 같은다양한 이유로 어플리케이션과 서버간의 관계와 실시간 상태를 관리하는게 어렵습니다. 서버에서 데이..