분류 전체보기 477

[부스트코스] 2. 자바스크립트 기초 (웹과 자바스크립트 part 2. 'CSS 제어하기')

1. 데이터 타입(문자열과 숫자) [Javascript의 데이터 타입] Javascript에는 6가지 데이터타입이 존재합니다. Boolean Null Undefined Number (en-US) String Symbol 2. 변수와 대입연산자 변수 변수란 말 그대로 바뀔 수 있는 수를 말합니다. 예를 들어서 다음 코드를 실행한다고 해 봅시다. ; var : 자바스크립트에서는 변수 이름 앞에 특정 데이터 타입을 명시해 줄 필요없이 'var' 를 붙이면 됩니다. 이 때 var은 변수의 영어 단어인 variable의 약자입니다. (파이썬과 비슷한 느낌) 3. 웹브라우저 제어(Js, CSS) [Js에서 CSS를 다룬는 법] 1. div 태그와 span 태그 div 태그는 화면 전체를 사용 [ 부분화면 - 따라서..

JavaScript 2021.07.18

[부스트코스] 1. 자바스크립트 기초 (웹과 자바스크립트 part 1. '자바스크립트 사용법')

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 1. WEB과 Javascript, HTML 1. 태초에 HTML이 존재하였지만 정적인 이미지, 정적인 기능만을 제공하였다. 2. 동적, 즉 사용자와 반응하는 웹을 만들기위해 JavaScript가 탄생했다고 한다. 2. Javascript의 역할 Javascript의 가장 중요한 역할는 사용자와 상호작용할 수 있게 하는 것입니다. 아래의 웹페이지에서 사용자가 night/day 버튼을 누를 때마다 페이지의 색깔이 바뀌는 것을 그 예시이죠. * JS 실행하는 방법 (크롬 기준으로) : 웹 페이지에서 '오른쪽 버튼 > 검사'를 누르면 새로운 창이 뜨게 됩니다. 여기에서 Elements 탭을 보면, 페이지를 구성하는 HTML 태그들이 ..

JavaScript 2021.07.18

[Django 게시판] 3. 카카오 지도 맵 api 생성하기(Kakao map api)

이번에는 카카오 지도 Api Map을 사용하여 웹 화면에 지도 위치를 띄어보겠다. ​ 1. 카카오 개발자 사이트 접속 후 키 받기 - 카카오맵(kakao 지도) javascript API를 사용하기 위해서는 키를 발급 받아야 합니다. ​ 1) 아래 사이트에 접속 후 카카오 계정 로그인 ​ 2) 개발자 등록 및 앱 생성 ​ 3) 웹 플랫폼 추가 : 앱 서낵 - [설정] - [일반] - [플랫폼 추가] - 웹 선택 후 추가 ​ 4) 사이트 도메인 등록 : 내가 이용할 웹 도메인을 입력해야 합니다. ex) http://localhost:8000 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니..

Django/응용 2021.06.14

[Django 게시판] 2.CBV를 FBV로 (CRUD-Create)

Create (fbv) 앞에서 작성한 cbv기반 createview를 fbv로 바꿔보겠다. ​ 1. templates.html create.html을 다 지우기 아까우니까, 그냥 새로 만들어준다. ​ 1)create2.html - FBV 형식으로 객체를 생성할때에도, 파일이나 이미지를 올리기 위해서 enctype = "multipart/form-data"를 필수로 적어준다. ​ - cbv방식에서는 따로 method를 적어주지 않았지만,(default = get 방식), 보안상 가려져야하는 정보는 post방식으로 넘겨주는 것이 좋다. {% csrf_token %} 디자이너 생성 페이지 Create 2) urls.py - create_fbv 함수를 따로 만들어 줄것이기에 미리, urls.py에 선언해 준다...

Django/응용 2021.06.13

[Django 게시판] 1. generic View를 이용한 CRUD

내 마음데로 게시판 아닌 게시판을 만들거다. ​ CRUD 1. Read (ListView) ​ Fbv 를 이용하면 여러가지 추가할 사항이 많지만 generic cbv는 간단하고 코드 문장을 간결하게 작성할 수 있다. ​ from django.shortcuts import render from . import models #CBV 사용 from django.views.generic import CreateView,ListView #cbv #Read(게시물 나열) class DesignerList(ListView): model = models.Designer context_object_name = 'designer' #객체를 부르는 이름 template_name='home.html' #Default 연결 값..

Django/응용 2021.06.13

[Django] 장고 입문 6. 템플릿 상속(Templates 상속, base.html)

