Front-End(Web)
-
[Jotai] React 전역 상태 라이브러리Front-End(Web)/React - 라이브러리들 2022. 3. 13. 05:22
이전, 토이를 진행하면서 React의 전역 상태를 사용하기 위해 Recoil 라이브러리를 적용했던 적이 있다. (링크) [Recoil] 전역 상태관리 라이브러리 - Recoil 정복기 🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메 abangpa1ace.tistory.com 이전에 사용했던 Redux에 비하면 매우 심플한 사용법에 컬쳐쇼크를 느끼고, 그렇게 나는 Recoil의 추종자가 되었다. 😏😏 이 Recoil의 철학(Atomic Model)에 영감을 받아 만들어진 React의 상태관리 라이브러리인 'Jotai' 를 소개해보려고 한다. 👻 Jot..
-
[Vue] Composition APIFront-End(Web)/Vue 2022. 3. 12. 05:44
이번에 새로 맡게 된 프로젝트에서는, Nuxt.js(Vue2)에 Composition API를 적용하는 기술스택으로 개발이 되고있다. Vue3가 정식 릴리스되면서 Vue2와의 큰 차이점중 하나인 Composition API에 대해 학습할 필요성을 느꼈다. 두 버전의 문법이 매우 상이했으며, 그래서 Composition API를 모르면 기존의 data(state), computed, methods, lifecycle 등의 기본적인 프로퍼티들마저도 원만하게 사용할 수 없었다. 본격적으로 개발을 시작하기 전에 Composition API의 차이점과 사용법 등을 공부하고자 하여 이 포스팅을 시작하게 되었다. 📗 Composition API 란? Composition API는 컴포넌트 내에서 사용하는 코드구조를 ..
-
[HTML+JS] window.postMessage() - <iframe> 과의 통신Front-End(Web)/HTML, CSS 2022. 2. 24. 22:27
현재, 회사의 서비스 분리 및 병합 등이 이루어지는 과정이어서, 선배 개발자님과 통합 멤버십 페이지를 개발하고 있다. 지금은 멤버십 개발 및 QA는 마무리된 상태이며, 이를 각 서비스에 연동하는 과정이며 여기서 많은 정책의 변화가 수반되고 있다. 그 중 하나가, 서비스에서 본인인증이 필요할 시, 멤버십 본인인증 창을 외부 팝업(일종의 모달) 형태로 띄우고자 하는 것이다. 팝업을 띄우는 다양한 방법이 있겠지만, 태그를 통해 내부에 웹페이지를 삽입하는 형태를 구상했다. 이 때, 내부 페이지의 X버튼을 클릭하면 외부 페이지가 이를 인식하고 창을 닫는 로직이 필요했으며, 이를 위해 window.postMessage() 라는 브라우저 이벤트 및 리스너를 활용하게 되었다. 내부에 웹을 띄우는 방법은 다방면에서 적용..
-
[Javascript] 정규 표현식 (Regular Expression)Front-End(Web)/Javascript 2022. 2. 15. 02:14
🤔 서론 Javascript 언어를 사용하거나, 관련 프레임워크로 개발하다 보면 정규식이라는 개념을 종종 접할 수 있다. 아마도, 다양한 조건을 검색 혹은 대체하기 위한 목적으로 많이 사용해보았을 것이다. (이메일, 패스워드 조건 or match(), replace() 메서드 등) 지금까지는, 템플릿화된 정규식을 가져다 쓴게 대부분이고, 그렇기에 문법을 명확히 이해하지 못하고 관습적으로 사용하고 있었다. 이를 주도적으로 이해하고 직접 작성하기 위해선 제대로 공부해야겠다는 생각을 했고, 이번 포스팅을 그 기회로 삼을 예정이다! 📒 정규 표현식 (Regular Expression) 이란? 정규 표현식(이하 정규식) 은 '문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴'으로 MDN 공식문서는 ..
-
[Javascript] ES6 이후 - (2) ES2019, ES2020, ES2021Front-End(Web)/Javascript 2022. 2. 9. 13:15
이전 포스팅에서, 최근 Javascript의 문법이 격변했던 ES6(ES2015)에 대해 정리한 적이 있다. (포스팅 링크 : https://abangpa1ace.tistory.com/146?category=910462) [Javascript] ES6(ES2015) 🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 abangpa1ace.tistory.com ES6 버전업 된 2015년 이후, Javascript는 매년 TC39에 의해 버전업이 진행되고 있으며, ES2018(ES9) 버전까지 포스팅했었다. (포스트 링크 : https:/..
-
[Javascript] ES6 이후 - (1) ES2016, ES2017, ES2018Front-End(Web)/Javascript 2022. 2. 8. 19:37
이전 포스팅에서, 최근 Javascript의 문법이 격변했던 ES6(ES2015)에 대해 정리한 적이 있다. (포스팅 링크 : https://abangpa1ace.tistory.com/146?category=910462) [Javascript] ES6(ES2015) 🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 abangpa1ace.tistory.com 이 당시에, Javascript 문법에 많은 수정과 추가가 진행되었으며, 이는 컴파일링이 필요할 정도로 호환성 문제가 계속해서 대두되었다. (통상 IE) 이 포스팅은, 2015년 E..
-
[React] Portal (포탈), Modal 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 2. 6. 16:08
회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해서 표현한다. 하지만 React의 경우엔 어떻게 구현되는지 몰랐으며, 전역모달이 구현되는 영역에 Context API를 적용하면 되나 이 영역들이 리렌더링된다는 단점이 있었다. 그렇기에 전역상태를 통해 모달을 on/off 하는 방법을 찾아봤으며, 이 때 React의 Portal 기능을 통해 좀 더 효율적인 구현이 가능했다. 💙 Portal 이란? React 공식문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 소개하고 있다...
-
[CSS/Side Lib.] Tailwind CSSFront-End(Web)/HTML, CSS 2022. 1. 23. 20:20
오랜만에 React에서 사용할 수 있는 Style 라이브러리를 토이 프로젝트와 함께 공부해보고 사용한 경험을 정리하고자 글을 쓴다. 바로, Tailwind CSS(이하 테일윈드) 이다! 많은 사람들이 어느 정도 알고 있는 라이브러리일 것이라 생각한다. 테일윈드는 React뿐만 아니라, Vue, Svelte 등 다양한 프레임워크에서 활용할 수 있으며, 또한 요즘 각광받고 있는 CSS 라이브러리 중 하나이다. npm trends 그래프를 가져와봤는데, 확실히 최근에 출시했음에도 불구하고 많은 Stars와 신속한 업데이트 속도를 보여주고 있다. 이렇듯, 테일윈드가 각광받고 있는 차별점은 아무래도 간단한 싱글라인 스타일이라고 생각한다. className 안에 테일윈드가 제공하는 속성 클래스들, 혹은 본인이 co..