JayGo 개발 연습장

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는 상태와, 상태를 업데이트할 때 사용되는 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 서버에서 받아주..

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

제로초 Node.js는 그 자체로 서버인 게 아니라, 실행 환경인 '런타임'이다. 서버 기능을 코드를 작성해서 Node.js로 실행하면 서버 역할을 해주는 거고, 데스크톱 제어 코드를 작성해서 Node.js로 실행하면 데스크톱 앱, 모바일이면 모바일처럼 된다. Node.js 자체는 웹 브라우저 이외의 곳에서 자바스크립트를 실행할 수 있도록 해준 실행기이다.노드에서도 멀티 스레드를 구현은 가능하다(14버전부터 지원은 가능하다). 하지만, 구현이 가능하다 뿐이지, 효율적인 개발을 위해 기본적으로 싱글 스레드로 동작하는 걸 기본으로 한다.싱글 스레드로 메인으로 동작하기 때문에 컴퓨터 자원을 효율적으로 사용할 수 있지만, 컴퓨터 자원을 다 돌려서 빠르게 작업을 처리하는 건 노드로 구현하는 게 쉽지 않다.자바스크..

할 일 관리 서비스 만들기createBrowserRouter로 라우팅을 하면 loader라는 속성을 제공한다. 해당 속성을 사용하면 페이지가 라우팅 되는 시점에 곧바로 loader에 등록해 둔 메서드가 실행돼서 서버의 데이터를 받아올 수 있다. 데이터는 컴포넌트에서 useLoaderData 훅을 사용해 받아올 수 있다.useEffect의 의존성 배열로 빈 배열을 넘겨서 처음 컴포넌트가 렌더링 될 시 서버 데이터를 패치할 수도 있지만, 그렇게 되면 useEffect 실행 전에 한 번, useEffect 실행 후 서버 데이터로 상태를 변경한 이후에 또 한 번, 이렇게 총 두 번 렌더링이 발생한다. 하지만 loader와 useLoaderData 훅을 사용하면 라우팅 시점에 페이지의 컴포넌트를 렌더링하기 전에 ..

할 일 관리 서비스 만들기Access Token을 코드의 일반 변수로 정의한 다음 axios의 인스턴스로 관리하면 새로고침 때마다 Access Token이 휘발되는 문제가 있다. Refresh Token이 있었다면 새로고침 시 Refresh Token을 사용해서 토큰을 다시 받아오는 처리를 해줬겠지만, 연습용 API엔 Refresh Token이 구현돼있지 않아서, 일단 local storage에 저장하는 쪽으로 계획을 변경했다.분명 더 찾아보면 로컬 변수에 정적으로 토큰 정보를 받아두면서도 새로 고침에 대응하는 법이 있을 것 같긴 한데, 어떻게 하는건지 잘 모르겠다. 나중에 다시 찾아보고 공부해봐야겠다.API 명세를 보면 필수로 요구되는 params가 있는 경우가 종종 있다. 이럴 땐 headers에 p..

할 일 목록 관리 서비스 작업axios의 인스턴스를 사용하면 headers의 Authorization에 bearer ${accessToken}과 같이 로그인 시 미리 받아온 토큰 정보를 박아두고 사용할 수 있다.http 요청을 보낼 때 따로 키를 챙길 필요 없이 axios 인스턴스로 요청을 바로 보내면 되니까 편리하다.axios의 인터셉터로 request가 보내지기 전의 요청 내용이나 response를 받기 직전의 응답 내용을 사전에 가로채서 원하는 로직을 넣어줄 수도 있다. 예를 들어, 요청을 보내기 전에 Access Token이 없거나, 토큰의 만료 기간이 완료됐다면, 그에 대한 적절한 대응을 해줄 수 있다.만약에 Access Token의 만료 기간을 클라이언트에서 따로 관리하지 않고 있다면 resp..