choi95의 TIL📝

문제 요소에 들어갈 아이콘을 넣어주기 위해 다음과 같이 기존의 png나 jpg 파일을 import하는 방식으로 svg 리소스를 가져왔다. import linkBtnImg from '../../../assets/icon-link_to_button.svg'; 하지만 이런 식으로 사용하다 보니, 크기만 다른 svg를 사용하기 위해서 똑같은 리소스를 두 번 import 해야 되는 번거로운 문제가 있었다. 문제해결 위의 방식이 아닌 svg 자체를 컴포넌트화 시키는 방식을 사용하기로 하였다. 우선 다음과 같이 해당 svg 파일을 ReactComponent의 형태로 import 해 온다. import { ReactComponent as LinkToButton } from '../../../assets/icon-lin..

문제 원티드 프리온 보딩 선별 과제에서 Nav를 제작하는 중, 레이아웃 구성 목적으로 flex 관련 속성들을 계속 사용하는 것을 확인할 수 있었다. 디자인을 적용하는 것에 있어서 문제는 없지만 반복되는 코드를 줄여 스타일을 적용할 수 있는지 고민하게 되었고 scss에서 variable을 별도로 분리하여 공통 스타일 속성을 정의했던 것과 같이 styled-components에서 사용할 변수 모음 객체인 theme을 이용하여 flex 관련 minin 함수를 사용해 보기로 하였다. Code themeProvider로 전역 변수로 사용되는 theme 내부에 flex 속성에서 자주 사용되는 mixin 속성을 함수 형태로 다음과 같이 정의하였다. const theme = { flexMinin: (direction ..

Issue 회사 프로젝트 도중, 사용자의 인증/인가를 통해 서비스를 구축하기 위해 서버로부터 발급 받은 JWT 토큰을 어디에 저장해야 될지 많은 고민이 있었다. 처음에는 store에 발급 받은 JWT 토큰을 저장해주는 방식으로 진행하였는데, JWT 토큰이 필요한 상황마다 매번 store에 저장되어 있는 값을 useSelector()를 통해 가져오는 것은 전체 코드를 번잡하게 만드는 문제가 있었다. 보안상의 이슈를 방지하기 위해 백엔드 측과 소통하여 refresh token을 사용하는 방식이 가장 좋았겠지만 당시 백엔드 개발자의 상황이 여의치 않았기 때문에 클라이언트 측에서 할 수 있는 최선의 방법을 선택하기로 하였다. 이에 발급 받은 JWT 토큰을 localstorage에 저장하는 방식을 프로젝트에 접목..

문제 서버와의 API 통신 도중 비동기적 처리의 인식과 제어를 효율적으로 하기 위해 다음과 같이 redux-saga 미들웨어를 이용한 유틸 함수를 만들었다. export const createRequestActionTypes = type => { const SUCCESS = `${type}_SUCCESS`; const FAILURE = `${type}_FAILURE`; return [type, SUCCESS, FAILURE]; }; export default function createRequestSaga(type, request) { const SUCCESS = `${type}_SUCCESS`; const FAILURE = `${type}_FAILURE`; return function* (action)..

문제 특정 페이지에 들어갔을 경우, 조건부 랜더링을 해주기 위해서 react-router-dom 내 matchPath()를 사용하여 다음과 같이 코드를 작성한 경험이 있었다. const TopNav = () => { const navigate = useNavigate(); const location = useLocation(); const isAuthView = () => { const currentPathname = location.pathname; if ( matchPath(currentPathname, { path: "/login" }) || matchPath(currentPathname, { path: "/login" }) ) return true; else return false; }; if (..

Issue https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 현재 프로젝트에선 사용자에게 팔로우할 만한 친구를 상단 바에서 보여주는 기능을 제공한다. 이때 친구 리스트를 한 번에 모두 보여주는 것이 아니라 초기에 8명의 Friend Figure만 보여주고 사용자가 버튼을 클릭하였을 경우에 한해서, 8개의 배수로 유동적으로 증가하는 offset을 query값으로 설정하여 서버에 API 통신을 한다. Carousel Slider 기능은 ..

Issue 프로젝트 도중 회원 가입 창이 뜨기 전에 이용 약관 동의 창에 대한 디자인 시안이 추가되었다. 처음에는 이용 약관 동의 라이브러리를 사용하려고 했지만, 체크 박스 관련 기능은 앞으로도 많이 쓰일 수 있기 때문에 이번 기회에 스스로 문제를 해결해보기로 하였다. Code 우선, 각 체크 박스의 체크 활성에 대한 여부를 저장해주어야 이용 약관 동의 창에서 여러 기능을 사용할 수 있기 때문에 다음과 같이 각 체크 박스의 Key값에 대한 체크 여부를 확인할 수 있는 Boolean Value를 지닌 객체를 state값으로 초기화 하였다. const [checkInfo, setCheckInfo] = useState({ webAccessCheck: false, privateInfoCheck: false, a..

Issue 현재 프로젝트에서 대부분의 사이드 이벤트에 대한 내용은 Modal 창이 띄워져 화면에 랜더링된다. 이를 위해 Modal 창에 대한 Presentation Component인 BodyBlackout 코드를 다음과 같이 작성하였다. mport { useDispatch } from "react-redux"; import styled from "styled-components"; const BodyBlackout = ({ modalSort, setAuthModalVisible, isVisibleAuthModal, }) => { const dispatch = useDispatch(); if (isVisibleAuthModal) document.querySelector("body").style.setPr..