Frontend

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

고민의 시작이전부터 좋은 코드란 무엇인지 고민해왔다.이런 고민은 팀원과 함께 협업하여 개발해야했던 인턴을 진행하면서 좀 더 심해졌고, 정리되지 않은 상태였다.이번 글로 하여금 생각을 정리해보고자한다. 좋은 코드를 작성하는 방법이라기보다는, 조금 더 근본적인 이해와 내가 해야하는 노력에 대한 글이다. 좋은 코드?좋다라는건 참 모호하다. 좋은 사람은? 좋은 인생은? ~에가 빠진 좋다 라는 가치판단은 머리를 점점 혼란스럽게 할 뿐이다. 목적을 따져보기목적을 따져보자. 코드는 왜 쓰는가? 코드는 불편한 문제를 해결하고, 자동화하여 가치를 제공하기 위해 만들어진다.이런 관점에서는 좋은 코드를 따질 필요는 없다. 왜냐하면 완벽한 제품을 한번 만들면, 더이상 바꿀 필요가 없기때문이다. 하지만, 현대 사회에서 불편한..

요즘 OS수업을 듣고 있는데, 프로세스 스케줄링 관련 부분을 배우고 있다.그러다가 문득, 최근 면접에서 받은, 그리고 제대로 답하지 못했던 이벤트루프는 왜 그런 우선순위로 작업을 실행시킬까? 라는 질문이 떠올라 지금에라도 작성해본다.서론동시성Concurrency(동시성)와 Parallelism(병렬성)동시성과 병렬성은 같은 단어 같지만, 분명히 다른 단어이다.동시성은 동시에 실행되는 것 같이 보이는것병렬성은 실제로 여러 작업이 동시에 처리되는 것이다.동시성에 대해 말할 것이다. 과거, 코어가 하나인 CPU에서 동시성을 해결하는 것은 매우 중요했다.안그러면, 하나의 프로세스만 돌릴 수 있을테니까. JS도 마찬가지다.Javascript는 싱글 스레드이다. 코어가 하나인 CPU인 것이다.여기서 우리는 로직 수..

배경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하고, 이를..