개탕 IT FACTORY

개요 기존에 Polymorphic Component에대해서 알아보았다. 다양한 환경에서 다양하게 적용가능한 컴포넌트를 적용하기 위해서는 다형성을 가진 컴포넌트를 제작하였다. 이번에는 그 확장판인 Compound Component (합성컴포넌트)에대해서 알아볼까한다. Compound Component(합성컴포넌트) 무엇인가? Compound components are a React pattern that provides an expressive and flexible way for a parent component to communicate with its children, while expressively separating logic and UI. 출처 상위 구성 요소가 하위 구성 요소와 통신할 수 있..

개요 회사내에서 (지금은 전직장) 디자인 시스템 제작을 위해 다양한 자료를 찾아보던 와중에 Polymorphic 컴포넌트에 대해서 알게 되어서 관련 내용을 정리해볼까 한다. 디자인 시스템 제작한지는 상당히 시간이 오래지났지만 (23년 봄부터 시작했으니…) 관련된 참고내용과 내가 실제로 적용했던걸 바탕으로 글을 작성할려구 한다. 이 내용은 추후 디자인 시스템 구축을 위한 발판을 위한 기본글임을 알립니다. Polymorphic이란? 사전적 의미는 다형성이라고 표시되는데, 프로그래밍 특히 객체지향에서는 오버로딩과 오버라이딩등 다양하게 표현되곤한다. 물론 여기서는 그런뜻이 아닌 다양한 형태를 가질수있는 컴포넌트라고 이해하면 쉬울 것 같다. 다양한 형태는 어떤 형태를 말하는 걸까? 태그에 얽매이지 않는 컴포넌트 ..

RIP CRA(Create-React-App) CRA(Create-React-App)이 죽었다… 아 죽었다는 표현보단는 deprecated가 맞는 표현 같다 React에서는 새로운 문서 https://react.dev/ 를 공개하고 이전 문서의 지원을 중단했는데 충격적이게도… 새프로젝트 생성부분에 CRA(Create-React-App)부분이 존재하지 않았다 충격 실화! 근데 사실 전부터 이런 이슈는 존재해왔는데 어떤점이 문제였고, 그러면 어떤부분이 바뀌었는지 확인해보자 이후 Create-React-App는 CRA로 표현 💡 들어가기 앞서 이영상을 참고하면 좋을거 같다 https://www.youtube.com/watch?v=M4CLvtCS2YU 성능 이슈 사실 이문제는 전부터 존재하였지만, 새로운 모듈러..

1. 개요 개인 공부를 하던 와중에 친구와 공부내기에서 떠올린 프로젝트이다. 친구와 몇시간 혹은 특정 장소에서 공부한걸 인증한걸 공유하자 (도서관, 카페) 대신 집과 거리가 멀고, 공부를 하지 않고 인증만해도 그정도의 정성은 인정하자는 분위기였다. 근데 매번 타이머키고 인증하고, 또 공부 타이머앱 깔고 분석하기엔 뭔가 별루였다… (뭔가 보상이 없달까?) 그래서 뭔가 보상도 있고, 인터페이스도 쉬우면서, 동기부여가 되는 타이머앱을 만들기로 했다. 2. 기능 기본기능 타이머 : 당연하다, 타이머 앱이니까 타이머는 기본 탑재이다 분석기능 : 기본적인 목표치를 설정 주단위 분석 또는 달단위 분석 기능을 탑재할까 싶다 공유기능 : 자신의 공부시간 혹은 공부량등을 자랑할수있게 공유기능을 넣을예정 커뮤니티 기능 : ..

개요 프로젝트를 진행할때마다 CRA를 활용한 어플개발을 많이 하였다. 일단 환경 구축등의 시간 단축이 좋다는 이유로 많이 사용하였지만, CRA의 단점은 커스텀이 어렵다는 부분이 있다. 물론 npm run eject을 통해서 webpack설정을 바꿀순 있지만, 기존에 지원하던 좋은 장점을 버리는 거라 추천은 하지 않는다 (사실 직접 webpack으로 골라 만드는게 좋을듯…) 그래서 SSR, SSG의 장점이 가진 Nextjs를 나만의 boilerplate로 제작해볼까 한다. 준비사항 일단 어떤 요소를 넣어야 하는지에 대한 부분이 필요했다. 필수요소 typescript ESLint Prettier React-testing-library, jest styled-components tailwindCSS 데이터페칭..

DOM이란 무엇인가? MDN 문서에 따르면 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다 쉽게 말하면 일종의 웹페이지 문서라고 생각하면 편하다. 그러면 DOM이 왜중요한가? 브라우저 동작 방식을 이해할려면 DOM에 대한 이해가 있어야된다 아래는 Webkit 동작과정이나 브라우저엔진의 동작과정은 대부분 비슷하게 동작한다 DOM Tree 생성 브라우저가 HTML을 전달받으면, 브라우저 렌더 엔진이 이를 파싱 DOM 노드(Node)로 이루어진 트리생성 Render Tree 생성 외부 CSS파일 및 엘리먼트의 inline스타일을 파싱, 스타일 정보를 사용하여 DOM트리에 따라 새로운 트리 생성 Render Tree 이..

파이어 베이스란? 데이터베이스, 호스팅, 업로드 서버, 사용자 인증 등 다양한 백엔드를 제공해주는 서비스입니다 흔히 XaaS 서비스를 많이 말하는데 BaaS (Backend as a Sevice)입니다. 많이들 이런 서비스 종류로 대표적으로 아마존의 AWS, 마이크로소프트의 Azure, 구글의 Cloud Platform 이있는데 Cloud Platform은 Firebase와 통합된 것으로 알고 있습니다 무엇보다 AWS를 많이 이용하시는데 아마 1년 무료여서 이용하시는 분들이 많고 무엇보다 웹서비스 1위이기도 하고 안정적이기 때문이죠 하지만 파이어 베이스는 놀랍게도 기간 상관없이무료입니다. 단, 조건부 무료로써 일정 사용량 이상은 가격을 지불해야 됩니다. (뭐… AWS나 Azure도 마찬가지지만) 일단 장..