개발 이야기/웹 개발 배우기12 원격 개발 환경에서 Streamlit 앱 접근하기 Streamlit은 빠르게 웹 애플리케이션을 개발하고 배포할 수 있는 유용한 도구입니다. 이 글에서는 VS Code로 Remote SSH를 사용하여 워크스테이션에 접속해서 개발을 하고 있는 제 환경을 예로 들어 해결 방법을 알려드립니다. Streamlit은 워크스테이션 로컬 네트워크 기준으로 작동 되니, VS Code에서 접속한 Remote 환경에서는 당연히 접속이 안될 것입니다. 이 문제를 해결하기 위해, 포트포워딩과 방화벽 설정을 변경하여 외부에서도 애플리케이션에 접근할 수 있도록 설정해보겠습니다. 1. 포트포워딩 설정하기 포트포워딩은 라우터가 외부 요청을 내부 네트워크의 특정 IP와 포트로 전달하는 기능입니다. 대부분의 라우터는 관리자 페이지에서 이 설정을 제공합니다. 예를 들어, IPTime 라우.. 2023. 7. 28. [Streamlit] OSError: [Errno 24] inotify instance limit reached 오류 해결 방법_걱정 노노 개발환경 : Ubuntu 20.4 / Python3.10 / streamlit 1.25.0 Streamlit을 처음 설치하고 나서 명령창에 $ streamlit hello 를 치면 뭔가 나와야 되는데 아래와 같은 오류가 발생했다. streamlit run first_app.py Collecting usage statistics. To deactivate, set browser.gatherUsageStats to False. Traceback (most recent call last): File "/home/deepwork/anaconda3/envs/datascnt/bin/streamlit", line 8, in sys.exit(main()) File "/home/deepwork/anaconda3/envs.. 2023. 7. 28. [Flask] 파이썬 코드를 웹페이지에 띄워보자! 사용자 ID 체크 웹페이지 만들기 본 포스팅에서는 Flask를 활용하여 간단한 웹페이지를 만들어 볼 것이다 최소한의 html을 사용하고, python의 for문 if문을 활용한 웹페이지를 구현해 보며 동작 원리를 이해해 본다. 파이썬 공부를 어느정도 하다보면 본격적으로 응용을 하고 싶어지게 된다. 처음에는 스스로 짠 코드를 실행하는 기쁨과 만족감을 느끼는걸로도 족하지만, 내가 짠 기발한 코드를 친구들이나 다른 많은 사람들에게 공유하고 싶은 순간이 오는 것 같다. 그러기 위해서는 웹페이지를 만드는게 가장 빠른 길일 것이다. 파이썬으로 웹페이지를 만드는 방법은 다양하지만 대표적인 방법은 Django나 Flask라는 파이썬 웹 프레임워크를 활용하는 것이다. 코드 몇 줄 만으로 웹페이지를 띄울 수 있으며, 조금만 응용하면 내가 짠 Python .. 2022. 8. 10. 모바일 앱 기획이 처음이라면 꼭 봐야되는 글_사용자 기반의 UI/UX 모바일일 앱을 처음 기획 한다면, 왠지모를 막막함이 느껴질겁니다. 분명 나는 일상적으로 수 많은 앱들을 사용하고 있고 나름 최신앱들을 잘 안다고 생각하지만, 막상 만든다고 했을때는 어디서부터 손을대야할지 모르는 경우가 대부분일 것입니다. 이 상태에서 바로 외주를 맡겨 버리거나, 친구들과 개발 공부를 시작해 버린다면, 많은 시간과 비용을 낭비하게 될 거라고 감히 예상해봅니다. 그러지 마시고 사용자 기반 UI/UX 교육을 듣기를 추천합니다. 교육을 듣지 않더라도 사용자 기반으로 앱을 기획하는 업무 방식을 공부한다면 짧은 시간에 적은 비용으로 사용자에게 사랑받는 더 좋은 앱을 개발할 수 있을 것입니다. 제가 처음 이 업무를 시작하면서 들었던 교육 후기를 3년만에 발견하여 여러분께 공유드립니다. 참고가 되었으면.. 2021. 5. 14. Firebase Hosting 해도 이상한 화면만 나올 때 Firebase Hosting을 위해 나름 한다고 다 했는데, Hosting할 준비가 되었습니다!! 의 화면만 나온다 뭘 빼먹은 거지? firebase login firebase init public 이라 치라는 곳에 build라고 치고 single web app yes 까지 해주면 firebase와 연동이 된 것이다. 링크를 클릭하면 여기까지하면 아래와 같은 화면이 나온다. 이제 내가 react로 만든 웹앱을 Hosting 폴더인 build 폴더로 최종 빌드 해주어야 내가 만든 앱을 웹을 통해 어디에서든 누구든 볼 수 있게 되는 것이다. 아래의 명령어를 쳐주자. npm run build 이 명령어를 통해 build가 되었다. 이제 마지막 firebase deploy 를 통해 내가 빌드한 파일을 파이어베.. 2021. 3. 30. 따라하며 만드는 웹사이트 E03-2 : 댓글 등록 시스템 이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다. 웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다. 간략한 요약만 보고 싶다면 아래 블로그를 계속 이어 보고, 자세한 내용은 동영상을 보자. 이제 따라가기 힘들다. javascript 선행 학습이 있지 않은한 완벽한 이해는 어려울 듯 하다. 하지만 url에 올리는 과정까지 끝내는게 목적이므로 빨리 진행 해봐야겠다 진행시켜! 지금까지의 소스코드는 아래와 같다. App.js 화면을 구성하는 메인 앱이다. import React from "react"; import { Image, Input, Header, Container, Divider, Icon, Button, Grid, .. 2021. 3. 26. 따라하며 만드는 웹사이트 E03-1 : margin, 구분선, 좋아요 버튼 이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다. 웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다. 간략한 요약만 보고 싶다면 아래 블로그를 계속 이어 보고, 자세한 내용은 동영상을 보자. www.youtube.com/watch?v=QaeVQKSTbE0&list=PLEzWjQvavJSoI1gF7cP-uxFyJQD2l47O3&index=5 지금까지 진도를 살펴보면 2021.03.25 - [분류 전체보기] - 따라하며 만드는 웹사이트 E01 : 환경설정 2021.03.25 - [언어/파이썬 초보의 웹사이트 도전 일지] - 따라하며 만드는 웹사이트 E02-1 : HTML, CSS, JS, React 구조 2021.03.25 -.. 2021. 3. 26. 따라하며 만드는 웹사이트 E02-3 : 이미지, 댓글창 껍데기 이제 네번째 시간인가. 이 시간에는 이미지 + 댓글란 껍데기를 만들었음. 자세한 강의는 아래 영상을 참고. www.youtube.com/watch?v=lNZrHnO0L5I&list=PLEzWjQvavJSoI1gF7cP-uxFyJQD2l47O3&index=4 따라가기 버겁다ㅋㅋㅋ 오늘의 결과물은 다음과 같다. 그래도 뿌듯하다. 소스코드 App.js import React from 'react'; import {Image, Input, Header, Container} from 'semantic-ui-react' import { } from 'semantic-ui-react' import Comments from './comments.js' import Jenny from "./jenny.jpg" funct.. 2021. 3. 25. 따라하며 만드는 웹사이트 E02-2 : Class 컴포넌트, 이벤트 이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다. 웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다. 간략한 요약만 보고 싶다면 아래 블로그를 계속 이어 보고, 자세한 내용은 동영상을 보자. www.youtube.com/watch?v=Sh3qdouSz8w&t=618s 주요 내용 리액트 이벤트 처리하기 button에 이벤트 얹이기 클래스 정의하기 //App.js import React from 'react'; import {Icon, Button, Progress, Segment, Input} from 'semantic-ui-react' class Login extends React.Component{ constructor(.. 2021. 3. 25. 따라하며 만드는 웹사이트 E02-1 : HTML, CSS, JS, React 구조 이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다. 웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다. www.youtube.com/watch?v=K3mC87CZeQU 플레이그라운드는 마련되었으니, 다채롭게 창의력을 발휘하여 캔버스와 물감을 제공한다는 느낌. E01에서 환경설정을 했고, 깃허브에 공유했고, semantic UI를 이용해 간단하게 UI를 구성해 보았음. 그렇게 했을때 기본적으로 설치되는 파일들이 아래와 같음. 퍼블릭과 소스(src) 폴더 퍼블릭 : index.html 웹에서 가장 첫페이지인 index.html 소스 : App.js 1편에서 우리가 수정해주었던 파일 index.html을 보면 바디에 가 있음. i.. 2021. 3. 25. 따라하며 만드는 웹사이트 E01 : 환경설정 이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다. 웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다. www.youtube.com/watch?v=e-ADP2rZhks 개발 환경 : Macbook Pro 강의 시작 환경설정 1. Github desktop 설치 2. Atom 설치 3. git 설치 4. Node.js 설치 : LTS버전으로 위의 네개를 구글링해서 공홈들어가서 설치 하고 (셋팅 변경없이 동의동의동의 기본으로 설치한다.) 리액트 설치와 실행 터미널을 실행한다. 맥북의 터미널에서는 ls : 파일보기 명령, cd 폴더 이동 명령 react app을 설치한다. npm install -g create-react-app .. 2021. 3. 25. 파이썬으로 복잡한 웹페이지도 간단하게 만들 수 있다고 하던데..(feat. django) django 를 아시나요? 파이썬 왕초보가 django를 이용해 웹페이지를 만들어 가는 과정을 포스팅 해 보려합니다. 실습 보다는 제가 배우는 것들, 느끼는 것들 위주로 작성될 예정입니다. django는 python기반 오픈소스 파이썬 웹 프레임워크 입니다. 드장고 아니고 쟝고 라고 읽으면 되겠습니다. 장고 보다 지양고, 쟝고로 읽어야 좀 더 느낌이 나요. 파이썬 웹프레임워크라 함은 웹페이지를 만들 수 있는 도구들을 모아놓고 파이썬 언어를 기반으로 작동되는 체계(?) 입니다. 제공하여 조립식으로 웹페이지를 만들어 버릴 수 있게 되는 거죠. 처음 웹페이지 제작을 하게 되면 회원가입 시 사용자 인증은 어떻게 할지, 비밀번호는 어떻게 비밀스럽게 처리할지, 아주 하나부터 열까지 막히게 되죠. django를 사용.. 2021. 2. 3. 이전 1 다음 반응형
