스파르타_부트캠프/웹개발(6)
-
ChatGPT 웹개발 진행노트 - 6일차
강의 자료 3주차 강의 자료 3주차 13. Flask로 로또 추천 사이트 만들기 2 로또 당첨 기능 구현하기 두개의 리스트 중 일치하는 숫자의 개수를 반환하는 함수를 구현한다. def count_common_elements(list1, list2): common = set(list1) & set(list2) return len(common) test_app.py의 단위 테스트에서 검증한다. class Test(unittest.TestCase): def test_count_common_elements(self): self.assertEqual(0, count_common_elements([1, 2, 3], [4, 5, 6])) self.assertEqual(1, count_common_elements([1..
2024.02.02 -
ChatGPT 웹개발 진행노트 - 5일차
강의 자료 3주차 강의 자료 3주차 06.Python 가상 환경 생성하기 가상 환경은 무엇인지? 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램 동작에 영향을 주지 않기 위해, 각 프로젝트 별 파이썬 배포 패키지, 업그레이드를 가능하게 하는 격리된 실행환경 예를 프로젝트 A에서는 python3.1, A 모듈은 버전 2.0을, 프로젝트 B에서는 python 3.7, A모둘은 버전 3.0을 쓴다고 했을 때 각 프로젝트에 맞게 파이썬 버전 및 모듈을 설정할 수 있게 해준다. 가상 환경 만들기(PyCharm) 강의에서는 vs code를 사용한 강의를 진행하고 있지만 현재 코딩 테스트 및 개인 프로젝트에서 PyCharm을 사용하고 있기에 PyCharm으로 가상환경을 설정한다. New Project에서 경로를..
2024.01.25 -
ChatGPT 웹개발 진행노트 - 4일차
강의 자료 2주차 강의 자료 2주차 09. Fetch로 요청 보내기 fetch.html 생성 및 script 페이지에 다음 코드 추가 해당 url은 미세먼지 OpenAPI 주소이며, 개발자도구에서 로그를 확인해본 결과 다음과 같이 log가 출력된다. 10. Fetch 데이터 처리하기 위의 출력 결과를 확인하여 json의 Key를 확인 후 다음과 같이 코드를 작성하여 원하는 데이터를 출력해본다. 모든 row MSRTRE_NM, IDEX_MVL 키 값만 출력하려면 다음과 같이 forEach 루프를 사용한다. 다음과 같이 해당 key값에 해당하는 로그가 출력된다. 11. Fetch 연습하기(1) 기본 골격 코드를 가져온 후 실행하면 다음과 같다. 내용을 진행하기 위해 q1 함수에 다음과 같이 코드를 추가한..
2024.01.23 -
ChatGPT 웹개발 진행노트 - 3일차
강의 자료 1주차 강의 자료 2주차 강의 자료 1주차 멜로디쉐어 만들기 2 배경화면 적용 배경 화면 적용을 위해 다음 코드를 직접 작성하며 jquery 및 javascript에 대한 기본적인 연습을 진행하였다. 자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 리스트 3. 딕셔너리 4. 리스트 딕셔너리 jquery는 에서 해당 값에 접근하기 위해 id값을 참조하여 $('#q1')을 사용한다. 이 후 리스트, 딕셔너리 등의 자료형을 사용하여 해당 태그의 텍스트를 변경해보았다. JavaScript & jQuery 연습하기 (2) 다음 코드를 통해 jquery 기능 몇가지에 대해서 더 학습해본다. 자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 붙이기 사과 귤 감 3. 붙이기 영수는 ..
2024.01.22 -
ChatGPT 웹개발 진행노트 - 2일차
14. 멜로디쉐어 만들기 Nav 만들기 music.html을 추가하였고 기본 코드를 붙여넣었다. Hello, world! 다음과 같이 기본 Hello, world가 출력되었다. 다음 부트스트랩 페이지로 이동 후 Color schemes, content를 추가하였다. https://getbootstrap.com/docs/5.3/components/navbar/ navbar의 내용을 추가 및 안의 텍스트를 Music, Album, Movie로 바꾸었으로 d-flex justify-content-center 옵션을 추가하여 가운데 정렬하였다. Home Music Album Movie 전체 배경을 검은색으로 만들기 위한 data-bs-theme="dark" 옵션을 주었으먀, 각 링크에 글자색 text-white..
2024.01.20 -
ChatGPT 웹개발 진행노트 - 1일차
VS Code에서 다음과 같은 필수 확장 프로그램을 설치하였다. [HTML] * open in browser * Auto Close Tag * Auto Rename Tag * HTML End Tag Labels * indent-rainbow * Bracket Pair Color DLW [Python / SQLite / Flask] * autopep8 * SQLite * Flask-snippets 실습내용 저장을 위한 github repository를 생성하였다. https://github.com/lsi3131/sparta_chatgpt_webdev 06. 간단한 로그인 페이지 만들어보기 login.html 생성 및 강의 자료의 코드를 붙여넣었다. 로그인 페이지 ID: PW: 로그인하기 07. css 기초..
2024.01.19