본문 바로가기
반응형

분류 전체보기90

React 앱 생성 방법 및 초기 셋팅 방법 리액트 앱 생성 방법 및초기 셋팅 방법 1리액트 개발 폴더 만드는 방법개발 폴더 생성 후 생성 된 폴더로 이동mkdir home cd home홈 폴더 생성 후 홈 폴더로 이동* mkdir 명령어는 "make directory"의 약자로, 디렉토리(폴더)를 생성하는 명령어* cd 명령어는 "change directory"의 약자로, 현재 작업 디렉토리를 변경하는 명령어 2React 앱 생성 방법npx create-react-app ..을 붙이면 현재 폴더에 설치됩니다. 2~3분 정도 소요됨 3프로젝트 실행 확인npm start자동으로 브라우저가 열리며 http://localhost:3000에 “React 앱 기본 화면”이 보이면 성공! 4불필요한 코드 정리code .VS Code 실행 후 다음 파일.. 2025. 6. 23.
React Native + Expo 개발 환경을 위한 Node.js 설치하기 React + Expo는“웹 + 앱을 동시에 하나의 코드베이스로” 배포할 수 있는 실용적 선택임!이유설명개발 진입 장벽이 낮음React는 HTML/CSS를 조금이라도 아는 사람이라면 빠르게 적응 가능함Expo로 앱과 웹 동시에 배포 가능Expo는 React Native Web을 통해 Android/iOS + Web 동시에 지원강력한 웹 UI 생태계Tailwind, shadcn/ui, chart.js 등 다양한 고품질 UI 도구 사용 가능 이미 작성한 웹 코드 재사용 가능지금까지 작성한 JSX 기반 코드들을 거의 그대로 앱에서도 사용 가능 리액트 네이티브 + 엑스포로앱을 개발하기로 결정 했다면 1단계React 앱을 만들기 위해서Node.js 설치하기 ① Node.js 사이트에 접속 후② Node.js 다.. 2025. 6. 22.
왜 React Native + Expo로 개발하는가? 왜 React(React Native + Expo)로 개발하는가? 1한번에 세 플랫폼 개발웹, 안드로이드, iOS까지 React Native 자체만으로도 크로스플랫폼 개발이 가능하지만,Expo를 사용하면 추가 설정 없이 바로 웹과 모바일 앱을 만들 수 있음.하나의 코드로 세 가지를 다 커버함npx create-expo-app my-appcd my-appnpx expo start그리고 w, a, i를 누르면 웹, 안드로이드, iOS 미리보기까지! 2설정이 너무 쉽다React Native는 강력하지만,처음 설정할 때 Xcode, Android Studio, 환경 변수, CocoaPods... 이런 설정 지옥에 빠질 수 있으나Expo는 이 과정을 싹 생략하게 해줌. 설치하고 바로 개발, 바로 실행. .. 2025. 6. 21.
streamlit? 아나콘다 streamlit 명령어 streamlit 설치하기pip install streamlit streamlit 실행하기streamlit run 파이썬 파일명 streamlit 서버 실행 중지Ctrl + C (터미널에 종료 가능) Python웹앱의 새로운 대안 ✅ Streamlit이란? Streamlit은 데이터 사이언티스트와머신러닝 엔지니어를 위해 만들어진Python 기반의 웹 애플리케이션 프레임워크 HTML, CSS, JavaScript를 몰라도단 몇 줄의 Python 코드만으로도대화형 웹 앱을 만들 수 있도록 도와줍니다. 데이터 기반 데모나 실험용 앱 = Streamlit이 최적 항목StreamlitFlaskDjango목적데이터 앱/ML 대시보드일반 웹 서비스대규모 웹 플랫폼언어PythonPythonPython프론트엔드 .. 2025. 6. 19.
아나콘다 MAC 터미널 명령어 정리 비주얼 스튜디오 코드아나콘다 터미널 명력어 정리 설치된 콘다 버전 확인conda --version 설치된 아나콘다 관련 정보 조회conda info 콘다 가상환경 리스트 확인conda env list 가상환경 생성 (-n name의 약자)conda create -n 가상환경이름 python=버전 가상 환경 복사conda create --clone 대상가상환경 -n 가상환경이름 가상환경 활성화 (conda 생략 가능)conda activate 가상환경이름 현재 활성화된 가상 환경을 비활성화conda deactivate 가상환경 삭제conda env remove -n 가상환경이름 2025. 6. 18.
아나콘다 설치 방법! 맥북 에어 13 M4 미니콘다 설치 완료! 파이썬을 사용하기 위한아나콘다 설치 방법! 몰랐는데 아나콘다 미니도 있었음;; 미니콘다로 설치하는 이유는 콘다 가상 환경 조성하는데 관리자 프로그램까지 설치하지 않아도 돼서내 맥북 에어 245GB에 더 적합! 아나콘다 미니설치하기! 설치 후 설치 아이콘이 안 보여요 > 첫번째아나콘다 사이트접속하기 아나콘다 다운로드 사이트에 접속 후 ① 이메일 주소 입력 ② 동의 체크 ③ Submit 버튼 클릭!메일로 온 ④ Download Now 버튼 클릭! 이렇게 하면 아나콘다를 다운로드할 수 있는링크를 받을 수 있습니다. 사실 Skip registration를 클릭해도바로 다운로드 화면으로 갈 수 있음 두번째아나콘다 프로그램다운로드하기 아나콘다 다운로드 화면에서 오른쪽 Miniconda Installers.. 2025. 6. 16.
Visual Studio Code Macbook Air 설치하는 방법 맥에비주얼 스튜디오 설치하기너무 쉬움 Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.code.visualstudio.com 비주얼 스튜디오 코드 다운로드 ① 사이트에 접속해 주세요② Mac 버튼 클릭해 주세요 그러면 다운로드 폴더에VSCode-darw.. 2025. 6. 15.
포멧 후 설치해야 하는 프로그램 TOP3 - 피그마, 챗지피티, 노션 다운로드 하기 1.Figma 다운로드 > Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱macOS 또는 Windows용 데스크톱에 Figma 웹 디자인 앱을 설치하세요. 그리고 글꼴 설치 프로그램과 디바이스 미리보기 앱도 다운로드하세요.www.figma.com2챗 GPT 다운로드 > 3notion 다운로드 > Mac 및 Windows용 Notion 데스크톱 앱 | NotionEnjoy an infinitely flexible and adaptable workplace that optimizes around your personal and team needs. Download the Notion desktop app for Mac and Windowswww.notion.com 2025. 6. 15.
포멧 후 설치해야 하는 브라우저 TOP 3 - 구글크롬, 네이버 웨일, 브레이브 다운로드 1google - chrome 다운받기 > Chrome 웹브라우저더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.www.google.com2NAVER - whale 다운받기 > 네이버 웨일 브라우저일상을 여는 새로운 시작 네이버 웨일whale.naver.com 3.brave 다운받기 > 사용자가 우선인 브라우저 | BraveBrave 브라우저는 빠르고 보안이 뛰어나며, 프라이버시를 보호해주는 PC, Mac, 모바일용 웹 브라우저입니다. 추적 소프트웨어를 차단함으로써 데이터 사용량과 배터리를 절약해주는 브라우저를 지brave.com 2025. 6. 14.
개발할 때 필요한 질 좋은 일러스트 사이트 모아둠 (총 8개) 개발할때,이미지 없어서 슬프니까. 질 좋은 일러스트 사이트 모아둠 1. undraw📌 가입하지 않아도 됨📌 상업적, 개인적 사용 모두 무료📌 출처를 밝히지 않아도 됨📌 파일 확장자 SVG, PNG Illustrations | unDrawBrowse the complete unDraw collection of open-source illustrations. Find and customize the perfect illustration for your next project or website.undraw.co illlustrations📌 가입하지 않아도 됨📌 상업적, 개인적 사용 모두 무료📌 출처를 밝히지 않아도 됨📌 파일 확장자 SVG, PNG illlustrations - open .. 2025. 4. 30.
티스토리 블로그 삭제 방법 먼저,블로그 관리 페이지에서왼쪽 메뉴 가장 아래에 있는 1. 관리 > 블로그 클릭 2. 데이터 관리 > 데이터 관리하기 클릭데이터 관리 화면에서데이터 관리하기 영역 오른쪽 화살표를 클릭! 3. 데이터 관리하기 > 폐쇄하기 클릭위 안내 사항을 모두 확인하였으며,폐쇄를 진행합니다. 체크박스 체크하고 폐쇄하기 클릭! 클릭 시 모든 데이트가 삭제되어복원이 불가능합니다. 폐쇄하기 누르면 팝업이 뜨고,최종 폐쇄 결정을 하도록 메일이 발송됩니다. 4. 메일확인하기 > 폐쇄하기 클릭 계정 당 1개의 블로그만 운영 가능한 네이버와 달리 티스토리 블로그는계정 1개당 총 5개의 블로그를 운영할 수 있으며,블로그 총 개설 횟수는 10회입니다. 2025. 3. 26.
꿀팁! 티스토리 북스킨 사이드바 영역 스크롤 따라다니도록 하기 - 메뉴 고정하기 티스토리 사용하시는 분들 중에 가장 많이 사용하는 스킨이 북스킨이 아닐까 싶습니다.  북스킨 사용하다보면 귀찮게 메뉴 클릭하러 마우스 휠을 움직이실텐데요블로그 글을 보시면서 자연스럽게 메뉴가 스크롤되도록 수정하는 방법을 알려드릴게요! 너무 쉬워요!티스토리 북스킨 사용 하신다면 정말 쾌적한 블로거가 되실 겁니다! 티스토리 꿀팁!사이드바 고정하기 - 먼저, 티스토리에서 관리 클릭해 주세요! - 관리에서 왼쪽 아래 꾸미기 > 스킨 편집 클릭해 주세요- 스킨 편집에서 오른쪽 상단 html 편집을 클릭해 주세요  - 오른쪽 상단에 CSS 클릭해서 선택해 주세요- 아래 코딩이 있는 곳 흰 영역을 클릭 후 키보드 컨트롤(Ctrl) + F 키를 동시에 눌러주세요- 아래 그림과 같이 창이 나오면 aside를 입력 후 엔.. 2025. 3. 21.
사용자가 어디를 통해서 들어왔는지 확인하고 싶다면? NT파라메타, UTM파라미터 사용자가 유입된 경로를 알고 싶으신가요?다양한 마케팅 및 제휴로 인해사용자 유입을 확인 즉 성과 분석 지표가 필요하실 때URL에 파라메터를 사용해 보새요! 사용자 유입 경로 확인을 위해 사용하는 파라메터는 2가지가 있습니다.NT 파라메터 : 스마트스토어 통계 분석을 위해 네이버에서 제공하는 사용자 정의 파라미터 값UTM 파라메터 : "Urchin Tracking Module"의 약자로, Google Analytics에서 성과 측정을 위해 제공하는 사용자 정의 파라메터 값  먼저 특수기호 3가지를 사용합니다.?최초 연결자 : URL 링크와 UTM 코드를 이어주는 역할=구분자 : 파라미터와 파라미터의 값을 이어주는 역할&연결자 : 여러 파라미터를 서로 이어주는 역할 NT 파라메터 사용 방법 및 설명복사한 주.. 2025. 3. 20.
메타 퀘스트 초기화 방법 (feat. 당근 거래 전) 메타 퀘스트2 당근 거래 전에 메타 퀘스트 기기 초기화 하는 방법입니다.다른 메타 퀘스트도 동일한 방법으로 진행 가능하며 앱에서 간단하게 초기화 할 수 있습니다.   메타 퀘스트 2 기기 연결 및 초기화를 위한 필수 앱 플레이 스토어 - 메타 호라이즌 Meta Horizon - Google Play 앱Meta Quest와 호환play.google.com앱 스토어 - 메타 호라이즌  ‎Meta Horizon‎Meta Horizon에서 친구들과 함께 모임을 갖고, 게임을 플레이하고, 월드를 탐험하세요. 게임, 스포츠, 음악을 발견하세요. Meta Quest 헤드셋에 앱을 페어링할 수도 있습니다. Meta Horizon에서는 심심할apps.apple.com설치가 되었다면,메타 퀘스트2 초기화를 진행해 보겠습니.. 2025. 2. 18.
온 가족이 함께하는 메타 퀘스트 게임 추천 TOP9 (feat. 전체이용가) 메타 퀘스트 사셨다면꼭 해봐야 하는 게임 TOP9친구 추천으로 프로모션 받고 내돈내산 게임 추천합니다.메타에서 직접 구매하신다면 아래 링크 클릭 후 구매하시고, 메타 기기 연결하시면 36,000원이 적립될꺼예요! 추천 수락 | Meta Quest www.meta.com메타 퀘스트 게임 추천 TOP9 1. Beat Saber메타 퀘스트를 구매한 사람들이 제일 처음으로 다운 받는 앱으로, 프로모션 코드로 받은 36,000원으로 깔끔하게 구매 가능한 게임입니다.단순하고 쉬워보이지만, 생각보다 어렵습니다a Meta Quest의 Beat Saber | Quest VR 게임 www.meta.com   2. The Climb 2생각보다 팔에 적당한 근육도 생기는거 같고? 아찔한데 힐링도 되는 간단한 클라이밍 게임입니.. 2025. 2. 16.
블로그 글쓰기 막막할때 보면 좋은 사이트 추천! (feat. 대한민국 정책 브리핑) 블로그 글 소재가 떠오르지 않는다면,대한민국 정책브리핑 사이트를 참고해 보세요 대한민국 정책브리핑문화체육관광부에서 운영하는 대한민국 정첵을 제공하는 포털 사이트입니다. 대한민국 정책브리핑문화체육관광부에서 운영하는 대한민국 정책을 제공하는 포털사이트로 정책뉴스, 정책포커스, 국민이말하는정책, 정책기고, 문화칼럼, 사실은이렇습니다, 멀티미디어뉴스, 보도자료, 브리핑자www.korea.kr  그 중에서뉴스 > 키워드 뉴스 탭에서 확인해보세요핫이슈와 대상별, 주제별 키워드별로 최신 정보를 확인하실 수 있습니다. 2025. 2. 11.
Mac, MacBook M1, M2, M3, 맥에서 외장하드 연결 시 인식 및 쓰기 권한 확인 하기 맥에서 외장하드 사용하기  1.MAC에서 외장하드가 인식되었는지 확인하는 방법Finder -> 설정바탕 화면에서 확인 : 상단 일반탭 데스탑에서 항목 보기 중 외장하드 체크 폴더 사이드바에서 확인 : 상단 사이드바탭 아래쪽 위치 항목 중 외장 디스크 체크   2.mac에서 외장하드 연결은 됐는데 쓰기가 안된다면?Dock에서 Launchpad 클릭 디스크 유틸리티를 더블클릭 해주세요!사용할 외장하드를 선택 후 오른쪽 상단에 지우기 클릭   이름 : 사용할 외장하드 이름 입력포멧 : Mac만 사용하신다면 Mac OS 확장(저널링) 클릭  (윈도우와 맥을 동시에 사용하려면  EXFAT)후 지우기 클릭 2024. 12. 16.
안드로이드 스튜디오 버전 업데이트 후 실행 오류 해결방법 (Gradle 파일과 동기화) 안드로이드 스튜디오 프로그램을 실행하려면 최신 gradle 파일하고,안드로이드 스튜디오 최신 버전(컴파일에 필요한 AGP 버전)이 필요한데이를 업데이트 후에 제대로 실행이 안되는 경우 실행 오류 발생 이유는?업데이트 후 캐시 파일들이 엉켜서 제대로 된 gradle 프로그램 패키징이 안됨그러서 캐쉬를 다 지운 후 gradle 패키징을 다시 해야 함 해결방법은1. File -> Invalidate Caches... 클릭 Invalidate Caches 팝업창이 뜨면 Invalidate and Restart 클릭하면 안드로이드 스튜디오가 꺼졌다가 재시작 됩니다. 2. File -> Sync Project with Gradle Files 클릭 싱크 진행이 완료될때까지 기다리면 끝! 2024. 12. 10.
완성된 앱 빌드하기! 안드로이드 스튜디오 사용해서 쉽게 빌드하기, apk 만들기 ( feat. 안드로이드 앱 서명 Key Store 만들기 )  두근두근첫 앱을 개발하고 게시하기 전에꼭 필요한 안드로이드 앱 빌드를 진행해 보겠습니다. 1. 안드로이드 앱 개발하기안드로이드 앱을 만들기 위해서안드로이드 스튜디오로 안드로이드 앱 개발을 진행 해주세요 2. build.gradle (Module :app) 파일 수정하기왼쪽 폴더 리스트에서 Gradle Scripts > build.gradle (Module :app) 파일을 선택해 주세요build.gradle (Module :app) 파일에서 android > defaultConfig > 버전코드(versionCode)와 버전네임(versionName) 숫자를  필수로 올려주세요.(플레이스토어에 업데이트 하기 위함) 3-1. 안드로이드 앱 첫 빌드하기 ( 완성 후 처음 빌드 ) 빌드 전에Key Stor.. 2024. 12. 3.
tech icon 다운 받을 수 있는 사이트 (SVG, PNG 테크기업 로고 아이콘 다운받기) 테크 아이콘 및 심볼을 png 또는 Svg로 다운 받을 수 있는 사이트 입니다.매번 구글링 검색하기 넘 귀찮...  techicons.dev SVG and PNG tech icons | TechIconsSVG and PNG tech icons Download, copy and paste tech icons in SVG and PNG format for your projects.techicons.dev 2024. 11. 15.
아이폰에 적용된 기본 UI 아이콘 쉽게 사용하기! Figma, XD, 개발할 때 사용법 ( feat. SF pro font ) iOS 관련 디바이스에 사용되는 아이콘은 아이콘 폰트를 사용하고 있습니다.SF Symbols을 설치하고 복사해서 사용할 수 있습니다. (사용 시 폰트 설정은 SF pro로 해주셔야 보입니다) 매번 아이콘을 찾아 헤멜 필요가 없습니다.다만, 폰트 크기 조절에 따라 아이콘 굵기도 달라질 수 있어서 확인이 필요합니다.SF FontsiOS에서는 애플에서 디자인한 샌프란시스코 서체가 사용됩니다.그 중 SF Pro 폰트를 설치 해주세요! ( 폰트 설정을 SF pro로 해주셔야 아이콘이 표현됩니다 ) Fonts - Apple DeveloperGet the details, frameworks, and tools you need to use system fonts for Apple platforms in your ap.. 2024. 11. 13.
반응형

티스토리툴바