Front-End
-
[Typescript] 타입 단언 / 타입 가드 / 타입 호환Front-End(Web)/Typescript 2022. 5. 13. 03:11
요즘 타입스크립트 강의를 들으며 개념을 상기하고 연습예제를 풀 준비를 하고 있다. 기본적인 내용들은 이전에 정리한 포스팅을 복기하였으나, 블로그에 남기지 않은 내용 중 중요한 부분을 이어서 포스팅하려고 한다. 이번 글은 타입스크립트 입문 강의를 들으면서, 타입을 다루는 주요 개념들을 정리해보려고 한다. 타입을 명시하는 타입 단언(Assertion) 유니온 등에서 타입의 경우를 좁혀가는 타입 가드(Guard) 타입 간의 호환성을 판단하는 타입 호환(Compatibility) * 이 포스팅은, 인프런 캡틴판교 님의 '타입스크립트 입문' 강의를 듣고 정리한 내용을 바탕으로 작성하는 시리즈입니다. (링크) 타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의 타입스크립트를 시작하는 분들을 위한 강의입니다...
-
[React] Hooks - useRef()Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 3. 17:21
회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 각 질문들을 인덱스에 따라 렌더링하는 화면을 만들어야했다. 리스트, 인덱스, 질문 데이터들을 모두 useState()에 담아도 당연히 동작은 잘 하겠지만, 리스트 데이터에 대한 고민이 있었다. 첫 번째는, 리스트 데이터는 페이지 리렌더링에 아무런 연관성이 없다. 단순히, 리스트 정보들을 가지고 있고, 질문에 응답한 결과만을 저장하면 되기 때문에 state의 취지에 맞지 않는다고 할 수 있다. 두 번째는, 리스트 데이터가 수정(결과값이 입력)될 때마다 컴포넌트가 리렌더링된다. 각 질문에 대답할때 마다, 질문 리스트의..
-
[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..
-
[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..
-
[HTML+JS] window.postMessage() - <iframe> 과의 통신Front-End(Web)/HTML, CSS 2022. 2. 24. 22:27
현재, 회사의 서비스 분리 및 병합 등이 이루어지는 과정이어서, 선배 개발자님과 통합 멤버십 페이지를 개발하고 있다. 지금은 멤버십 개발 및 QA는 마무리된 상태이며, 이를 각 서비스에 연동하는 과정이며 여기서 많은 정책의 변화가 수반되고 있다. 그 중 하나가, 서비스에서 본인인증이 필요할 시, 멤버십 본인인증 창을 외부 팝업(일종의 모달) 형태로 띄우고자 하는 것이다. 팝업을 띄우는 다양한 방법이 있겠지만, 태그를 통해 내부에 웹페이지를 삽입하는 형태를 구상했다. 이 때, 내부 페이지의 X버튼을 클릭하면 외부 페이지가 이를 인식하고 창을 닫는 로직이 필요했으며, 이를 위해 window.postMessage() 라는 브라우저 이벤트 및 리스너를 활용하게 되었다. 내부에 웹을 띄우는 방법은 다방면에서 적용..
-
[Github] Branch 병합(Merge, Squash, Rebase)Environment(개발환경)/Git & Github 2022. 2. 18. 13:26
오랜만에 프론트앤드 개발 혹은 알고리즘 외의 주제로 포스팅을 작성하는 것 같다!!! 이 글을 포스팅하게 된 계기는, 개인 및 회사 프로젝트들을 진행하면서 Github를 사용하다보니 merge 외에 다른 병합 전략들을 접하게 되어 이를 정확히 알아보고 정리하고자 작성하게 되었다. 다수의 개발자들이 프로젝트를 진행하면, 개인의 코드를 관리하는 Git, 이 코드들이 병합되는 원격 저장소 Github(혹은 Gitlab 등) 과 같은 저장소를 사용하게 된다. 이런 Git, Github 와 같은 협업환경에서는, branch(브랜치)가 구성되어있어 개인환경에서 작업하거나 이를 main(master)과 같은 공용환경에 합치는 등의 작업이 가능하다. (Git & Github 정리 포스팅) [Git & Github] Gi..
-
[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:/..