JayGo 개발 연습장

Udemy The Web Developer 부트캠프 2024>하나의 파일에서 Express의 모든 라우트 경로에 대한 미들웨어를 처리할 수 있지만, 서비스가 커질수록 하나의 파일에서 모든 라우팅 로직을 처리하는 건 유지보수를 더 어렵게 만드는 원인이 된다.이런 문제 때문에, 어느 정도 규모 있는 서비스를 만들 땐 보통 라우팅 경로에 따라 모듈을 쪼개서 관리하는 것이 일반적이다.이때 express.Router 메서드가 사용된다. express.Ruouter는 router 객체를 반환하며, router 객체가 제공하는 get post put patch delete 등 메서드를 통해 라우팅 로직을 처리할 수 있다.보통은 routes와 같은 이름으로 디렉토리를 만든 후 라우터들을 목적에 따라 구분하고, 각 모듈..

Udemy The Web Developer 부트캠프 2024>MongoDB는 NoSQL이지만, SQL에서 테이블 간 관계를 맺고, join으로 필요한 데이터를 조합해 사용하는 것과 유사한 기능이 제공된다.MongoDB에서 관계의 형성은 도큐먼트에 필드를 추가해서 맺어진다. SQL에서 테이블에 column을 추가해서 추가된 열에 관계가 맺어질 테이블의 정보를 저장하는 것과 유사하다.도큐먼트에 관계를 위한 필드를 추가할 땐 스키마에 { type: Schema.Types.ObjectId, ref: 'User' } 형태로 사용할 수 있다. 여기서 ref에 정의된User 값 위치에는 관계를 형성하고 싶은 콜렉션의 이름을 넣어주면 된다.type에 사용된 Schema.Types.ObjectId는 관계를 형성할 콜렉션..

Udemy The Web Developer 부트캠프 2024>new mongoose.Schema()에 다양한 스키마 유효성 설정을 추가할 수 있다.필드명 후 : { } 객체 안에 값을 넣으면 되는데, 굉장히 다양한 속성들이 제공된다.required를 true로 설정하면 해당 필드를 필수 필드로 요구할 수 있다.default 옵션에 값을 전달하면 해당 필드에 대한 값이 없을 경우 자동으로 사전에 정의해둔 초기화 값이 들어가도록 할 수 있다.필드의 값이 참조형, 예를 들어 배열일 경우, [String]과 같은 형식으로 정의하면 문자열 형태의 값들을 포함하는 배열임을 나타낼 수 있다.필드의 값이 참조형, 예를 들어 객체일 경우, 필요한 필드와 그에 대한 속성을 중첩된 형태로 넣어줄 수 있다. 예를 들어, qt..

