Sumin's Blog

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 우리 프로젝트에..

GraphQLModule.forRoot() : root module 설정 typescript나 NestJS에서 데이터베이스와 통신하기 위해서는 ORM 필요 .env: 환경 변수 이용 entity: 데이터베이스에 저장되는 데이터의 형태를 보여주는 모델 ( DB 테이블에 매핑되는 클래스) @ObjectTypes() 자동으로 스키마를 빌드하기 위해 사용하는 decorator Entity(): TypeORM이 DB에 저장하도록 해줌 Data Mapper vs Active Record DB랑 상호작용할 때 쓰는 패턴 Active Record : 소규모 앱에서 단순하게 사용 Data Mapper : 유지 관리에 도움, 대규모 앱에서 유용 (NestJS에서 이용 방법) Repository: entity와 상호작용을 ..

FireBase 아주 빠르게 무언가를 시작할 수 있도록 도와줌(아이디어를 구상중일 때 많이 사용, 비즈니스 용으로는 많이 사용하지 않음) Securing the Keys react app에서 환경변수를 설정하려면REACT_APP_으로 시작해야함 key들을 .env에 저장 에 저장하는 이유? file에 .env를 작성한다면 .env에 쓴 키들은 git에 올라가지 않음 -> 보안상의 이유로 key,URL 들은 비공개 하지만 React application을 실행하면 서비스를 위해 빌드하고 웹사이트를 띄우면 create-react-app은 이 코드들을 실제 값들로 변환시켜 공개됨(단순히 github에 key를 업로드하지 않기 위함) Router Setup Fragment ( ): 많은 요소들을 render하고..

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..

2.0 Introduction to useEffect useEffect componentDidMount,ComponentWillunMount, componentDidUpdate역할을 실행 2개의 인자를 받는데 첫번째는 function으로써의 effect(componentDidMount), 두번째는 deps 만약 deps가 있다면 effect는 (deps)리스트에 있는 값일때만 값이 변하도록(실행) 활성화(componentWillUpdate) component가 mount되었을 때만 실행시키고 싶다면 빈 dependency전달 ([]) const App=()=>{ const sayHello=()=>{ console.log("Hello"); } const [number,setNumber]=useState(0..

#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..

6.4 Redirecting function Detail({location}){ console.log(location); return Hello ; } 문제 location의 props들이 console에 나타나지만 poster를 눌러서 movie-detail에 들어간 경로가 아닌 url에 /movie-detail이라고 쳐서 들어간 경우, state가 undefined라고 뜸 해결 방법 import React from 'react'; class Detail extends React.Component{ componentDidMount(){ const{location,history}=this.props; if(location.state===undefined){ history.push("/");..

6.3 Sharing Props Between Routes route props function About(props){ console.log(props); } About console에서 4개의 props를 볼 수 있음 (history, location, match, staticContext) 아직 about으로 전송되지 않은 react-router에 의해서 넣어진 props들 Route에 있는 모든 router들은 props를 가짐 function Movie({year,title,summary,poster,genres}){ return ( {% raw %}{% endraw %} {title} {year} {genres.map((genre,index)=>( {genre} ))} {summary.slic..

6.2 Building the Navigation 목표 : 네비게이션 (버튼) 만들기 할 일 import Navigation from "./components/Navigation"; 추가 function App 안에 추가 import React from "react"; function Navigation(){ return Home About } // href는 HTML로 페이지를 새로고침시킴 // Home 과 About을 눌러보면 페이지가 새로고침됨 // 리액트가 죽고 새 페이지가 새로고침 export default Navigation; link를 사용해야함 페이지 새로고침 대신 About과 Home페이지 들어가짐 Link를 사용할 경우, Link는 라우터 안에 있어야함 import React from ..