개인 프로젝트/React 컴포넌트 구현하기 검색 결과

해당 글 3건

Theme 타입, 값 설정 및 적용

프로젝트 내에서 색상, 그림자, break points 등 공통된 UI를 가지기 위해 theme을 사용합니다.해당 게시글에서는 theme 타입, 값을 생성해보도록 하겠습니다.그리고 해당 값을 ThemeProvider에 주입하여 프로젝트 어디에서든지 사용할 수 있도록 하겠습니다.간단한 내용이라 코드에 대한 설명보다는 왜 해당 작업을 하였는지 설명을 작성하였습니다.코드는 github 링크를 통해 확인할 수 있도록 하였습니다.Theme 타입, 값 설정전반적인 색상을 위한 palette글자를 위한 typographymedia query를 위한 break points내부적으로 색상 alias를 위한 colorltr, rtl direction을 위한 directionlight mode, dark mode를 위한 m..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 19. 19:54

React(Next) + Emotion로 MUI 따라 만들기

React로 개발할 때 UI 라이브러리를 사용하면 빠르게 구현할 수 있지만, 커스터마이징이 복잡하고 시간이 많이 소요되는 단점이 있습니다.이를 해결하기 위한 headless 컴포넌트 라이브러리도 있지만, 인력과 시간이 충분하다면 직접 구현하는 것도 좋은 대안이 될 수 있습니다.사이드 프로젝트로 도전해 보는 것도 의미 있을 것 같아 시작하게 되었습니다.개발 환경개발 환경은 NextJS 14 + Emotion입니다.CRA 대신 Next 14를 사용하고 싶었고, 아직 SSR에서 정상 동작하지 않습니다.따라서 "use client"를 추가해야 하지만, 익숙한 Emotion을 계속 사용하기로 했습니다. NextJS14 + Emotion 개발환경 셋팅하기NextJS14와 emotion을 이용하여 개발환경을 셋..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 19. 19:14

react native + expo를 이용한 webview 앱 개발환경

react native + expo를 이용한 webview 앱 개발환경미래의 제가 보기 위해 작성하는 것이므로 간단하게 작성하였습니다.사전 준비expo 회원가입 - 회원가입 하러가기명령어여기서부터는 명령어 나열입니다.- create-expo-app 명령어를 이용한 프로젝트 설치npx create-expo-app my-app- eas cli 설치npm install -g eas-cli- eas logineas login- eas build:configureeas build:configure위 작업을 완료하면 eas.json 파일이 생성됩니다.- 해당 링크를 클릭하여 eas.json에 적혀있는 코드를 복붙기존 eas.json 파일의 build를 교체해주시면 됩니다.- app 빌드 명령어eas build -p..
개인 프로젝트/React 컴포넌트 구현하기 2024. 9. 19. 19:06