JH 개발 블로그

인턴때 했던 페이지네이션 코드. 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..

REST API (Representational State Transfer) 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법 /user 이면 사용자 정보에 관한 정보를 요청하는 것 /post 면 게시글에 관련된 자원을 요청하는 것 HTTP 요청 메서드 : GET, POST, PUT, PATCH, DELETE HTTP 프로토콜 클라이언트가 누구든 서버와 HTTP 프로토콜로 소통 가능 iOS, 안드로이트, 웹이 모두 같은 주소로 요청을 보낼 수 있음 서버와 클라이언트 분리 RESTful REST API 를 사용한 주소 체계를 이용하는 서버 GET /user 는 사용자를 조회하는 요청, POST /user 는 사용자를 등록하는 요청 래스트풀하다~~~~ 다음과 같이 작성해보자. 네트워크탭 -> Head..

const http = require('http'); const fs = require('fs').promises; const server = http.createServer(async (req:Request, res:Response)=> { try { if(req.method ==='GET'){ if(req.url === '/'){ const data = await fs.readFile('./server2.html'); res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'}); return res.end(data); } else if (req.url === '/about'){ const data = await fs.readFile('./ser..

node.js 코딩 패턴 Routes - Controllers - Services node.js 는 코드의 특성별로 소스 파일을 나눈다고 한다. 처음에 잘 구조를 잡아두어야 유지보수할 때 큰 이득을 볼 수 있다....! 먼저 개념 정리... 모듈 모듈이란 관련된 코드들을 하나의 코드 단위로 캡슐화하는 것을 말한다. 다음과 같은 greeting.js 라는 파일이 있다고 하자. 이 파일은 두개의 함수를 포함하고 있다. 모듈 추출하기(exporting) greeting.js 의 코드가 다른 파일에서 사용될 때 그 효용성이 증가할 것이다. 이러한 일을 하기 위해서는 다음과 같은 3가지의 단계를 거쳐야 한다. 1. greeting.js 파일의 코드 첫 부분에 다음과 같은 코드가 존재해야 한다. // greetin..