공부 및 일상기록

리팩토링 진행 중 라디오 버튼을 이용하여 카테고리별로 정렬된 목록을 볼 수 있는 기능을 개선하였다. 나의 첫 프로젝트에서 제작했던 코드는 다음과 같았다. · 리뷰순 · 별점순 · 좋아요순 · 가나다순 말 그대로 하드코딩 그 자체였다. 사실 불과 1년도 안되었지만 당시엔 반복되는 기능들을 왜 직접 다 작성하면서도 불편함을 못느꼈는지 모르겠다... 지금은 다음과 같이 방식을 바꿨다. 1. value와 label을 담고 있는 배열을 하나 작성한다. export const categoryIndex = [ { value: "reviewCnt", label: "· 리뷰순" }, { value: "score", label: "· 별점순" }, { value: "like", label: "· 좋아요순" }, { val..

기존 프로젝트의 방탈출 업체를 찾아보는 페이지에서 지역별 필터와, 페이지네이션이 적용되어 있었다. 하지만 해당 페이지는 /company url에서 변하지 않고 내부적으로 지역상태와 페이지번호 상태를 가지고 서버에서 데이터만 새로 받아와서 보여주었다. 하지만 이것이 사용자 경험을 해칠 수 있다는 생각이 들었다. 만약 내가 보고있는 현재 정보를 누군가에게 공유하려고 한다고 할 때, 우리는 습관적으로 주소창의 주소를 복사하여 카톡 등으로 공유를 한다. 하지만 맨 끝 url이 /company로만 끝나는 현재 페이지는 항상 전체 지역의 첫번째 페이지만 보여주게 되므로, 잘 맞지 않다고 생각했다. 그래서 쿼리스트링을 이용해서 해당 문제를 해결하였다. Query string이란? 먼저 간단하게 쿼리스트링이 무엇인지 ..

진행중인 일상의 방탈출 프로젝트 리팩토링 중 마이페이지부분을 수정하다가 다음과 같은 문제에 마주쳤다. 설명하기 앞서 어떤 기능을 하는지 설명하자면.. 여러개의 내가 하고 싶은 방탈출을 찜 해둔다. 그러면 마이페이지에서 내가 찜한 테마 목록을 통해 찜했던 데이터를 모두 볼 수 있다. 이제부터는 내가 마주한 문제이다. 내가 찜한 테마 목록 페이지는 무한스크롤이 구현되어있었다. 그리고 찜하기 해제 버튼을 누르면 해당 테마가 목록에서 사라지도록 구현하는 아주 간단한 기능의 페이지 이다. 그런데.. 무한스크롤로 약 3개 페이지정도 불러온 뒤 찜하기를 해제하면 약간의 딜레이가 걸린 후 목록에서 사라지게 되었다. 그 이유는 다음과 같았다. 먼저 wish가 찜하기 및 찜하기 해제를 동시에 하는 api인데, wish 자..

Quiz를 푸는 웹사이트를 제작 중, Quiz를 풀기 시작하면 시간을 카운트하여 마지막 결과에서 얼마의 시간이 흘렀는지를 보여주는 기능이 필요했다. 나는 처음 다음과같은 hooks를 만들었다. 1. 잘못된 useTimer import React, { useEffect, useState } from "react"; import { useSetRecoilState } from "recoil"; import { totalTimeAtom } from "../atom/atom"; export default function useTimer() { const [seconds, setSeconds] = useState(0); const setTotalTime = useSetRecoilState(totalTimeAtom..

퀴즈 오픈 api를 이용해서 퀴즈 사이트를 만들고 있다. 해당 오픈 api는 보기가 4개있는 객관식인데 항상 1번이 정답이다. 그래서 보기를 섞어주기 위해서 랜덤하게 구성하는 방법중 가장 널리 쓰인다는 Fisher-yates 알고리즘을 사용해봤다. 먼저 Fisher-yates 알고리즘의 기본 원리는 다음과 같다. 1. 주어진 배열의 마지막 원소를 선택한다. 2. 그리고 랜덤한 원소를 하나 선택한다. 3. 두 위치를 바꾼다. 4. 위 과정을 배열의 모든 원소에 적용한다. 위 과정은 모든 원소에 대해 랜덤한 원소를 선택하여 바꾸기 때문에 모든 요소가 동일한 확률로 랜덤한 위치에 배치된다. 내가 작성한 코드는 다음과 같다. /** * 배열을 랜덤으로 섞어주는 알고리즘 * 기존 배열을 건드리지 않고 새로운 배..

면접 과제로 간단한 차트와 애니메이션 구현등의 기능이 포함되어야 한다고 해서 나는 둘을 합쳐서 구현했다. 정말 간단하게 svg를 이용해서 차트를 만들었고, keyframe을 이용해서 구현하였다. props를 통해서 data를 넘겨주면 해당 비율만큼 채워지는 Pie Chart를 구현했다. 무난하게 작성 완료 후, 나는 정답 차트와 오답 차트가 필요해서 해당 컴포넌트를 두번 불러서 다른 data를 넘겨주는 방식을 택했다. 그런데 여기서 문제가 발생했다. 서로 다른 비율의 data를 넘겨줘도 이상하게 차트는 똑같이 그려지는 문제였다. 1. 오답코드 const Circle = styled.circle` transform: rotate(-90deg); transform-origin: 50% 50%; stroke-..

실전 프로젝트의 사실상 개발자체는 마지막 주차였다. 물론 배포 후 유저 피드백을 바탕으로 수정하는 작업이 있겠지만.. 이번 실전 프로젝트를 진행하면서 내가 개발한 페이지 및 기능은 다음과 같다. (공통요소인 헤더 및 푸터는 제외!) 검색페이지 ( 검색을 통해 검색어가 포함된 업체 및 테마를 보여주는 페이지 ) 테마페이지 ( 테마만을 쭉 나열해준 페이지로, 여러가지 필터와 정렬방식을 통해 입맛에 맞춰서 볼 수 있다. ) 테마상세 페이지 ( 테마페이지에서 본 테마를 상세하게 볼 수 있는 페이지로 해당 테마에 관한 정보 및 예약사이트 링크, 업체페이지로 이동, 댓글을 통한 유저간 정보 교환 등의 기능이 들어있다. ) 그리고 기능적으로는 댓글 CRUD, 찜하기, 페이지네이션, 무한스크롤(구현은 했지만 UI/UX..

벌써 항해 99를 시작한지 11주차가 지나갔다. 원래 우리는 11주차 마지막에 프로젝트 배포를 진행하려고 했으나 디자이너님의 몸상태가 좋지 않아서 며칠 작업을 못하셔서 우리의 디자인이 아직도 완성되지 못했다.. (원래 MVP기능의 디자인 완성은 12/1까지 였는데 12/5에도 완성되지 못한다고 들었다..) 조금 아쉬운 결과이지만 더욱 꼼꼼히 틀린 부분이 있는지 확인 해 볼 시간을 가졌다고 생각하기로 했다. 사실 이번주차에는 큰 어려움은 없었다. 그래도 나름 고민한 부분에 대해서 회고해보려고 한다. 문제점 : 로그인시 어떻게 하면 로그인 버튼이 마이페이지 버튼으로 바뀌면서 로그아웃 버튼을 생성하게 할까? 위 문제는 사실 로그인시 전역 state를 만들어서 그 값을 true false로 관리하면 될것이라고 ..