본문 바로가기
728x90
반응형

source-code229

JavaScript in WebEvent js에서는 페이지에서 일어나는 여러 이벤트들을 지정할 수 있다. 대충 적어봐도... 마우스, 키보드, 사용자 인터페이스, 터치, 구조 변화 등! 생동감 있는 페이지를 위해선 어느 하나 빼놓을 수 없다. 역시나 js파일은 외부참조! webevent.js라는 파일을 만들었다. html상에 버튼을 하나 만들어줬다. onclick속성을 통해... 클릭하면 buttonClick이라는 함수가 작동된다. 요놈은 어디에? 아항! js 파일에서 이렇게 buttonClick 함수를 만들어줬다. 작동하면 클릭 이라는 경고창을 띄운다. 잘 뜨는구만. 이렇게 id를 지정해 불러올 수도 있다! id를 통해 객체를 지정할 테니 getElementById를 사용했다! 요 button은 onclick이벤트를 가지는데... 이 녀석을 .. 2021. 1. 13.
JavaScript in Web js의 꽃! 페이지 동작의 핵심! web에서 js를 이용해 여러 기능들을 구현해보자. inweb.html html상에 js 코드를 입력해도 되지만... 길어진 코드가 보기 좋을 리 없다. 따라서 (CSS 연결처럼) head태그 안에 다음과 같이 적어줘 외부 js 파일과 연결시키자. 1. window 객체 제일 먼저 window 객체! prompt는 입력 받을 수 있는 프롬프트를, alert는 경고창을 출력한다. 2. location 객체 setInterval 은 지정한 시간(여기서는 3초) 이후 함수를 작동시킨다. ↑이는 setTimeout 함수에 대한 설명! setInterval은 지정한 시간 간격마다 반복해서 함수를 실행한다! location은 html의 href와 유사한 기능! 뒤에 href, as.. 2021. 1. 13.
JavaScript 기초 행요를 개발했을 때, 카카오맵 API를 받아와서 사용했다. 처음 해당 코드를 본 순간... 느껴졌던 당혹감. 난생처음 만난 JavaScript. 뭐가 뭔지 도무지 알 수가 없었다. 덕분에 지도와 관련된 부분은 일절 다룰 수가 없었다. 속상. 그런고로... JavaScript를 정말 기초부터 시작할 예정. 참고 교재 : 자바스크립트 프로그래밍 입문 , 윤인성 저 1. 파일 생성 및 실행 JavaScript파일을 만들기 위해 js 확장자를 달아준다. 실행을 위해 python처럼 node + 파일명! 2. 연산자 파이썬의 print와 유사한 개념(인 듯 싶은...?) → console.log! 비교 연산자는? >, 30>20 ← 이렇게 적어버리면 False가 나온다..! 왜냐? 왼쪽부터 계산하므로 40>30 .. 2021. 1. 13.
Blogs App _ CSS 확장하기 지금까지 기능을 구현할 때... 디자인적 요소는 하나도 고려하지 않았다! 테두리 정도만 지정해줬는데, 이도 html상에 적어줬을 뿐! 물론 이렇게 해도 되지만... 모든 CSS속성을 html에 적어주면 코드가 한도끝도 없이 길어질테다. 그렇기 때문에 디자인을 담당할, CSS 파일을 따로 만들어주도록 하자. 우선 CSS파일을 만들어야한다. 어디에? 이전 미디어 파일을 다룰 때 만들었던 static폴더 - CSS라는 폴더 만들기 - CSS파일 작성 ← 이렇게! 즉 이런 식으로 만들면 된다는 말씀. 우선 가장 큰 틀, 즉 base.html에 해당하는 CSS파일을 만들어볼 예정. 이를 위해 base.html로 이동! static을 사용하기 위해, 해당 html상에 {% load static %}을 반드시 붙여줘.. 2021. 1. 11.
Blogs App _ 좋아요 기능 똑같은 글을 써도, 다른 사람들이 많이 읽고 관심을 가져주면 더 의욕이 생기는 법. 이를 측정(?) 하기 위해 좋아요 기능을 구현해보자. 1. model 수정 좋아요 기능을 구현하기 위해서는... 이 녀석의 정체부터 알아야 한다! 좋아요란 뭘까? 기본적으로 좋아요는 각 게시글에 달리는 개념이다. 즉, Post라는 모델 안에 있는 속성 중 하나로 좋아요 를 추가해주면 될 테다. 또한 좋아요는 게시글과 유저와의 관계이기도 하다. 하나의 게시글은 여러 개의 좋아요를 가질 수 있고, 한 명의 유저는 여러 개의 게시글에 좋아요를 누를 수 있다. → 이런 속성의 field 이름은??? 바로 바로 ManyToManyField ! 마지막으로 좋아요 횟수는 게시글과 유저와의 관계이지 단독적인 횟수를 의미하는 게 아니다!.. 2021. 1. 10.
AWS _ Route53 알아보기 이전 배포 과정에서 IP 주소와 도메인을 연결할 때, Route53 이란 곳에 들어갔다. 2020/12/16 - [행요 👼] - AWS와 Freenom로 행요 도메인 얻기 AWS와 Freenom로 행요 도메인 얻기 AWS를 통해 배포에 성공했다면, 해당 페이지의 주소는 AWS EC2 인스턴스에 있는 요상한 글귀들이 된다. 여기 있는 퍼블릭 IPv4 주소 or 퍼블릭 IPv4 DNS를 입력하면 열심히 끙끙거린 페이지가 잘 뜬다. 23life.tistory.com AWS의 Route53 이란 녀석이 무엇인지 알아보자. 우선 AWS에서 Route53에 접속. 첫 화면! Route53에는 다음과 같은 네 가지 기능이 있다. - DNS 관리 : Route53에 등록된 도메인 주소 관리. - 트래픽 관리 : 라우팅.. 2021. 1. 9.
Blogs App _ 동적 페이지 만들기 현재 우리의 페이지는 글로만 이루어져 있다. 이런 블로그는 아무도 관심을 가지지 않는다! 읽는 재미도 없다. 따라서 우리는 각 게시글에 사진을 올릴 수 있는 기능을 만들 예정. 그전에, 동적 페이지 / 정적 페이지라는 개념이 있다. 이게 뭔디? 정적 페이지 : 정적인 거! 사전에 준비된 데이터밖에 띄워주지 못함. 동적 페이지 : 동적인 거! 활발한 거! 사전 준비 데이터 이외에 이용자가 입력한 데이터도 띄워줄 수 있음. 으로 생각하면 쉽겠다. 우리는 일반 이용자도 게시글과 사진을 올리게 해 줄 테니 나름 동적인 페이지라고 할 수 있다. 와우! 동적인 페이지를 향한 첫 번째 발걸음. 1. static 폴더 만들기 blogs 앱 안에 static이라는 폴더를, 그 안에는 image라는 폴더를 만들자. ima.. 2021. 1. 8.
Blogs App _ 인증 기능 with 사용자 지정 인증 기능을 개발할 때 django의 User 테이블을 통해 만들었다. 즉 이미 django에서 정해준 값만을 입력할 수 있었다!! 당연히 항상 이런 상황만 생기지는 않는다. 그렇기 때문에 이번에는 직접 User 모델을 생성하고 회원가입 및 로그인도 구현해볼 예정. 우선 가장 중요한...사항....! 지난번 django의 User는 별다른 설정 없이, migrate를 했을 때 자동으로 생성됨을 알아봤다! 그런데 이걸 마음대로 커스텀하면...? 기존의 User와의 충돌이 거의 백 프로! 생기고 만다. 이때 해결방법은? 간단하다! 데이터베이스를 몽땅 날리고, User커스텀을 완료한 후 새로 migrate 해주면 된다. 참 쉽다! 1. accounts 앱 생성 회원가입을 담당하는 accounts라는 앱을 새로.. 2021. 1. 7.
Blogs App _ CRUD with 함수형 보통은 함수형으로 작성을 먼저 할 텐데... 뭔가 순서가 바뀐 느낌. 아무튼 이번에는 CRUD를 함수형 view를 사용해 구현해보자. 1. url 수정 viw의 이름은 다 똑같이 쓸 테지만, 클래스형 뷰에서 함수형 뷰로 바뀌었으니 url수정이 필요하다! urls.py 사실 수정이랄 것도 없다... .as_view()만 다 빼주면 된다. 2. R 제일 먼저(쉬운) R. 게시글 전체를 띄워주는 기능 대신, 자신이 작성한 게시글만 띄워주도록 해보자. 해당 함수는 PostChangeLV, html명은 post_change_list.html ! views.py 이 정도만 돼도 할만하다! Post라는 모델의 모든 것을 불러왔고, 이를 context에 담아 post_change_list.html에 전달! post_c.. 2021. 1. 6.
728x90
반응형

티스토리툴바