올해부터 DEVOCEAN을 통해서 스터디를 진행하고 있습니다!제가 준비한 주제는 React를 활용해서 크로스플랫폼을 플랫폼 어플리캐이션을 만드는 React Native입니다!이번주는 11주차에 진행한 스터디 내용을 다루는 포스팅 입니다!점점 브레이킹할 아이스 없지만, 계속해서 브레이킹중인 아이스브레이킹 시간 입니다.이번주는 자신의 키워드를 모르고, 다른사람의 키워드만 아는 상태로 내 키워드를 맞추는 '양세찬게임'입니다!이번주는 KJH님께서 준비해주셨습니다 :)생각보다 알듯 말듯 모를듯 맞추는 재미가 있었네요 :)아이스브레이킹은 여기까지!이번주는 React이외에 라이브러리를 사용해서 React Native App을 보다 효율적으로 활용하는 방법에 대해서 다룹니다.이때 App의 상태관리를 할 수 있는 Redux에 대해서 알아보도록 하겠습니다Redux는 JavaScript의 상태관리 라이브러리 입니다.현재의 React ContextAPI가 성숙해 지기 전에 자주 사용하던 라이브러리로, React Native뿐만 아니라 기존 React에서도 종종 사용됩니다.Redux는 store에 상태를 관리할 변수들을 모아놓고, 이 상태를 변경할 때는 dispatch와 action을 통해서만 변경할 수 있게 통제합니다.위에서 정의된 액션 생성 함수는 외부에서 state를 변경하기 위해서 사용되며, react의 useState의 set함수와 유사하게 사용된다고 볼 수 있습니다.위와같은 상태관리 변수는 하나가 아니겠죠?그래서 여러개의 Redux 상태관리를 위해서 combinReducers를 사용해서 관리합니다.위에서 말했듯, Redux는 모든 상태변수를 Redux Store에 저장하고, 이 변화에 따라 App의 상태를 관리합니다.rootReducer로 합친 다양한 모듈을 하나의 store로 만들며, 이때 createStore함수를 이용합니다.그리고 store를 react프로젝트에 적용하게 됩니다.이제 Component 내에서 이 값을 사용해야겠죠?이때 useSelector와 useDispatch hook을 사용하게 됩니다Component내에서 dispatch를 통해서 state가 변경될 경우 해당 Component가 refresh되게 되면서 App의 전역 state관리가 가능해집니다.위 내용을 통해서 어떻게 Redux를 사용하는지는 알았습니다. 하지만 State관리를 위해서 준비해야할게 너무 많습니다.이때 Redux Toolkit을 사용하면 하나의 .js파일을 통해서 위 작업들을 통일할 수 있습니다.아래 Redux Toolkit을 사용한 예제코드를 보시겠습니다.여기서 흥미로운점은 불변성을 위해서 state값을 덮어쓰지 않고 일반 수정연산을 하게됩니다이처럼 redux toolkit을 사용하면 불변성 관리를 해당 라이브러리가 해주기 때문에 보다 편리하게 사용이 가능합니다.이런 전역 State의 경우 App의 로그인 관리등에서 사용됩니다.하지만, ContextAPI가 충분히 편리해진 요즘에는 많이 사용되지는 않고, Legacy Code에서 주로 볼 수가 있습니다.이번

