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로 넣어주면 된다.
export const htmlTagsStyles = {
...
ul: {
marginTop: 0,
paddingLeft: 32,
marginBottom: 16,
},
p: {
marginTop: 0,
marginBottom: 16,
},
a: {
color: "#0d6efd",
textDecoration: "underline",
},
...
}
기본적으로 native 코드를 따라가기 때문에, listStyle와 같은 스타일링이 불가능하다. 대신 customRenderers를 사용하여 ul, li 등 앞에 prefix를 붙이는 등 커스텀이 가능한데, Document를 참고하면 된다.
-
2024년 03월 09일
Lerna 모노레포 환경 구성
lerna를 사용한 간단한 모노레포 설정 ### 1. lerna 환경 구성 ```bash npx lerna init ``` ### 2. lerna.json 수정 yarn workspace 기반으로 작업하기 위해 useWorkspaces 사용 ```json { "version": "independent", "npmClient": "yarn", "useWorkspaces": true, "packages": [ "packages/*" ] } ``` ### 3. package.json에 workspaces 추가 ```json "workspaces": [ "packages/*" ] ``` ### 4. 각 패키지 생성 ```bash lerna create [PACKAGE_NAME] ``` ### 5. 공통 패키지 설치 ```bash yarn add eslint prettier typescript --dev --ignore-workspace-root-check yarn add dayjs --ignore-workspace-root-check ``` 개별 패키지에 설치방식 ```bash yarn workspace frontend add dayjs ``` ### 6. 각 workspace에 패키지 설치 ```bash npx lerna bootstrap ``` ### 7. workspace 명령어 실행 ```bash lerna run dev ```
-
2023년 01월 23일
일을 잘한다는 것
일을 잘하는 법을 배운다기보다, 일을 잘하는 사람들을 관찰하고 평가하는 내용이다. 내용에 100% 동의하지 않지만, 여러 사례를 통해 다시 한번 생각해보고 배울 부분들이 존재한다. ## 리뷰 나를 어필하는 자리나 프론트엔드 개발자에게 가장 중요한 것을 무엇이냐는 질문이 항상 어려웠다. 당장 생각나는 건 ‘이해관계자들과 커뮤니케이션을 잘해야 하고 미리 캐치할 수 있는 오류를 잡아내야 하며, UI 영역을 담당하기에 사용성을 생각하면서 기획 의견을 내야 한다.’ 정도인데, 실제 업무를 하다 보면 이 정도는 작은 파편이라고 느껴진다. 그러다 보니 어느 순간부터 “프론트엔드 개발자에게 ‘센스’가 가장 중요하다”라고 얘기하고 다녔는데, 책의 도입부부터 일을 잘한다는 것을 ‘감각(sense)’으로 표현하여 놀라움과 함께 공감하면서 읽을 수 있었다. **“오늘날 시대가 요구하는 인재상은 자신의 눈으로 세상을 똑바로 바라보면서, 무엇을 해야 하고 하지 말아야 할지 스스로 판단해 실천할 수 있는 리더십을 지닌 인물이다.”** 책에서는 ‘감각’있는 사람에 대해서 설명하면서, 두 명의 컨설턴트가 만담하는 형태로 이어간다. 중점은 기술적인 부분이 높아진 요즘 감각적으로 상황에 대응하고 있는지와 그에 대한 사례를 설명하는 구조이다. 예시로 프로그래밍에 대해서도 나오는데, 프로그래밍 기술이 뛰어난데도 실적...
-
2022년 10월 25일
programmers - 추석트래픽
Level3 문제 이번 추석에도 시스템 장애가 없는 명절을 보내고 싶은 어피치는 서버를 증설해야 할지 고민이다. 장애 대비용 서버 증설 여부를 결정하기 위해 작년 추석 기간인 9월 15일 로그 데이터를 분석한 후 초당 최대 처리량을 계산해보기로 했다. 초당 최대 처리량은 요청의 응답 완료 여부에 관계없이 임의 시간부터 1초(=1,000밀리초)간 처리하는 요청의 최대 개수를 의미한다. 해결방법 임의의 한 구간을 선택해서 1s안에 몇 개의 타임라인이 지나가는지 구하는 문제이다. 임의라는게 가장 헷갈리는 부분인데, 단순하게 생각해보면 이미 종료시점에 맞춰서 데이터가 정렬되어서 내려온다. 즉, 데이터를 반복문 돌렸을 때 다음 데이터의 종료시점은 무조건 나보다 뒤에 있다. 그렇다면 시작 시간이 현재 데이터 구간 안에 다음 데이터가 포함되는 지를 확인하면 되고 그게 1s가 된다. 이게 설명을 하려니까 어려운데, 소스코드 내에서 설명하는 편이 편할 것 같다. 소스코드 시작, 종료, 작업시간을 구하는데 split으로 작성하기에는 코드가 길어져서 정규식으로 진행했다. 종료시간을 기준으로 반복문을 돌리며 그 다음 index의 데이터들의 시작시간을 확인한다. 이때, 포함해야하는 기준이 1000ms이기에 해당 값을 빼서 종료시간보다 이전이였는지 체크한다. 일치한다면 개수를 체크한다. 해당...