Frontend/문제 해결기

배경여러 번의 리젝과 끝없는 기다림 끝에 개인 프로젝트인 dev-feed을 playstore와 appstore에 배포하는데 성공했다...! 그러나 배포가 끝이 아니다. 나는 앞으로도 컨텐츠를 추가할 생각이다. 그중에 하나가 인기 블로그를 제공하는 것인데, 우선 데이터를 모아보고 싶어 analytics로 해당 데이터들을 모으고자 했다. dev-feed는 react-native로 만들었기에 @react-native-firebase/analytics를 사용하여 google-analytics를 통해 어떤 블로그를 구독했는지를 수집하기로 했다. 그런데, 조금 있다가, 인기 글도 제공하고 싶어졌다. 그래서 뒤늦게 코드를 추가하려다보니, 글조회, 구독 등등... 전반적인 앱의 핵심 기능과 로깅이 붙어있는걸 발견할 수..

배경2024 관광데이터 활용 공모전에 프론트엔드 개발자로 참여하여 프로젝트를 진행중이다. 앱을 1차적으로 릴리즈하고, 다음 업데이트를 한번 해보니, 스토어 심사를 진행하는 것이 생각보다 시간이 걸리고 불편한 일이라는 것을 느낄 수 있었다. 이런 부분들은 이미 알고는 있었으나, 실제로 경험해보니 더욱 체감이 되었다. 웹뷰를 사용하면 해결할 수 있었겠지만, 초기에 웹뷰를 사용하지 않고, RN으로만 진행하기로 하였기때문에, 다른 방법을 탐색해야했다. 그러다 찾은 것이 Code push다. 어떻게 가능한가?이것을 이해하기 위해서는 RN의 원리에 대해 간단하게 나마 알아보아야한다. React native의 스레드React native는 메인스레드, JS스레드, 백그라운드 스레드(Shadow 스레드)로 구성된다. ..

배경여러가지 라이브러리를 만들어보며, 지금까지 항상 npm에 임의로 버전을 올리고, 패키지를 다운받은 이후에 테스트했었다.그런데 인턴을 하다, eslint룰을 추가하고 잘 적용됐는지 확인해볼 일이 생기게 됐고, 회사 사내의 라이브러리였기에 이때도 이렇게 진행할 수는 없었다. yarn link설명하기에 앞서, 로컬에서 수정하여 프로젝트에 적용시키고자하는 것을 패키지, 실제로 변경된 패키지를 테스트되는 곳을 프로젝트라고 하겠다. yarn link를 사용해서 패키지와 프로젝트를 연결하면 프로젝트의 node_modules/ 와 실제 로컬의 폴더 간의 심볼릭 링크가 생성된다.이 말인 즉슨, 수정한 패키지를 프로젝트에 추가하기 위해 추가적인 배포나 설치과정이 필요하지 않다는 것이다. 그러나 이 때 두 가지 패키지 ..

이전 게시글에서 TS는 내부 코드의 확장자를 변경하지 않는다는 것을 알 수 있었다.그렇다면 tsconfig.json 두개로 cjs와 esm 모두 대응되게 만든다는 것은 어려운 일이라는 것을 알 수 있다.하지만, 시작한 이상 여기서 포기하고 싶진 않았다. 그래서 번들러로 코드를 번들링한 결과를 npm에 배포하도록 했다. 왜 Rollup?Webpack과 Vite, Rollup등 다양한 번들러가 있으나 Rollup을 택했다.이유는1. 라이브러리 번들링이기에 HMR이나 개발서버가 필요하지 않았다. (결과물 테스트는 Jest와 Storybook을 활용하여 확인한다)2.  Rollup은 ES6형태로 번들링 결과를 반환해서 ESM코드에 대해서 트리쉐이킹을 지원한다.3. 사실 2번은 웹팩도 지원하지만, rollup이 ..

이전 게시글에서 확장자 문제에 부딪혔고, 이런 문제를 해결해보고자 했다. 이를 이해하기 위해서는 이 문서를 읽는게 직빵이었는데, 이 글에 해당 내용을 담으려고 읽다가 보니 그냥 번역해서 오픈소스에 기여해보는게 좋을거란 생각이 들어서 해보았다. https://github.com/microsoft/TypeScript-Website-Localizations/pull/224 #6 Translate module-reference/Theory.md to korean by d0422 · Pull Request #224 · microsoft/TypeScript-Website-Localizationsen Theory 리뷰 요청합니다 : @yeonjuan @bumkeyy ref #6 감사합니다. 처음 해보는거라 잘 모르는..