Do not index Do not index이벤트가 잘 심어졌는지 확인하는 QA 단계를 개선하기 위해 시스템을 구상하고 개발한 이야기를 담았습니다. 사내에서 어떤 불편함이 있었는지 그리고 어떠한 고민 끝에 배포 환경에 관계없이 앱 내에서 실시간으로 이벤트 로깅 모달을 개발하게 되었는지, 저의 미니 프로젝트를 재미있게 설명드리겠습니다. 안녕하세요. 오토피디아에서 프론트엔드 개발을 맡고 있는 유서경입니다. 저는 제품 개발도 좋아하지만 실제 사용자가 남긴 데이터에 흥미가 많은 편입니다. 닥터차 서비스에서는 Google Analytics 4 를 사용하여 사용자 로그를 수집하여 더 나은 사용자 경험을 만들기 위해 노력 중이며, 이벤트를 설계하고 구현하는 과정은 매우 중요합니다. 이번 글에서는한 이야기를 담았습니다. 사내에서 어떤 불편함이 있었는지 그리고 어떠한 고민 끝에을 개발하게 되었는지, 저의 미니 프로젝트를 재미있게 설명드리겠습니다.0. 개발 계기최근 제가 개발한 자동차세 환급 프로젝트는 웹, 앱 내 WebView로 탑재된 서비스이며 회원가입 이벤트가 굉장히 중요한 지표 입니다. 해당 프로젝트가 출시된 이후 데이터 엔지니어님이 저장된 이벤트를 확인 하시던 중 사용자를 특정할 수 있는 고유값이 없는 경우가 있다고 말씀해주셨습니다. 이벤트 QA를 출시 전에 잘 마무리했는데 왜 이런 일이 발생한 것일까요?0.2 기존 QA 방법우리의 서비스에 태깅된 이벤트가 Google Analytics 4(GA4)에 저장되기 위해서는 앱은 Fireabase, 웹은 Tag Manager를 거쳐야 합니다. 닥터차에서는 앱은 전송하는 이벤트를 토스트 팝업을 통해 웹에서는 Tag Manager의 미리보기 기능을 활용하였고, 통상적으로 이벤트 구현은 프론트엔드 개발자, QA는 데이터 엔지니어가 진행하고 있었습니다.닥터차 앱, 웹의 이벤트 태깅 플로우와 QA 단계이번 프로젝트의 이벤트 QA에서는 두 가지 문제가 있었습니다.앱에서 웹뷰의 이벤트를 확인할 수 없어 QA를 하지 못하였다.GA4에는 이벤트(이벤트명, 이벤트 파라미터)와 사용자 속성이 함께 저장되는데, 사용자 속성을 QA하지 못하였다.1. 어떻게 해결해야 할까요?문제를 발견하였으니 해결할 차례입니다. 먼저 이벤트 QA 당사자인 데이터 엔지니어님과 상의하여 아래와 같은 요구사항을 정리하였습니다. 이번 저의 미니 프로젝트에서는 테크스펙 을 작성하여 빠른 기간 내 필요를 우선적으로 해결하려 노력했습니다.1.1 요구사항 정리하기No. 문제 사항 P1 GA에 저장되는 사용자 속성을 확인할 수 없음 P2 앱의 토스트 팝업: 이벤트 파라미터가 많으면 확인이 어려움 P3 앱의 토스트 팝업: 단시간에 여러 이벤트가 발생하면 토스트가 발생하지 않음 P4 앱의 토스트 팝업: 단일 이벤트를 실시간으로만 확인할 수 있어 전체 로그들의 파악이 어려움 P5 앱과 웹의 QA 플랫폼이 달라 번거로움이번 미니 프로젝트의 요구사항을 중요도 순으로 정리해보았습니다. 웹의 Tag Manager는 비교적 잘 구축된 서비스로 문제가 적었지만, 앱은 자체

안녕하세요!카카오엔터테인먼트 FE개발자 클로토입니다. 최근 핫한 ChatGPT를 주제로 주니어 FE개발자의 관점에서 글을 작성해 보았습니다.재밌게 봐주셨으면 좋겠습니다. FE개발자 클로토!❗️이 글은 ChatGTP 3.5 버전을 기준으로 작성된 점 참고 부탁드립니다. (글 작성 중에 ChatGTP 4.0이 발표되었네요!)   요즘 ChatGPT가 뜨거운 감자입니다. 출시일 5일 만에 100만 명의 사용자를 모으고 2달 만에 사용자 1억 명에 달했습니다. 블로거, 기자, 유튜버 등 누구 할 것 없이 ChatGPT에 관해 이야기하고 있습니다. 많은 사람들이 일자리를 잃게 될지도 모른다고 이야기하는 여론도 심심치 않습니다. 평소 인공지능에는 관심이 있던지라 ChatGPT가 FE개발자의 업무를 과연 어디까지 보조 또는 대체할 수 있을지 궁금해졌습니다. 그럼 한번 용의자인 ChatGPT에게 먼저 물어보도록 하죠. 물론 FE개발자를 대체할 리 없다고 대답하겠지만요. <>HTML 삽입미리보기할 수 없는 소스<>HTML 삽입미리보기할 수 없는 소스용의자 ChatGPT의 진술<>HTML 삽입미리보기할 수 없는 소스역시 예상대로 발뺌(?)하는군요. ChatGPT 말을 순순히 '그렇구나'하고 포기했다간 제 글이 여기서 끝나버립니다. 그럴 수는 없죠. 간단한 미니 프로젝트를 통해 gpt(ChatGPT와 GPT는 다르지만 여기서부터 gpt라 줄여서 표현하겠습니다)가 어디까지 활용될 수 있을지를 한번 확인해 보도록 하겠습니다. gpt에 대한 설명보다는 실제 문답을 통해 코드를 작성하는 과정으로 설명할 예정입니다. 미니 프로젝트로는 간단한 웹툰 서비스를 기획해 보았습니다. 기획하는 과정에서도 gpt에게 물어보며 주로 어떤 장르가 인기가 있는지, 장르에 쓰일 작품을 답변받아 추가했습니다. 이미지들은 stable diffusion webui를 사용해서 txt2img로 작품 키워드에 맞는 이미지를 생성하여 넣었고 더미 이미지는 pixabay를 사용했습니다. 그리고 간단한 API 연동을 위해 TMDB API를 활용한 페이지도 추가했습니다. 완성된 프로젝트는 https://next-gpt-test.vercel.app/ 에서 데모를 확인할 수 있습니다. (vercel hobby plan이라 약간의 제약이 있을 수 있습니다). 어떤 과정을 통해 만들게 되었는지는 아래 ChatGPT로 개발하기 부분에서 설명할 예정입니다. 우선 gpt가 어떤 일을 할 수 있을지 알아보기 전에 FE개발자가 어떤 업무들을 수행하고 있는지부터 알아보겠습니다. https://next-gpt-test.vercel.app/ next-gpt-test.vercel.app | FE개발자가 하는 일FE개발자는 주로 어떤 일을 할까요? 간단하게 생각해 봤을 때는 다음과 같은 일들이 있습니다.프로젝트 환경설정요구사항에 맞는 html 작성디자인에 맞는 css 작성상태를 관리하여 동작 처리하기(react state, redux, recoil 등)서버에서 데이터 불러오기(axios, reat-query, graphql 등

