목록프로그래밍 (92)
말랑말랑제리스타일
일반적으로 html, css, 자바스크립트를 이용해서 코딩하는 경우 html 파일은 나누기가 힘든 경우가 많습니다. 그러나 공통된 헤더를 사용하거나 부트스트랩 내비게이션 바를 유지한 채 페이지 내부의 일부 영역만 바꾸는 경우 html 파일을 나누는 것이 코드 관리에 훨씬 유리한 경우가 많습니다. 이런 경우 사용 가능한 두 가지 방법을 정리해 봅시다. 부트스트랩 내비게이션 바로 body의 변경 영역만 이동하는 방법 일반적으로 블로그 같은 내용만 바꾸는 사이트의 경우 사용해 볼 수 있는 방법입니다. 사이트를 이동하는 것처럼 body 영역의 html만 바꾸는 방식으로 부트스트랩 내비게이션 바 영역을 그대로 두고 내부 페이지의 html 요소만 바꾸는 방법이죠. 먼저 부트스트랩의 내비게이션 바만 만들어 둔 ind..
깃허브 코파일럿이라는 AI 코딩 기능을 사용해 봤습니다. 첫 한 달은 무료로 사용 가능하고 한 달이 지나면 한 달에 10달러의 비용이 자동으로 발생하는데요. 일단 자바스크립트 프로젝트에서 무료로 한 달 사용을 해보고 Chat GPT와 어떤 차이가 있는지 확인해 봤습니다. 깃허브 코파일럿의 용도와 Chat GPT와 차이 우선 Chat GPT와는 기본적으로 AI라는 점과 AI를 이용해 코딩이 가능하다는 공통점이 있지만 깃허브 코파일럿은 AI를 이용한 코딩에 그 기능이 치중되어 있다는 차이가 있죠. Chat GPT를 이용해 코드를 만들 때는 어떤 프롬포트를 전달하면 하나의 코드를 만들어주는 반면 깃허브 코파일럿은 다음에 어떤 코드를 쓸지 AI가 예측해서 제안해 준다는 차이가 있습니다. 우선 html 파일에 d..
자바스크립트에서 손쉽게 Open CV를 사용할 수 있는데요. 아무래도 Open CV가 기능이 많다 보니 로딩하는 데에 속도가 오래 걸리긴 하지만 이미지 프로세싱을 손쉽게 하는 데는 Open CV만한 라이브러리가 없죠. HTML로 Open CV 사용한 페이지 작성 처음으로 할 일은 HTML 파일을 만들고 Open CV를 불러오는겁니다. 참고로 오늘은 설치가 필요없는 프로젝트로 메모장 코딩으로 해볼겁니다. 사실상 크게 VS Code 기능이 필요가 없긴 한데 당연히 깔려있다면 VS Code로 작성하시는게 편하겠죠. 먼저 새로 폴더를 만들고 폴더 안에 새로만들기- 텍스트 파일을 눌러서 index.html로 파일 명을 지정해줍니다. 그리고 상단 캡처한 것처럼 메모장으로 index.html 파일을 열어주세요. 당연..
웹사이트 만들기 뭐부터 해야 될지 모르겠고 배포는 어떻게 할 지도 잘 모르겠고 설치를 하자니 번거롭죠. 아무것도 설치하지 않고 배포까지 30분 내외로 한번 끝내볼 수 있도록 해드리겠습니다. 이 프로젝트에서는 설치 없이 프로젝트를 생성하는 구름 IDE와 웹사이트 꾸미기를 위한 부트스트랩, 소스 코드 배포를 위한 깃허브와 무료로 호스팅 배포 서비스를 위한 Netlify를 이용할 겁니다. 뭐가 많아 보이지만 코딩을 잘 몰라도 웹 코딩을 안 해봤더라도 크게 어려울 건 없습니다. 구름 IDE에서 웹사이트 프로젝트 생성하기 구름 IDE 홈페이지로 들어가 줍시다. 구름 IDE를 쓰는 이유는 별도 설치가 전혀 필요 없고 Github 배포까지 상당히 간단하게 되기 때문이죠. https://ide.goorm.io/ goo..
플러터 앱이나 웹 개발할 때 파이어베이스를 백엔드로 사용하는 경우가 많은데 막상 세팅하려면 잘 안 되는 경우가 또 많죠. 플러터 신규 프로젝트에 파이어베이스 신규 프로젝트 연동하는 방법 알려드립니다. 파이어베이스 프로젝트 세팅 먼저 파이어베이스 콘솔 화면에서 새로운 프로젝트를 하나 생성해 줬습니다. 이름은 대충 아무렇게나 입력했는데 필요에 따라서 알아보기 좋게 입력하셔도 됩니다. 들어가면 좌측에 빌드라는 메뉴가 보이죠? 기본적으로 Athentication 하나만 일단 선택해봅시다. Athentication으로 들어가면 시작하기라는 버튼이 보일 텐데요. 눌러줍니다. 자 시작하기를 누르면 이제 로그인 방법을 선택할 수 있습니다. 이것도 지금 당장 사용할 건 아니고 나중에 추가가 가능하니 일단 구글만 하나 선..
파이썬에서 크롤링에 대표적으로 사용되는 패키지인 Beautiful Soup과 셀레니움의 용도별 차이를 확인하고 Beuriful Soup만으로 크롤링이 가능한 페이지와 셀레니움이 필요한 페이지 예시를 봅시다. 파이썬 Beutiful Soup의 한계와 셀레니움의 필요성 파이썬에서 가장 사용하기 쉬운 크롤링 패키지가 바로 beautiful Soup일 텐데요. 파이썬 beautiful Soup에는 명확한 한계가 존재합니다. 사실 예전에도 Beutiful Soup의 한계에 대해 설명한 적이 있는데요. 간단히 설명하면 웹페이지의 자바스크립트로 생성된 파트는 크롤링이 불가능하다는 거죠. 쉽게 말하면 스크롤을 내려야 나오는 부분이나, 화면이 움직이는 부분, 계속해서 내용이 바뀌는 댓글 창 등은 Beutiful Soup..
구름 IDE에서 리액트 프로젝트를 생성하고 실행해 보는 과정을 최대한 간단하게 다루어보겠습니다. 물론 blank나 Html/css/js 프로젝트를 생성해서 직접 npm으로 설지 하고 진행해도 되지만 경험적 요소가 필요한 게 아니라면 최대한 간단한 게 좋겠죠. 구름 IDE에서 React 프로젝트 컨테이너 생성 구름 IDE에서 새 컨테이너를 클릭해서 새로운 React 프로젝트를 진행하기 위한 컨테이너를 생성해줍니다. 이름과 설명을 입력하고 나머지는 그대로 두겠습니다. 이후에 Netlify 배포를 위해서 GitHub 연동을 해줘도 되겠지만 우선은 그냥 두고 진행합니다. 이 많고 많은 구름 IDE의 소프트웨어 스택 중 React를 선택해 주면 하단에 React 프로젝트라는 템플릿이 지정되고 OS가 선택되면서 N..
구름 IDE에서 장고 프로젝트를 만들고 프로그래밍계의 만국 공통어 Hello World를 찍어봤는데요. 이게 생각보다 까다로워서 Flask 프로젝트를 만들고 Hello World를 찍어봤습니다. 구름 IDE에서 Flask 프로젝트 만들기 일단 파이썬 프로젝트 만들고 Flask를 설치해서 진행하는 방법도 있겠지만 최대한 모든 순서를 간단하게 진행하도록 하겠습니다. 먼저 구름 IDE에서 새 컨테이너 만들기를 클릭해 주고 이름과 설명을 입력해 줍니다. 저는 HelloFlask라고 이름 짓겠습니다. 다음으로 다른건 건들지 말고 소프트웨어 스택에서 Flask를 선택해 줍니다. 뭐 My SQL이나 몽고 DB를 이용해도 되겠지만 굳이 Flask에서 Hello World를 찍어보는 과정에서는 필요 없을 것 같으니 다른..