2024년 03월 09일
Lerna 모노레포 환경 구성
lerna를 사용한 간단한 모노레포 설정
1. lerna 환경 구성
npx lerna init
2. lerna.json 수정
yarn workspace 기반으로 작업하기 위해 useWorkspaces 사용
{
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}
3. package.json에 workspaces 추가
"workspaces": [
"packages/*"
]
4. 각 패키지 생성
lerna create [PACKAGE_NAME]
5. 공통 패키지 설치
yarn add eslint prettier typescript --dev --ignore-workspace-root-check
yarn add dayjs --ignore-workspace-root-check
개별 패키지에 설치방식
yarn workspace frontend add dayjs
6. 각 workspace에 패키지 설치
npx lerna bootstrap
7. workspace 명령어 실행
lerna run dev
-
2024년 10월 08일
vscode 검색 결과 텍스트 변경 시 정규식 처리
vscode에서 검색 후 방향키를 누르면 검색어에 대한 일괄 변경 기능이 지원된다.  작업 중 .hideOverlay 함수에 대한 일괄 변경을 처리하려는데, a.hideOverlay, b.hideOverlay... 와 같이 앞에 붙어있는 문자가 모두 다른 상황에서는 단순 검색으로는 변경이 불가능하여 정규식 검색 후 그룹화하여 일괄 변경 처리를 진행했다. 우측위에 .* 아이콘을 클릭하여 정규식 검색을 활성화 후 검색어 및 수정단어에 정규식 처리하여 완료 ```js // 검색어 : (this\.[a-zA-Z]*)\.hideOverlay\(\); // this부터 hideOverlay 앞의 값까지 모두 그룹화 지정 this.aaa.hideOverlay(); this.bbb.hideOverlay(); // 수정단어 : if($1) { $1.hideOverlay(); } // 일괄 변경된 결과 if(this.aaa) { this.aaa.hideOverlay(); }; if(this.bbb) { this.bbb.hideOverlay(); }; ``` 
-
2023년 01월 23일
일을 잘한다는 것
일을 잘하는 법을 배운다기보다, 일을 잘하는 사람들을 관찰하고 평가하는 내용이다. 내용에 100% 동의하지 않지만, 여러 사례를 통해 다시 한번 생각해보고 배울 부분들이 존재한다. 리뷰 나를 어필하는 자리나 프론트엔드 개발자에게 가장 중요한 것을 무엇이냐는 질문이 항상 어려웠다. 당장 생각나는 건 ‘이해관계자들과 커뮤니케이션을 잘해야 하고 미리 캐치할 수 있는 오류를 잡아내야 하며, UI 영역을 담당하기에 사용성을 생각하면서 기획 의견을 내야 한다.’ 정도인데, 실제 업무를 하다 보면 이 정도는 작은 파편이라고 느껴진다. 그러다 보니 어느 순간부터 “프론트엔드 개발자에게 ‘센스’가 가장 중요하다”라고 얘기하고 다녔는데, 책의 도입부부터 일을 잘한다는 것을 ‘감각(sense)’으로 표현하여 놀라움과 함께 공감하면서 읽을 수 있었다. “오늘날 시대가 요구하는 인재상은 자신의 눈으로 세상을 똑바로 바라보면서, 무엇을 해야 하고 하지 말아야 할지 스스로 판단해 실천할 수 있는 리더십을 지닌 인물이다.” 책에서는 ‘감각’있는 사람에 대해서 설명하면서, 두 명의 컨설턴트가 만담하는 형태로 이어간다. 중점은 기술적인 부분이 높아진 요즘 감각적으로 상황에 대응하고 있는지와 그에 대한 사례를 설명하는 구조이다. 예시로 프로그래밍에 대해서도 나오는데, 프로그래밍 기술이 뛰어난데도 실적 향상으로...
-
2022년 11월 20일
React Native HTML Render
React Native에서 텍스트 에디터로 제작된 공지사항을 그대로 보여주기 위해 html을 렌더링하려고한다. 시행착오 처음에는 react-native-htmlview를 사용하여 html을 출력했다. yarn add react-native-htmlview import HTMLView from 'react-native-htmlview'; ... <StyledContentWrap> <HTMLView value={body} /> </StyledContentWrap> const StyledContentWrap = styled(View)` h1 { font-size: xxx; } h2 { font-size: xxx; } ` html 태그에 맞는 css를 보여주기 위해 styled-components에 태그에 맞는 스타일링을 적용했는데, 여기서 문제가 발생했다. Node of type rule not supported as an inline style StyledNativeComponent react-native에서는 html 태그를 지원하지 않기 때문에 styledComponent 영역에서 작성이 불가능하다고 warning이 계속 뜨는 것이였다. 사용은 가능하지만 다른 방법으로 변경하기로 했다. react-native-render-html npm trends에서도 react-native-htmlview과는 엄청난 차이를 보이는 react-native-render-html를 사용하기로 했다. yarn add react-native-render-html import HTML from 'react-native-render-html'; import { View, useWindowDimensions } from "react-native"; ... const contentWidth = useWindowDimensions().width; ... <View> <HTML source= tagsStyles={htmlTagsStyles} contentWidth={contentWidth} /> </View> contentWidth를 주지 않으면 warn이 뜬다. 라이브러리 Readme를 보니 useWindowDimensions로 width를 가져와 채워주는 코드가 있어서 그대로 가져왔다. 스타일은 아래와 같이 StyleSheet처럼 스타일링하여 tagsStyles로 넣어주면...