본문 바로가기

💻 개발블로그/웹개발16

5주차(2) 웹개발 강의: 도메인연결, og이미지 *도메인연결 -우선 nohup으로 서버를 연결해놓는다. (nohup python app.py // 이때 키페어입력 후 경로확인해볼것!) -가비아에서 https://dns.gabia.com/ 구매한 도메인 체크, DNS설정 체크 -호스트'@', IP주소:인스턴스주소(숫자만넣기 123.345.56.78), 상태확인, 저장 >>세팅완료팝업 -이제 구매한 도메인으로 서버접속 가능 *OG이미지 카톡같은 곳에서 링크공유할때 보이는 미리보기이미지 설정 og태그(og:image, og:title, og:description) 카카오톡 같은곳에선 og이미지가 안바뀔때가 있는데, 이것은 한번 저장한것을 계속 띄우는 시스템이라서 초기화를 해줘야한다. 강의자료 참고할것.. 2021. 12. 18.
5주차(1) 웹개발 강의: 프로젝트 서버에 올리기 다들 쉽게 서버를 연결한 것 같은데, 나는 강의자료와 다르게 갔던 것 같아서 조금 애를 먹었다. (너무 기초 개념이 안 잡혀있어서 질문하기도 상당히 애매한 수준...) 클라우드 환경을 활용하여 웹서비스에 접근할 수 있도록 만든다. -AWS서버구매 후 연결 *GitBash에서 세팅하기 GitBash에서는 AWS EC2에서 구매한 가상의 컴퓨터(클라우드 같은 개념)를 연결한다. 가상의 컴퓨터, 리눅스는 마우스가 없어서 명령어를 입력하여 사용한다. GitBash를 시작하기 전에 우선 키페어를 준비해야한다. 그리고 여러 명령어가 등장하는데, 굳이 다 기억할 필요는 없고, 잘 기록해두고 붙여써도 될 듯하다. *GitBash로 컴퓨터에 원격접속 -GitBash로 키페어등록하기(나는 윈도우를 사용하기 때문에 윈도우기.. 2021. 12. 18.
5주차(1) 웹개발 강의: 파일질라, 가비아 / 버킷리스트 만들기 -파일질라(Filezilla): 파일을 보내는 프로그램 -가비아: 도메인구매 이제 코딩 준비 끝! *프로젝트세팅 -bucket프로젝트생성, Venv확인, 파이썬버전확인 -디렉토리(static, templates)생성, app.py생성, templates안에 index.html생성 -설정에서 패키지설치: pymongo, dnspython, flask, BS4, requests -MongDB Atlas 준비하기 *POST연습(기록하기) -API만들어사용하기(기록API/POST) -요청정보: URL=/bucket, -요청방식: POST -클라이언트(Ajax) >> 서버(Flask): bucket을 보내면 -서버(Flask) >> 클라이언트(Ajax): ('기록완료!')의 메시지를 보낸다. //리스트의 번호를 .. 2021. 12. 17.
4주차 웹개발 강의: 팬명록만들기 예제(개발일지) * 항상 DB(MongoDB사용)를 준비한다. * 새 프로젝트를 열고, static 과 templates 디렉토리 생성 * app.py생성, templates 안에 index.html 생성 * 패키지설치: flask, BS4, dnspython, pymongo, requests POST연결 1. 요청정보: URL=/homework, 요청방식=POST2. 클라이언트(Ajax) >> 서버(Flask): name, comment3. 서버(Flask) >> 클라이언트(Ajax): 메시지보냄(입력완료) GET연결 1. 요청정보: URL=/homework, 요청방식=GET2. 클라이언트(Ajax)>>서버(Flask): 없음3. 서버(Flask)>>클라이언트(Ajax): 전체데이터보내주기 -서버 만들기: 여러개 찾기.. 2021. 12. 17.
2주차(3) 웹개발 강의: Ajax * API란? :서버에서 클라이언트가 요청을 할 때 필요한 창구 역할 API에는 'GET'방식과 'POST'방식이 있다. -GET방식: 데이터를 조회를 요청할 때 (예시: 우리가 무언가를 검색할 때) -POST방식: 데이터를 생성, 변경, 삭제를 요청할 때 (예시:회워가입, 탈퇴, 비밀번호 수정 등) * JSON(JavaScript Object Notation) Json은 클라이언트가 서버로부터 받는 데이터 형식 key:value로 이루어져 딕셔너리와 리스트의 조합의 형식으로 보인다. 복잡한 데이터가 json뷰를 다운 받으면 정리된 모습으로 데이터를 보여준다. JSON형식0 { }: 객체(딕셔너리) [ ]: 배열 " ": 문자열 문자열 외: 숫자 [{ }]: 객체의 배열 -Jsonview(크롬에 설치) .. 2021. 12. 17.
2주차(2) 웹개발 강의: JQuery연습예제 #1. 빈칸 체크 함수 만들기 function q1() { } // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게! // 2. 만약 입력값이 빈칸이면 if(입력값=='') // 3. alert('입력하세요!') 띄우기 // 4. alert(입력값) 띄우기 다음 문제에 대한 답과 해석(입력값을 입력할 때 $,#표시와 명령이 끝났을 때 ;세미콜론을 잊지말자) function q1(){ >>q1에 JQuery를 적용시킬건데, let value = $(#'input-q1').val(); >>input-q1의 이름을 가진 input을 이제 'value'라고 하자 if (value == ''){ >>만약에 'value'값이 공백과 같다면 alert('입력하세요'); >> ale.. 2021. 12. 17.
2주차(1) 웹개발 강의: JQuery *JQuery란? : HTML요소를 조작하는 편리한 Javascript를 미리 작성해 모아둔 것, 라이브러리 역할 JQuery는 Javascript의 코드보다 훨씬 심플하다. JQuery를 사용하기 위해서는 첨부된 링크에서 코드를 찾아 입력해야한다. - JQuery링크찾기: https://www.w3schools.com/jquery/jquery_get_started.asp jQuery Get Started W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL.. 2021. 12. 17.
1주차(4) 웹개발 강의: 자바스크립트(javascript) 자바스크립트(javascript)는 브라우저가 알아듣는 프로그래밍 언어이다. 안에 를 만들어 그 안에 자바스크립트를 작성한다. 브라우저에서 검사를 눌렀을 때 뜨는 console과 동일하다 **자바스크립트 기초문법 자바스크립트 기초문법에는 변수, 자료형(숫자,문자), 함수, 조건문(if, else), 반복문(repeat)등이 있다. 기본적으로 변수가 있고 여러 함수에 대입을 하여 사용할 수 있다. * let 변수선언 :'~라고 하자!' 라고 변수를 선언하는 코드이다.(변할 수 있는 값) let 다음 a=2라고 했을 때 a를 물어보면 2로 대답을 하는 원리. 변수들은 사칙연산(+,-,*,/,%...), 문자열 더하기가 가능하다. 문자열이 들어갈 때는 '~'또는 "~" 따옴표로 감싸준다.(String형식) l.. 2021. 12. 17.
1주차(3) 웹개발 강의: 부트스트랩 부트스트랩(Bootstrap): 예쁜 CSS모음집이다. CSS분리처럼, 인터넷에서 완성된 CSS를 끌어와서 사용한다는 장점이 있다. 예를 들면, 색이라던가, 기능등을 내가 굳이 수정하지 않아도 마음에 드는 CSS를 골라 사용할 수 있다. 아래의 html템플릿을 넣으면 부트스트랩을 시작할 수 있다. 부트스트랩 링크: https://getbootstrap.com/docs/5.0/components/buttons/ 이걸로 시작해보죠! 2021. 12. 16.
1주차(2) 웹개발 강의: 구글웹폰트/주석달기/CSS파일분리 구글웹폰트 활용하기 아래 링크를 클릭하면 사용할 수 있는 웹폰트가 나온다. 원하는 폰트를 클릭하고 'select this style'을 선택하고 모음아이콘을 선택하면 내가 선택한 폰트 목록이 뜬다. 여기서 태그는 사이에, 해당하는 폰트의 CSS는 사이 *{ 구글웹폰트CSS} 붙여준다. https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 주석달기 사용하고 싶지 않은 태그를 숨겨둘 때, 또는 설명을 붙여둘 때 Ctrl + / 를 눌러 비활성화 시킨다. 다시 풀 때도 똑같이 누른다. 을 비활성화 시키면 * CSS.. 2021. 12. 16.
1주차(1) 웹개발 강의: HTML, CSS HTML, CSS HTML: 뼈대 / CSS: 꾸미기 / Javascript: 움직임 구현 HTML은 안에 을 넣어서 사용한다. css를 적용할 html 태그에 이름을 붙여주고 class="이름", 에서 .클래스이름{ } 안에 CSS를 넣어 사용한다. 자주 쓰이는 CSS *꼭 외워서 사용하지 않아도 구글링해서 찾아써도 된다. 하지만 많이 쓰이는 것들은 외워두면 좋다. CSS입력이 끝나면 ;(세미콜론)을 붙여준다. 배경관련CSS background-color background-image background-size background-position display: flex; flex-direction: column or row; justify-content: center; align-items: cen.. 2021. 12. 16.
Ajax 팬명록에 온도 적용하기 Ajax는 굳이 암기하지 않아도 끌어와서 사용해도 된다! 아래 코드에서 기온을 적용할때 태그사용, 으로 일정부분 담아준 뒤에 아이디를 붙였다. -이미지url을 적용시킬때는: $('#아이디').attr("src",이미지url) -텍스트를 적용시킬때는 S('#아이디').txt("텍스트") BTS 팬명록 현재기온 : 00.00도 닉네임 응원댓글 응원남기기 새로운 앨범 너무 멋져요 ! 아미1 새로운 앨범 너무 멋져요 ! 아미2 새로운 앨범 너무 멋져요 ! 아미3 2021. 12. 14.
jQuery 연습(2-5) if 조건문의 사용은 조금 익숙해진 것 같다. jquery사용도 아직은 뭐가 뭔지 잘 모르겠지만, 요소를 끌어오고 값을 넣어주는데서 조금 흥미를 느꼈다. temp_html =`` 2021. 12. 14.
JQuery 자바스크립트의 긴 명령도 jquery로 간단하게 만들 수 있다. 라이브러리처럼 필요한 기능을 꺼내쓰는 Jquery 이 코드를 넣으면 간편하게 꺼내쓸 수 있다! $('#id'). val('입력') $('#id') >>> 'id'에 jquery를 적용하고 싶다. .val('입력') >>> value '입력'을 가져오고 싶다. jquery 적용시 id 지정을 해줘야 그 부분에 적용이 된다. class처럼 id에도 이름을 넣어주고 지정하는 것! alert 창띄우기 함수와 함께 사용하면 재미있는 실습이 가능하다. let temp_html = ` ` $('# ').append(temp_html) temp_html 어떤 것을 끌어와서 html처럼 사용하겠다. 끌어오고 추가할 때 사용한다. 백틱사용! 2021. 12. 14.
1.부트스트랩을 이용한 BTS팬명록만들기 부트스트랩을 이용하여 BTS팬명록만들기 로 정리하며 만들어야 나중에 수정하기에도 편한 것 같다. 단락을 잘 묶고 정리해야 스타일을 적용하기에 편리하다. 외울필요 없이 부트스트랩을 이용해서 다양한 기능을 끌어올 수 있는 점은 초보자에게 조금 머리가 식혀지는 부분인 것 같다. 다양한 폰트도 간편하게 넣어 사용할 수 있고, 이미지도 웹에서 쉽게 끌어올 수 있어 다양한 모습으로 응용이 가능하다. 다만 조금 까다롭고 어렵게 느껴졌던건 위치나 너비 맞추기이다. 아직도 익숙치가 않은데, 바깥여백을 다루는 margin과 안쪽 여백을 다루는 padding 그리고 상-우-하-좌 순의 입력방법도 많이 다뤄야 익숙해질 것 같다. 부트스트랩을 이용하더라도 내 것처럼 다루고 응용할 수 있어야한다고 느꼈다. BTS 팬명록 닉네임 .. 2021. 12. 14.
HTML, CSS, JAVASCRIPT HTML, CSS, JAVASCRIPT HTML은 전체적인 레이아웃을 보여주는 뼈대 HTML은 블록이나 구역을 정해 꾸밀 도화지라고 할 수 있다. 가장 기본적인 요소라고 생각한다. HTML이 있어야 살을 붙이고 움직임을 줄 수 있기때문에. CSS는 스타일을 주며 꾸며주는 역할 CSS는 글꼴, 색상, 이미지, 선 등 정해진 구역에 대한 꾸미기를 할 수 있다. JAVASCRIPT는 움직임을 구현하는 역할 자바스크립트는 이 모든것을 실행하는 역할이라고 할 수 있다. 브라우저는 이 세 가지를 모두 보여주는 창 2021. 12. 14.

티스토리툴바