본문 바로가기

코딩 공부/띵동코딩

 (77)
23. 01. 05 23-6 스스로 해보기 스스로 해보기 시간에는 바로 해당 유저의 모든 데이터를 삭제하는 기능을 추가로 구현하는 것이다. 위치는 mordal box 안이며, 새로운 버튼을 만들어서 새로운 함수로 적용하면 된다. 먼저 새롭게 만들어진 버튼에 새로운 함수 deleteAllTodo()를 적용해주고, 시작은 프론트엔드가 먼저다. 유저의 전체 todo 를 삭제하기 위해서는 유저의 name 정보가 필요하다. 이를 name 변수에 저장하여 uername 이라는 이름으로 백엔드로 넘겨주면 된다. 다음은 백엔드 이다. 받아온 username을 다시 user 변수에 선언해주고, delete_many() 함수를 이용하여 name값이 user와 동일한 이름만 삭제해주면 된다. 총 3개의 todo 를 입력한 후 delete all to do 버튼을 클..
23. 01. 05 23 최종 웹사이트 완성하기 이번주에 할 내용은 최종 웹사이트 완성하기 이다. 지난주 내용의 연장이고, 최종적으로 모든 기능을 구현해야 한다. 바로 3번째 페이지에 코드를 추가해보자. 2번째 페이지에서 작성해둔 addTodo()함수를 복사해서 가져왔다. 해당 함수가 작동할 위치는 바로 add to the list 버튼이다. 웹 페이지에서는 + 버튼으로 숨겨져 있고, 버튼을 부르면 add to the list 란 div 를 보여주게 된다. 이제 3번째 페이지에도 mongoDB에서 내 이름에 해당하는 데이터를 불러와서 보여주는 기능을 만들어주자. 먼저 함수를 정의해주자. 위의 renderAdvice 함수를 복사해서 url 과 일부 보여줄 내용만 수정하였다. 지금은 데이터를 확인하는게 우선이기 때문에 콘솔창에 표시해 보기로 하자. 역시 ..
22.12.27 22 최종 웹사이트 만들기 지난주 시간에 이어서, 웹사이트 만드는 시간이다. 기본 뼈대는 똑같다. 다만 오늘 수업에서는 총 3페이지가 필요하기에, 각 route에 3개의 페이지를 다른 이름으로 설정해 주어야 한다. flask에는 한가지 재미있는 기능이 존재한다. 그것은 바로 app.py 에서 설정한 변수를 HTML에서 가져다 사용할 수 있다는 점이다. 이렇게 설정하면, 접속주소에 당연히 임의의 이름이 붙어야 접속할 수 있다. 입력창의 주소 이름을 그대로 name 변수로 활용 가능하다. 이제 주소창에 입력한 이름에 따라 페이지에 출력되는 이름이 바뀐다. 이제 첫번째 페이지로 돌아와 사용자에게 받은 "이름" 정보를 두번째 페이지의 name 으로 넘겨주면 된다. 첫번째 HTML 코드에서 먼저 페이지 이동을 명령할 함수를 하나 셋팅해 주..
22.12.19 21 데이터 삭제하기 앞서 mongoDB를 이용해서 데이터를 입력하고 불러오는 작업을 해보았다. 이번주 강의 내용은 입력된 데이터를 삭제하는 방법이다. 페이지는 지난 20주차 강의때 사용한 페이지를 조금 수정해서 사용한다. 일단 HTML 코드부터 수정해 주었다. 삭제 버트은 a 태그를 사용하였고, 삭제 기능을 담당할 delete_tweet이란 함수를 새로 넣어주었다. 페이지로 돌아와 잘 작동하는지 확인하고. 이제 두개의 텍스트를 DB에 전달해야 한다. 기존 선언한 변수 바로 아래에 name_text 라는 새로운 변수를 선언해 주고, option의 body에는 name_give 라는 변수를 콤마를 이용해 분리해서 입력해 주어야 한다. app.py 파일에도 저장 부분을 추가해 주면 된다. 딱히 어려운 내용은 없다. 이제 두개의 ..
22.12.12 20 데이터 저장 및 불러오기 이번주에는 다시 백엔드 서버 만들기로 돌아가서 클라이언트-서버 통신 방법을 학습할 차례이다. Mangdb에서 데이터를 받아와 db 변수에 선언해 주고, template 폴더의 index.html 파일을 불러와 웹 브라우져에 보여진다. 해당 서버는 로컬 서버이기때문에 본인의 컴퓨터에서만 확인 가능하다. index.html 은 이런 모습이다. 이제 저기 빈 공간에 내용을 적고 포스팅하기 버튼을 누르면 데이터베이스로 해당 내용을 보내주는걸 만들어볼 차례이다. 먼저 해당 데이터를 서버로 보내주기 위해서는 fetch를 사용해야 한다. 여기에 옵션과 url을 설정해 주어야 하는데, url은 '/api/save'로 설정해 주었다. 이는 내가 만드는 api 이며 그 아래 save 라는 이름으로 데이터를 보내겠다는 의미..
22.12.05 19 데이터베이스 연결하기, CRUD 실습 이번주 실습주제는 mongoDB를 직접 다루면서 데이터베이스에 대한 기본 학습을 하는 것이다. 즉, 인터넷에서 제공되는 특정한 한 회사의 데이터베이스 서버를 빌려와 내 데이터를 넣어두는 것이다. 먼저 mongodb 공홈에 접속하여 로그인을 해야한다. 구글 아이디가 있다면, 구글아이디로 별다른 회원가입 절차업이 로그인 가능하다. 로그인에 성공하면 최초 설정부분이 나오는데 username과 password를 설정해 두면 보안에 특별한 문제가 없어진다. 따라서 이 IP 추가 부분은 0.0.0.0 으로 설정해주면, 어디에서든 접근 가능한 나만의 DB가 완성이 된다. 이제 finish를 누르고 잠시만 기다리면 개인 DB가 활성화가 된다. 이제 해당 DB에 데이터를 추가하고 읽고 삭제하는 일괄을 작업을 진행해야 한..
22.12.02 2023 나만의 버킷 리스트 만들기 아침에 스파르타코딩클럽에서 카톡이 왔다. 간단하게 나만의 신년계획을 짜볼수 있는 웹페이지를 만드는 강의다. 심지어 무료강의!!!! 고민할 필요없이 바로 수강신청 버튼을 눌렀다. 1. 환경설정하기 환경설정은 크게 다를게 없다. 기존 사용중이던 VS CODE 프로그램을 이용해서 작업하며, 추가로 'Live server'라는 확장 프로그램만 설치해 주면 된다. 2. index.html 따로 준비된 코드스피넷이 없다. 기본적으로 html 이라고만 누르면 자동완성 기능에 따라 3개의 메뉴가 나오는데 가운데 html:5 를 누르면 자동으로 기본 뼈대를 만들어서 사용자에게 제공한다. 빈곳에 마우스 우클릭하면 저렇게 Oepn with Live Server 라는 메뉴가 나오는데, 실행하면 빈 창이 나온다. 이제 VS C..
22.11.28 18-6 스스로 해보기 음... 글쓰기 버튼을 누르고 강의 영상을 틀었는데, 별다른 내용이 없다... 그냥 다른 페이지를 서버에 추가해서 보여주는게 끝이다. 강의에서 제공되는 코드스피넷을 복사해서 mypage.html 파일을 만들어 주었다. 이제 이렇게 새로운 위치와 return문을 정의해 주면, 끝이다. ... 끝났다. 이번주 강의는 뭔가 쉬어가는 느낌이 강하다. 물론, python 이 설치가 되지 않았거나, 다른 라이브러리 설치에서 막히는 부분이 있었다면 좀 어려운 부분이 있었겠지만, 이미 개인공부를 통해 python은 설치가 되어있고, 심지어 가상환경에서 작업하는 것도 미리 공부를 해 두었다. 이제 남은 시간은 개인공부에 힘써야지!!

티스토리툴바