1. Templates 상속 템플릿 상속이란, html 화면 상 계속해서 중복되는 부분을 별도의 .html 분류하여 1번만 작성하고 계속해서 재사용하는 아주 편리한 기능이다. ​ - 주로 base.html로 이름을 정하고, 베너(header)나 footer부분, 전체적인 틀을 정의한다. ​ ​ base.html 1. 먼저 tempaltes.html 안에 base.html 파일을 생성한다. 2. base.html이 뼈대가 되어 재사용 되어진다. 3. 컨텐츠를 채워놓을 공간을 content 블럭으로 구분한다. 이부분이 모든 페이지에 공통으로 들어갈 요소 {% block content %} {% comment %} base.html을 상속한 템플릿에서 구현해야 하는 영역 {% endcommen..

Django/기초 2021.06.13

[Django] 장고입문 5. model, 웹 화면(html, 프론트)에 출력하기, 뿌리기

django model을 명시해주었다면, 이제 이 모델을 이용하여 Web 화면에 출력을 할 수 있다. ​ (순서) 1. models.py 정의 2. views.py 함수 작성 3. urls.py 연결 4. html에 템플릿 변수로 데이터 불러오기 ​ 1. views.py 작성 ( QuerySet 과 템플릿 변수) ​ 앞에서 정의한 Designer Model을 이용한다. 1. 먼저 views.py 안에 models.py를 import 해준다. 2. 함수 안에 모델 객체를 불러올 변수를 선언한다. (designer) 3. designer = models.Designer.objects.all() 의 뜻은, designer 변수 안에 Designers 모델의 모든 객체 정보를 담겠다는 의미이다. 4. 7번째줄의..

Django/기초 2021.06.13

[Django] 장고 입문 4. Model 과 Admin

실습을 하기 전에 장고 model과 admin의 이해도를 올리기위한 개념을 집고 넘어간다. ​ 1. 장고 ORM이란 무엇인가? - ORM이란 (Object-Relational Mapping), 객체(Object)와 관계형 데이터베이스의 데이터를 매핑해주는것을 의미한다. - 서버에서 데이터베이스의 모델들을 관리하기 위해서는 관계형 데이터베이스를 연동하여 SQL언어로 관리해야한다. - 하지만 ORM 라이브러리는 각 프로그래밍 언어를 활용하여 sql 코드로 변환시켜 활용한다. 따라서 따로 sql구문을 몰라도 데이터들을 관리(CRUD) 할 수 있도록 도와준다. - 장고에서는 Django Model 이 ORM이다. ​ (ORM 예시) Java : Hibernate / PHP : Propel & Doctrine /..

Django/기초 2021.06.13

[Django] 장고 입문 3. views.py, urls.py 연결

1. Views.py * 장고 project에 앱을 연결했다면, views.py 와 urls.py를 설정해 주어야한다. ​ - views.py의 역할은, html파일이 화면에 어떻게 보일지를 설정한다. - views.py는 들어오는 요청 url을 파싱하여 라우팅 처리된 특정 요청을 처리하는 공간이다. (화면에 뿌리는 방식, 메소드, 함수와 비슷함) ​ - views.py를 작성하는 방법은 2가지가 있다. 이에 대해서는 나중에 공부를 하도록 하자 1. FBV - 함수 기반의 뷰 (Function Based View) 2. CBV - 클래스 기반의 뷰 (Class Based View) FBV 방식 - 오타났네요 render 입니다 ^^ * 위의 예시 사진은, "home"이라는 이름의 함수를 정의해준 것이다...

Django/기초 2021.06.13

[Django] 장고 입문 2. 프로젝트 & 앱 생성, 연동

1.장고 프로젝트 생성 * 가상환경을 활성화 시켰으면 프로젝트 폴더를 생성하면 된다. 명령어는, $ django-admin startproject 2. 장고 서버 작동 * 장고 프로젝트를 만들면, 드디어 서버를 돌릴 수 있다. 1) 프로젝트 폴더로 이동 2) runserver 명령어 입력 $ python manage.py ruserver - runserver 동작시, 문제가 없다면 포트 주소가 생성되고 Ctrl+클릭시 웹서버로 이동한다. - 서버를 종료하고싶다면 Ctrl + c 를 입력하면 runserver가 종료된다. (장고 서버 닫기) ​ 3. App 생성하기 - 프로젝트폴더를 성공적으로 생성했다면 프로젝트 폴더안에 App폴더를 생성할 수 있다. - App들이 모여서 프로젝트가 완성되는것이다. - A..

Django/기초 2021.06.13