분류 전체보기
-
'Component' cannot be used as a JSX component 원인과 해결방법개발 블로깅/React 개념 2022. 9. 5. 11:53
아래와 같은 문제가 발생하였다. 'Component' cannot be used as a JSX component. 우선 근본적인 원인은, react가 18 버전대부터 많은 변화가 발생하며, @type/react 역시 18버전대부터 타입 정의에 대한 방식이 많이 변경되었다. 그래서 그런지, Next.js 환경에서 Dynamic Import 같은 컴포넌트도 이와 같은 에러가 발생하였다. 따라서 @type/react 버전을 17 버전대로 변경해주면 해결할 수 있다. { "name": "create-react-app", "scripts": { ... }, "dependencies": { "react-dom": "17.0.2", }, "devDependencies": { "@types/react": "17.0...
-
2022년 상반기 회고핵인싸 개발자의 길/Life Log 2022. 7. 30. 15:07
벌써 8월이 가까워지고 있다. 원래 6월 말쯤에 상반기에 대한 회고를 작성해 보려고 했는데, 리프레시 겸 제주도 여행도 다녀오고 이것저것 밀린 일들을 하느라 벌써 상빈기 회고를 작성하기가 애매한 시기가 되었다. 그래도 6개월이란 시간 동안 정말 많은 일을 했고 내 스스로 많은 성장 과정을 한번 더 겪을 수 있었던 기간이었던 만큼, 늦게나마 회고는 작성해야겠다는 생각이 들었다. 작년 하반기에 이어 상반기까지 쭉 기술적인 부분들도 계속 성장할 수 있었지만, 무엇보다 소프트 스킬과 팀워크, 그리고 팀 문화에 대해 많은 것은 배우고 깨달을 수 있었던 기간이었던 것 같다. 나와 우리팀이 상반기 동안 지속적인 성장을 위해 활동했던 내용들을 아래에 큰 단위로 한번 정리해 보려고 한다. 모노레포 시스템 구축 작년 하반..
-
Brotli 압축방식(Compression)을 통한 웹 성능 최적화개발 블로깅/Improving Performance 2022. 6. 30. 00:51
이번에 web.dev 공부를 하면서 gzip보다 뛰어난 압축방식인 Brotli를 새롭게 알게 되어서 한번 소개를 해보려고 한다. HTTP Compression 우선 HTTP 압축에 대해 다시 한번 알아보자. HTTP 압축은 웹 서버에서 리소스들을 압축 알고리즘을 통해 사이즈를 줄임으로써, 브라우저로 전달할 때 더 작은 사이즈로 전달하기 위한 방식이다. 웹 서버로 리소스를 요청할 때 Request Header의 accept-encoding에 현재 브라우저에서 호환되는 압축 정보를 실어서 함께 요청하면, 웹서버에서 해당 압축 방식을 지원하는지 확인 후 지원이 되면 리소스를 압축하거나 미리 압축되어있던 리소스를 전달하게 된다. 💡 대부분 웹서버에서 이러한 압축 방식을 직접 구현할 수도 있지만, 이미 대부분의..
-
TBD(Trunk Based Development) 전략이란?개발 블로깅/팀 문화 및 시스템 2022. 6. 17. 00:00
이번에 팀에서 모노레포로 프로젝트를 관리하게 되면서 팀 내 워크플로우 방식을 Trunk Based Development 방식으로 변경하게 되었다. 이전에는 Git Flow, Github Flow 정도밖에 몰랐는데, 이번에 새롭게 알게 된 TBD(Trunk Based Development) 방식에 대해 정리해보려고 한다. TBD의 목적 평소 소규모 팀에서는 코드가 많지 않고 인원이 적은 만큼 서로 각자 작업하고 반영하는 사항에 대해서 충돌이나 컨텍스트가 꼬이는 상황이 매우 적다. 그러나 어느 정도 규모가 커질수록 많은 개발자가 같은 코드를 유지하는 것이 어려워지며 이러한 문제는 내가 작업한 사항을 Trunk 브랜치에 반영하려고 할 때 충돌로 이어질 수 있다. 이러한 충돌을 줄이기 위해 팀 내에서 최대한 동..
-
팀워크를 위한 모노레포(Monorepo) 시스템 구축, 그리고 회고개발 블로깅/팀 문화 및 시스템 2022. 5. 30. 00:34
꽤 오랜 시간 동안 모노레포 이전 및 안정화 작업을 계속 진행해왔다. 그래도 이제는 상대적 주요 프로젝트들은 모두 모노레포로 이전이 완료되었고, 팀원들이 이제 모두 모노레포 내에서 작업이 가능한 수준으로 안정화를 시키게 된 것 같다. 콴다 팀 블로그에도 해당 블로그 글을 쓰긴 했지만, 내 스스로도 좋은 경험 및 큰 성장 과정이 되었던 것 같아서 내 블로그에도 기록을 남겨보고 싶어 이렇게 한번 더 작성을 해본다. (비록 내용이 거의 중복이 되겠지만..) 우리 팀은 이번 모노레포를 통해 새로운 팀워크 방향성이 생기면서, 이를 통해 향상된 팀 협업 요소들을 정리해 보려고 한다. 우선 그전에, 우리가 어떤 계기로 인해 팀 전체가 모노레포 시스템을 이용하기로 결정하게 되었는지 배경을 먼저 소개하고 싶다. 모노레포..
-
[애자일] 함께 자라기-자기계발은 복리로 돌아온다개발 블로깅/팀 문화 및 시스템 2022. 5. 29. 10:25
우리는 학교에서 받은 수업 방식인 교육학습이 아닌, 현재와, 사회에서 정답이 정해져 있지 않고 무분별한 요소들과 명확하지 않는 야생 학습이 되어야 한다. 당신은 몇 년 차? 강한 놈이 오래 가는 게 아니라, 오래 가는 놈이 강한 거더라. 자기계발은 복리로 돌아온다 애자일은 피드백을 짧은 주기로 받고, 다음 사이클에서 동일한 활동을 하게될 때 더 나은 방식으로 진행할 수 있도록 하는 것이다. 이는 소프트웨어 뿐 아니라, 모든 활동에서 그렇다. 예시) 골프 골프 연습 후 빠른 피드백을 받으라. 골프를 치고 1년뒤에 받는 피드백은 의미가 없다. 자신을 곱하라. 더하기 사고. - 쓸데없이 낭비되는 시간을 줄이고 잠자는 시간을 줄여서 일하는 시간을 늘리는 것. 곱하기 사고. - 집단의 지능을 높이는 것. 어떻게 ..
-
모노레포 환경을 더욱 가볍게 - git sparse checkout개발 블로깅/팀 문화 및 시스템 2022. 5. 28. 00:46
현재 모노레포를 사용하면서 어떻게 하면 우리 팀원 모두가 모노레포를 더욱 안정적으로 사용할 수 있을지 많은 고민과 실험 중에 있다. 여러 개선할 점 중 하나가, 모노레포를 내 로컬에서 이용할 때 너무 무거운 느낌, 그리고 여러 프로젝트가 함께 섞여 있다 보니 파일 찾는 점에 어려움이 있다는 단점이 많은 팀원들의 의견이다. 그래서 어떻게 하면 많은 파일들을 가지고 있는 모노레포를 조금이라도 안정적으로 가볍게 사용해볼 수 있을까 리서치를 하다가 팀원 중 능력자 @yeoul을 통해 git sparse checkout라는 멋진 git 커맨드를 알게 되어서 이를 한번 정리해 보려고 한다. 그전에 우리가 평소 사용하던 git checkout이란 기능에 대해 더 자세히 알 필요가 있다. 우리가 흔히 새로운 브랜치를 ..
-
[Github] Code Owner로 Auto Assign 하기개발 블로깅/팀 문화 및 시스템 2022. 3. 29. 01:47
Code Owner란 Github에는 Code Owner라는 기능이 있는데, Repository 내에 특정 파일이나 특정 디렉토리, 원하면 특정 확장자 별로도 Owner를 지정하여 파일 및 코드를 관리할 수 있는 방식이다. 이를 활용하면 코드리뷰를 위해 PR 생성 시, 작업한 파일에 관련된 Owner들을 자동으로 PR(Pull Request) Reviewer로 지정할 수 있다. Code Owner 사용법 사용법은 아주 간단하다. 프로젝트의 Root 경로에 '.github/CODEOWNERS' 파일을 생성 후, 패턴에 맞게 오너를 설정해주면 된다. # .github/CODEOWNERS 아래 패턴을 참고하여 작성하면 된다. # 이것은 주석입니다. # 담당자를 지정할 때는 github ID 혹은 github ..