Opendocs - Blog

[Setting | ReactNative] 개발환경 구축하기 (8) - Recoil 적용

앱개발시 전역 상태 관리를 위해 Recoil 적용방법을 정리한다.> 작성일 : 2025-02-04> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.77> Device : iPhone se2기본앱 설치 후 진행 - Link메뉴얼 참고 - Link₩ Recoil 설치프로젝트 디렉토리에 아래 명령으로 Recoil을 설치한다.npm install recoil App.tsx파일에서 레이아웃 설정RecoilRoot로 감사준다. 상태정의recoils 폴더를 만들어 상태파일을 만든다.# sessionStateimport { atom } from 'recoil';..

개발된 앱을 실제 핸드폰에서 테스트 하고 배포하기 위해 iOS 빌드 설정을 정리한다.> 작성일 : 2025-01-31> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.77> Device : iPhone se2기본앱 설치 후 진행 - Link메뉴얼 참고 - Link  iOS 의존성 설치 및 Xcode로 프로젝트 오픈프로젝트 디렉토리에 ios로 이동해 의존성을 설치하고 open 명령을 통해 프로젝트를 Xcode에서 연다.cd iospod installopen {프로젝트명}.xcworkspace   iOS 기기 개발용으로 설정iOS 기기에서 설정 - 개인정보 보호 및 보안 - 개발자 모드 켜기 - 재부..

개발된 앱을 실제 핸드폰에서 테스트 하고 배포하기 위해 Android 빌드 설정을 정리한다.> 작성일 : 2025-01-30> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.77기본앱 설치 후 진행 - Link메뉴얼 참고 - Link  SDK 경로 설정프로젝트 디렉토리에 android/local.properties 파일에 Android SDK 경로를 설정한다.sdk.dir=/Users//Library/Android/sdk   디버그 서명 키 설정프로젝트 디렉토리에 android/app/build.gradle 파일에 키를 설정한다. ... signingConfigs { deb..

앱에서 데이터를 관리하기 위해 React Query를 적용하는 방법을 정리한다.> 작성일 : 2025-01-30> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.77기본앱 설치 후 진행 - Link메뉴얼 참고 - Link  React Query 설치생성된 프로젝트에서 아래 명령을 수행npm install @tanstack/react-query   QueryClientProvider로 감싸기앱의 레이아웃 최상위에 QueryClientProvider로 감싸주어 전역에서 사용할 수 있도록 한다.// Create a clientconst queryClient = new QueryClient()functi..

앱에 아이콘을 사용할 수 있도록 React-native-vector-icons 을 적용하는 방법을 정리한다.> 작성일 : 2025-01-28> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.77기본앱 설치 후 진행 - Link메뉴얼 참고 - Link React Navigation 설치생성된 프로젝트에서 아래 명령을 수행npm install react-native-vector-iconsnpm install -D @types/react-native-vector-icons iOS 설정 pod installnpx pod-install Xcode를 통해 프로젝트 오픈Finder에서 /ios/.xcworks..

Java 기반의 개발(Android)을 위해 JDK 설치 방법을 정리한다.> 작성일 : 2025-01-27> OS : macOS Sequoia 15.2 (Apple M4)  OpenJDK 사이트에 접속해 압축파일 다운로드Openjdk - LINKLink를 통해 다운로드 사이트로 이동하여 macOS용 압축파일을 다운로드 받는다.  압축해제 및 환경변수 설정압축을 해제 하여 라이브러리 폴더에 넣는다.터미널에서 다음 명령으로 환경변수를 설정한다.vim $HOME/.zshrc# 아래코드 삽입 후 :qw (저장 후 닫기)export JAVA_HOME=$HOME/{jdk경로}/Contents/Homeexport PATH=$PATH:$JAVA_HOME/bin   설치 확인아래 명령으로 Java 설치를 확인한다.jav..

앱에서 라우팅 및 네비게이션을 제공하기 위해서 React Navigation 적용방법을 정리한다.> 작성일 : 2025-01-27> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.77기본앱 설치 후 진행 - LinkTailwind 적용 후 진행 - Link메뉴얼 참고 - Link  React Navigation 설치생성된 프로젝트에서 아래 명령을 수행npm install @react-navigation/nativenpm install react-native-screens react-native-safe-area-context   Android MainActivity 설정프로젝트 android/ap..

