프로젝트/데일리 옥션

# 작업일지 9 / Chart.js 적용, 경매가 유효성 검사

1. 경매시에 입찰가 추이를 확인할 수 있도록 그래프를 도입했다. 라이브러리는 Chart.js 를 사용했다. Chart.js 자체를 도입하는 것은 일단 어렵지 않았다. 여러개의 그래프 관련 라이브러리가 있었는데, 그 중 가장 많이 사용하는 것을 보여지고 공식문서도 굉장히 친절하게 잘 나와있다보니 위와 같은 간단한 수준의 그래프는 쉽게 적용이 가능했다. 리액트에서 적용하기 위해 추가한 라이브러리는 chart.js, react-chartjs-2 그리고 실제 데이터를 넣기 전 간단한 더미 데이터를 생성할 수 있는 faker-js 정도. Chart 컴포넌트에서 차트 생성에 필요한 요소를 아래와 같이 import 해주었다. 위 사진과 같이 line으로 된 그래프를 그릴 것이기 때문에 해당하는 컴포넌트를 가져왔다...

#8 작업일지 / interval함수 리팩토링, 게시글 상세페이지 통신 로직 작성

1. 타이머를 카운트 하는 함수가 00:00:00이 되면 실행이 종료되어야 하는데, 마이너스까지 내려가고 있다. 조건을 입력하면 콜백함수를 delay시간동안 반복 실행시켜주는 useInterval 훅을 리팩토링함. 의존성 배열에 shouldContinue를 넣어줌으로써 shouldContinue의 상태가 변하거나 컴포넌트가 언마운트 될 때 클린업하는 함수를 실행한다. useEffect에서 리턴하는 함수는 컴포넌트 언마운트시에 실행되는 cleanUp함수이다. (공식문서 참고) shouldContinue 라는 것을 의존하기 위해서는 상태값으로 저장해서 관리할 필요가 있었다. 특정 조건이 되면 상태가 변하도록 하고, 이에 따라 interval 함수가 종료되어야 하기 때문이다. 그래서 아래와 같이 useGetT..

# 작업일지 7 / 카운트다운 함수 만들기

리액트 훅에서 setInterval 사용하면 의도대로 동작하지 않는다. 이유는 : https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 여기 참고. 간단하게 정리하면, state가 계속 변하면서 무한 렌더링에 빠지기 때문에. 그래서 커스텀 훅을 만들어서 쓴다. 리렌더링이 되어도 값을 기억할 수 있는 ref 를 활용한다. 이를 활용하지 않으면, 아래처럼 너무 많이 렌더링이 발생했다고 에러를 뿜는다. 위 글을 참고해 useInterval 이라는 훅을 만들었다. 이 함수는 delay 시간동안 callback 함수를 반복해서 실행시킨다. 여기에 추가적으로 shouldContinue 라는 인자를 통해 setInterval이 실행될 필요가 ..

# 작업일지 6 / query parameter 에 접근하기

내가 담당하게 된 검색 및 검색 결과 페이지. 검색 페이지에서 입력한 카테고리와 검색 키워드를 토대로, 검색 결과를 요청해 이를 렌더링 해주어야 한다. 다른 페이지로 이동이 필요하기 때문에 카테고리 값과 키워드 값을 어떻게 관리해야하나 고민이 되었음. 페이지 이동시에도 값을 기억하려면 전역 상태를 활용하면 되는데, 이러면 링크를 다른 사람에게 공유했을 때 제대로 동작하지 않는 오류가 발생할 수 있음. 따라서 uri 의 쿼리 파라미터를 가지고 검색을 하도록 구현했다. 쿼리 파라미터를 가져오는 훅을 만들었다. 이를 검색 결과 페이지에서 아래와 같이 활용한다. 검색 결과는 리스트이기 때문에, 각 리스트 item 에게 해당 response를 뿌려서 렌더링을 해줘야 함. 뭔가 이번 프로젝트에서는 데이터를 요청하는..

# 작업일지 5 / 알림 페이지와 검색 페이지 구현, 리액트 쿼리 어떻게 써야하징

1. 알림 페이지, 검색 페이지 퍼블리싱 우리 사이트는 경매 사이트로, 낙찰이 되거나 유찰이 되거나 했을 때 사용자에게 알림을 주는 기능이 있다. 오늘은 그 페이지를 작업했고 또 경매 물품을 검색할 수 있는 페이지 퍼블리싱 작업을 진행했다. 현재까지 기획된 내용이 최소 기획이기 때문에 빠르게 퍼블리싱을 끝내고 다음주부터 api 연결과 로직 구현에 들어가야한다. 오늘 작업한 내용, 별거 없지만 간단하게 코드 복기해보기. 일단 컴포넌트를 Page와 하위 컴포넌트로 분리하고 Page 컴포넌트에서 각 하위 컴포넌트에 필요한 데이터를 props로 넘겨주는 방식을 사용하고 있다. 사실 api를 어디에서 호출해서 관리할 것인지가 좀 고민이다. 페이지 컴포넌트를 분리해서 우리 사이트에 어떤 페이지가 있는지 한 눈에 알..

