Sumin's Blog

모델 이해하기 from django.db import models # Create your models here. class Menu(models.Model): name=models.CharField(max_length=50) description=models.CharField(max_length=100) price=models.IntegerField() img_path=models.CharField(max_length=255) def __str__(self): return self.name model은 class 형태이며 models.Model을 상속받아야함 모델 생성하거나 변경하면 장고에 반영해야함 python manage.py makemigraitions python manage.py migrate..

정적 파일 (static files) : 웹 페이지를 렌더링하는 과정에서 필요한 추가적인 파일 ex) CSS, JS, PNG, FONT 등 정적 파일 넣어주는 구조도 샌드위치 형식 -> foods- static - foods 형식 {% load static %} 템플릿 태그 : static에 있는 정적 파일을 현재 이 템플릿 파일에서 사용한다고 알려주는 것 ( 코드 첫 줄에 쓰면 됨) 정적파일 사용하기 src="images/chicken.jpg" ↓ src={% static 'foods/images/chicken.jpg' %} 기존의 코드를 {% static '경로' %} 형식으로 사용해서 정적파일 사용 Template과 static의 폴더 구조 (앱 이름 - 폴더 이름 - 앱 이름) 샌드위치 구조를 사..

pyenv local {가상환경 이름} 특정 디렉토리에 로컬 가상환경 적용 django-admin startproject {프로젝트 이름} django 프로젝트 생성 python manage.py runserver 만든 사이트 실행시킬 수 있음 http://127.0.0.1:8000/ 링크 들어가면 사이트 실행 가능 !! django 프로젝트 구조 Project Root django 프로젝트의 모든 파일이 담겨있는 최상위 디렉토리 (바깥 Costaurant) Project App 우리 Project의 가장 중심이 되는 App( 안쪽 Costaurant) manage.py Django 프로젝트 관리를 위한 명령어 지원 앱 생성, 데이터베이스 관련 명령, 개발서버 실행 등 db.sqlite3 우리 프로젝트에..

Apollo query를 Axios의 fetch와 함께 POST request 로 보내야함 react Apollo가 뭔가를 얻으면 그걸 저장해둠(다시 request를 기다릴 필요가 없음) -cache import React from "react"; import {gql} from "apollo-boost"; import {useQuery} from "@apollo/react-hooks"; import styled from "styled-components"; import Movie from "../components/Movie"; const GET_MOVIES=gql` # localhost:4000에서 movies에 관한 query 가져옴 { movies{ id medium_cover_image } } ..

React Hooks Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줌 1.0 Introduction to useState class component로 작성한 코드class Appugly extends React.COmponent{ state={ item:1 } render(){ const{item}=this.state; return( Hello CodeSandbox {item} Start editing to see some magic happen! Increment Decrem..

#1 셋업 import React,{Component,Fragment} from "react"; import "./App.css"; class App extends Component{ render(){ return ( Hello; Hello; ); } } export default App; class명 2개 사용 안좋음 .button{ border-radius:50px; padding:5px; min-width:120px; color:white; font-weight:600; -webkit-appearance:none; cursor:pointer; } .button:active, .button:focus{ outline:none; } .button--success{ background-color:#2ec..

graphQl graphql 로 해결할 수 있는 문제 over-fetching : 요청한 영역의 정보보다 많은 정보를 서버에서 받는 것 under-fetching : 어떤 하나를 완성하기 위해 다른 요청들을 해야할 때 발생 (하나를 완성하기 위해 많은 소스를 요청) query database에서 무언가를 요청하고 graphql 언어로 내가 원하는 정보를 알려줄 수 있음 schema 사용자에게 보내거나 사용자로부터 받을 data에 대한 설명 Schema : 데이터에 대한 기술. Query : 데이터베이스로 요청하여 받을 데이터. get data (Read) Mutation : 서버, 데이터베이스, 메모리의 데이터 변경 작업. mutate data. (Create, Upadate, Delete) GraphQ..

Node js URL http://opentutorials.org:3000/main?id=HTML&page=12 http = protocol : 웹브라우저와 웹서버가 데이터를 주고받기 위해 만든 통신규칙 opentutorials.org= host(domain) : 인터넷에 접속되어 있는 각각의 컴퓨터(특정한 인터넷에 연결되어있는 컴퓨터를 가리키는 주소) 3000=port : 접속할 때, 3000번 포트에 연결되어 있는 서버와 통신하게 됨(port 기본 값=80) main =path : 컴퓨터 안에 있는 어떤 디렉토리에 어떤 파일인지 가리킴 id=HTML&page=12=query string : 웹서버에게 보내고 싶은 데이터 전달 쿼리스트링의 시작은 ? 값과 값은 & 로 연결 값의 이름과 값은 = 로 구분..

NestJS nodejs 위에서 움직이는 framework (백엔드를 구성할 수 있도록 해줌) nest new를 통해 nest 프로젝트 create 가능 @Module({ imports: [], controllers: [AppController], providers: [AppService], }) decorator (클래스에 함수 기능을 추가할 수 있음) nestjs는 main.ts가 모든 것을 시작 main.ts : 하나의 모듈에서 applicaion을 생성 const app = await NestFactory.create(AppModule); AppModule -모든 것의 루트 module (Module: 어플리케이션의 일부분(한 가지의 역할을 하는 App)) Controller controller:..

Typescript javascrpit의 superset ( comepile 시, javascript로 compile 됨 ) 예측 가능한 언어이며 읽기 쉬운 코드로 javascript를 더 잘 사용할 수 있게 해줌 Setting Typescript Up tsc: ts파일인 코드를 컴파일해서 .js와 .js.map을 만들어줌 "scripts": { "start":"node index.js", "prestart": "tsc" } yarn start를 실행 시, prestart의 tsc가 먼저 실행되고 start의 node index.js가 만들어지고 실행하게 됨 Interface interface Human{ name:string; age:number; gender:string; } //interface는 ..