choi95의 TIL📝

문제 상위 컴포넌트 내에서 하위 컴포넌트로 props를 전달하는 과정에서 type 에러가 발생하였다. export interface InfoType { [key: string]: any; id: number; title: string; client: string; due: string; count: number; amount: number; method: string[]; material: string[]; status: string; } const InfoListForm: FC = ({ method, material, status }) => { ( ... ) return ( {isEmpty ? ( 조건에 맞는 견적 요청이 없습니다. ) : ( currentInfoList.map((info: InfoTy..

문제 유저가 선택한 아이템의 정보를 담고 있는 리스트를 순회하여 해당 아이템이 존재하는지의 여부를 확인하기 위해서 다음과 같이 문자열로 객체의 프로퍼티에 접근하는 코드를 작성하였다. infoList.forEach((info: InfoType) => { let isSorted = false; for (let i = 0; i < currentSelectedSortNum; i++) { if (info[currentSortName].includes(currentSort[i])) { isSorted = true; break; } } ( ... ) }); 하지만 제대로 기능이 동작되지 않았고 오류를 확인하기 위해 콘솔를 보니, 다음과 같은 메세지가 떠 있었다. Element implicitly has an 'any..

문제 요소에 들어갈 아이콘을 넣어주기 위해 다음과 같이 기존의 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 (..

회고 https://programmers.co.kr/competitions/2165/2022-web-fe-first 2022 Dev-Matching: 웹 프론트엔드 개발자(상반기) 접수 22년 02월 21일 10:00 ~ 03월 10일 17:00 테스트 22년 03월 12일 14:00 ~ 03월 12일 17:00 programmers.co.kr 2022.03.12 Dev-Matching 테스트를 보았다.우려했던 것보단 테스트의 난이도가 크게 어렵진 않았지만 한동안 라이브러리 사용에 익숙해 있던 나에게, 오랜만에 Vanilla JS만으로 어플리케이션 구현하는 과정이 조금 낯설었다. 테스트가 끝난 뒤, 어떠한 라이브러리에 맹목되지 않고 기반이 되는 JS를 끊임 없이 학습해야 겠다는 의지를 되새겼다. 이에 테..