본문 바로가기

분류 전체보기184

[Docker + Nginx] Proxy Server에 Certbot으로 SSL 인증서 발급 받고 Https 적용하기 ⚡️ Certbot으로 SSL 인증서 발급받고 Https 적용하기 개인 리액트 프로젝트를 8080 포트로 올리고, 80 포트에는 Nginx를 이용해 프록시 서버를 올려 언제든 80 포트를 바꿀 수 있도록 했습니다. 그다음 프록시 서버에 ssl 인증서를 발급받고 https를 적용함으로써 다른 웹서버는 인증서에 대해 신경 쓸 필요가 없어졌습니다. 그럼 Certbot으로 Nginx에 ssl 인증서를 발급받고 https를 적용하는 방법을 소개합니다. 📌 포트포워딩 공유기의 포트포워드 설정에 들어가 80 포트와 443 포트를 열어줍니다. 📌 DNS A 레코드 수정 A Record : DNS에 저장되는 정보의 타입으로 도메인 주소와 서버의 IP 주소가 직접 매핑시키는 방법 도메인 제공 업체에서 DNS A 레코드를 .. 2023. 7. 27.

구글 로그인 에러, Firebase: Error(auth/unauthorized-domain) 해결 방법 ⚡ Firebase: Error(auth/unauthorized-domain) 구글 로그인을 진행하다 다음과 같은 에러를 만났습니다. 도메인을 구입해 연결한 뒤 파이어베이스 측에 도메인 등록을 하지 않아 발생했습니다. 에러를 해결하기 위해서는 다음과 같이 도메인을 등록해주면 됩니다. 📌 해결 방법 🔎 파이어베이스 프로젝트 콘솔 진입 후 Authentication 진입 🔎 Authentication의 Setting → 승인된 도메인 해당 도메인을 추가하고 다시 로그인을 진행하면 오류 없이 진행 됩니다. 2023. 7. 26.

VSCode Copilot, 코파일럿 3개월 사용 후기 ⚡️ 코파일럿 사용 후기 대 인공지능 시대, 인공지능 붐이 시작되고 얼마 지나지 않아 MS에서 코파일럿이 출시 되었다는 소식만 듣고 시간이 흘러, 회사에서 인공지능 서비스 조사를 해본다고 저희 팀에게 사용 및 조사를 맡겼습니다. 사용하기전 주구장창 Chat GPT를 사용하며 인공지능은 아직 사람이 개입할 여지가 많다고 생각해 하찮게 생각했었습니다. 하지만 회삿돈으로 쓰는 건데 밑져야 본전이죠? 첫날 바로 VSCode에 적용해버리고 얼마 되지 않아 깜짝 놀라버렸습니다. 나쁜쪽이 아니라 좋은쪽으로요. 아직까지 회사에서 지원해줘서 쓰고 있지만, 만약 지원을 끊는다고 하면 자비로 결제할 의사까지 있을 정도입니다. 그럼 코파일럿이 얼마나 좋았는지 소개하겠습니다. 📌 Copilot Chat gpt를 개발한 Open.. 2023. 7. 24.

