728x90 전체 글66 @EntityRepository()를 대신한 repository 생성 방법 새로운 토이 프로젝트를 만들면서 겸사겸사 백엔드 찍먹을 위해 nestjs를 이용해보려고 했다. 로컬 환경에서 CRUD를 만드는게 생각보다 간단해서, 본격적으로 DB와 연결을 시키려고 하니, 별도의 repository를 만들어 연동시켜줘야 한다고 한다. 일반적으로 nest는 request -> controller -> service -> controller -> response 순으로 작동하나, DB와 관련된 일을 시키기 위해서는 repository를 생성해야한다고 한다. 즉, request -> controller -> service -> repo* -> service -> controller -> response 로 한 단계가 추가된다. (Repostitory pattern) @EntityReposit.. 2022. 12. 28. Next JS에서 react-responsive 적용하기 이번에 새로 만들고 있는 토이 프로젝트를 작업하던 중, 모바일 화면일때만 화면을 보여주고 싶었다. 단, 모든 컴포넌트에 미디어쿼리를 통해 작성해줄 수는 없는 노릇이기에 react-responsive를 적용해 화면이 481px을 넘어가면 고정된 페이지를 보여줄 수 있도록 코드를 작성했다. // 패키지 설치 yarn add react-responsive // hook // useMideaQuery.tsx export const Desktop = ({ children }: any) => { const isDesktop = useMediaQuery({ minWidth: 481, }); return isDesktop ? children : null; }; export const Mobile = ({ childre.. 2022. 12. 18. NextJs에서의 로딩 처리 모든 페이지를 미리 렌더링하는 NextJS 특성상, 다른 페이지로 라우팅이 진행될때, 사용자는 가만히 멈춰있는 화면을 보게될 수 있다. 오늘은 nextJS에서의 로딩을 적용해줘봤다. // _app.tsx // 미리 만들어놓은 로딩 훅과 로딩 스피너 import { useLoading } from "src/hooks/useLoading"; import { LoadingSpinner } from "src/components/videos/video/LoadingSpinner"; {isLoading ? : null} 로딩스피너는 CSS로 만들어도 좋고, SVG나 GIF, 라이브러리 등 자유롭게 적용하면 좋을 것 같다. // useLoading.ts import Router from "next/router"; i.. 2022. 11. 29. TypeScript 기초 문법 정리 TypeScript 기본 문법 기본 TS 타입 선언 // 문자열 let str: string = "hello"; // 숫자 let num: number = 100; // 배열 let arr: Array = [10,20,30]; let arr2: number[] = [10,20,30]; let arr3: Array = ["hello","hellololo" ]; let arr4: [string, number] = ["hello", 182]; // 객체 let obj:object = {name:"hello", age:29}; let person:{name: string, age:number}; // Boolean let isAvaliable: boolean = true; // 함수 선언 parameter와 r.. 2022. 11. 1. javaScript 스프레드 연산자로 객체 다뤄보기 js에서 객체는 동일한 key값(프로퍼티명)이 있는 경우 뒤의 프로퍼티가 첫 번째 프로퍼티를 덮어쓴다. let a = {x: 1, x: 2} console.log(a) // {x: 2} 이를 이용해 객체를 스프레드 연산자로 가져오면서 수정을 해줄 수 있다. let obj = { name: "john", job: "dev", }; console.log({ ...obj, job: "devdevdevdevdev" }); // => { name: 'john', job: 'devdevdevdevdev' } 혹시라도 객체 안에 객체가 또다시 있는 형식의 데이터에서 수정이 이뤄져야 한다면, 유사하게 아래와 같이 적용해줄 수 있다. let obj = { name: "1223", job: "222222", count: .. 2022. 10. 7. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음 728x90
