Sumin's Blog

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

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

6.0 Getting Ready for the Router react-router dom : 네비게이션을 만들어주는 패키지 npm install react-router-dom -components 폴더에 , 넣기 routes 폴더에 ,, 넣기 코드 로 옮기기 import React from 'react'; function App(){ return something; } export default App; something이라는 문자만 나옴 react-router dom을 통해 와 에 접근하는 방법 알아야함

6.1 Building the Router 라우터 : url을 확인하고 우리가 라우터에게 무엇을 명령했느냐에 따라 알맞은 component를 불러옴 import { HashRouter,Route} from "react-router-dom"; 추가 import { HashRouter,Route} from "react-router-dom"; import Home from "./routes/Home"; import About from "./routes/About"; function App(){ return ; } HashRouter 먼저 만들고 Route 넣어줌 Route에는 스크린을 넣어주는 것 , 원하는만큼 path를 만들 수 있음 기본 url 들어오면 Home component 보여줌 path about..