분류 전체보기

    ERROR

    npm run build 에러

    This relative module was not found: * ./src/main.js in multi ./src/main.js 해결: 웹팩 설정 문제였다. 웹팩빌드작업의 시작포인트가 디폴트로 main.js 가 잡혀있는데 나는 main.js를 다른 이름으로 수정해버렸다. 따라서 그 시작포인트도 수정된 곳으로 바꿔주어야하는 것이다. vue.config.js 에서 pages 속성으로 entry에 바꾼 main.js의 이름을 넣어주었다.

    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (11)

    Webpack 을 이용해 3개 페이지 만들기 (home.html, post_list.html, post_detail.html) 보통 webpack은 최종결과물로 1개의 html을 생성함. 예로 앞서 dist아래 1개의html을 생성했었다. 여러개 html을 생성하고 싶다면 vue.config.js 에서 pages라는 설정항목을 사용한다. 1 module.exports = { transpileDependencies: [ 'vuetify' ], outputDir: 'dist', publicPath: '/', assetsDir: 'static', pages: { home: { template: 'public/index.html', entry: 'src/pages/main_home.js', filename: '..

    ERROR

    manage.py, TypeError: unsupported operand type(s) for /: 'str' and 'str'

    develop.py 에서 DATABASES 의 'NAME'을 'NAME': BASE_DIR, 'db.sqlite3' 에서 'NAME': os.path.join(BASE_DIR , 'db.sqlite3') 로 교체한 후 정상 작동되었다.

    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (10)

    Vue-Django 연동원리 웹 프로그램에서 css나 img, js 파일들은 static file 혹은 assets file 이라고 한다. django 측면에서 static 파일은 지칭하는 url로 보통 /static/ 이라는 url을 사용한다. /static/이라는 url이 들어오면 django는 루트폴더 밑에 static 폴더나 (~/static/) 루트 폴더 밑에 앱 디렉토리, 그 밑에 static 폴더를 찾게 된다. (~/blog/static/) 따라서 dist아래 css, img, js를 static 폴더 밑에 생성되게 한 다음에 django로 이동하자. 1. vue.config.js 수정 (웹팩설정항목 추가) module.exports = { transpileDependencies: [ 'vu..

    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (9)

    Vue-Django 연동원리 vuetifyjs.com 에서 pre-made layouts 이용. App.vue를 수정해준다. mdi-view-dashboard dashboard mdi-cog Settings Application © 2020 npm run build 명령을 실행. : package.json 에서 확인해보면 scripts 에 build명령은 vue-cli-service build 으로 정의된 것을 볼 수 있음. 실행하면 배포버전의 파일이 dist 폴더 아래에 생성된다. 이것을 django에 전달해줄 것이다.

    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (8)

    Vue-Django 연동원리 1. vue-cli 시작하기 환경 Nodejs : v14.15.5 npm : v6.14.11 vue-cli : v4.5.12 // 버전 업데이트 명령: npm update @vue/cli --global yarn: v1.22.5 vue 프로젝트 생성 vue create frontend: 파일명 frontend 로 vue 프로젝트 생성* 초기설정은 default로 하였다. 개발용 웹서버 실행 npm run serve(yarn을 설치해두어서 yarn을 쓸 것임.) * 터미널 창 누르고 ctrl+c 하면 작업 끝낼 수 있음. vuetify 라이브러리 설치 : vue add vuetify 옵션: defaultsrc를 확인해보면 vuetify.js를 plugins에서 확인할 수 있다.

    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (7)

    settings.py 분리 개발과정에서 settings.py와 개발이 끝난 후 소스를 운영서버에 배포하는 경우에 settings.py 가 달라지기 때문이다. (SECRET_KEY, DEBUG, ALLOWED_HOSTS, DATABASES 를 변경할 것) 1. mysite 아래 settings python package를 생성 : settings 밑에는 기존의 settings.py를 (1) base.py, (2) develop.py, (3) product.py 로 분리할 것이다. (1) 공통항목, (2) 개발모드에서만 필요한 항목들, (3) 운영모드에서만 필요한 설정항목들 2. 기존의 settings.py를 mysite/settings 아래로 cut/paste 후 이름을 base.py로 변경해준다. 3. ..

    [Django Tutorial] Blog 만들기 (6)
    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (6)

    User 모델 Customization 1. models.py 에서 owner 설정 * on_delete가 CASCADE 방식이라는 의미는 외래키로 잡혀있는 User table에서 특정 레코드가 삭제되었을 때 그 레코드에 연결되어 있는 Post table의 레코드도 같이 삭제한다는 의미 class Post(models.Model): title= models.CharField(verbose_name='TITLE',max_length=50) #제목 description= models.CharField('DESCRIPTION', max_length=100, blank=True, help_text='simple description text.' )#요약 content= models.TextField('CONTE..

    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (5)

    Tag vue.js 작성전 3가지를 수정한다. 1. post table의 tags column 추가 2. post table의 owner column 추가 3. settings.py를 분리해서 개발용과 배포용으로 나눈다. * 블로그에 태그 기능을 개발하는 경우에 직접 개발할수도 있고 이미 나와있는 장고 패키지를 사용할 수도 있다. (구글에 django tag 검색하거나 djangopackages.org 에서 tag정도로 검색해보면 많음. 깃허브와 도큐먼트를 보고 사용해보자.) a. 설치 파이참 > File > Settings > Project > Python Interpreter > + > django-taggit 검색 > Install Package > OK (django taggit을 설치한 것은 s..

    [Django Tutorial] Blog 만들기 (4)
    웹 프로그래밍

    [Django Tutorial] Blog 만들기 (4)

    폴더 위치에 대한 설명 django에서는 파일의 위치가 중요하다. 파일이 프로젝트 전체에 속한 것인지 앱 하나에 속한 것인지를 잘 구분해야한다. mysite 폴더를 프로젝트 dir, blog 폴더를 app dir, 최상단(backend 폴더)을 프로젝트 루트 dir or 프로젝트 베이스 dir 로 정의하였다. template dir도 2개가 있는데 루트 밑에 있는 dir을 프로젝트 템플릿 dir, app 밑의 dir를 앱 템플릿 dir로 정의하였다. 반면 models.py는 항상 특정 app에 속해야한다.

티스토리툴바