바보도 코딩합니다 바보도 코딩합니다

만들 것은 버스 번호를 검색하면 나오는 프로그램이다. 회원가입/로그인 기능을 만들어서 로그인한 뒤 버스노선을 검색하면 관심버스 등록을 할 수 있도록 만들었다. id를 누르면 정거장 정보가 뜬다. 프로젝트 패키지 파이참 무한 오류로 인해....... 너어어어어무 오래 걸렸다..... 이번 코드는..정리를 좀 하고 올려야할 것 같다. 일단은 잘 돌아가는 것을 확인한 것으로 만족하고싶다 흐어 드라이브 파티션을 조정해야되겠다. 경로가 너무 복잡해져서 작업하기 매우 곤란하다.. 역시 나중에 귀찮아 질 일은 처음부터 제대로 하고 가야한다. 괜찮겠지 하고 안일했던 과거의 나 반성해

저번 포스팅에 이어서 오늘은 게시판 만들기입니다. 웹이 아니라 콘솔에서 작동하는 프로그램이고 언어는 파이썬을 이용해 코딩합니다. MySQL DB와 연결, IDE는 파이참을 사용했습니다. 아래의 포스팅이 참고에 도움이 될 것 같습니다. 파이썬 DB연결 회원관리 프로그램 (웹X, 콘솔구현) 에 들어 갈 기능은 아래와 같습니다. 글쓰기 (로그인상태에서만 가능. 작성자=로그인id) 글 검색1 - (글 번호로) 글 검색2 - (작성자로) 글 검색3 - (타이틀로) 글 수정 기능 글 삭제 기능 전체목록보기 기능 디렉토리는 좌측과 같이 만들었습니다. 참고 : __init__.py 파일을 만들어주면 자동으로 디렉토리->파이썬 패키지가 됩니다. ㅎㅎ DB 스케마 create table board( num int prim..

MySQL, 파이썬(IDE 파이참)을 이용, DB연동 후 회원관리 프로그램 콘솔에서 구현하기. 자바로 했을 때랑 구현 방식은 거의 같다고 느껴지지만... 파이썬이 문법은 더 쉽다고 생각은 하지만... 그래도 여전히 머리에서 정리가 잘 안되는 프로그램 구현하기 코드 쓰면서 배우고 오류나면 해결하면서 배우고 복붙하면서 배우고 구글링하면서 배우고~! 구현할 기능들 : 회원가입 로그인 내정보확인 / 수정 로그아웃 탈퇴 일단 MySQL 워크벤치에서 스케마 DB만들어주고... create table member( id varchar(20) primary key, pwd varchar(20), name varchar(20), email varchar(50) ); 파이참으로 파이썬 코드를 작성한다. 디렉토리 구성은 이..

회원가입 폼을 만드는 이유! 이 실습을 통해서 HTML, CSS, 자바스크립트의 주요 개념과 관계를 이해할 수가 있어요. 이번 실습의 흐름은 1) HTML 기분 문서 구조 작성 2) CSS를 통해 디자인 하기 3) 자바스크립트를 통해서 DOM에 접근하고 디자인 변경하기 입니다! 그럼 시작! 1. IDE에서 다이나믹웹 프로젝트생성, 프로젝트에 폴더를 생성. (서버 연동되어있는 가정입니다! 톰캣 등을 설치해서 연동 후 해주세요) (저는 이클립스를 사용해서 보여드릴게요. 편한거 쓰세요) 2. 폴더에 html 파일을 생성한다. 저는 이렇게 webtest라는 프로젝트를 생성했고요, src-main-webapp 위치에 폴더를 하나 생성해 준 뒤 html파일을 생성하면 됩니다. 가입이니까 간단하게 joinform.h..

웹 그림판 만들기 1편 보러가기 웹 그림판 만들기 2편 보러가기 웹 그림판 만들기 3편 보러가기 완성 코드는 가장 아래에 공개되어 있습니다. 드디어 HTML, JS, CSS로 만드는 웹 그림판 마지막 완성편입니다! 오예~ 시리즈는 일단 뭐라도 만들어보고 싶은 초보 코더분들을 위해서 만들어 본 시리즈였구요... (저 포함) 개발공부는 책, 인강으로 하는 것보다도 쉬운거부터 하나씩 만들어가면서 배우는 게 큰 것 같습니다. 이런 과정을 지나면 나만의 것을 만들어 포폴을 채울 수 있을 것 같아요. 마지막 편은 SAVE(저장하기) 기능구현하고, 지금까지의 과정 정리하고 끝내겠습니다~ SAVE 저장하기 기능 이미 canvas기능에서 pixel로 다루고 있기 때문에, 우리는 캔버스를 우클릭 하면 저장할 수 있다는 사..

웹 그림판 만들기 1편 보러가기 웹 그림판 만들기 2편 보러가기 드디어 3편입니다. 끝이 보입니다. 4편이 마지막입니다^^ 3편까지 대부분의 기능이 만들어집니다. 4편에서는 마지막으로 저장기능을 구현하고 웹그림판 만드는 과정을 정리하는 시간입니다. 2편까지 완료하면 절반이지만, 그래도 벌써 시각적으로는 훌륭한 그림판이 만들어졌습니다. 오늘은 기능을 하나하나 추가해볼게요. 1️⃣ 색 바꾸기 (컬러 변환) 기능 index.html>body구간에서 여기 컬러부분있죠? 저렇게 다중 선택을 해서 위와 같이 컬러 클래스코드를 작성해줍니다. (VScode에서 단축키 : Ctrl+Alt+🔼방향키 / Alt+마우스 다중 클릭) 다음, app.js로 이동해서 const 추가해줍니다. const colors = docume..

1편 보러가기! CLICK 🖱! 1편에 이어서 자바스크립트,HTML,CSS로 웹 그림판 만들기 2탄을 가겠습니다. 자, 안전벨트 단단히 매시고 출바알🎈~ 1️⃣ 채우기/그리기, 저장버튼 만들기 좌측과 같이 컬러 팔레트 위에 채우기, 저장하기 버튼 만들거에요 (채우기/그리기는 1개 버튼이 스위치되도록 구현 예정) index.html에서 여기 아래에 만들어주면 되겠죠, 1편에서 캔버스만들었던 문법처럼 버튼 만들어주면 됩니다. Fill Save 2️⃣ 저장버튼에 스타일 넣기 여기서 끝이면 심심하죠.. 지금 버튼이 멋이 없잖아요? 뽐이 없어 그렇다면 어디로 이동? Style.css로 이동~ 우리가 버튼(btns)을 controls에 만들었으니까 Style.css>controls 구간으로 가서 태그 작성하면 됩니..

만들 결과물 : 웹에서 작동하는 그림판 만드는 이유 : 결과물을 만드는 과정을 통해 JS,CSS,HTML을 보다 실질적으로 이해하기 위해서. (개념을 이해하고 정리하는 것보다 한발짝 더 나아가는 학습과정이라고 생각) 1️⃣ 셋업하기 0 . 명령프롬프트에서 깃헙에 클론, VScode 실행 1. 탐색기에서 index.html / app.js / styles.css 생성하기 🔻 (VScode에서 파일 생성시 확장자누르면 아이콘 바뀌는거 늘 짜릿하다.) 2. index.html 에 html document 만들고 타이틀 이름 설정하기 하고 싶은 타이틀 넣고... 3. index.thml 속 부분에 style.css 설정해주고, 부분에 app.js 불러줍니다. 여기까지 셋업 완료입니다. 우리는 빈 웹 화면을 만들..