React Native 에서 Tailwind 사용을 위한 설정방법을 정리한다.> 작성일 : 2025-01-26> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.77기본앱 설치 후 진행 - Link  nativewind & tailwindcss 설치nativewind 2.0.11 (현시점 기준 4버전은 잘 작동하지 않음), tailwindcss 3.2.2 (nativewind 2.0.11과 호환) 를 추가한다.npm install nativewind@2.0.11npm install react-native-css-interopnpm install -D tailwindcss@3.2.2   초기화tail..

React Native 개발환경 구축 절차를 정리한다. (기본 가이드에 Framework - Expo 사용을 권장하고 있으나 유연성 문제로 미사용)> 작성일 : 2025-01-22> OS : macOS Sequoia 15.2 (Apple M4)> NodeJS : v22.13.1> NPM : v10.9.2> ReactNative : v0.76HomeBrew 설치 후 진행 - LinkRuby Update 설치 후 진행 - LinkXcode 설치 후 진행 - Link 필요기능 설치터미널 창을 열고 아래를 실행해 설치한다.sudo gem install cocoapodsbrew install watchman 기존 설치버전 제거간혹 충돌로 예상치 못한 이슈가 발생할 수 있으므로 제거 후 최신 버전으로 재설치npm ..

macOS에서 개발에서 필수적으로 필요한 XCode를 설치하고 앱개발에 필요한 추가 툴 설치법을 정리한다.> 작성일 : 2025-01-23> OS : macOS Big Sur v11.7.10 (Intel CPU)  AppStore를 통해 설치AppStore에서 Xcode를 검색하여 설치한다.  설치중설치시 해당 OS에서 최신 버전을 지원하지 않으면 자동으로 이전버전으로 설치되며 시간이 조금 오래걸린다.  설치 확인Launchpad > Xcode 실행 | 최초 실행시 라이센스 동의가 필요하다.  Command Line Tools 설치다른 개발 툴과 연계 (React Native 등)를 위해서는 필수로 설치해야 한다. 터미널에서 실행한다.xcode-select --install에러 : 아래와 같이 이미 설치..

macOS에서 개발시 기본 설치된 Ruby 버전이 낮아 에러가 발생하는 경우 업데이트 하는 방법을 정리한다.> 작성일 : 2025-01-23> OS : macOS Big Sur v11.7.10 (Intel CPU)HomeBrew 설치 후 진행 - Link 2가지 Ruby Version Manangerrbenv (lightweight) or RVM (powerful) : [참고] Ruby 사이트 - LINK 설치 명령 실행brew 명령으로 renv / ruby-build를 설치한다.brew install rbenv ruby-build 환경변수 설정rbenv사용을 위한 환경변수를 설정한다.echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc echo 'eval ..

개발에 필요한 패키지를 관리해주는 HomeBrew 설치 법을 정리한다.> 작성일 : 2025-01-23> OS : macOS Big Sur v11.7.10 (Intel CPU)  Brew 사이트에 접속한다.Brew.KR - LINK  터미널에서 실행설치 명령을 복사해 터미널 앱에서 실행/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"   Next steps설치 완료 후 안내되는 Next Steps를 터미널 창에 실행한다. (환경변수 설정)echo >> /Users/opendocs/.zprofileecho 'eval "$(/usr/local/bin/brew shellenv)"' >> /..

우분투 환경에 Nginx를 설치하고 서비스에 인증서 세팅하는 방법을 정리한다.작성일 : 2023-12-20OS : Ubuntu 22.04 LTSNginx : 1.18.0 apt update & upgradesudo apt updatesudo apt upgrade 이전버전 삭제sudo apt remove nginx nginx 설치sudo apt install nginx certbot 설치Certbot은 HTTPS를 활성화하기 위해 수동으로 관리되는 웹사이트에서 Let’s Encrypt 인증서를 자동으로 사용하는 무료 오픈 소스 소프트웨어 도구입니다.Certbot - LinkLet's Encrypt - Linksudo apt install certbotsudo apt install python3-certbo..

