프론트엔드 개발자의 기록 공간

무한 스크롤은 많은 데이터를 세분화하여 필요시에 데이터를 요청해서 받아오면서 성능을 극대화한다. react+typeScript에서 무한 스크롤을 구현하는 방법을 useHook으로 관리하여 사용하는 법을 소개할 것이다. Intersection Observer API Intersection Observer API는 대상 요소가 상위 요소 또는 최상위 문서의 뷰포트 와 교차하는 변경 사항을 비동기식으로 관찰하는 방법을 제공합니다. 따라서 Scroll 이벤트를 걸어서 스크롤 할 때마다 함수가 실행되는 스크롤 이벤트보다 훨씬 성능이 좋다. 파일 구성 useObserver (무한스크롤 useHook) Item (무한스크롤하는 개별 요소) Main (Item List를 생성하는 상위 컴포넌트) useObserver...

4번째 프로젝트도 2주간 진행됐다. 주제는 카페 키오스크 주문 서비스였는데, 운동을 좋아해서 헬스 키오스크 컨셉으로 프로젝트를 진행했다. 프로젝트 주요 기능은 키오스크 주문 시스템처럼 카테고리 별 상품이 존재하고, 상품을 클릭하면 상품 정보와 함께 부가적인 옵션과 수량을 선택할 수 있다. 선택된 상품은 장바구니 리스트에 보이고 최종적으로 결제를 누르면 결제 내역과 함께 결제가 진행된다. 프로젝트 후기 이번 프로젝트에는 큰 제약이나 요구사항이 없었다. 프론트는 React + TypeScript, 백엔드는 Nest.js + TypeORM으로 개발을 진행했다. 환경 세팅 이번 프로젝트에서는 React, Nest를 사용하는데, 별도로 배포를 진행했어야 했기 때문에 프로젝트 폴더를 어떻게 구상할까 고민하다가 다른..

다 끝나고서야 정리하는 3~4주차 3번째 프로젝트... 3번째 프로젝트는 2주간 "가계부 서비스" 프로젝트였다. 페이지는 크게 수입, 지출 리스트를 볼 수 있는 메인 페이지, 달력 차트로 내역을 볼 수 있는 페이지, 차트로 내역을 볼 수 있는 페이지를 개발하는 것이었다. 프로젝트 후기 FE 요구사항 객체 활용 프로그래밍 Model 과 View 역할을 나누고 옵저버 패턴을 활용해서 적용한다. history API 와 라우팅 대 분류에 해당하는 메뉴에 대해서 history API 를 적용해서 page routing 을 시도한다. Fetch API와 Promise 패턴 catch 를 활용한 에러처리를 한다. 서버와 통신을 하는 동안 loading indicator 를 노출한다. 차트 개발 Canvas, SVG..

본 글은 cra react+typeScript 환경에서 테스팅을 사용하면서 기록하고 정리한 글입니다. React Testing Library testing-libray를 사용하면 사용자 중심 방식으로 UI 구성 요소를 테스트 할 수 있습니다. 테스트가 소프트웨어 사용 방식과 비슷할수록 더 많은 자신감을 얻을 수 있습니다. testing-libray는 행위 주도 테스트 방법론을 따르는 테스트를 작성하는데 매우 적합합니다. jsdom이라는 라이브러리를 통해 실제 브라우저 DOM을 제공해주기 때문에 화면에 보여지는 실제 모습 그 상태로 테스트를 수행할 수 있게 해준다. jest는 자바스크립트 또는 타입스크립트 환경에서 테스트를 진행할 수 있게 해준다. 즉, 테스트 코드는 testing-libray로 작성하고 ..

2주 차도 빨리 지나갔다.. 이번 주는 많이 잔 게 6시간인 것 같다. 2주 차는 2인이 한 팀이 되어 "TODO" 프로젝트를 개발하는 것이었다. 월요일에 출근하자마자 팀원과 아이스브레이킹 타임을 가졌다. 짧은 시간이지만 이 분도 대단하다고 느껴졌다. 매일매일이 겸손해지는 것 같다. 간단한 잡담 타임이 끝나고 프로젝트 소개를 해주셨다. 이번 미션은 VanillaJS와 node를 이용하여 CSR로 개발하는 것이 미션이었다. 프런트에서 CSR을 하기 위해 babel, webpack 환경 세팅을 직접 하는 것도 미션에 포함되어 있었다. 간략한 수업을 마치고 팀원과 이번 프로젝트를 기획서를 보면서 일정과 협업 방식을 정했다. 하루마다 진행해야 할 일정을 정리하고 git commit, git issue, git ..

시간이 이렇게 빨리 흘러가나라고 느껴질 정도로 한 주가 빨리 흘러갔다. OT 내용에 언급했던 것처럼 이번 주 프로젝트는 로그인/회원가입 기능을 VanillaJs, node express를 이용해서 풀스택 개발을 진행하는 것이었다. 사실상 OT 날 제외하고 금요일 오전에 프로젝트 마감이라 이틀하고 반나절이라는 시간이 주어졌다. 둘째 날 강의장에 오니 1주 차 팀을 배정해 주셨다. 개인 프로젝트지만, 각자 의견을 나누면서 개발을 진행하라는 의미로 팀을 짜주셨다. 팀과의 첫 만남에서 아이스브레이킹 타임을 가졌다. 4명이지만 다양한 사람이 있었다. 경력자, 비전공자, 전공 학부생.. 짧게 얘기를 나눴지만 전부 배울 점이 많고 실력이 뛰어나셨다. 그렇게 팀원들과 프로젝트 방향성이나 개발 환경에 대해서 의논을 얘기..

OT는 롯데타워에 "더 큰집"에서 진행됐다. (지옥철 1시간 30분 죽을 것 같았다..) 1층에서 모여서 운영 매니저님의 안내에 따라 출입증 발급하고 사무실로 갔다. 입구에서부터 여기가 회사인가 카페인지 헷갈릴 정도로 편안한 분위기의 인테리어로 되어 있었다. 조금 앉아 있으니 운영진, 마스터, CTO 환영 인사와 설명회를 진행했다. 여러 설명과 조언을 토대로 설명을 해주셨다. 기억에 남는 말은 "지금 여러분은 탄소지만 우테캠 과정이 끝났을 때, 다이아몬드가 되어서 나갈 것을 당부했다." 그만큼 열정을 불태우라는 말씀이었다. 이후에 오피스 투어를 진행했다. 구경하느라 사진을 못 찍었지만, 카페인지 세미나 왔는지 모를 정도로 엄청 휴게 공간과 자유로운 업무 환경으로 이루어져 있었다. 모든 공간과 인테리어에 ..