useState에 대해서useState 구현 내용을 살펴보기 전에, 구현해야 할 훅에 대해 간단하게 정리해 봤다.리액트에는 상태가 변경되면 화면을 리렌더링 해주는 '선언적 UI 방식'이 사용된다. 그리고, 이를 위해 리액트는 자신이 관리해야 할 상태가 어떤 것인지를 알아야 한다.컴포넌트 내부에서 선언된 일반 변수는 리액트가 관리하는 상태로 등록되지 않았기 때문에 리액트가 변화를 추적하지 못하고, 값의 변화에 대한 리렌더링 동작을 처리해주지 못한다. 이런 상황에서 useState가 사용된다. useState는 리액트가 변화를 추적할 상태를 생성할 때 사용된다.import { useState } from 'react'const App = () => { const [count, setCount] = useS..

Udemy The Web Developer 부트캠프 2024>데이터베이스는 기본적으로 프로그래밍 언어를 지원하지 않는다. 그래서, 클라이언트에서 서버로 온 데이터가 데이터베이스로 들어가야할 때 '객체' 형태인 데이터를 데이터베이스에서 처리 가능한 '문자열' 형태로 변환해주는 게 필요하고, 반대로 데이터베이스의 데이터가 클라이언트로 내려갈 땐 역으로 '문자열'로 된 데이터를 프로그래밍 언어에서 지원하는 객체형 데이터로 변환해주는 게 필요하다.해당 과정을 수행해주는 도구를 관계형 데이터베이스에서는 ORM, 몽고 DB와 같은 NoSQL에선 ODM이라고 부른다.몽고 DB의 대표적인 ODM으론 Mongoose가 있다.Mongoose의 목적은 자바스크립트 언어와의 상호작용을 더 수월하게 해주는 것이다. 단순히 직렬..

useState 직접 구현하기useState는 상태와, 상태를 업데이트할 때 사용되는 setState 값을 배열로 반환해 준다.컴포넌트들이 실행되면서 useState는 여러 번 호출될 수 있다. 여러 번 호출될 때마다 클로저로 관리되는 state의 참조가 중복되면 이후에 실행된 useState에서 state를 덮어 씌우는 문제가 발생한다. 이런 경우에 적절하게 대응하기 위해서 클로저로 관리하는 states를 배열로 관리하고, useState의 실행 순서에 따라서 상태를 인덱스로 관리하는 걸로 했다.컴포넌트의 구조가 똑같다면, 상태는 바뀔 수 있지만 useState가 호출되는 순서는 동일할 것이다. 그 점을 고려해야 한다.state는 값이지만, 값을 직접 변경하려고 하면 컴포넌트 간 공유된 상태의 연결이 ..

Udemy The Web Developer 부트캠프 2024>데이터베이스는 데이터 저장, 관리, 보안 유지 등의 작업을 수행해 주는 도구이다.SQL은 테이블 간 관계를 형성하는 데이터 베이스 운영 방식이다. 사전에 데이터베이스 설계 규칙에 근거해서 엄격한 테이블 구조 정의를 하는 게 필요하고, 실제 사용할 때에도 해당 설계를 고려해 관계형으로 데이터를 join해 사용한다.SQL을 지원하는 데이터베이스로는 MySQL, PostgreSQL 등이 있다.SQL이 아닌 모든 데이터베이스는 NoSQL이다. SQL이 No, 즉 '아니다'라는 뜻인 만큼, 이름부터가 상당히 직관적이다.NoSQL은 사전에 엄격한 테이블 구조에 대한 설계를 갖추지 않고, 좀 더 유연하게 사용할 수 있다.보통은 하나의 테이블에 모든 데이터를..

Udemy The Web Developer 부트캠프 2024>form 태그에는 action 속성이 있으며, 해당 속성에 http 요청을 보낼 URL 경로를 입력하고, method로 get post patch 등 메서드를 입력하면 폼 정보 입력 시 곧바로 요청을 보낼 수 있다.POST 요청을 예를 들면, POST 할 데이터는 요청의 body에 담겨서 전달되는데, form 태그의 action 요청은 브라우저의 기본 데이터 전송 타입인 application/x-www-form-urlencoded 타입이다(URL 뒤에 ?{key}={value} 형태로 전달할 데이터를 체이닝하는 방식으로 사용된다).application/x-www-form-urlencoded 타입으로 전달된 데이터를 Express 서버에서 받아주..

리액트 render 함수란?리액트는 JSX 구문, 또는 React.createElement를 사용해 표현한 화면의 요소들을 가상의 자바스크립트 객체(Virtual DOM)로 변환한다.Virtual DOM은 DOM에 대한 모든 정보를 가지고 있지만, 실제 DOM은 아니다. 메모리 상에만 존재하는 자료 구조이기 때문에, 분석된 Virtual DOM을 실제 DOM으로 업데이트해주는 과정이 필요하다. 해당 과정을 진행해 주는 함수가 render다.Vite로 리액트-타입스크립트 개발 환경을 빌드해주면 main.tsx 파일에 아래와 같은 코드가 처음 세팅된다.import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import '...

Udemy The Web Developer 부트캠프 2024>Express는 Node 런타임을 이용해 서버 구축을 좀 더 수월하게 할 수 있도록 도와주는 프레임워크다.Node 환경에서 require('express')로 express 함수를 불러오고, express()로 함수를 호출해주면 프레임워크에 해당하는 객체가 반환된다. 보통은 app이라는 이름으로 값을 받아서 사용한다(아래에선 const app = express()로 값을 받아왔다는 전제로, Express 객체를 app이라고 지칭하겠다).express 함수(app)가 반환하는 객체에는 서버의 처리를 위한 다양한 값과 메서드들이 있다. 해당 프로퍼티들을 사용해서 원하는 서버 로직을 처리할 수 있다.app.listen을 사용하면 서버를 실행하고, 원..