if(life){code();}

웹 클라이언트(UI) 구성FastAPI 서버 구현OpenAI API를 통한 챗봇 응답 처리대화 상태 관리 전체 구성요소 요약.├── README.md└── fastgpt ├── __pycache__ │ └── app.cpython-310.pyc ├── app.py ├── static │ └── style.css └── templates └── index.html index.html 사용자 인터페이스 (입력창 + 대화 내역 표시)style.css 인터페이스의 스타일 정리app.py FastAPI 서버, OpenAI API 연동, 대화 흐름 관리temlplages/ HTML 템플릿 디렉토리static/ 정적 파일 디렉토리 (CSS 포함)   HTML 템플릿..

JSX JavaScript XML의 약자로, JavaScript의 확장 문법 HTML과 비슷하게 보이지만, 실제로는 JavaScript 코드React에서 JSX를 사용하면 UI를 보다 직관적으로 구성 가능  직관적이고 가독성이 좋음JSX는 HTML과 유사해서 웹 개발자들이 직관적으로 이해하기 좋음기존 JavaScript의 React.createElement() 방식보다 코드가 깔끔하고 가독성이 좋음UI와 로직의 통함UI와 관련된 로직을 한 곳에서 작성 가능예:버튼을 생성, 생성한 버튼을 클릭했을 때의 동작을 같은 파일에서 정의  JSX의 사용법 JSX 안에서 JavaScript 사용 JSX 내부에서 JavaScript 표현식을 사용하려면 {} 중괄호 사용const name = "리액트";const ele..

제목 태그 (~) HTML에서 제목을 표시할 때 사용하는 태그제목의 크기와 중요도를 나타내며, 이 가장 크고 이 가장 작음→ 문서의 계층 구조 정의제목 1제목 2제목 3제목 4제목 5제목 6웹 문서의 구조를 잡을 때 중요   SEO(Search Engine Optimization, 검색 엔진 최적화)은 페이지의 가장 중요한 제목으로 검색엔진이 내용을 분석할 때 참고함한 페이지에 은 하나만 쓰는 게 일반적 : 문서의 주요 주제(, ) : 문서의 하위 주제 웹 접근성(A11Y:Accessibility)스크린 리더(시각 장애인을 위한 프로그램)가 제목 태그를 읽어서 문서 구조를 설명 ~ 을 논리적인 순서로 배치하면 사용자 경험(UX)이 향상됨→ 단순 글자 크기를 키우고 싶은 경우, CSS를 사용하는 것이 좋음..

웹페이지를 구성하는 기본 요소HTMLCSSJavaScipt  HTML(HyperText Markup Language) 웹페이지의 구조를 정의하는 기본적인 요소태그(tag)를 사용하여 텍스트, 이미지, 링크 등의 콘텐츠를 표현함  HTML 태그 기본 구조 HTML 태그 여는 태그와 닫는 태그로 구성여는 태그와 닫는 태그 사이에 콘텐츠를 배치div 태그h1 태그p 태그 태그 안에 태그를 추가할 수 있음*태그(tag) == 엘리먼트(element) == 요소 HTML 태그 W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popul..

Bootstrap반응형 웹 디자인을 쉽게 적용할 수 있도록 돕는 CSS 프레임워크→ 기본적인 스타일이 미리 정의되어 있어 빠르게 웹사이트의 디자인 개선 가능 getbootstrap BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com CSS 적용base.html의 태그 안에 아래의 Bootstrap CSS 링크 추가  JS 적용base.html의 태그 마지막 줄에 ..

views.py작성 ulrs.py작성 앱 내부에 templates 폴더 생성(+HTML 템플릿 작성)VScode에서 ! + Tab 기본적인 HTML파일 구조가 생성되는 자동완성 지원  settings.py 확인(TEMPLATES 설정에서 DIRS 및 APP_DIRS 경로 확인      Django 요청과 응답 흐름 HttpRequest → URLs → View → Template → View → HttpResponse    Django에서 클라이언트 요청을 처리하고 응답을 반환하는 흐름1. 요청(Request)• 클라이언트(브라우저)에서 특정 URL로 요청을 보냄• 예: http://127.0.0.1:8000/index/  2. URL 처리 (urls.py)• Django는 요청받은 URL을 기반으로 u..

OpenAI API와 streamlit을 활용하여 서비스 구현을 해보자는 취지로 시작하게 된 Streamlit 입니다. 아스키아트가 하고싶어서가 아닙니다.웹꾸같은게 아닙니다. 하지만 예쁘죠? (공백처리 하는거 헤매다가 몇시간 갈아넣었는지 모르겠어요.. 그냥 예쁘다고 하세요.) 이후로 진빠져서 체험형.. 코드짜기..  HTML, CSS, JavaScript 모르면 커스텀을 거의 못한다 본다(내 생각)react, react native CLI들로 앱/웹 할 때도 기본적으론 버튼, alert 절대XXXXXX 전부 모달, 터쳐블오퍼시티로 style전부 내 마음에 들게.. event도 내가 원하는대로.. .. animation도 다 내가 원하는대로 쳐줘야 재밌었다 했기 때문에.. 딴거 할 수 있는게 있으면 다 내..

MVT(Model-View-Template) Django의 핵심 구조Django에서 사용하는 아키텍처 패턴, 웹 애플리케이션의 기본 구조를 정의  *구성 요소 모델(Model)데이터베이스 구조와 데이터 처리 로직을 정의데이터베이스 테이블을 표현, 각 테이블의 컬럼은 모델의 필드를 나타냄 데이터를 저장, 조회, 수정, 삭제하는 작업 수행 Djangosms ORM(Object-Relational Mapping)을 제공, SQL을 직접 작성하지 않고도 Python코드로 데이터베이스 작업을 수행할 수 있게 함 뷰(View)비즈니스 로직과 데이터 처리를 담당사용자 요청에 따라 어떤 데이터를 보여줄지 결정Django의 뷰는 URL과 연결되어 사용자의 요청을 처리, 필요한 데이터를 모델에서 가져와 템플릿에 전달 뷰는..