유댕이의 개발공부일지

사건의 발단 배포는 정상적으로 되었지만 접속하면 서비스 접속하면 오류가 발생함. ( _Reflect$construct is not defined ) 결제,배송등 웹뷰를 통한 모든 서비스가 원활하게 되지 않음. 이미지등은 노출되지만 스크립트 오류로인해 액션이 먹지 않음. 문제 해결 Jenkins 에서 이전 버전으로 원복했지만 그럼에도 불구하도 동일한 문제가 발생. 배포된 스크립트를 체크해보았는데 결과물에는 문제가 없음. 라이브러리에 문제가 있다고 판단해서 캐시를 지웠는데 문제가 해결됨. 소스를 deploy하는 배포서버 (alpha1,2,3,4) 에서 npm cache를 비워주면 해결된다. (npm cache verify) [Node.js] npm cache 해결 [Node.js] npm cache 해결 n..

말 그대로 무한 스크롤이다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 pagination과 달리, 지정해준 페이지 하단에 도달하면 새로운 data가 추가로 로드되는 식이다. 설치 npm install --save react-infinite-scroll-component 사용 import React from 'react'; import InfiniteScroll from 'react-infinite-scroll-component'; import Loading from '../loading'; class SelectForm extends React.Component { state = { limit: 20, // 20개씩 받아오기 itemInfo: [], // 화면에 뿌려줄 data isLoding: f..

Github Desktop Github에서는 소스의 add / commit / push 등의 작업을 보다 편하게 할 수 있는 Github DeskTop 기능을 제공하고 있다. 일종의 통합 Tool인 것이다. 사용이 쉽고 매우 직관적이어서 git 또는 GitHub 입문자에게는 강추이다. 현재 우리 회사에선 Github Desktop을 적극 사용하고 있다. pull, push, 다른 레포로의 merge등을 주로 사용한다.(개인적으로 다를 수 있음) [ 설치 방법 ] GitHub Desktop GitHub Desktop Simple collaboration from your desktop desktop.github.com 브라우저에서 자동 감지해서 맥/윈도우를 나눠주기 때문에 딱히 설정할 부분은 없다. 설치 ..

사건의 발단 Android 4.4 버전을 이용중인 회원에게서 배송예약 버튼이 눌러지지 않는다는 오류가 보고 되었다. 재현 안드로이드 4.4 OS를 탑재한 단말기가 없었기 때문에 에뮬레이터를 돌려서 버그를 재현해 보았다. 확인해보니 2가지 증상이 존재하였다. 화면 진입시 Error: Map is not defined 오류 발생. 버튼클릭 동작 안함. 하단 버튼 Flex 레이아웃이 깨짐. 원인조사 조사결과 헬로마켓 WebView에서는 Polyfill 설정이 들어가 있지 않았고, 그로 인해 ES6문법을 지원하지 않는 구형 단말의 WebView(Chrome 30 이하 버전)에서는 오류가 발생했던 것이다. Default Browser on Android 4.0.x Not Working (Blank) to Acce..

파이널미션때 메인페이지에서 다른 페이지로 갔다가 뒤로돌아왔을때 스크롤한 위치를 기억해 돌아가는 기능을 구현했다. 스크롤 상태유지는 충분히 다른 컴포넌트에서도 사용할 수 있기때문에 hooks로 만들었다. sessionStorage에 y축 값을 저장해 스크롤을 유지하도록 했는데 왜 sessionStorage를 사용했을까? [ cookie VS localStorage VS sessionStorage ] cookie 쿠키는 만료기한이 있는 key-value 저장소이다. 쿠키는 4kb의 용량 제한이 있다. 또한 매 서버 요청마다 서버로 쿠키가 같이 전송된다. 브라우저에서 서버로 GET요청을 보낼 때, 서버는 요청 자체만으로는 그 요청이 누구로부터 오는지 파악하지 못한다. 그래서 요청을 보낼때 쿠키에 나에 대한 정..

파이널미션때 구현한 Infinite Scroll에 대해 말해보겠다. 무한 스크롤 무한스크롤은 프론트엔드 개발자들이 다 한번씩은 구현해본 기능이다. 한번에 모든 데이터를 받아오는게 아니라 원하는 양의 데이터를 받아온 상태에서 일정 스크롤이벤트가 발생하면 다시 데이터를 요청해서 받아오는 기능이다 사용 이유 만약 초기 데이터가 1억개가 넘는다고 가정하자. 그랬을때 초기에 필요가 없음에도 한번에 이 데이터를 페칭 받아오면 너무 큰 리소스가 소모된다. 또한 사용자들도 오랜시간의 로딩상태를 경험하게 될 것이다. 이러한 문제를 해결하기위해 인피닛 스크롤을 구현한다. 원리 우선 유저가 스크롤을 내리면 어느 특정위치에 도달했을 때 다음 출력할 데이터를 요청한다. 이게 끝인 아주 단순한 기능이다. 아래의 예를 보도록하자...

이 Final Mission이란 헬로마켓에 입사해 온보딩 기간 최종 프로젝트이다. Dog 갤러리 게시판 기능구성 💡 https://docs.thedogapi.com API 활용 메인 (검색 & 페이징) 한 페이지에 50개 정렬은 선택가능 하도록 버튼 구성 (desc or asc) 필터링은 Type, bread Infinite Scroll 구성 상세화면 진입후 뒤로가기로 돌아오면 진입전 스크롤 상태 유지 1열에 5개씩 구성 목록은 이미지와 간단한 정보 한두가지만 노출. 이미지위에 오버레이되면서 즐겨찾기 버튼 노출 (즐겨찾기 된건지 여부 표시) 상세화면 필요한 정보 몇가지 노출. 큰 이미지 노출 (뷰어는 오픈소스 활용. 이미지가 여러장일때 prev,next 선택 가능한 구조. 뷰어 클릭시 큰화면 혹은 전체화..

코드리뷰 코드리뷰란, 한 명 또는 여러 명의 개발자가 본인이 만들지 않은 코드의 내용을 점검(examining)하고, 피드백을 주는 과정을 말한다. 여기에서 피드백이란 오타, 버그 가능 성, 개발 표준 등에 대한 의견이 될 수도 있고, 좋은 코드에 대한 긍정적인 피드백이 될 수도 있습니다. 코드리뷰의 핵심은 단순히 코딩 스타일을 일관되 게 유지하거나, 예상되는 문제를 일찍 파악하는 데에 그치지 않고 코드에 대한 책임이 그 코드를 만든 사람 혼자에게 있지 않고 우리 모두에게 있다는 문화를 만드는 데에 있다고 할 수 있다. 현재 헬로마켓 프론트엔드에서는 GitHub에서 Master Branch에 머지를 진행해 배포하여 사용중이다. 로컬환경에서 코드를 작성 Merge후 바로 커밋후 저장소에 Push를 진행하고..