choi95의 TIL📝

시작한 계기 머리를 식힐 겸(?) 원티드에서 채용 공고를 보다가, 2기 때 수료 했던 원티드 프리온 보딩 공고가 떠 있어 들어가 봤다.이번에는 어떤 선별 과제가 있는지 확인하다가 첫 번째 구현 문제가 눈에 띄었다. 해당 문제는 Toggle Switch 를 구현하는 것인데, 이전의 Toggle Switch와는 다르게 Slider 영역에 두 개의 글자가 각 사이드에 위치하였고 Toggle이 해당 글자 부분으로 이동하게 되면 동적으로 스타일링이 변하는 흥미로운 문제였다. 한산한 밤, 오랜만에 바닐라 JS 🍌 를 사용하고 싶어 해당 문제를 다음과 같이 간단히 코딩해보았다. Code See the Pen Untitled by 최병현 (@leulsiqf) on CodePen.

문제 타입스크립트를 사용한 프로젝트 내에서 svg 파일을 컴포넌트로서 사용하기 위해 다음과 같이 코드를 작성하였다. import { ReactComponent as ProfileIcon } from '/images/icon-profile.svg'; 하지만 해당 코드에서 다음과 같은 에러가 발생하였다. "*.svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다. 문제 해결 스택오버플로우에서 나와 같은 문제를 발견하였고 해당 문제를 해결할 수 있었다.https://stackoverflow.com/questions/54121536/typescript-module-svg-has-no-exported-member-reactcomponent TypeScript - Module '"*.svg"..

Issue 프로젝트 중, 로컬 PC에서 가져 온 이미지를 preview로 보여주며 저장하는 기능 구현이 필요했다. 처음에는 간단한 기능 구현일 줄 알았지만 생각보다 많은 시행착오를 겪었기에 해당 내용을 포스팅하고자 한다. Code 1) Input 스타일 커스터마이징 우선, Input 태그 내에 'type=file' 속성을 지정해주면 로컬 PC에서 이미지 소스를 가져올 수 있지만 기본 지정 스타일이 원하던 방향이 아니기에 다음과 같이 JSX를 작성하였다. 내 PC에서 불러오기 실제 로컬 PC에서 이미지를 가져오는 기능은 FetchLocalPC 컴포넌트이지만 스타일을 커스터마이징하기 위해서 FileLabel 컴포넌트를 따로 만들어 두 컴포넌트에 다음과 같이 스타일을 지정해주었다. export const Fi..

Issue 프로젝트 도중 typescript 기반의 react-redux 전역 상태를 세팅해야 되는 상황이 있었다. redux 내 action, 액션 생성 함수, 리듀서에 대한 적절한 타입을 지정해주기 까다로운 상황 속에서 typesafe-actions 라는 라이브러리를 알게 되었다. https://github.com/piotrwitek/typesafe-actions GitHub - piotrwitek/typesafe-actions: Typesafe utilities for "action-creators" in Redux / Flux Architecture Typesafe utilities for "action-creators" in Redux / Flux Architecture - GitHub - pi..

문제 https://github.com/choi2601/LeetCode-ProblemSolving/tree/main/797-all-paths-from-source-to-target GitHub - choi2601/LeetCode-ProblemSolving: 👨🏼‍💻 LeetCode 알고리즘 문제풀이 코드 저장소 👨🏼‍💻 LeetCode 알고리즘 문제풀이 코드 저장소. Contribute to choi2601/LeetCode-ProblemSolving development by creating an account on GitHub. github.com 릿코드에서 인접 행렬 그래프 문제를 풀다가 어이 없는 실수로 인해 오랜 시간 고민을 했다. 다시는 같은 실수를 하지 않기 위해 해당 부분을 짧게 포스팅하고자..

Issue Next.js 프로젝트 도중 상품 상세 페이지를 정적생성(Static Generation)을 하기 위해서 getStaticProps와 getStaticPaths를 사용해 보기로 하였다.해당 기능을 구현하기 이전에 정적생성, getStaticProps, getStaticPaths가 어떤 의미를 지니고 있는지 간략하게 메모해 두고자 한다. 정적생성(Static Generation)은 빌드 시점에 온전한 페이지의 HTML이 생성되어 서버에서 물리적으로 HTML 파일을 모두 갖고 있는 상태이다. 한 번 응답한 후에는 CDN(content delivery network)이 파일을 기억(캐쉬, cache)하여 응답하기 때문에 랜더링 속도가 빠르고 불필요한 서버 요청을 줄일 수 있다. getStaticPr..

문제 화면에 랜더링 된 각 리스트를 누르면 해당 리스트의 상세 페이지로 이동하는 기능을 구현하기 위해 다음과 같이 각 리스트에 고유 아이디 값을 dataset에 할당해주었고 해당 id값을 path query parameter에 할당해주었다. const LinkPage: FC = ({ itemInfoList }: LinkPageProps) => { const navigate = useNavigate(); const moveToDetailPage = ( e: React.MouseEvent ) => { const id = (e.target as HTMLParagraphElement).dataset.id; navigate(`/detail?id=${id}`); }; ( ... ) return ( {itemInfo..

문제 async/await 비동기 처리 함수 내에서 특정 정보들이 담긴 아이템 리스트를 서버로부터 전달 받아 반환하도록 다음과 같이 코드를 작성하였다. export interface ItemType { created_at: number; key: string; expires_at: number; download_count: number; count: number; size: number; summary: string; thumbnailUrl: string; files: File[]; sent?: Sent; } export const getItemData = async (): ItemType[] => { const { data } = await axios.get('https://romantic-hopper..