[React-Native] BackHandler, 뒤로 가기 시 앱 종료 묻기 ⚡ React-Native BackHandler 앱 제작 중 로그인 화면이나 메인 화면에서 뒤로 가면 즉시 앱이 종료되어 불편함을 느꼈습니다. 곰곰히 생각해보니 기존에 사용하던 어플들은 앱을 종료할 때 모달창으로 한번 더 ‘종료 하시겠습니까?’ 하고 물어보던 것이 생각이 나서 적용해봤습니다. 그럼 기능부터 사용법, 문제 해결, hooks으로 분리한 과정을 설명하겠습니다. 📌 BackHandler 주요 기능 import { BackHandler } from 'react-native'; ... useEffect(()=>{ const backAction = () => { // 여기에 뒤로 가기 버튼을 눌렀을 때 수행할 작업을 정의합니다. // 작업을 수행한 후에는 true 또는 false를 반환합니다. // .. 2023. 7. 21.

[React-Native + TypeScript] Stack Navigation, 스택 네비게이션 사용법 ⚡ react-native의 네비게이션 화면에서 navigation을 이용하여 다른 화면으로 이동하곤 합니다. react web에서는 말 그대로 URL을 통한 페이지 → 페이지 의 이동이었다면 앱에서는 스크린 간 이동이 아닌 자료구조의 스택과 같이 스크린을 쌓아갑니다. 스택 네비게이터는 화면 간 전환 및 탐색 기록을 관리할 수 있는 방법을 제공합니다. 이 뿐만 아니라 네이티브 어플에서 사용하던 일부 제스처와 애니메이션도 제공해 유용하게 사용할 수 있습니다. 그럼 약간은 복잡한 StackNavigation 설정 방법을 알아보겠습니다. 📌 라이브러리 설치 // 다음과 같은 환경에서 실행했습니다. "react": "18.2.0", "react-native": "0.71.8", 리액트 네이티브의 스택 네비게이션.. 2023. 7. 18.

React Native 장단점과 CLI, Expo 비교와 후기 ⚡️ React-Native 장단점 📌 장점 🔎 생산성 JS로 안드로이드와 IOS 어플을 동시에 제작할 수 있습니다. 🔎 CodePush를 통한 배포 원하는 기능의 배포를 아무 때나 스토어를 거치지 않고 할 수 있습니다. 네이티브 코드에 변동이 있을 땐 CodePush를 사용하진 못하고 스토어 업데이트를 이용해야 합니다. 🔎 쉽고 빠른 UI 작성 JavaScript와 리액트만 잘 알고 있다면 모바일 UI를 쉽고 빠르게 작성할 수 있습니다 📌 단점 🔎 자주 실패하는 앱 구동, 너무 오래 걸리는 Build Time 리액트 네이티브 프로젝트 개발 후, 시뮬레이터 또는 개발용 기기로 개발 모드를 구동을 할 때 대부분의 경우엔 문제없이 잘 작동하지만 브랜치를 변경하여 네이티브 코드에 변동 사항이 발생하거나 하면,.. 2023. 7. 13.

[React-Native] styled-components, Unknown property: 'elevation' ts-styled-plugin(9999) 경고 제거 ⚡️Warning, Unknown property ‘…’ ts-styled-plugin(9999) 리액트 네이티브의 styled-components 라이브러리를 이용해 열심히 컴포넌트를 만들고 있는데 알 수 없는 요소라고 경고가 계속 발생했습니다. 작동은 잘 되지만 거슬리는건 못참기 때문에 좀 찾아보니 TypeScript에서 react-native만 가지고 있는 CSS 속성을 인식하지 못해 발생하는 문제였습니다. 📌 삽질 리액트 네이티브 관련 글들은 죄다 오래됐는데 그마저도 버전이 조금만 다르면 작동을 아예 안한다는 것에 질려버렸습니다. 이 문제 또한 돌고 돌아 해결했지만 23년에 RN 개발 시작하시는 분들을 위해 삽질한 것도 글에 포함해 봅니다. 🔎 지난 버전 라이브러리 $ npm install -D .. 2023. 6. 20.

[CSS] Animation 최적화 ⚡ CSS 애니메이션 CSS로 애니메이션을 만들어줄 때 데스크톱이나 노트북으로 부드럽게 작동하는 것을 확인했어도 막상 핸드폰으로 볼 때 엄청나게 버벅이는 경우가 있습니다. 이러한 현상은 스마트폰의 성능이 아무리 좋아졌다고 해도 비교적 떨어지기 때문입니다. 즉, 애니메이션 효과는 생각보다 컴퓨팅 파워를 많이 소모하고 최적화가 되어 있지 않으면 성능에 문제가 생긴다는 말과 같습니다. 그럼 웹에서 애니메이션이 동작하는 과정과 최적화하는 방법에 대해 알아보겠습니다. 📌 브라우저 렌더링 과정 브라우저에서 UI를 렌더링 하는 과정을 요약하면 다음과 같습니다. Recalculate Style 스타일을 계산하는 과정입니다. 작성된 CSS를 파싱해 CSS Object Model을 생성합니다. Dom Tree와 CSS O.. 2023. 6. 19.

[React+TS] styled-components, ThemeProvider 타입 정의하기 ⚡️ styled-components ThemeProvider 대표적인 CSS in JS 라이브러리인 styled-components는 기본적으로 스타일을 전역적으로 공유하는 ThemeProvider를 제공합니다. 사용방법은 다음과 같이 간단합니다. 📌 ThemeProvider import { ThemeProvider } from "styled-components"; const theme = { color1: "#000", color2: "#001", color3: "#002" }; export default function App() { return ( ... ); } 다음과 같이 최상위 컴포넌트에 ThemeProvider를 감싸주고 theme props를 넣어줍니다. 📌 theme 사용 방법 impo.. 2023. 5. 28.

이전 1 2 3 4 5 6 7 ··· 21 다음

티스토리툴바