박승준의 기술 블로그 박승준의 기술 블로그

📌 React를 사용하여 제작을 한 사이트입니다. UseEffect와 UseMemo 같은 hooks를 통한 상태 관리로 코드의 흐름이 명확해 가독성이 좋았고, 에러가 났을 때에 코드의 관리가 수월했습니다.  📌 지도 페이지의 렌더링의 경우 가져오는 식당 데이터의 변경이 없기 때문에 매번 서버에 요청을 하여 가져오기 보단 SSG 방식을 사용하여 응답 속도가 약 400ms에서 4ms 정도로 줄였습니다. 반면에 수정이 가능한 맛집 목록의 경우 동적 데이터가 들어가므로 SSR 방식으로 렌더링을 하였습니다. 📌 React-hook-form을 사용하였습니다. 폼 유효성 검사 및 에러 처리를 useForm을 통해서 할 수 있었습니다.비제어 컴포넌트 방식으로, 변경된 폼 필드만 렌더링하여 사용자 입력 폼이 많은 ..

React로 개발을 하다보면 component가 렌더링 될때마다 특정 작업, 혹은 'side-effect'을 실행할 수 있도록 하는 useEffect hook을 사용하게 된다. UseEffect를 사용할 때에는, 1. 첫 번째 인자로 실행하고자 하는 함수를 주고,2. 두 번째 인자로 의존성 배열(deps)을 부여해준다. 여기서 잠시 useEffect의 deps에 대하여 알아보자면,  빈 배열: 처음에만 함수 호출 의존값 존재 : 처음과 지정값이 변경될 때 호출 아예 없는 경우 : 컴포넌트가 리렌더링 될 때마다 호출  내가 개발한 맛집 애플리케이션을 예로 들어보겠다.  위의 이미지에서는 loadKakaoMarkers()라는 함수와  loadKakaoMarkers, map 의존성을 주었다. 사실 처음에는 아..

React를 사용하여 제작을 한 사이트입니다. Redux를 통한 상태 관리로 데이터 흐름이 명확해, 디버깅이나 테스트가 용이했습니다. 많은 사람들이 쓰는 기술인지라 관심을 가지고 사용하게 되었고, 협업을 하는데에 훌륭한 가독성과 유지보수가 용이하다는 장점도 느끼는 계기가 되었습니다. Hooks를 사용한 것은 배울 점이 많은 경험이었습니다. 익숙하진 않았지만 React 커뮤니티에서 선호된다는 점에 이끌려서 사용하기로 하였고, 코드가 더 간결하고 재사용하기 간편하다는 점에서 배울 점이 많은 경험이었습니다. 모바일 환경에서의 가독성을 높이기 위하여 한 화면에 필요한 정보만 담기 위한 UI/UX를 디자인했습니다. 5인이 진행한 프로젝트이었기에 통일되고 규칙적인 스타일을 위해서 Figma, TypeScript를 ..

서비스를 제작하다보면 관리자 페이지처럼 일반 유저들이 접근하지 못하는 부분을 만드는 경우가 생긴다. 프로젝트 제작 중, "상품 추가"나 "유저 관리" 등 관리자의 권한이 있는 테스크를 제작할 일이 생겼다. 이러한 페이지의 경우 일반적인 클릭으로 이동하거나, URL을 알고 있을 경우 직접적으로 이동하려는 시도가 가능하다. 이 두 가지 방법은 관리자의 권한이 없을 때에도 가능하므로, 다음 두 가지 경우는 피해야한다: 페이지를 이동 후 권한 체크 (접근 권한이 없는 사용자에게 페이지 내용을 노출 시킬 수 있음) 권한 체크 전 페이지 내용을 불러오는 행위 (당연한 말이다.) 권한 체킹을 하는 라우팅 미들웨어를 하나 제작해서, 페이지 이동하기 전 로그인을 한 게정의 권한 체크를 해주고, 관리자가 맞다면 헤당 페이..

호텔 예약 서비스이다. 보다 싶이 스테이 유형, 가격 범위, 그리고 이미지에는 바로 나와있지 않지만 지역에 따른 필터 등 5가지 필터가 존재 한다. 이 기능을 구현하는데에 어려움을 겪었는데, 그건 바로 '일반적인 쿼리스트링으로는 선택적인 필터 사용 불가' 라는 점이다. 카테고리 별 디폴트 값이 필수로 있는 것이 아니거나 있어야 할 경우 비효율적인 경우도 있었기 때문에 이는 골치아픈 문제가 아닐 수 없었다. 이 문제를 해결하기 위해서 query parameter DTO(Data Transfer Object)를 사용하여 선택적인 query data를 받을 수 있었다. 이런 경우 여러 데이터를 주고 받을 때 가독성도 좋고, 객체로 한 번에 주고 받기 때문에 편리하다. 사실 프로젝트를 진행하다가, 필터가 한두 ..

개인적인 용도로 모으고 있지만, 찾아둔 링크를 블로그에 적어두면 어쩐지 머릿속 정리가 좀 더 되는 것 같다. 1. GitHub에서 remote repository와 upstream 이해하기 https://pers0n4.io/github-remote-repository-and-upstream/#:~:text=clone%20%ED%96%88%EC%9D%84%20%EB%95%8C%EB%8A%94%20origin%EC%9D%B4,%EB%A5%BC%20%EB%9C%BB%ED%95%98%EB%8A%94%20%EB%8B%A8%EC%96%B4%EC%9E%85%EB%8B%88%EB%8B%A4. GitHub에서 협업을 위한 remote repository와 upstream 이해하기 Git은 현재 소프트웨어 개발에 사용되는..