# 작업일지 4 / 모달창 작업, 캐러셀(?) 구현, relative absolute, 유니온타입 활용

1. 모달창 만들기 : css relative, absolute 속성 활용 이미지를 클릭하면 큰 사이즈의 이미지가 띄워지는 모달창을 만들었다. 현재 컴포넌트 구조는 위 이미지처럼 Page컴포넌트와 여러개의 하위 컴포넌트로 구성되어있다. 처음에는 DetailPage 에 모달 컴포넌트를 두고 상태 끌어올리기나 전역상태로 모달을 관리해줘야한다고 생각했는데, 꼭 그러지 않아도 되었다. 처음에 이렇게 생각했던 이유는, 모달 컴포넌트가 전체 창을 덮어야 하는데 부모 컴포넌트의 사이즈때문에 레이아웃이 제대로 제대로 나오지 않을까봐. 결론적으로는 모달 이벤트가 발생하는 ImageList 컴포넌트에서 모달을 관리하면 된다. 가장 상위 컴포넌트인 Page 컴포넌트에 relative 속성이 있으면, 하위 absolute 는..

# 작업일지 3 / Tailwind CSS 로 글로벌 스타일 적용하기 w.@layer가 뭐징

오늘부터 목요일까지 4일간 빨리 퍼블리싱을 마치려고 한다. Tailwind 를 사용하기 때문에, 오랜만에 뚝딱뚝딱이 가능했다. 지난번에는 글로벌 스타일을 제대로 활용하지 못했어서 이번에 써보게 되었음. index.tsx 에서 참조중인 글로벌 css 파일 내에 @layer 키워드로 글로벌 스타일을 설정할 수 있다. 이 키워드를 사용하면 테일윈드의 세 가지 종류의 레이어에 직접 커스텀 클래스를 정의할 수 있다. 세 키워드란 base, components, utilities가 있다. 초기셋팅 때 글로벌 css 파일 가장 상단에 선언해주는 그 세 가지이다. 공식문서에 따르면, 일반적인 css가 cascading 으로 위에서 아래로 적용되기 때문에 아래와 같이 코드를 작성하면 두 버튼 다 black이 된다. 이런..

# 작업일지 2 / 프로젝트 셋팅, 작업 시작

프로젝트 셋팅을 진행했다. React + Ts + TailwindCSS 를 사용하기로 했다. 오늘도 esLint 에 대해 또 새로운 사실을 알게 되었다... 1. esLint 에서 경로를 찾지 못하는 문제가 발생할 수 있다. tsConfig 등 참조하는 파일의 경로가 모두 옳다면, vsCode 작업 영역에서 최상단 디렉토리를 부모가 아닌 client 디렉토리로 하여 다시 열기 바람. 2. 컴포넌트는 tsx 확장자로 만들자. 생각없이 .ts 를 사용했더니 아래와 같은 일이 벌어졌다. react-router-dom 의 문제라고 생각했는데 확장자 문제였음. 3. tailwindCSS + typescript 셋팅 중 eslint tsconfig does not include this file 에러가 발생할 때...

작업일지 #1 기획 / 프로토타입 / 스택 선정

3월 초까지 간단한 경매 사이트를 만드는 프로젝트를 진행하게 되었다. 1. 기획은 쌈빡하게 이번 프로젝트의 목적은 웹소켓과 리액트 쿼리를 사용한 데이터 통신 구현이다. 덤으로 새로운 기술 스택도 연구하고, 훈련하고 공부하는 목적이 크다. 지난 프로젝트에서 기획 때 볼륨을 너무 크게 잡았다가 다 쳐낸 기억이 있어서 이번에는 MVP 를 빠르게 완성하고 덧붙이는 방식으로 쬐끔 더 애자일하게 진행해보려고 한다. 기획은 아이디어 + 필요한 페이지를 먼저 추출하고 해당 페이지에 필요할만한 컴포넌트나 기능을 다같이 정해보는 식으로 진행했다. 뭔가 딱 쌈빡하게 하루만에 끝나서 굉장히 좋았다. 그 뒤에는 백엔드 팀원들까지 포함해서 다같이 와이어 프레임을 그려봤다. 이번에는 mobile first 방식으로 화면을 구현하려..