삶과 개발

Vue State-Management 문제 Component가 많아지면 분리하기가 어려워진다( Props, Emit) 형제 컴포넌트 사이에는 직접적인 교류가 불가능하다 ( 일단 맨위로 올리고 내려야함) Vuex 4가지 구성요소 state getters mutations state를 변경할때 동기적으로 생각할떄 actions에서 state로 갈수가없다. 그래서 mutations을 거쳐서 data 변경을 가능 동기적인 친구(data 변경 추적) actions : 비동기적으로 변경할떄 VueX 설치하기 vue add vuex 기본적인 설정을 vue가 다 해준다. 세팅하기 vue create 0512 cd 0512 # App 안에 TodoForm과 TodoList를 만들고 TodoList안에 TodoListIt..

사용자 요청 비어있는 HTML 페이지 보내기 HTML에 담긴 JS코드를 다운 다운로드되면 실행 JS코드가 비워저있는 곳을 HTML에 담는다. SPA 이슈들 JS 코드가 많을수록 사용자 대기(처음)시간이 길어진다. 왜써? SPA는 멋지고, 프레임워크를 쓰면 개발을 편하게 할수있기때문입니다. 모듈화 JS파일이 100개면 다운로드 요청이 100개가된다.. 오래걸린다.. Webpack이 해주는 것들 번들링 ES6 문법을 ES5로 변환(w/Babel) 사용하지 않는 코드 제거 (tree-shaking)(중요) JS 용량이 줄어들어 사용자는 더 빨리 화면을 볼수있다. 공백 제거, 코드 축약 등 결과물 크기 쿠기 축소 Vue -cli 개발순서 화면(UI)을 계발한다. > prototyping tool? kakao o..

0510Vuecli 초반 셋팅하기 vue create first-vue-app . 후에 선택창이 뜨면 첫번째 Default([vue 2] babel, eslint) 를 선택해 줍니다. cd first-vue-app ls 했을때 git 폴더? 같은 얘들이 떠야함! (폴더가뜨면 안된다!) npm run serve 위코드로 서버 키기! yarn 이란 것을 깔면 더빠르다 서버 들어가기 http://localhost:8080/ 에 들어가서 "Welcome to Your Vue.js App"가 뜨면 성공! gitignore 셋팅 https://www.toptal.com/developers/gitignore에서 node_modules가있어야하는데 node, vue 를 검색하여 넣어주자 vue cli 를 왜쓸까? 우리..

시작하기(세팅) vue router router 를 복습하기위한 파일 생성해주기 vue 2 를 선택해서 만들어줍니다. vue create second-vue-app . ls 로 확인해보고 second-vue-app 으로 들어가기 cd second-vue-app 서버를 실행해본다 npm run serve 정상적으로 실행이 됐다면 서버를 끄자. 라우트 관련된 설정을 하자 이러한 플러그인들은 제~일 처음 다적어줘야합니다잉~ vue add router 실행해보면 현재 디렉토리에 commit이 안된 파일이있는데 그냥 진행할래? Yes 다시 서버실행 npm run serve 요롷게하면 상단에 Home|About 이라는 네비바가 뜨는데 이동해보면 새로고침이 안뜬다! router의 index.js 를 가보자 index..

Vue.js 프론트 엔드 HTML, CSS , JavaScript Vue.js, React(facebook), Angular(google) Vue.js 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 현대적인 tool과 다양한 라비러리를 통해 SPA(Single page Aplication)를 완벽하게 지원 Evan You (2014) Angular 개발자 출신 학사 미술, 미술사 전공/ 석사 디자인 & 테크놀로지 전공 구글 Angular 보다 더 가볍고, 간편하게 사용할 수 있는 프레임워크를 만들기 위해 개발 SPA 단일 페이지 애플리케이션 현재 페이지를 동적으로 작성, 사용자와 소통하는 웹 애플리케이션 단일 페이지 구성, 처음 페이지만 받아오고 (HTML) 동적으로 DOM을 구성 새로고침 X ..

좋아요 새로고침없이하기! 가상환경만들기 python -m venv venv activate python manage.py migrate python manage.py seed articcles --number=30 python manage.py runserver 브라우저에서 like 을 누르면 json으로 django로 이동하게? articles > templates > index https://github.com/axios/axios CND 활성화 스크립터 넣어주기 https://developer.mozilla.org/ko/docs/Web/API/HTMLOrForeignElement/dataset 에서 script 에서 pk 넣는 방식? 을 확인할수있다 index.html {% extends '..

AJAX 서버와 통신할때 사용한다 Asynchronous Javacript And XML( 비동기식 js와 xml ) 핵심 : XMLHttpRequest(XHR) 서버간 통신 보기 ex) 구글 맵스에서 f12 개발자도구 > network 가고싶은곳으로 가보면 XHR 스캔시에 구글서버 요청을 보낸다. blocking -example 게시판 게시글 1 게시글 2 굉장히 오래 걸리는 어떤 일 게시글 추가 여기서 블로킹이되어 브라우져가 멈춰버린다. 반대로 non-blocking 을살펴보자 hello > bye > done 순으로 뜬다. 개발자 도구 콘솔에서봅시다. 코드 실행 순서는 hello > done > bye 가 맞다 왜? 0초로 바꿔도 hello > bye > done 이다. 왜???? wep api 보..

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 Dog API img { height: 500px; } Dog API Get dog Cat API Get cat /////////////////////////////////////////////////////////////////dog const API_URI = 'https://dog.ceo/api/breeds/image/random' // 교수님 코드 // function getDog() { // axio..

종합 DJANGO code 목차 CRUD articles html accounts html 1. CRUD settings.py """ Django settings for crud project. Generated by 'django-admin startproject' using Django 3.1.7. For more information on this file, see https://docs.djangoproject.com/en/3.1/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/3.1/ref/settings/ """ from pathlib impor..

가상환경 만들기 python -m venv venv source venv/Scripts/activate 우리가 필요한것은 django django_seed (초기 데이터를 ) djangorestframework 가필요하다 pip install django django_seed djangorestframework python manage.py migrate django_seed 는 setting.py 에서 수정이 필요함 INSTALLED_APPS = [ 'django_seed', ] python manage.py seed articles --number=100 데이터 100개가 만들어졌는지 데이터베이스를 열어보겠습니다. 이후 config > urls.py 로 ㄱㄱ from django.contrib imp..