티스토리

choi95의 TIL📝

검색하기

블로그 홈

choi95의 TIL📝

choi95.tistory.com/m

기억보다 기록을

구독자: 1

방명록 방문하기

주요 글 목록

심심해서 만들어 본 Toggle Switch📍 시작한 계기 머리를 식힐 겸(?) 원티드에서 채용 공고를 보다가, 2기 때 수료 했던 원티드 프리온 보딩 공고가 떠 있어 들어가 봤다.이번에는 어떤 선별 과제가 있는지 확인하다가 첫 번째 구현 문제가 눈에 띄었다. 해당 문제는 Toggle Switch 를 구현하는 것인데, 이전의 Toggle Switch와는 다르게 Slider 영역에 두 개의 글자가 각 사이드에 위치하였고 Toggle이 해당 글자 부분으로 이동하게 되면 동적으로 스타일링이 변하는 흥미로운 문제였다. 한산한 밤, 오랜만에 바닐라 JS 🍌 를 사용하고 싶어 해당 문제를 다음과 같이 간단히 코딩해보았다. Code See the Pen Untitled by 최병현 (@leulsiqf) on CodePen. 공감수 0 댓글수 0 2022. 4. 16.
타입스크립트 상에서 svg 파일을 컴포넌트로서 import할 때 문제 문제 타입스크립트를 사용한 프로젝트 내에서 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".. 공감수 5 댓글수 0 2022. 4. 11.
로컬 PC에서 이미지 가져오고 저장하기_타입스크립트 내에서 비동기 작업을 통한 FileReader 인스턴스 사용기 Issue 프로젝트 중, 로컬 PC에서 가져 온 이미지를 preview로 보여주며 저장하는 기능 구현이 필요했다. 처음에는 간단한 기능 구현일 줄 알았지만 생각보다 많은 시행착오를 겪었기에 해당 내용을 포스팅하고자 한다. Code 1) Input 스타일 커스터마이징 우선, Input 태그 내에 'type=file' 속성을 지정해주면 로컬 PC에서 이미지 소스를 가져올 수 있지만 기본 지정 스타일이 원하던 방향이 아니기에 다음과 같이 JSX를 작성하였다. 내 PC에서 불러오기 실제 로컬 PC에서 이미지를 가져오는 기능은 FetchLocalPC 컴포넌트이지만 스타일을 커스터마이징하기 위해서 FileLabel 컴포넌트를 따로 만들어 두 컴포넌트에 다음과 같이 스타일을 지정해주었다. export const Fi.. 공감수 0 댓글수 0 2022. 4. 11.
react-redux에 typescript 활용하기_typesafe-actions 라이브러리 사용기 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.. 공감수 0 댓글수 1 2022. 4. 7.
그래프 문제를 풀다가 어이 없었던 실수_배열 객체에 대한 고찰 문제 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 릿코드에서 인접 행렬 그래프 문제를 풀다가 어이 없는 실수로 인해 오랜 시간 고민을 했다. 다시는 같은 실수를 하지 않기 위해 해당 부분을 짧게 포스팅하고자.. 공감수 0 댓글수 0 2022. 4. 2.
Next.js로 정적생성(Static Generation) 구현_getStaticProps와 getStaticPaths 사용기 Issue Next.js 프로젝트 도중 상품 상세 페이지를 정적생성(Static Generation)을 하기 위해서 getStaticProps와 getStaticPaths를 사용해 보기로 하였다.해당 기능을 구현하기 이전에 정적생성, getStaticProps, getStaticPaths가 어떤 의미를 지니고 있는지 간략하게 메모해 두고자 한다. 정적생성(Static Generation)은 빌드 시점에 온전한 페이지의 HTML이 생성되어 서버에서 물리적으로 HTML 파일을 모두 갖고 있는 상태이다. 한 번 응답한 후에는 CDN(content delivery network)이 파일을 기억(캐쉬, cache)하여 응답하기 때문에 랜더링 속도가 빠르고 불필요한 서버 요청을 줄일 수 있다. getStaticPr.. 공감수 0 댓글수 0 2022. 3. 31.
event.target property 접근_as를 통한 타입 단언(Type Assertion) 문제 화면에 랜더링 된 각 리스트를 누르면 해당 리스트의 상세 페이지로 이동하는 기능을 구현하기 위해 다음과 같이 각 리스트에 고유 아이디 값을 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.. 공감수 0 댓글수 0 2022. 3. 26.
Promise 리턴 타입 오류 문제 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.. 공감수 0 댓글수 0 2022. 3. 26.
React 컴포넌트 간에 props 데이터 전달 과정에서의 type error 문제 상위 컴포넌트 내에서 하위 컴포넌트로 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.. 공감수 0 댓글수 0 2022. 3. 26.
인덱스 시그니쳐(index signature)를 사용하여 객체 접근 문제 유저가 선택한 아이템의 정보를 담고 있는 리스트를 순회하여 해당 아이템이 존재하는지의 여부를 확인하기 위해서 다음과 같이 문자열로 객체의 프로퍼티에 접근하는 코드를 작성하였다. 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.. 공감수 0 댓글수 0 2022. 3. 26.
React 상에서 svg 다루기 문제 요소에 들어갈 아이콘을 넣어주기 위해 다음과 같이 기존의 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.. 공감수 0 댓글수 0 2022. 3. 26.
styled-components mixin 사용하기 문제 원티드 프리온 보딩 선별 과제에서 Nav를 제작하는 중, 레이아웃 구성 목적으로 flex 관련 속성들을 계속 사용하는 것을 확인할 수 있었다. 디자인을 적용하는 것에 있어서 문제는 없지만 반복되는 코드를 줄여 스타일을 적용할 수 있는지 고민하게 되었고 scss에서 variable을 별도로 분리하여 공통 스타일 속성을 정의했던 것과 같이 styled-components에서 사용할 변수 모음 객체인 theme을 이용하여 flex 관련 minin 함수를 사용해 보기로 하였다. Code themeProvider로 전역 변수로 사용되는 theme 내부에 flex 속성에서 자주 사용되는 mixin 속성을 함수 형태로 다음과 같이 정의하였다. const theme = { flexMinin: (direction .. 공감수 0 댓글수 0 2022. 3. 26.
redux 사용 시, 발급 받은 JWT 토큰 localstorage에 저장하기 Issue 회사 프로젝트 도중, 사용자의 인증/인가를 통해 서비스를 구축하기 위해 서버로부터 발급 받은 JWT 토큰을 어디에 저장해야 될지 많은 고민이 있었다. 처음에는 store에 발급 받은 JWT 토큰을 저장해주는 방식으로 진행하였는데, JWT 토큰이 필요한 상황마다 매번 store에 저장되어 있는 값을 useSelector()를 통해 가져오는 것은 전체 코드를 번잡하게 만드는 문제가 있었다. 보안상의 이슈를 방지하기 위해 백엔드 측과 소통하여 refresh token을 사용하는 방식이 가장 좋았겠지만 당시 백엔드 개발자의 상황이 여의치 않았기 때문에 클라이언트 측에서 할 수 있는 최선의 방법을 선택하기로 하였다. 이에 발급 받은 JWT 토큰을 localstorage에 저장하는 방식을 프로젝트에 접목.. 공감수 0 댓글수 0 2022. 3. 26.
redux-saga 미들웨어에서의 에러 처리_axios에서의 에러 핸들링 문제 서버와의 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).. 공감수 0 댓글수 0 2022. 3. 26.
react-router-dom(v6) path 경로에 맞게 조건부 랜더링_matchPath 문제 특정 페이지에 들어갔을 경우, 조건부 랜더링을 해주기 위해서 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 (.. 공감수 0 댓글수 0 2022. 3. 26.
2022 Dev-Matching 테스트 회고 회고 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를 끊임 없이 학습해야 겠다는 의지를 되새겼다. 이에 테.. 공감수 0 댓글수 0 2022. 3. 12.
Swiper 라이브러리를 사용하여 데이터 통신이 되는 CarouselSlider 기능 구현_useLayoutEffect 사용 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 기능은 .. 공감수 2 댓글수 0 2022. 1. 26.
Object.values를 사용하여 이용 약관 동의 기능 구현 Issue 프로젝트 도중 회원 가입 창이 뜨기 전에 이용 약관 동의 창에 대한 디자인 시안이 추가되었다. 처음에는 이용 약관 동의 라이브러리를 사용하려고 했지만, 체크 박스 관련 기능은 앞으로도 많이 쓰일 수 있기 때문에 이번 기회에 스스로 문제를 해결해보기로 하였다. Code 우선, 각 체크 박스의 체크 활성에 대한 여부를 저장해주어야 이용 약관 동의 창에서 여러 기능을 사용할 수 있기 때문에 다음과 같이 각 체크 박스의 Key값에 대한 체크 여부를 확인할 수 있는 Boolean Value를 지닌 객체를 state값으로 초기화 하였다. const [checkInfo, setCheckInfo] = useState({ webAccessCheck: false, privateInfoCheck: false, a.. 공감수 0 댓글수 0 2022. 1. 26.
custom Hooks를 사용하여 Modal Component 리팩토링 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.. 공감수 0 댓글수 0 2022. 1. 26.
리액트 상에서 Intersection Observer API를 사용하여 Infinite Scroll 기능 구현 Infinite Scroll 기능의 필요성 원래는 진행하던 프로젝트의 메인 페이지 내에서 추가 데이터를 서버에서 가져와 랜더링하는 방식은 Carousel Slide 였지만 관련 디자인 시안이 대폭 수정되었다. 이에 따라 데이터를 보여주는 방식이 특정 지점에 도달했을 때, 이를 인식해 서버에서 추가 데이터를 가져오는 Infinite Scroll 방식을 사용하기로 하였다. 처음에는 특정 지점을 계산하기 위해 ScrollingElement 내의 scrollTop값을 사용하였지만, 스크롤이 되는 속도에 따라 값이 항상 바뀌는 이슈와 scroll event 자체의 성능 저하 문제(동기적으로 이벤트 발생할 때마다 호출되는 콜백 함수)로 인해 Intersection Observer API를 사용해 보기로 했다. In.. 공감수 0 댓글수 0 2021. 12. 24.
서버에서 가져 온 데이터가 redux store에 저장되는 않는 문제_immer produce 문제 현재 mainPage redux store에는 크게 콘텐츠를 보여주는 contents와 사용자 방을 보여주는 roomList가 저장되어 있다. redux-saga를 통해 서버와 API 통신을 하여 각각의 배열 내에 데이터들을 적재해주는 과정에서 문제가 발생하였는데, contents에 해당하는 데이터들은 서버에서 문제 없이 가져와 저장되는 반면에, roomList에 해당하는 데이터들은 저장되지 않았다. 처음에는 서버와 API 통신하는 과정에서 문제가 발생한 줄 알고 Promise 후속 메서드인 then 메서드 내에서 콘솔을 찍어봤는데, 문제 없이 roomList에 해당하는 데이터들도 가져왔다. 문제해결 한참을 해당 Blocker에 대해서 고민한 결과, 리액트 상에서 불변성을 지켜주지 못해 발생한 문제.. 공감수 0 댓글수 0 2021. 12. 24.
쿼리 문자열 인코딩하기(한글 주소 깨짐 현상)_encodeURI 문제 프로젝트 도중 검색창에 영어를 치면 별 문제 없이 쿼리 값을 API path에 담아 서버에서 관련 데이터를 무사히 가져오지만, 한글을 칠 경우에는 해당 keyword의 값이 깨진 상태로 쿼리 값을 서버에 보내 제대로 데이터를 가져오지 못하는 문제가 있었다. 문제해결_encodeURI https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURI encodeURI() - JavaScript | MDN encodeURI() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. developer.mozilla.org The encodeURI().. 공감수 1 댓글수 0 2021. 12. 24.
숫자를 원화 문자열로 수정_Array.prototype.toLocaleString 문제 "info_list": [ { "id": 1, "name": "숲과 생활", "category": "민박", "address": "전라/전주시", "min_people": 2, "max_people": 3, "min_price": 187000, "max_price": 264000, "image_url": "https://images.stayfolio.com/system/pictures/images/000/058/604/small/632cee6dc35346df1f2c6b5d586ed5e73ec7c8a7.jpg?1606199154" }, ( ... ) ] 다음과 같이 서버에서 숙박 리스트 데이터를 가져와 화면에 랜더링하고자 했다. 이때 키 값 중 min_price와 max_price는 원화로 표시되어야.. 공감수 0 댓글수 0 2021. 12. 24.
오즈의 타로_UI / UX Presentation 공감수 0 댓글수 0 2021. 12. 21.
Travel Marker_UI / UX Presentation 공감수 0 댓글수 0 2021. 12. 21.
[정렬]가장 큰 수 문제 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예numbersreturn [6, 10,.. 공감수 0 댓글수 0 2021. 11. 21.
WETCHAPEDIA 팀 프로젝트 회고(2)_기능 구현 Carousel Slide Carousel Slide는 이번 WETCHAPEDIA 프로젝트에서 내가 맡은 핵심 기능이자 가장 고민했던 부분이다. 단순히 기능이 원활하게 동작되는 것 뿐만 아니라 해당 컴포넌트를 얼마나 효율적으로 만드는 것인가에 대해서 끊임 없이 고민하였기에 이에 대해서 포스팅해보고자 한다. 처음에 Carousel Slide 기능을 구현하기 위해서 일정 영역을 Fixed View로 지정해 둔 뒤 overflow value를 hidden으로 하여, 버튼 요소를 누르게 되면 해당 View의 너비만큼 transformX 값을 퍼센트(%) 단위로 이동하게끔 하였다. 그리고 Carousel Container 내에 마우스가 hover가 되면 overflow value를 scroll로 바꾸어, 사용자가.. 공감수 0 댓글수 0 2021. 11. 21.
WETCHAPEDIA 팀 프로젝트 회고(1)_협업 협업(Communication) 해당 프로젝트에서 여러 기능을 구현해 보았고 새로운 기술 또한 경험해 보았다. 본래라면 이 모든 기능에 대해서 하나씩 나열하여 길고 긴 설명을 시작으로 해당 회고를 시작하려고 했다. 하지만 처음 팀 프로젝트를 경험해 본 나에게 있어서, 주요하게 복기해야 될 사항이 단순히 기술의 설명에 대한 나열일 것인가 라는 고민이 들었다. 이에 이번 프로젝트를 시작하고 끝나면서까지 마음 한 켠에 품고 스스로 계속 되새겼던 한 질문을 시작으로 회고의 서두를 띄고자 한다. 개발자에게 있어서 어떠한 점이 중요할까. 이 질문에 대해서 이전의 나라면 단연 '오랜 시간 의자에 앉아 키보드를 두들기는 것' 이라고 말했을 것이다. 하지만 이번에 난생 처음 팀 프로젝트를 진행하면서 개발자에 대한 나의 .. 공감수 0 댓글수 0 2021. 11. 21.
계산된 속성명을 이용하여 inputHandler 함수 합치기 Before 코드 다음은 로그인 컴포넌트의 JSX 코드이다. 로그인 식별을 위해 id와 pwd의 value 값을 식별해주기 위해 state에 값을 저장하는 메서드인 checkVal를 onChange 이벤트에 바인딩해주었다. 두 개의 다른 Input value를 하나의 함수로 관리해주다 보니, 아래와 같이 똑같은 코드 반복되며 불필요한 조건문이 사용되어졌다. checkVal = event => { let { value } = event.target; if(event.target.className === 'login-form') { this.setState({ login : value, }); } else { this.setState({ pwd : value, }); } }; After 코드 위의 내용을 수.. 공감수 0 댓글수 0 2021. 11. 14.
특정 값에 Entry 시 데이터 가져오기_Infinite Scroll 구현 결과 다음과 같이 Scroll값이 화면 상에 끝 지점에 도달했을 경우에 추가적으로 서버에 데이터를 요청하여 화면에 랜더링되도록 기능 구현하였다. 리액트 상에서 전역 객체(Window)에 스크롤 이벤트를 바인딩해주는 작업은 이번에 처음하는 거였기 때문에 관련된 코드를 포스팅해보고자 한다. 소스 코드 우선, 전역 객체 Window에 Scroll Event를 바인딩해주는 시점은 모든 요소가 화면에 나오는 처음부터 이다. Vanilla Javascript 상에서는 이 작업을 DomContentLoaded 나 load 된 시점에 해주지만 리액트 상에서는 해당 이벤트 발생 시에 Scroll 이벤트를 바인딩해주는 것보다 컴포넌트가 처음 Mount(마운트) 되는 시점에 하는 것이 더 명확하다고 생각이 들었다. 이.. 공감수 0 댓글수 0 2021. 11. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.