Front-End(Web)
-
[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..
-
[React] React 18 의 달라진 점들Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 18. 01:15
올해 3월, React v18.0 이 정식 릴리즈가 되었다. (2020년 10월, v17.0 이 릴리즈된지 약 1년반) 업데이트 소식과 베타버전은 작년부터 리포트 되어왔으며, 최근 정식 릴리즈됨에 따라 이 포스팅을 한 번 정리하면 좋겠다는 생각이 들었다. 지난 React v17.0 은 호환성, 안정화 정도의 간단한 업데이트라면, v18.0은 주요 기능들이 많이 추가되어 이례적으로 작년에 알파버전까지 릴리즈하기도 했다. 이번 기회를 통해 React를 버전업하는 방법, 그리고 이번에 추가된 주요 기능들에 대해 알아보도록 하겠다! 💙 React 18 시작하기 이번 React 18 버전에서 추가된 주요기능은 크게 아래 3가지로 소개된다. automatic batching : 여러 개의 상태 업데이트를 한 번에 ..
-
[React] 컴포넌트 렌더링 최적화Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 13. 04:40
React를 사용하면 렌더링 성능에 대해 고민할 수 밖에 없다. 최적화를 위해선, React 컴포넌트의 리렌더링 조건을 먼저 복기하자! 본인의 state가 변경될 때 부모 컴포넌트로부터 받아오는 props가 변경될 때 부모 컴포넌트가 리렌더링 될 떄 shouldComponentUpdate(), forceUpdate() 등 강제 업데이트 메서드 호출 지금까지 나도 state, props를 단순히 데이터를 다루기 위해 적용하다보니, 데이터의 할당이나 위치가 부적절했을때 불필요한 리렌더링이 유발되었을 거라고 생각한다. 리렌더링을 하면 컴포넌트를 reflow & repaint 를 함에 따른 브라우저 성능 저하가 발생할 뿐만 아니라, 다른 이슈도 동반된다. 함수형 컴포넌트의 경우, 리렌더링을 할 경우 내부 로직들..
-
[React] Hooks - useRef()Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 3. 17:21
회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 각 질문들을 인덱스에 따라 렌더링하는 화면을 만들어야했다. 리스트, 인덱스, 질문 데이터들을 모두 useState()에 담아도 당연히 동작은 잘 하겠지만, 리스트 데이터에 대한 고민이 있었다. 첫 번째는, 리스트 데이터는 페이지 리렌더링에 아무런 연관성이 없다. 단순히, 리스트 정보들을 가지고 있고, 질문에 응답한 결과만을 저장하면 되기 때문에 state의 취지에 맞지 않는다고 할 수 있다. 두 번째는, 리스트 데이터가 수정(결과값이 입력)될 때마다 컴포넌트가 리렌더링된다. 각 질문에 대답할때 마다, 질문 리스트의..
-
[HTML] 이메일 폼 퍼블리싱Front-End(Web)/HTML, CSS 2022. 3. 30. 03:06
현재 회사에서 진행하는 통합멤버십 프로젝트 관련해서, 각종 안내 이메일 발송폼을 퍼블리싱하는 작업을 담당하였었다. 우선 처음 작업하는 부분이다보니 백엔드 Github에서 기존에 웹 퍼블리셔님이 제작해주신 이메일 폼 코드를 공유받았고... 충격에 빠지게 되었다!! 자주 사용해보지 않았던 태그의 등장.... 납득하기 힘든 Inline CSS....!! 매우... 매우 당혹스러웠다...🤪🤪 위 문법을 준수하여 작업하더라도, 이전에 왜 이렇게 작업되어야 하는지 그 취지를 이해해야겠다는 생각에 이메일 폼 퍼블리싱에 관한 글들을 참고하게 되었고, 나와 비슷한 피해자(?)들은 조금이라도 이 길을 쉽게 지나갈 수 있는 가이드같은 포스팅을 작성하고자 글을 시작하게 되었다. 📙 배경 주로, 서비스를 사용하는 회원에게 관련..
-
[Vue.js] Vue 3 가 도입되면서 달라진 점Front-End(Web)/Vue 2022. 3. 13. 20:12
🧐 서론 올해인 2022년 1월, Vue3의 안정화 버전(3.2.28)이 정식 릴리즈가 되면서, Vue 프로젝트의 기본 템플릿이 Vue3로 대체될 예정이다. Vue 2에 비해 함수형 프로그래밍화 된 점, 이에 따른 다양한 문법의 변화와 기능의 추가 등이 동반되었다. (Vue devtools 도 Vue3 버전으로 마이그레이션 되었으며, Vue 공식문서 역시 Vue3 개선점들을 기반으로 새로이 단장을 했다.) 지금 회사에서 사용중인 Composition API를 공부하면서 Vue3의 가장 큰 특징이자 코드포맷을 알아볼 수 있었다. 이를 계기로, 정식 릴리즈된 Vue3가 이전의 Vue2에 비해 보여주는 대표적인 차이점들은 어떤 부분들이 있을지 한 번 정리해보고 싶어졌다!! 📗 Vue 3 달라진 점들 1. 성능..
-
[Next.js] next/image - <Image> 컴포넌트Front-End(Web)/React - 프레임워크(React, Next) 2022. 3. 13. 13:22
이번에 토이를 Next.js로 진행하면서, 이미지를 Next.js에서 지원하는 컴포넌트로 적용하는 것을 권장한다는 메세지를 보았다. Next.js v10부터 컴포넌트를 지원했으며, 주요 목적이 바로 이미지 최적화(Optimization) 인 것이다. 컴포넌트를 사용하는 의의와 사용법에 대해 간단하게 공부하면서 정리해보았다! 🤍 컴포넌트는? 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다. Next.js 공식문서에서 설명하는 컴포넌트 사용의 의의는 아래와 같다. Basic Features: Image Optimization | Next.js Next.js supports built-in image optimization, as well as third par..