전체 글 (55) 썸네일형 리스트형 의문의 신인 "the vuex master" 개발자 등장 무려 일주일만에 마스터 했다고 논란 .. 업계 화들짝! 그러고 님들 저 훈련소 가여 Next (12+) + twin.macro (tailwindCSS) setting https://velog.io/@you1367/%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95TypescriptNextEmotionTailwindTwin.macroapollo 개발환경 구축[Next+Emotion+Tailwind+Twin.macro] 네트워크엔지니어 주제에 이것저것 해보고 싶은게 많다.백엔드는 NestJS를 사용을 하고있고, 앞으로도 그럴 것 같다. 프론트엔트는 React 경험이 있지만, 개인프로 젝트 목적상 SEO 가 가능해야하여 velog.io 이거 한 다음에 .babelrc 에 "@emotion/babel-preset-css-prop" 추가하기. 고통스러웠다. swc 는 왜 안되는지 모르겠다. ---------------------.. 뿌-듯 [Trost Dev] 사내 데이터 트래킹 정복하기 (3) 3편은 자동화 이야기와 Adjust를 다룹니다. 트래킹 자동화는 어떻게 하셨나요? 먼저 트로스트 환경의 두가지 전제를 짚고 넘어가겠습니다. 1. 트로스트는 ReactJS 를 기반으로 컴포넌트화하여 관리자가 직접 UI 변경을 손쉽게 진행할 수 있습니다. 이는 API 를 통해서 팩토리패턴으로 구현되어 있습니다, (그래서 디자인이 자주 바뀌고 유연하게 바뀌어요) 2. 특정 동작이 발생했을 때에만 트래킹을 요합니다. 이러한 두가지 전제를 바탕으로 API 에서 트래킹 데이터를 제공 받고, click handler 에 트래킹 함수에 파라미터로 데이터를 전달하였습니다. 추가적으로 admin 에서 UI 뿐 아니라 트래킹 데이터까지 입력하여 자동화를 완료할 수 있었습니다. // onClickHandler dataTrac.. [Trost Dev] 사내 데이터 트래킹 정복하기 (2) 1편 에 이어지는 내용입니다. (properties 를 활용하여 customEvent 를 하는 Mixpanel 부터 진행하였습니다 나머지 이야기는 3편에 다룹니다.) 기존 트래커 목록을 Notion 과 Slack에 일괄적으로 정리했고 .. 신규 트래커는 앞으로 스프린트 전에 미리 전달받도록 정리했다면 이제 개발할 차례입니다. 우선 기존 트래커들부터 살펴보았습니다. 그런데 ... 그런데? 1. 서버에서 화면을 구성하는 데이터를 API Response 를 통해 전달하고 2. 웹에서 해당 데이터를 가공하여 3. 자바스크립트 브릿지를 통해 앱에 전달하여 4. 받아온 데이터를 그대로 앱에서 트래커 업체로 전달합니다. 트로스트는 앱의 서비스 화면 중 약 80%가 웹뷰로 작동하기에, 많은 수의 트래커도 웹을 통해서 .. [Trost Dev] 사내 데이터 트래킹 정복하기 (1) 안녕하세요 트로스트에서 프론트엔드 개발자로 근무하고 있는 이민서라고 합니다. 트로스트는 뭐하는 곳인가요? 멘탈 헬스케어 플랫폼으로, 비대면 심리상담과 셀프케어를 제공하고 있습니다 [ https://trost.co.kr/ ] [ https://selfcare.trost.co.kr/ ] 트로스트는 목표관리 지표설정으로 OKR을 활용하고 있습니다. OKR은 무엇인가요? 탑다운으로 목표를 전달받는 KPI와 달리, 공동의 목표를 위해 개개인이 자유롭게 목표와(Object) 지표(Key Results)를 설정하여 달성하는 평가방법입니다. [ https://ko.wikipedia.org/wiki/OKR ] 저는 2021년 4분기의 OKR로 데이터 트래킹을 다루게 되었습니다. 트래킹이 무엇인가요? 고객이 서비스를 이용.. Refactor[2] - 비동기 렌더링 원래 코드 구조는 다음과 같았다. const Main = () => { const [contents, setContents] = useState(''); fetch().then((res) => { setContents( {res.data.title} {res.data.subTitle} {res.data.contents} }); return ( {contents} ); } 아무튼 이런 구조였다. 페이지 첫 진입 시에는 빈 페이지이고, fetch가 끝난 이후에 contents 를 렌더하는 방식이었다. 막상 생각해보니 fetch 소요시간 + fetch 이후 DOM 생성 시간 + 리렌더 비용이 정말 비효율적이라고 느꼈고, 기본 값과 기본 틀을 만들어 주고 fetch 이후에 값만 바꿔주는 것이 훨씬 효율적이라 생.. Refactor[1] - Typescript 올해 1월에 MVP로 만들었던 코드들 .. 몇 개월이 지나고 나니 이거저거 달라붙어서 이상한 코드가 되어있었다. 그리 대단한 페이지도 아닌데, 1000줄 가까이 되는 코드고 읽다보면 속이 울렁거린다. 약 1주 정도의 시간을 갖게 되어 9월에 리팩토링의 시간을 갖게 되었다. 처음 진행한 것은 타입스크립트 도입이다. 왜? 사실 누군가로부터 타입스크립트 좋다, 써봐라 이런 얘기를 들었을 때에 썩 와닿지 않았다. 학생 때 C와 Java를 조금 공부하다가 Javascript를 통해 동적 타입으로 작성해보니 너무 편했고 굳이 필요하다고 느낀 적이 잘 없었다. 도입의 필요성을 느낀 순간은 다음과 같았다. 1. 백엔드 통신 fetch(~~~).then((res) => { const { price } = res.data.. 이전 1 2 3 4 5 ··· 7 다음
