Half Road

Pycharm을 사용하여 Python 기반 Web APP을 만들다가 주로 쓰던 IDE인 Visual Studio Code에서 사용해보고 싶어서 이 기회에 정리합니다. Extension 설치 Python, Python Extension Pack을 설치합니다. 가상환경 구성 1. python project 폴더 접근 2.venv 모듈을 통한 가상환경 생성 및 실행 py -m venv ./venv # 가상환경 directory 생성 가상환경을 생성하면 패키지를 프로젝트별로 관리할 수 있게됩니다. 가상환경 생성후에 interpreter 설정을 합니다. 커맨드 팔레드(Ctrl + Shift + P) > Python: Select Interpreter 선택 > project 선택 > 가상환경 선택 > termina..

python 설치 후 환경변수로 등록되어있지 않아 version 확인을 못해 구글링 해본 결과 py도 쓸수있더라구요. py는 환경변수 없이 쓸수있던데 이 기회에 알아보겠습니다. py py는 python luncher로 python 최신 버젼을 실행해주는 도구입니다. python 설치시 같이 설치되죠. 예를들어 python3.7, python3.8 존재시 py를 실행하면 최신 버젼인 python3.8이 실행됩니다. 그런데 왜 환경변수없이 실행할 수 있을까요? 바로 해당 도구는 C:\Windows에 설치되기 때문입니다. 해당 경로에 위치한 파일은 환경변수없이도 사용가능합니다. 결론 py는 python 명령어를 실행해주는 도구!! 그외에는 python 명령어와 똑같이 작동합니다.

Sparta 4주차 과제로 팬명록 완성하기를 하였다. Flask package를 통해 WAS 생성을 하였다. python을 Backend로 Web App을 만들어보는건 처음이라 재밌었다. Web APP 구성 관련 패키지 1. Flask WAS 서버 기동 2. pymongo mongo DB 조작 *강의에서는 dnspython 설치도 하라고 했지만 안해도 되었다. 주요 insight Web APP 구현시 주요기능 1. request 처리 1) 사용자 요청 URL에 따라 정해진 동작을 수행할 수 있어야한다. 2) 요청 httml method에 따라 달리 처리 할 수 있어야한다. 2.response 처리 1) 여러 반환 타입을 지원해야한다. -> json, xml, html등을 반환할 수 있어야한다. 3.WAS..

저는 개발도구 pycharm을 사용합니다. 참고해주세요. 간략하게 웹크롤링에 필요한 부문만 설명드리겠습니다. 웹크롤링을 위한 필요 기능 1. 특정 사이트의 html을 가져온다 -> requests package 2. html에 특정 부분을 선택하여 가져온다. -> bs4 package (beautifulsoup) 패키지 설치 pycharm에서 +버튼을 클릭하여 패키지 설치를 할 수 있습니다. bs4, requests 패키지를 설치해주세요. 특정 요소 데이터 가져오기 네이버 영화에서 영화 포스터 이미지를 가져오도록하겠습니다. 요소복사 방법 요소복사 방법 : 크롬 개발자도구(F12) > 원하는 요소 클릭 > 요소복사 (위 영상 참고) 요소복사 하시면 해당 요소의 selector가 복사됩니다. 패키지를 활용한..

바로가기 를 통한 지정 위치 이동 CSS 스크롤 구현 JQuery 스크롤 구현 a태그 스크롤 예제 CSS 이용하는 방법과 Jquery를 통해 구현하는 2가지 방법을 소개하겠습니다. 그전에 태그에서 지정 위치로 이동하는 법 부터 알아보겠습니다. 를 통한 지정 위치 이동 TITLE ... TITLE 위 코드로 구현시 스크롤 움직임 효과 없이 바로 그 위치로 이동하게 됩니다. 이제 스크롤 이동 구현 방법을 소개하겠습니다. CSS 스크롤 구현 html { scroll-behavior: smooth;/* 부드로운 스크롤 이동 효과 */ } html 요소에 해당 속성만 추가하면 끝입니다. 간단하죠? 그러나 IE 지원이 안되고 지정 위치까지 이동시간을 지정할 수는 없습니다. 해당 요소를 고려하지 않으면 CSS로 하는..

Publishing 연습시 긴 텍스트가 필요할 때가 있죠. 그럴때 손쉽게 만드는 방법이 lorem을 이용하는 것입니다. VS Code에 내장된 Emmet 기능에 포함되어 있습니다. lorem lorem을 치면 Emmet 자동완성이 제안됩니다. lorem*로 몇 줄을 생성 할건지 지정할 수 있습니다. Emmet 기능 알아보기 2022.08.10 - [웹퍼블리싱] - Emmet을 이용한 CSS, HTML 태그 손쉽게 작성하기 Emmet을 이용한 CSS, HTML 태그 손쉽게 작성하기 Publising 연습시 HTML, css 작성할 일이 많은데요, 이때 Emmet 기능을 통해 빠르게 자동완성 할 수 있습니다. Visual Studio Code에서는 Emmet이 내장되어 있습니다. 긴 설명없이 간략하게 필요한..

Publising 연습시 HTML, css 작성할 일이 많은데요, 이때 Emmet 기능을 통해 빠르게 자동완성 할 수 있습니다. Visual Studio Code에서는 Emmet이 내장되어 있습니다. 긴 설명없이 간략하게 필요한 부분만 보여드리겠습니다. CSS 약어를 통한 자동완성 기본적으로 정의되는 속성값이 들어가며 여러 값이 존재하는 경우 탭으로 이동해서 편집하시면 됩니다. '-'이 포함된 속성 보통은 '-'으로 구분된 단어의 첫 글자를 조합해서 약어를 사용합니다. font-size는 fz를 사용하는 군요. 또한 크기 속성은 숫자를 적으면 px이 붙여서 완성됩니다. HTML 태그 HTML 시작 클래스 자동완성 자식 요소 추가 이상으로 설명은 마치겠습니다. 어떤가요? 편할것 같나요? Emmet을 활용하..

input:focus, input:hover {/* pseudo-class */ ... } span::before, span::after {/* pseudo-element */ ... } pseudo-class(':') pseudo-element('::') 이름 그대로에 의미로 가상 클래스, 가상 요소를 뜻 합니다. 과거에는 두 가지 pseudo(슈도) 선택자를 구별해서 사용하지 않았지만 특정 시점부터 구별해서 사용하고 있습니다. (ie도 지원되니깐 꽤 오래되었죠.) 물론 Single Colon(':')으로 일부 pseudo-element를 사용가능 하지만 의미있는(semantic) css 작성을 위해 구별해서 사용하는것이 중요하겠습니다. ps. pseudo-element 모두가 ':' 과 호환되는것은 ..