내가 레퍼런스가 되자 내가 레퍼런스가 되자

height가 전체를 차지하는 화면을 개발할 때 100vh를 사용합니다. 하지만 모바일에서 해당 화면을 보면 주소창 때문에 잘려 보여 곤란한 상황이 생깁니다. vh 단위는 주소창이 없는 화면을 기준으로 설정되어 있어 이와 같은 이슈가 발생하게 됩니다. 스크립트로 해결할 수도 있지만 css 단위로 깔끔하게 처리하는 방법을 알아보겠습니다. vh? css 단위 중 vh는 viewport height로 스크린의 가시 height를 백분율로 나타냅니다. 현재 스크린의 height가 800px일 경우 1vh는 8px이 되며 10vh는 80px이 됩니다. 이처럼 vh는 백분율로 나타내어 사용합니다. 또한 vh 단위는 width에서도 사용이 가능합니다. 그러면 100%와 100vh의 차이가 무엇인지 궁금증을 가질 수 ..

팀 단위로 개발 시 팀원들과 코드 컨벤션을 맞추거나 코드의 문법적 오류를 막기 위해 Eslint, Prettier를 사용하고 있습니다. TypeScript 환경의 초기 프로젝트 구축 시 또는 프로젝트 도중에 ESlint, Prettier가 필요하다면 어떻게 설정할지 알아보겠습니다. ESlint 설정하기 ESlint? ESlint는 ECMAScript Lint로 ECMAScript/자바스크립트 환경에서 문법적 오류와 안티 패턴을 에러로 잡아주는 Linter입니다. 그뿐만 아니라 Tab, 줄바꿈 처리 등의 코드 스타일도 지정할 수 있습니다. ESlint 설치 및 설정 ESlint를 설치 후 ESlint config 파일을 생성합니다. # ESLint는 전역 설치를 권장하지 않음 npm install esli..

개인 노트북에서 급하게 업무를 보게 되었는데 작업을 해야 할 프로젝트 환경은 Node 16버전에 맞춰져 있었고 개인 환경은 현재 Node LTS 버전인 20버전을 사용하다 보니 packge dependency 설치에 오류가 발생했습니다. 그래서 NVM에 대해 찾아보고 설치하여 맞는 Node 버전으로 스위칭하여 업무를 할 수 있었습니다. 이번 기회에 간단하게 NVM에 대해 알아보겠습니다. NVM? NVM은 Node Version Manager로 command line을 통해 원하는 Node 버전으로 설치할 수 있습니다. 또한 설치된 Node 버전에 따라 npm 버전도 따라서 설치됩니다. NVM 설치 및 적용 Window에서 설치 방법 해당 nvm-widows github에서 nvm-setup.exe을 다운..

React base의 프로젝트에서 작업 중 DOM 노드의 크기에 따라 state 값이 바뀌는 로직을 짜야 되는 경우가 종종 발생합니다. 그럴 때 "useEffect의 dependency에 useRef의 current를 맵핑하는 것이 맞나?"라는 생각을 하게 됩니다. useRef에선 리렌더링이 일어나기 전까진 값의 변화 추적이 안되기 때문에 문제가 발생할 수 있습니다. 해당 케이스에선 어떻게 처리할지 알아보겠습니다. useEffect dependency로 ref 연결 케이스 확인을 위한 예시코드를 작성해보겠습니다. import { useEffect, useRef, useState } from 'react'; ... function Component() { const [isBasicState, setIsBa..

최근에 나온 build tool을 사용하면 Babel을 설정할 필요가 없고 필요한 옵션이 있을 경우에만 따로 명시하면 되다 보니 Babel을 직접 만지는 일이 거의 없어졌습니다. 리프레시 겸 Babel과 Webpack을 직접 설정해 보며 Babel에 관한 내용을 정리하려고 합니다. Babel? Babel은 ECMAScript 2015+(ES6+)의 문법을 웹 브라우저가 처리할 수 있는 이전 버전으로 변환하는 JavaScript 트랜스컴파일러(Transcompiler)입니다. Babel은 Babel 만으로 동작하는 것이 아니라 Babel의 plugin이 동작하여 트랜스컴파일이 되는 것입니다. Babel을 통해 JavaScript 최신 문법과 기능을 사용할 수 있습니다. Presets & Plugins Ba..

처음 실무에서 개발을 할 때 사수로부터 중요성을 그리고 지금까지도 팀원들과 이야기를 계속하는 함수형 프로그래밍은 개발을 하는 데 있어 베이스가 되고 늘 중요성을 이야기합니다. 프로그래밍 패러다임 중 하나이며 선언형 프로그래밍 중 하나인 함수형 프로그래밍에 대해 설명하고자 합니다. 프로그래밍 패러다임(programming paradigm) 프로그래밍 패러다임은 개발자에게 프로그래밍의 관점을 갖게 해 주고 결정하는 역할을 합니다. 최근에는 명령형 프로그래밍과 선언형 프로그래밍으로 구분하여 이야기합니다. 명령형 프로그래밍 ⇒ 어떻게 할 것인가? (How) 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하며 절차적 프로그래밍(Procedural Programming, PP)과 객체 지향 프로그..

팀 문화 중 코드 리뷰 문화를 개선하면서 코드 리뷰의 활성화를 위해 PR 진행 시 팀의 모든 인원을 Reviewer로 추가하기로 했습니다. 기존에는 팀장에게만 리뷰가 걸렸지만 코드 리뷰의 방식이 바뀌어 팀의 모든 인원을 계속 걸어줘야 하다 보니 번거로움이 생겼습니다. 그래서 PR 생성 시 자동으로 Reviewer가 걸리도록 Github Code owners에 대해 알아보고 적용하게 되어 해당 내용을 정리하게 되었습니다. Code owners?Github Code owners는 repository에 owner로 지정하여  PR 생성 시 지정된 owner들이 자동으로 Reviewer로 걸리게 합니다. Github Code owners 관리는 CODEOWNERS 파일로 하며 개인 또는 팀을 지정할 수 있습니다..

작업 중인 프로젝트에서 새롭게 디자인 시스템을 도입하여 공통 컴포넌트를 작업하게 되었습니다. 디자인팀과의 협업과 개발팀 내부에서 공통 컴포넌트 작업 내용 공유를 위해 Storybook의 도입을 고려하게 되었습니다. 이전 회사에서 Storybook을 사용하며 공통 컴포넌트 개발 내역과 지속적으로 수정되는 사안들을 체크하기에 좋은 경험을 가지고 있었기 때문입니다. 그래서 이번 기회에 간단하게 Storybook에 대해 정리하고자 합니다. Storybook? Storybook은 UI 컴포넌트 개발을 돕는 도구로 Story라는 단위로 UI 컴포넌트의 상태를 렌더링 합니다. 각 UI 컴포넌트를 스토리 단위로 구성하여 구축한다면 컴포넌트 개발 시 확인을 위해 따로 코드를 작성할 필요가 없고 컴포넌트의 상태에 따른 U..