2023년 01월 23일
일을 잘하는 법을 배운다기보다, 일을 잘하는 사람들을 관찰하고 평가하는 내용이다.
내용에 100% 동의하지 않지만, 여러 사례를 통해 다시 한번 생각해보고 배울 부분들이 존재한다.
나를 어필하는 자리나 프론트엔드 개발자에게 가장 중요한 것을 무엇이냐는 질문이 항상 어려웠다.
당장 생각나는 건 ‘이해관계자들과 커뮤니케이션을 잘해야 하고 미리 캐치할 수 있는 오류를 잡아내야 하며, UI 영역을 담당하기에 사용성을 생각하면서 기획 의견을 내야 한다.’ 정도인데, 실제 업무를 하다 보면 이 정도는 작은 파편이라고 느껴진다.
그러다 보니 어느 순간부터 “프론트엔드 개발자에게 ‘센스’가 가장 중요하다”라고 얘기하고 다녔는데, 책의 도입부부터 일을 잘한다는 것을 ‘감각(sense)’으로 표현하여 놀라움과 함께 공감하면서 읽을 수 있었다.
“오늘날 시대가 요구하는 인재상은 자신의 눈으로 세상을 똑바로 바라보면서, 무엇을 해야 하고 하지 말아야 할지 스스로 판단해 실천할 수 있는 리더십을 지닌 인물이다.”
책에서는 ‘감각’있는 사람에 대해서 설명하면서, 두 명의 컨설턴트가 만담하는 형태로 이어간다.
중점은 기술적인 부분이 높아진 요즘 감각적으로 상황에 대응하고 있는지와 그에 대한 사례를 설명하는 구조이다.
예시로 프로그래밍에 대해서도 나오는데, 프로그래밍 기술이 뛰어난데도 실적 향상으로 이어지지 않는 사람들이 존재하는데 ‘직접’은 잘할지 몰라도 ‘일’은 잘하지 못한다고 표현한다.
일의 우선순위나 맥도날드와 넷플릭스 사례에서 보는 비즈니스에 대한 사고방식 등 흥미로운 영역들과 참고할 수 있는 영역들이 책에 많이 포함되어있었다.
다만, 동의하지 않는 부분은 일을 잘한다는 예시를 높이기 위해 다른 한쪽을 너무 내리는 형태가 있고 야구를 중심으로 서술하는 부분들이 반복해서 나오는데 몰입감이 떨어지거나 동의하지 못하는 영역들이 많았다.
인사이드 아웃과 아웃사이드 인이 그런 형태였다.
인사이드 아웃 -
자신의 논리에서 답을 찾고, 자신이 세운 목표를 따르며 우선 실행하고 계획을 수정한다.
아웃사이드 인 -외부 정보에서 답을 찾고, 업무지시를 따르며 계획이 완성되어야 실행한다.
인사이드 아웃과 아웃사이드 인을 설명하는 과정에서 아웃사이드 인을 ‘이렇게 행동해서는 안 된다’ 방식으로 얘기하고 인사이드 아웃이 완벽한 것처럼 풀어간다.
책에서는 콜트레인에 대한 일화를 좋아한다고 소개하는데, 밴드라는 팀에서 독자적 욕심으로 팀원과 관객이 불만을 가지고 떠났는데도 욕심을 버리지 못한 행동에 대해서 궁극의 인사이드 아웃 사례라고 좋아하는 부분에서 이해가 되지 않았다.
‘세미나를 찾아 다니는 것도 좋지만 자신에게 어떤 지식이 부족한지 파악하고 공부하는게 아웃사이드 인을 벗어나는 길이다’처럼 참고할 수 있는 부분들도 중간중간 섞여있지만 결국 장단점이 존재하는 영역이라고 생각한다.
여러 사례에서 참고하기 좋은 흥미로운 내용들이 많이 존재했다.
다음에 나를 판매한다면, 어떤 영역에서 ‘감각’있는지 고민해 보고 얘기할 수 있는 바탕이 될 것 같다.
2024년 10월 08일
vscode에서 검색 후 방향키를 누르면 검색어에 대한 일괄 변경 기능이 지원된다. ![vscode Image]({{ site.image_post_url }}/2024/vscode-search-transition-1.png "vscode Image") 작업 중 .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(); }; ``` ![vscode Image]({{ site.image_post_url }}/2024/vscode-search-transition-1.png "vscode Image")
2024년 03월 09일
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 ```
2022년 11월 20일
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로 넣어주면...