배경이전 게시글에서 라이브러리를 tsc만으로 컴파일해서 배포했다. 그랬더니 아래와 같은 일이 발생한다.CJS방식으로 require했을때도, ESM으로 import했을때도 잘 작동되지 않는다.왜 이런일이 발생했을까? 모듈 시스템그전에, 모듈 시스템 중 CJS와 ESM에 대해 살펴보자.CJSrequire와 module.exports를 통해 동작한다. 동기적으로 실행된다.또한, 메인스레드를 블로킹한다. 즉, 모듈의 코드 실행까지 다음 진행이 차단되는 것이다.exports되는 항목을 마치 object처럼 취급한다. 아래와 같은 코드가 있다고 하자.//module.jslet num=20;function setNum(n){ num=n;}function getNum(){ return num;}module.export..

배경아직 대학생이기에, 아직 취업을 하지 못하기에 최근에 용돈벌이용으로 외주를 시작했다.첫 외주를 진행하다가 문득, 보통 외주를 통해 개발하는 웹페이지는 구성, 기능들이 어느 정도 비슷할 수 있다 생각하게되었다. 특히 랜딩페이지와 같이 사용자 UI를 신경써야하는 부분은 더욱 그런 기능이 겹치기 마련이다. 그래서 이런 부분들을 빠르게 개발하기위해 자주 반복되는 로직을 react-hook형태로 모아보자는 다짐을 하게되었다.이번 글에서는 기본적인 설정만 간단하게(아무생각없이...) 하기에 간단하게 살펴보고, 이로인해 발생한 문제들을 다음 게시글에서 해결해 볼 것이다. 기본 설정package.json아래와 같이 구성해주었다.{ "name": "@rapiders/react-hooks", //패키지의 이름 "v..

어떻게? 왜 작동하는가? 자 이전글에서 모노레포에서 tsconfigPath의 마법 같은 경로문제 해결 기능을 보았다. 하지만, 개발자라면 마법과 같은 일은 없으리라는 것을 알고 있을 것이다. 결국 왜? 를 알아야 내 것이 되는 것이다. 어떻게 tsconfigPath가 경로문제를 해결했는지 확인해보자. 바쁜 분은 결론만 보아도 이해에 도움이 될 수 있을 것 같다. viteFinal .storybook/main.ts의 viteFinal은 vite-builder를 통해 storybook을 구성하는 경우에 사용되는 옵션이다. 추가적인 플러그인을 적용시키는게 가능하다. 즉 아래 코드는 기존 storybook vite의 config를 가져와서 tsconfigPath plugin을 적용시킨 후에 merge하고, 이를..

이전 게시글에서 UI테스트를 하기 위해 Storybook을 도입했다. 각각의 프로젝트마다 각각의 컴포넌트 테스트를 해볼 수 있어서 좋을것이라 판단했다. 하지만 문제가 있었다. 배포가 너무 많다. 3개의 배포 3개의 레포에 대해서 chromatic을 통해 storybook을 각각 배포하다보니 두가지 문제가 발생했다. 테스트하기 힘들다. 배포 완료된 링크가 3개라 일일히 들어가서 테스트해봐야한다는 단점이 있다. 속도가 느리다. 위 사진처럼 순차적인 형태로 각각의 레포 storybook을 배포하다보니 2분씩, 총 7분가까이 걸리는 문제가 발생했다. 심지어 이 CI는 pull_request마다 돌아야하므로 더 자주, 더 많이 호출되어야한다. 또 우리 레포는 현재 4개의 프로젝트로 구성되어있고, 추후에 더 추가될..

이제 프로젝트는 앱 런칭을 앞두고 QA를 진행하고있다. 이렇게 QA를 진행하다보니 알게된 것은 생각보다 다양한 기기에서 테스트하다보니 UI가 깨지는게 많다는 점이었다. 그러나 의외로 UI 깨지는 것을 쉽게 해결하기가 쉽지않았다. 아래와 같은 이유들 때문이었다. 특정 사이즈에서만 깨진다. 아래와 같이 화면이 좁아지면 UI가 깨진 다던가... 문제가 있었다. 반응형 사이즈 테스트를 해볼 수가 없다. 서버 API호출을 줄여 운영 비용을 줄이기 위해 네이티브 DB를 사용하기로 결정했었다. 사용자가 쓴 글, 좋아요 누른 글 등을 앱 내부 DB에 저장하게 하고, 로그인시 서버와 1회 통신을 통해 동기화하는 형태로 서비스를 구성했다. 이렇게 앱 내부 DB를 사용하는 곳이 늘어나다보니 이제는 브라우저로 배포된 서비스 ..