js 공부(ft. sparta) (65) 썸네일형 리스트형 내일배움카드 코딩 후기 제가 신청한것은 웹개발종합반 수업이었습니다. 처음에는 취업을 하기위해서 웹개발을 혼자서 공부해보려 했지만 도저히 취업이 안될거같아 내일배움카드를 발급받아 여러 강의들 중에 꼼꼼히 살펴보고 스파르타코딩클럽 내일배움단 수업을 듣게 되었다. 자바스크립트와 파이썬을 처음 해보는만큼 걱정이 앞섰지만 친절히 이해하기 쉽게 설명해주고, 궁금하거나 문제가 발생했을경우에 즉문즉답을 통해 바로바로 응답해주셔서 너무 좋았고, 실전에서 사용하는 것 위주로 여러번 복습해서 좋았다. 내용이 알차고 딱딱 필요한것만 알려주기 때문에 헷갈리지 않아서 좋았다. 다만 가끔 수업중 하나,두개정도 수업영상이 말과 자막 씽크가 안맞거나, 앞서 나왔던 영상이 중간에 짧게 다시 붙어있는등 문제가 있었지만, 진도를 나아가는데 문제는 없었다. 5주차 끝 숙제 마지막 숙제는 쉽다. 내가 만든 팬명록 url을 그대로 제출해주면 된다. http://myweb.eba-8aqheyw3.ap-northeast-2.elasticbeanstalk.com/ 아이유 팬명록 아티스트에게 응원 한마디! myweb.eba-8aqheyw3.ap-northeast-2.elasticbeanstalk.com 5-11. 내 프로젝트를 서버에 올리기 현재 우리컴퓨터를 보면 localhost:5000으로 볼 수있다. 컴퓨터가 켜있는 상태로 누군가가 원할때마다 우린 줄 수 있다. 하지만 꺼져있으면 줄 수 가 없다. 그래서 내컴퓨터 대신 계속 켜놓을 컴퓨터를 구매해야한다. 그게 바로 서버이다. 이 beanstalk이라는 기능은 배포가 굉장히 쉽고 다 자동화가 되어있는 방식이다. 이 기능을 이용하지 않으면 서버를 사고 세팅하고 거기다 내파일 올리고 실행시키는 등 번거러운 과정을 직접 다 해야한다. 5-10. og 태그 우리가 만든 팬명록 서비스를 클라우드 환경으로 올리기전에(즉 모든 사람에게 공개하기전에) og태그를 만들어보도록 한다. og태그들을 만들어두면 우리가 사이트를 뿌리게 될때 만들어진 og:title, og:name 등이 나오기 때문에 좀더 그럴싸해 보이게된다. 먼저 og태그 넣기 코드를 복사해서 index.html에서 title 바로 밑에다가 붙여준다. 그리고 구글에 자신이 좋아하는 가수의 공연 이미지를 찾는다. 오른쪽을클릭해서 이미지주소를 복사한다. https://img.hankyung.com/photo/202209/01.31260167.1.jpg 이 url을 이미지 url을 지우고 대신 넣어준다. 밑으로 내려가보면 background에도 똑같은것을 붙여넣어준다. 현재 있는건 가수 10cm 이기때문이다... 5-9. [팬명록] - GET 연습하기 (응원 보여주기) 이제 댓글 보여주기 기능을 만들어줄꺼다. 로딩이 되자마자 저장된것들을 보여줘야한다. app.py의 get 부분을 위와 같이 수정해주고, html로 와서 console로 작성해준다음 확인해준다. 그리고 rows를 forEach로 돌려서 잘 나오는지 console로 찍어서 확인해준다. 잘 나오는 것을 확인했다. 이제 붙여준다. 잘 나오는것을 확인 할 수 있다. 한번 더 확인해보자. 이렇게 모든 comment가 들어간것을 확인할 수 있다. 5-8. [팬명록] - POST 연습하기 (응원 등록하기) 닉네임하고 응원댓글을 가져다가 댓글 남기기를 누르면 서버에다 보내주고 그 서버는 db에 저장을 해주고 저장 됬다는 알림을 보내주면 된다. 이렇게 서버쪽은 끝났다. 이제 프론트엔드쪽을 보겠다. 이렇게 수정하면 된다. 가서 확인해보면 이렇게 잘 들어간것을 확인할 수 있다. 새로고침이 자동으로 되야하기 때문에 window.location.reload()를 해준다. 그럼 자동으로 새로고침을 해주고 새로운걸 입력해서 보면 잘들어온것을 확인할 수 있다. 이렇게 댓글 남기기 완료했다. 5-7. [팬명록] - 조각기능. 날씨 API 적용하기 먼저 HTML에 가서 set_temp를 보면 사이트가 있다. ctrl + 클릭 해서 들어가보면 아래와 같이 나와있다. 우린 여기에서 temp값만 필요하다. 제대로 찍히는지 확인해보자. 잘 찍히는것을 확인할 수 있다. 이제 사이트에 현재기온에 넣어준다. 확인해보면 된다. 바뀐것을 확인해볼 수 있다. 다음은 본격적으로 댓글남기기를 만들어보자. 5-6. [팬명록] - 프로젝트 세팅 앞서 했던것과 마찬가지로 세팅해준다. 그리고 패키지를 설치해주고 pip install flask pymongo dnspython app.py에 팬명록 뼈대를 복사해서 붙여넣어준다. from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') @app.route("/guestbook", methods=["POST"]) def guestbook_post(): sample_receive = request.form['sample_give'] print(sample_receive) return jsonify({'ms.. 이전 1 2 3 4 ··· 9 다음
