JavaScript
-
[React] 자식 컴포넌트 제어 - forwardRef, useImperativeHandleFront-End(Web)/React - 프레임워크(React, Next) 2022. 9. 15. 04:37
사이드 프로젝트에서 Uncontrolled Input을 구현하기 위해 고민하던 중, 문득 자식(input)의 ref.current.value를 부모(container component)가 어떻게 참조할 수 있을까에 대한 의문이 생겼다. * ref, useRef() 포스팅 : https://abangpa1ace.tistory.com/248 [React] Hooks - useRef() 회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 abangpa1ace.tistory.com 가장 심플하게, 자식인 React 노드에 ref를 줘보았고, 아래와 같은 에러 메세지를 띄워..
-
[React Query] (2) useQuery()Front-End(Web)/React - 라이브러리들 2022. 7. 26. 21:14
🧐 서론 첫 번째 포스팅에서는 React Query를 도입하는 배경과 장점, 그리고 기본개념들을 우선 정리하였다. 그리고, 이번 포스팅부터는 실질적으로 다루기 위한 문법들을 정리하려고 한다. React Query에는 주요 개념들이 있었으며, 이번 주제는 비동기 데이터를 지칭하는 쿼리(Queries)를 다루는 문법들이 될 것이다. 쿼리 데이터를 패치하는 useQuery() 메서드와 이 데이터를 다루기 위한 다양한 방법들을 정리해보겠다! * https://www.youtube.com/watch?v=Ev60HKYFM0s&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&index=3 🌺 useQuery() : 데이터 패치 Hooks 우선, 어플리케이션의 컴포넌트 트리 최상단에 설정했던 ..
-
[React Query] (1) React Query 시작하기Front-End(Web)/React - 라이브러리들 2022. 7. 25. 18:55
🧐 서론 React에서 사용되는 기술들에 계속해서 관심가지던 도중, 최근 React Query를 통한 API fetching이 많다는 것을 느꼈다. 대게 라이브러리들이 그렇듯, 기존의 fetch() 함수나 axios에 비해 더 많은 기능을 제공할 것이라 생각된다. (패치상태, 캐싱 등) 또한, Redux의 경우를 생각하면 비동기 패치와 상태관리 등을 위해 서드파티 라이브러리 설치가 필수적이었다. (비동기 패치를 위한 Redux-thunk, Redux-saga, 상태관리를 위한 Redux-toolkit 등) 그렇지 않아도 번거로운 Redux 설정이 서드파티로 인해 더욱 비대해지고, 범용적으로 쓰이는 saga는 제너레이션 문법이 요구된다는 등의 사용성 이슈가 존재한다. 유튜브 강의 전개내용을 적당히 분할하면..
-
[React] Infinite Scroll을 구현하는 2가지 방법Front-End(Web)/React - 프레임워크(React, Next) 2022. 7. 3. 18:19
🧐 서론 최근, 이직을 하게 되면서 많은 과제를 수행했었고, 처음 혹은 새로 구현하는 다양한 경험치들을 쌓을 수 있었다! 그 중에 하나가 기술할 Infinite Scroll(무한 스크롤) 로, 앱에서는 특히 이 기법을 통해 리스트 데이터를 추가하는 경우가 많다. 이전에 개인 프로젝트를 하면서 무한 스크롤을 구현했었고, 당시 window 객체의 스크롤값을 비교하는 보편적인 방법으로 구현했었다. (링크) [Javascript] Infinite Scroll (Height 속성) 🤔 배경 3차 프로젝트로 Nike 사이트 클론을 진행하면서, List 페이지를 연구하는테 아이템을 페이지네이션이 아닌 "인피니트 스크롤" 로 이어붙이는 로직으로 구성되어있는 것이었다. (아래는, abangpa1ace.tistory.co..
-
[Typescript] 타입 단언 / 타입 가드 / 타입 호환Front-End(Web)/Typescript 2022. 5. 13. 03:11
요즘 타입스크립트 강의를 들으며 개념을 상기하고 연습예제를 풀 준비를 하고 있다. 기본적인 내용들은 이전에 정리한 포스팅을 복기하였으나, 블로그에 남기지 않은 내용 중 중요한 부분을 이어서 포스팅하려고 한다. 이번 글은 타입스크립트 입문 강의를 들으면서, 타입을 다루는 주요 개념들을 정리해보려고 한다. 타입을 명시하는 타입 단언(Assertion) 유니온 등에서 타입의 경우를 좁혀가는 타입 가드(Guard) 타입 간의 호환성을 판단하는 타입 호환(Compatibility) * 이 포스팅은, 인프런 캡틴판교 님의 '타입스크립트 입문' 강의를 듣고 정리한 내용을 바탕으로 작성하는 시리즈입니다. (링크) 타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의 타입스크립트를 시작하는 분들을 위한 강의입니다...
-
[JS / Web공통] 링크복사 및 SNS 공유버튼 만들기Front-End(Web)/Javascript 2022. 5. 10. 21:47
이번에 사이드 프로젝트로 간단하게 MBTI를 개발했다. (링크) 여타 MBTI도 그렇고 사용자들의 원활한 공유를 위해 링크복사 버튼과 SNS 공유버튼(카카오, 페이스북, 트위터) 을 추가했다. 크게 어려운 기능은 아니나, 서비스 홍보 목적에서 FE에서 유용한 기능이므로 간단하게 정리 및 공유하면 좋을 것 같아 간만에 포스팅을 작성한다! 📒 링크복사 버튼 링크복사의 경우, 다양한 방법들이 있다. 그러나, execCommand() 는 deprecated 되었으며, Clipboard API를 가장 권장한다. 1. document.execCommand (deprecated) 기존엔 document 전역객체의 execCommand() 메서드를 사용했으나, 현재는 deprecated 되었다. export const..
-
[CodeKata] 프로그래머스(Lv3) : 110 옮기기Algorithm 2022. 5. 2. 04:09
🥋 Oooth More!! (Level 3) 🧮 풀이 110을 찾은 뒤, 이보다 큰 111이 있는 경우 이를 대치하면 된다고 생각했다. 또한, 대치된 110의 인덱스를 저장해서 다음 110을 찾을 때 해당 위치를 제외하려고 했으나, 복잡한 로직으로 시간초과가 발생하게 되었다. 🖇 리뷰 stack을 이용해 110들을 저장하고, 남은 값들 중 가장 끝에 있는 0 뒤로 이를 붙이면 되는 생각보다 쉬운 문제였다. const answer = []; function solution(s) { for (let t = 0; t < s.length; t++) { let str = s[t] let stack = []; let tmp = find110(str, stack); if (tmp == '') answer.push(s..
-
[CodeKata] 프로그래머스(Lv3) : 사라지는 발판Algorithm 2022. 4. 24. 03:02
🥋 Oooth More!! (Level 3) 🧮 풀이 DFS를 적용해야한다고 생각은 했지만, A와 B가 최적의 경로로 이동하는것을 어떻게 반영할지에 대해 감이 잡히질 않았다. (완전탐색을 통해 해결해야 한다) 🖇 리뷰 위에서 언급했듯, 완전탐색을 통해 A와 B가 모든 경로를 우선 방문한다. 탐색하면서 A 또는 B는 각자 이기거나 질 수 있는 사람인데, 이길수 있는 사람은 최소로, 질 수 있는 사람은 최대로 이동경로를 이동하려한다. const solution = (board, aloc, bloc) => { const dx = [0, 0, 1, -1] const dy = [1, -1, 0, 0] const yMax = board.length const xMax = board[0].length const df..