html13 TIL) Ajax에서 alert 창이 뜨지 않을 때? '저장' 버튼을 누르면 '게시글 등록 성공'이라는 알림창이 뜨도록 설정하였다. 그러나 어쩌다 한 번 알림창이 뜨고 index로 돌아갈 뿐, 알림창이 지속적으로 뜨지는 않았다. 우선 게시물 등록을 위한 버튼은 아래와 같다 저장 우선 알림창이 뜨지 않아도 게시물이 디비로 넘어오는 것은 확인하였다. 로그를 찍어도 디비가 확인이 되었기에 나는 버튼의 type을 의심하게 되었다. 태그의 type 속성은 해당 버튼의 타입(type)을 명시한다. 브라우저별로 요소에 대한 서로 다른 기본 타입을 사용할 수 있으므로, 요소에는 언제나 type 속성을 명시해야 한다. 버튼의 문법 버튼의 속성값 type="submit" : 폼의 전송 기능을 담당한다. type="reset" : 폼 작성 내용을 초기화하는데 사용한다. typ.. 2023. 8. 30. TIL) [JavaScript] JavaScript 선언 위치 메인 페이지 템플릿을 intellij에 가져오기 위해 템플릿 웹사이트에서 html, css, js 코드를 가져왔다. 그러나 외부 스크립트로 지정한 js 기능이 연결되지 않았다. 현재 내가 넣은 js코드는 로 안에 위쪽에 구현해놓았다. 그랬더니 js코드가 동작하지 않았다. 이번에는 이 방법은 스크립트를 페이지 컨텐츠보다 먼저 로드하기 때문에 스크립트 실행 전에 초기화 작업을 수행할 수 있다. 즉 순차적으로 실행되며 안에 코드를 실행하기 전에 이 방법은 페이지 컨텐츠를 먼저 표시한 후 스크립트를 로드하여 사용자 경험을 개선한다. body 안에 html 코드, script 코드가 먼저 실행되기 때문에 클라이언트가 페이지 로딩 속도가 빠르다고 느끼게 된다는 의미이다. 그래서 페이지 로딩 속도에 더 긍정적인 영향.. 2023. 8. 25. TIL) 투표 프론트앤드 부트스트렙 템플렛, 백엔드 DB 가져오기 오늘 한 일 - 투표 프론트앤드 부트스트렙 템플렛 찾기 - 프론트앤드에 투표 백엔드 DB 가져오기 [투표 프론트앤드 부트스트렙 템플렛 찾기] 사용한 투표 프론트앤드 부트스트렙 템플렛 https://www.bootdey.com/snippets/view/vs-voting-system Bootstrap html snippet. vs voting system Bootstrap snippet and html example. vs voting system, this UI example was created for web development using HTML, Javascript and CSS by Bootdey Admin www.bootdey.com 템플렛으로 제공되는 파일은 html과 css. **여기서 ht.. 2023. 7. 19. 미니 팀프로젝트 : 팀 소개 웹페이지 2일차 TIL 1. 메인 페이지에서 동물 방명록 페이지로 이동하는 버튼을 꾸몄다 .btn {font-size: 20px; font-weight: bold; padding: 10px 30px; background-color: white; color: black; border: 3px solid black; border-radius: 30px; text-transform: uppercase; letter-spacing: 0px; font-family: sans-serif; transition: all 0.4s;} .btn:focus {outline: none;} .btn:hover {background-color: black; color: white;} 결과 2.백엔드와 프론트엔드 연결 프론트(동물 방명록)에 입력.. 2023. 5. 16. 미니 팀프로젝트 : 팀 소개 웹페이지 1일차 TIL 팀 소개 웹페이지를 구현하기 위해 와이어프레임과 역할 분담을 나누었다 발제가 금주 금요일이므로 4일 만에 프로젝트를 완성해야 했다 때문에 하루는 CR구현, 하루는 UD구현, 하루는 최종수정 및 발제준비로 일정을 짜보았다 우왕좌왕 좌충우돌이었지만 각자 역할분담을 나누어 조금씩 구현해 보기로 하였다 역할 분담은 프론트/백엔드로 나누었으나 결론적으로는 GET/POST 한 묶음씩 역할 분담을 나누는 것이 더 효율적 여보였다 우리가 만들고자 하는 웹페이지는 1. 팀과 팀원 소개 2. 방명록 을 구현하는 것이었고 방명록의 경우 좋아하는 동물과 이유를 적고 동물의 이미지 주소를 넣었을 때 기록물들이 남기는 효과를 구현하고자 했다 API 명세는 다음과 같이 계획했으나 점차 하면서 request와 response.. 2023. 5. 15. 네 번째 미니 프로젝트: 팬명록 이번 프로젝트는 팬명록 만들기이다 좋아하는 연예인의 팬명록을 만드는 것인데 닉네임, 응원댓글을 기록하면 아래로 기록들이 달리는 사이트이다 결과 먼저 보기 대표사진 삭제 사진 설명을 입력하세요. 나는 좋아하는 연예인이 없어서 친한 친구가 좋아하는 연예인(비투비 이창섭씨)을 대상으로 하여 만들었다 :) 이번 프로젝트에도 사용한 언어는 python이며 프레임워크는 flask를 사용하였다 이전 포스트와 마찬가지로 주요 코드를 공유하는 것으로 포스트를 마치고자 한다 python from flask import Flask, render_template, request, jsonify app = Flask(__name__) from pymongo import MongoClient import certifi ca = .. 2023. 5. 11. 세 번째 미니프로젝트: 나의 버킷리스트 웹개발 강의 5주차에 접어들었다 드디어 마지막 강의다 흑흑 ㅠㅠ 5주차에는 지금까지 배운 내용을 정리하고 생소한 정보를 복습하는 시간이었다 또한 미니프로젝트 2개를 추가로 진행하는데 벡엔드 서버 Flask로 서버를 만드는 작업을 2번 반복한다 나의 버킷리스트 만들기 결과물! *웹사이트를 만드는 순서는 앞서 포스트한 순서와 동일하다 따라서 본 포스트에서는 코드만 공유하고자 한다* app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) from pymongo import MongoClient import certifi ca = certifi.where() client = MongoClient('mongodb.. 2023. 5. 11. 첫 번째 미니프로젝트 - 화성땅 공동구매 이번 포스트와 다음 포스트는 실제로 미니 프로젝트를 만든 시간이었다 즉, 나만의 웹페이지를 만들어보는 시간이다 결과물부터 봐보자! 이번 프로젝트는 화성에서 땅을 공동구매하기 위해 주문하는 웹페이지이다 주문 상세에는 이름, 주소, 평수이며 주문하기를 누르면 아래에 주문자의 리스트가 기록되는 사이트이다 만드는 순서 1.app.py 만들기 2.가상환경 만들기 남이 만든 라이브러리를 사용할 것이기 때문에 그것을 담을 환경이 필요하니 터미널에서 venv 만들기 터미널에 $ python3 -m venv venv 치고 엔터 (맥용) (윈도우용) $ python -m venv venv 3.templates 폴더 생성 그 안에 index.html 생성 4.flask 설치 터미널에서 $ pip install flask치고.. 2023. 5. 11. 웹개발 종합반 4주차 (2) 저번 포스트에서는 프론트엔드에서 API, 데이터를 받는 것을 배웠다 웹개발 종합반 4주차 (1) 4주차에서는 백엔드 과정을 배웠다 즉, 서버 만들기를 배웠다 두근두근 다만 백엔드 과정이 꽤나 양이 많아 포스트를 4개로 나누어 포스팅하였다 마지막 포스트 2개는 실제로 미니 프로젝트를 earlgrey-is-here.tistory.com 4주차에서는 백엔드 과정을 배웠다 즉, 서버 만들기를 배웠다 두근두근 다만 백엔드 과정이 꽤나 양이 많아... 데이터를 받을 때 fetch를 사용해 보았는데 프론트엔드(.html 등)와 벡엔드(.py 등)가 소통하는 방법은 여러 가지가 있다고 한다 그중에 우리는 GET, POST 방식 등을 배웠다 이번 포스트에서는 두 방식을 배운 내용을 공유하고자 한다 GET 요청의 특징은 .. 2023. 5. 11. 웹개발 종합반 4주차 (1) 4주차에서는 백엔드 과정을 배웠다 즉, 서버 만들기를 배웠다 두근두근 다만 백엔드 과정이 꽤나 양이 많아 포스트를 4개로 나누어 포스팅하였다 마지막 포스트 2개는 실제로 미니 프로젝트를 만들어보았다! 기대하시라! 꺄 서버를 만들기 위해서는 라이브러리 = 프레임워크가 필요하다 우리는 백엔드 서버를 위해 Flask라는 프레임워크를 사용했다 Flask 프레임워크로 서버 만들기 1.원하는 폴더로 이동한다 2.app.py를 만든다 3.터미널을 켠다 4.가상환경을 잡는다 터미널에서 python3 -m venv venv치고 엔터 *venv는 프로젝트별로 라이브러리를 담아두는 통 5.Flask 설치하기 터미널에 pip install flask치고 엔터 [Flask 시작 코드] from flask import Flask.. 2023. 5. 11. 웹개발 종합반 3주차 3주차에는 파이썬을 배웠다 파이썬으로 서버 만들기 몽고디비와 친해지기 파이썬으로 네이버 영화목록을 가져와서 몽고디비에 넣기 파이썬 (윈도우용, 맥용) 파이썬 공부하기 파이썬을 사용하는 이유 컴퓨터한테 명령을 내리기 위해 파이썬을 다운로드하는 이유 파이썬의 언어를 알아들을 수 있도록 번역해 주는 번역패키지를 세팅하기 위해 세팅하면 컴퓨터가 명령어를 알아들을 수 있음 파이썬의 문법은 굉장히 직관적이다 예) print는 출력을 의미 변수 a = '대한' b = '민국' print (a+b) 결과: 대한민국 자료형 a = ['사과','배','감'] print (a[0]) 결과: 사과 dictionary a = {'name':'영수', 'age':24} print (a['name']) 결과: 영수 함수 자바스크립.. 2023. 5. 10. 웹개발 종합반 2주차 오늘은 Javascript를 배웠다 Javascript는 프로그래밍 언어 중 하나로 브라우저에 명령을 알아들을 수 있는 언어라고 한다 쉽게 말해, 움직이기, 움직임을 더하기, 뭔가를 움직이게 하는 것, 뭔가에게 동작을 명령하는 것이다 예) 스크롤을 내리면 배경 바꾸기 등 다음은 강의를 들으면서 Javascript와 관련된 기본적인 정보들이다. 자바와 자바스크립트의 차이는? 아무 관련이 없다. 강사선생님께서는 인도와 인도네시아의 차이 정도라고 말하셨다 Javascript는 안에 쓴다 HTML에 움직임을 주기 위에서 Javascript를 사용한다 프로그래밍에서 함수(Function)는 정해진 일을 반복하는 함수이다 Javascript의 기초적인 문법에는 다음과 같다 console.log()는 해당 웹사이트가.. 2023. 4. 25. 웹개발 종합반 1주차 오늘은 스파르타코딩에서 제공하는 [왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택) 1주차를 수강하였다 해당 강의는 국비지원이 가능한 웹개발 강의이다. HRD-Net에서 확인가능하며 80%이상 수강을 하면 전액환급이 되는 것으로 알고 있다! 그리고 기간 내에 수강을 완료하면 평생 소장이 가능하다고 한다 총 5주차 강의로 이루어져 있으며 이며 비전공자들을 위한 웹개발 강의라고 할 수 있다 이번 게시물은 1주차 강의에 대한 개발일지이다! 스파르타코딩클럽에서 제공하는 웹개발 종합반 강의가 궁금하다면 참고해도 좋을 것 같다! 기대되고 기다리던 웹개발 종합반 1주차를 수강하였다. 대표적으로는 다음과 같이 배웠다. 1. 필수 프로그램 설치 Visual Code VC에서 Live Server 사용.. 2023. 4. 24. 이전 1 다음