CI / CD 환경을 구축하기 위한 마지막단계 소스변경시 수행될 스크립트 작성성> 작성일 : 2025-01-02> OS : Ubuntu 22.04.5 LTS> Jeknins : v2.479.2젠킨스 설치 후 진행 - Link1단계 완료 후 진행 - Link2단계 완료 후 진행 - Link  Jenkins Pipeline script 작성# 젠킨스 빌드시 수행될 스크립트를 작성# Item > Configuration > Advanced Project Options# Definition : Pipeline script 선택 및 아래 입력pipeline { agent any stages { stage('Sync Source') { steps { ..

CI / CD 환경을 구축하기 위한 2단계 웹훅 설정 및 젠킨스 아이템 설정작성일 : 2024-12-26OS : Ubuntu 22.04.5 LTSJeknins : v2.479.2젠킨스 설치 후 진행 - Link1단계 완료 후 진행 - Link Jenkins Item 생성젠킨스 작업을 생성하고 깃헙 이벤트를 통해 실행됨# + 새로운 Item 클릭# Enter an item name : {배포대상}_{프로젝트명}# Select an item type : Pipeline# OK 클릭 Jenkins Item 설정GitHub Webhook을 받을수 있게 설정# GitHub project 체크Project url : {GitHub Repository 주소 입력}# Generic Webhook Trigger 체크Po..

CI / CD 환경을 구축하기 위한 1단계 젠킨스 설정> 작성일 : 2024-12-26> OS : Ubuntu 22.04.5 LTS> Jeknins : v2.479.2젠킨스 설치 후 진행 - Link  Jenkins 계정에 권한 추가컨테이너에서 Jenkins 계정에 root권한을 부여# 컨테이너 접속sudo docker exec -it jenkins_sock /bin/bash# 업데이트 & sudo 설치apt-get updateapt-get install -y sudo# 권한부여echo 'jenkins ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers   컨테이너 내부에 Docker 설치Docker Image로 만들기 위함# 컨테이너 접속sudo docker exec -it jenk..

Docker를 이용한 Jenkins 컨테이너 설치 방법을 정리한다.작성일 : 2024-12-26OS : Ubuntu 22.04.5 LTS 컨테이너 실행sudo docker run \--detach \--name jenkins_sock \--memory=4096m \-d \-p 8888:8080 \-p 8889:50000 \-v /home/opendocs/jenkins:/var/jenkins_home \-v /var/run/docker.sock:/var/run/docker.sock \-u root \jenkins/jenkins:lts 초기 비밀번호 확인docker exec -it jenkins_sock /bin/bashcat /var/jenkins_home/secrets/initialAdminPasswor..

윈도우 11에 개발툴 설치 방법을 정리한다.작성일 : 2024-12-25OS : Windows 11 Pro (24H2) Database 접속툴 설치* 설치파일 다운로드https://dbeaver.io/download/Windows (installer). Click!* 접속 테스트Host / Database / Username / Password 입력완료 Click!* 접속 확인 SSH 접속툴 설치* 설치파일 다운로드https://mobaxterm.mobatek.net/download.htmlHome Edition > Download now Click!MobaXterm Home Edition v24.4 (Portable edition) Click!* 압축해제 후 개발툴 폴더에 이동Work/Dev/tools..

윈도우 11에 Docker를 설치하는 방법을 정리한다.> 작성일 : 2024-12-25> OS : Windows 11 Pro (24H2)WSL 설치 후 진행 - Link  Docker Desktop Downloadhttps://docs.docker.com/desktop/setup/install/windows-install/Docker Desktop for Windows - x86_64. Click   Docker Desktop InstallUse WSL 2 instead of Hyper-V 체크   Container 설치 테스트우분투 실행컨테이너 설치

윈도우 11에 우분투를 설치하는 방법을 정리한다.> 작성일 : 2024-12-25> OS : Windows 11 Pro (24H2)  가상화 설정 확인만약 설정되어 있지 않다면 CMOS를 통해 설정해줘야 한다.# 실행taskmgr   'Linux용 Windows 하위 시스템' 기능 켜기* 제어판 > 프로그램 > Windows 기능 켜기/끄기* Linux용 Windows 하위 시스템 체크   WSL 설치* PowerShell을 관리자 권한으로 실행wsl --install* 설치 완료후 재부팅   배포판 목록 확인 및 설치* 배포판 목록 확인wsl --list --online* 설치wsl --install -d Ubuntu-24.04* 설치 확인 및 작업표시줄 고정