JH 개발 블로그

graphql nexus 를 치면 인강도 없고.. 자료도 없다. 공식 문서조차 영어로 되어 있어서 이해하기 어렵다. 그래서 1도 모르는 nexus 사용자들을 위해 내가 번역해보고 이해해본다. 참고로 graphQL 의 기초 지식이 있어야 더 잘 이해할 수 있을 것이다. 또한 공식문서를 여러번 읽어보면 설명이 잘 되어있음을 느낀다. 공식문서를 읽고 느낀 점은... nexus 를 통해 graphQL 의 스키마를 작성할 수 있는 것 같다. 그리고 prisma 를 통해 데이터베이스 마이그레이션을 한다. The nexus package The ts-node-dev package to run your app Nexus project 레이아웃과 실행 GraphQL Playground 설치 -> p..

https://stackoverflow.com/questions/68285637/got-type-void-is-not-assignable-to-type-void-in-react-typescript got Type 'void' is not assignable to type '() => void' in react typescript I tried to pass the props like to another component. I write the props like interface AccProps { deleteAcc: () => void; } and call the fu... stackoverflow.com container const handlePage = (page: number): void => {..

체크박스 typescript 참고 useState Type 지정하는 방법 참고하자. (인턴때 헤맸던 부분) 1. DatePicker 기본값: 접속한 날짜를 기준으로 30일간의 데이터를 조회할 수 있도록 설정 - 예외처리 최대 기간: 최대로 조회할 수 있는 날짜의 범위는 1년 날짜 조회: 오늘 이후의 날짜는 조회할 수 없도록 예외처리 시작일과 종료일: 시작일이 종료일을 넘을 수 없도록 예외처리 2. 검색 창 글자 제한: 20글자 이상의 검색어를 입력할 수 없도록 예외처리 3. 검색 초기화 조회 기간 및 검색어, 필터링(성별, 광고 종류, 비고) 초기화 및 데이터 Reload 4. 필터링 기본값: 모든 체크박스들이 체크되도록 기본값 설정 예외처리: 각각의 필터링 조건들에는 최소 하나의 체크 ..

인턴때 했던 페이지네이션 코드. react + material ui + typescript 사용 import * as React from "react"; import { useNavigate } from "react-router-dom"; import Pagination from "@mui/material/Pagination"; import Stack from "@mui/material/Stack"; import styled from "styled-components"; export interface PageType { page: number; setPage: React.Dispatch; totalPage: number; } export default function PaginationRounded(pr..

먼저 원본을 포크 뜬다 그러면 내 레포가 생성된다. ssh 로 clone code 한다. git clone git@github.com:내계정/git 주소 명령을 친다. code . git remote -v 로 확인 (origin 밖에 없음. origin 은 내꺼) git remote add upstream 오리지널 주소 git remote -v 로 다음과 같은지 확인 1. origin : 내 주소 2. upstream : 오리지널 주소 origin 에서 작업을 하고 이 수정사항을 upstream 에 반영하고 싶을 때는 upstream 에 PR 날린다. "yarn" 으로 설치 ( =npm install 과 유사 ) "yarn dev" 란 (뷰) REACT_APP_NODE_ENV=development rea..

commonJs - 자바스크립트의 모듈화를 위한 프로젝트 중 하나 임 - 2009년 ServerJS의 이름으로 시작해 다시 CommonJS로 이름이 변경됨 - CommonJS를 구분하는 가장 쉬운 방법으로 require()와 module.exports를 사용하는 것으로 판단할 수 있음. (ECMA Script 모듈의 경우 import, export 사용) - Class, Singleton 등을 사용할 수 있음 - Node의 경우 CommonJS를 기본으로 사용함 - Webpack 역시 CommonJS를 기본으로 사용함 그럼 commonJs 와 es6 를 비교해보자!! 먼저 자바스크립트의 모듈시스템에 대해 설명하자면 기존에는 html 파일에서 태그를 이용하여 필요한 자바스크립트 파일들을 불러왔다. 이러한 ..

model Profile { id Int @id @default(autoincrement()) bio String user User @relation(fields: [userId], references: [id]) ◀️ profile에 연결된 user입니다. userId Int 외래키 ◀️(userId)입니다. } @relation Database상 FOREIGN KEY/REFERENCES에 매칭되는 속성입니다. model상 외래키로 설정 할 필드와, 다른 모델의 PRIMARY KEY를 인수로 가집니다 @relation 의 예시 https://www.prisma.io/docs/concepts/components/prisma-schema/relations 사진 참고 relation 는 프리즈마 스키마에서 ..

app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{ res.writeHead(200, {'Content-Type': 'text/plain'}) res.end(JSON.stringify({hello: 'zerocho'})); }); 노드에서 json 으로 보낼 때는 다음과 같았다. 하지만 express 에서는 app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{ res.json({hello: 'zerocho'}); }); 이렇게 줄여준다. express 의 방식으로 실행 결과, 네트워크 탭을 보자. app.use((req:Request, res:Resp..

import express, { Request, Response, NextFunction } from "express"; const app = express(); app.set('port', process.env.PORT || 3000) app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{ res.send('welcome!'); }); app.listen(app.get('port'), () => { console.log(`server listening on port : `); }) [ 코드 설명 ] app.set 으로 port 라는 변수에 심는 역할을 한다. 지금은 process.env 에 설정해둔 PORT 가 없으므로 3000..

routes: 라우팅 정보를 가집니다. controller: 라우팅 정보에 의해 전달된 처리를 하는 로직입니다. 여기서 다시 signUpService 호출 ↓ services : controller 에서 전달된 정보에 의해서 DB 처리 등을 담당합니다. db.findOne , db.save() 등의 메서드를 이용합니다. Users.findOne({ name: 'zerocho' }, (err, result) => { if (err) { throw err; } Users.update({ name: result.name }, { updated: true, }, (err, updateResult) => { if (err) { throw err; } con..