뷰티 필터를 개발하며 얻은 새로운 경험처음 만나는 React Query, 그리고...🔖 Note이 문서는 2022 5th Kurly Tech MeetUp: 뷰티 컬리를 만든 사람들의 웹 프론트엔드 개발 발표 세션의 내용을 각색하여 정리한 글입니다.🤔 선크림을 사고 싶어!평화로운 봄날 아침입니다. 이마 위로 내리쬐는 햇살이 따사롭습니다. 앗, 햇빛 바로 쬐면 피부에 안 좋댔는데… 생각이 난 김에 출근길에 선크림을 하나 살까 생각합니다. 그렇지만 오프라인 매장을 여기저기 돌아다니며 물건을 비교한다는 건 여간 귀찮은 일이 아닙니다. 이번엔 진짜 사야 하는데… 그런데 아무거나 사긴 싫은데… 불현듯 뇌리를 스친, 처음 만나는 뷰티 플랫폼 – 뷰티 컬리.그래, 컬리가 있었지. 컬리에서는 합리적인 가격의, 지성 피부를 위한 선크림을 쉽고 빠르게 구매할 수 있을 것 같은 느낌이 듭니다. 노트북을 열고 컬리에서 “선크림”을 검색합니다.검색 결과 161건. 뭐가 이렇게 많아? 당황하려던 순간, 아차, 필터를 적용하지 않았군요.👻 필터를 적용한 동일한 상품 목록을 보고 싶으시다면 이 링크를 확인해 주세요!먼저, 관련 상품만 보기 위해 카테고리를 "선케어"로 설정합니다.다음으로 합리적인 가격의 물건을 사고 싶기 때문에, 가장 낮은 가격 구간대와 "할인상품"을 선택합니다.마지막으로 피부 타입에 맞게 “지성 피부”를 선택하면,짜잔! 무려 11건으로 상품 목록이 간단해 졌습니다.선택지가 추려진 덕분에, 더욱 편리하고 합리적으로 구매 결정을 할 수 있게 되었습니다. 광고 영상 속 제니처럼 우아하게 이브닝 드레스를 입고 보랏빛 박스를 가지러 가진 않았지만, 뷰티 컬리와 필터 덕분에 다음 날 아침 출근 전까지 무사히 선크림을 받아 볼 수 있었습니다.🔎 필터 프로젝트목표: 필터 프로젝트를 왜 하는 걸까?그럼 본격적으로 필터 프로젝트에 대해 이야기를 해보겠습니다. 필터 프로젝트는 다음과 같은 목표로부터 출발하였습니다.1) 고객: 상품 탐색 경험의 개선먼저, 고객 측면에서는 상품 탐색 경험의 개선을 목표로 시작했습니다. 이전에는 일부 운영 체제(안드로이드)에만 적용되어 있었던 필터를, PC와 모바일 웹에서 사용할 수 있도록 확장하여 플랫폼 별로 분산된 고객 경험을 통일하기 위함이었습니다.2) 기술: 데이터 상태 관리 방법의 전환이와 더불어 기술적인 측면에서는 데이터의 상태 관리 방법의 전환을 목표로 설정했습니다. 기존의 컬리몰에서는 한 화면을 오래 띄워두거나, 다른 페이지에 방문한 후 컬리몰에 재접속했을 때, 이전의 데이터를 보여주고 있었습니다. 따라서 고객은 구매 가능한 상태임을 보고 장바구니 담기를 시도했지만, 실시간 재고 변동 등으로 인해 품절로 상품을 구매하지 못하는 불편함이 종종 있었습니다.과정: React Query의 도입그동안 컬리몰은 redux를 통해 서버에서 가져온 데이터를 상태 관리하고 있었습니다. 필터 프로젝트를 진행하면서 이것을 React Query로 전환했습니다.대부분의 개발 팀에서 이러한 전환은 쉽지 않은 결정일 것입니다. 저희는 커머스 웹 개발 팀