Front-End Dev.
-
<작성중>[Typescript] Utility Type(유틸리티 타입)Front-End(Web)/Typescript 2022. 7. 25. 03:50
이전, 타입스크립트 입문 강의를 들으며 기본적인 개념들을 정리하는 시간을 가졌다. 시리즈로 고급 강의도 존재하며, 잘 알지 못했던 고급 타입들까지 공부해보고자 다시 수강을 시작하게 되었다. 먼저, Typescript에서 공통 타입 변환을 용이하게 해주는 유틸리티 타입들에 대해 정리해보고자 한다! * 이 포스팅은, 인프런 캡틴판교 님의 '타입스크립트 실전' 강의를 듣고 정리한 내용을 바탕으로 작성하는 시리즈입니다. (링크) 실전 프로젝트로 배우는 타입스크립트 - 인프런 | 강의 "타입스크립트 입문 - 기초부터 실전까지"의 실전 활용편입니다. 입문 편을 수강하지 않으신 분들은 입문 편부터 수강해주세요 😄, - 강의 소개 | 인프런... www.inflearn.com 💙 Utility Type(유틸리티 타입)..
-
[CSS/Side Lib.] Emotion.jsFront-End(Web)/HTML, CSS 2022. 7. 21. 00:35
🧐 서론 작년, React 개발을 막 시작할 때 Styled-Components 라이브러리에 대해 포스팅하면서 CSS-in-JS를 같이 언급하였다. CSS-in-JS는 말 그대로 스타일 정의를 css파일이 아닌 JS로 작성된 컴포넌트에 삽입하는 기법이다. 그렇기에, 컴포넌트 단위로 개발하는 모던 프레임워크에서 각광받는 기법이며, Styled-Components, Emotion.js 등이 대표적인 CSS-in-JS 라이브러리로 사용되고 있다. CSS-in-JS는 컴포넌트 단위 개발 외에 아래와 같은 장점들, 그리고 trade-off성 단점들을 가지고 있다. [장점] 컴포넌트 내에 CSS를 작성하므로, 별도의 stylesheet 파일을 관리할 필요가 없다. CSS 모델을 Global 레벨이 아닌 컴포넌트 레..
-
[React] Container Component 제작 - ClickOutside, TooltipFront-End(Web)/React - 프레임워크(React, Next) 2022. 7. 5. 02:10
이번 포스팅 역시 과제를 진행하면서 새로이 경험한 React 개발내용을 복기하면서 정리하는 글이다. 하나는 요소에 마우스를 호버했을 때 표현되는 툴팁, 다른 하나는 박스 외부를 클릭했을 때 닫히는 Click-Outside 기능이다. 기능적으로 연관성은 없으나, 코드상으로 둘 다 Container Component를 사용했다는 공통점이 있다. 또한, 회사에서는 둘 다 Vue의 Custom Directive로 구현되었는데, React에서는 어떻게 구현할지 리서치해보니 생각보다 컨테이너로 쉽게 구현이 되어서 이를 소개해보려고 한다. 💙 Click Outside 구현 위처럼, 특정버튼을 누르면 팝업창이 표현되고, 창 외부를 클릭하면 닫히는 UX를 제공하기 위한 기능이다. 검색창의 자동완성창, 프로필 등 클릭시 ..
-
[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..