bloomCode

현재 next13버전에서 사용중 axios 를 통해 api를 보낼때 env설정한 주소로 보내기위해 app 폴더 경로에 (src 경로) api폴더를 만들고 axios.ts 라는 파일을 만들어 axios인스턴스를 만들었다. 사용하는 곳에서 이런식으로 만든 axios폴더를 import하고 경로에는 주소와 api를 제외한 경로만 입력해주면 가독성 개이득

왜 엔티티를 만들어야 하나? 엔티티는 데이터베이스와의 상호작용을 표현하고 제어하기 위한 중요한 개념이다. 데이터베이스와의 매핑: 엔티티를 사용하면 데이터베이스의 테이블과 객체 간의 매핑을 수행할 수 있습니다. 엔티티의 속성은 테이블의 열(Column)에 대응하며, 엔티티 인스턴스는 데이터베이스 레코드에 대응합니다. 이를 통해 객체 지향 프로그래밍과 관계형 데이터베이스 간의 변환 작업을 추상화하여 개발자가 더 직관적이고 편리하게 데이터를 다룰 수 있습니다. 스키마 유지 및 관리: 엔티티를 사용하면 데이터의 스키마를 정의하고 유지할 수 있습니다. 데이터베이스의 테이블 구조, 속성 타입, 관계 등을 엔티티로 표현하여 코드의 일관성과 가독성을 높이고, 데이터베이스 스키마 변경 시 해당 엔티티를 수정함으로써 관련..

npm install typeorm에 후에 npx typeorm init 실행시 생성되는 data-source 설정 파일 중요한 부분은 데이터베이스는 postgreSQL을 사용하므로 type은 postgres synchronize :true는 서버가 실행되면서 entity파일의 변경되는 부분을 확인해서 바로바로 변경해주는 기능 그러므로 개발환경에서는 true, 운영 product환경에서는 false로 해주어야 함

BackEnd npm install pg typeorm reflect-metadata —save npx typeorm init (data-souce 파일 생성, typeorm을 생성하기 위한 설정파일); npm install bcryptjs class-validator class-transformer —save npm install @types/bcryptjs —save-dev npm install jsonwebtoken dotenv cookie --save npm install multer --save pg pg PostgreSQL 데이터베이스와 인터페이스하기 위한 NodeJS 모듈 모음입니다. typeorm ORM (Object Relational Mapping) 이란, 객체와 관계형 데이터베이스의 ..

파라미터 애플리케이션이 인터넷에 있는 리소스를 찾으려면, 리소스를 호스팅 하고 있는 장비와 그 장비 내에서 리소스에접근할 수 있는 서버가 어디에 있는지 알아야 한다. URL의 호스트와 포트 컴포넌트는 그 두가지 정보를 제공해 준다. 경로는 서버가 리소스의 위치를 찾는 데 사용하는 정보이며 HTTP URL에서 경로는 컴포넌트는 '/' 문자를기준으로 경로조각으로 나뉜다. 각 경로 조각은 자체만의 파라미터 컴포넌트를 가질 수 있다. 많은 스킴이 (리소스에 접근하는 데 사용되는 프로토콜을 지정, 예시: HTTP URL의 스킴은 "http://") 객체에 대한 호스트 및 경로 정보만으로는 리소스를 찾지 못한다고 한다. 서버가 어떤 포트를 열어놓고 있는지, 리소스에 접근하기 위해 사용자 이름과 비밀번호를 명시했는지..

해당 문제는 아래에서 빵, 야채, 고기, 빵 순으로 되는 1,2,3,1 숫자의 연속을 찾고 정확한 순서가 되는 숫자들의 모음을 결과로 보내주면 된다. 내가 푼 코드는 위와 같이 제시된 배열의 길이만큼 for문을 돌면서 요소가 1이라면 if문의 들어가 foo라는 변수와 plus라는 변수가 생성된다. foo는 다음 숫자가 2,3,4 라면 계속 증가될 숫자 plus 또한 계속 증가되면서 while문안에서 ingredient현재 돌고 있는 요소 인덱스에 plus 해줄 값이다. 이러면서 만약 완벽한 1,2,3,1, 을 찾는다면 원본배열을 splice 해서 해당 숫자들을 빼준다 그 후에 현재 돌고 있는 i는 0으로 만들면서 처음부터 다시 for문을 도는 건데 이렇게 되면 역시나 알고리즘 처리 문제에서 문제가 발생한..

강의를 듣다 Next의 기능 중 GetServerSideProps를 사용하다 아무런 에러 없이 동작을 안 해서 왜 그런지 파헤쳐보았다. 일단 getServerSideprops의 동작 방식은 서버 사이드 렌더링(SSR) 방식이다. 즉, 서버 측에서만 실행되고 브라우저에서는 실행되지 않는다. 외부 데이터를 서버에서 받아와 초기 데이터로 설정하고 페이지로 전달한다. 페이지 요청 시마다 실행된다. 동적으로 데이터를 가져와 업데이트가 가능하다는 장점이 있다. (Dynamic Rendering) 가져온 데이터를 props에 담고 return하여 컴포넌트에 전달한다. 요청 시 데이터를 가져와야 하는 페이지를 미리 렌더링해야 하는 경우에만 사용한다고 한다 https://nextjs.org/docs/pages/build..

웹 페이지는 여러 객체로 이루어진다 하나 작업의 여러 HTTP 트랜잭션을 수행 페이지 레이아웃을 서술하는 HTML 뼈대를 한 번의 트랜잭션으로 가져온 뒤 이미지, 그래픽 조각 등 을 가져오기 추가로 HTTP 트랜잭션들을 수행한다. 웹 클라이언트에서 웹 서버로 보낸 HTTP 메시지를 요청 메시지, 서버에서 클라이언트로 가는 메시지는 응답 메시지라 부른다. 메시지는 시작줄, 헤더, 본문으로 이루어짐 시작줄 : 무슨 일이 일어났는지를 나타냄 200, 400, 404 등등 헤더: 쌍점으로 구분되어 하나의 이름과 하나의 값으로 구성 Content-type : text/plain 본문 : 요청의 본문은 웹 서버로 데이터를 실어 보냄, 응답의 본문은 클라이언트로 데이터를 반환 TCP 커넥션 HTTP는 애플리케이션 계..

next 강의를 듣던 도중에 강사님의 기가 막힌 에러메시지를 클라이언트로 보내는 코드를 보고 파헤쳐보았다. 중요한 부분은 mapError 함수와 42번째 줄, 43번째 줄이다. 42 번째 줄의 validate class-validator 라이브러리에서 제공하는 함수로, 객체의 유효성을 검사한다. validate 함수는 검사하려는 객체를 인수로 받고, 검사 결과로 Promise를 반환, Promise는 유효성 검사가 완료된 후 검사 결과를 포함하게 된다고 함. user 객체를 인수로 받아 유효성 검사를 수행하며. user 객체는 User 엔티티(모델)의 인스턴스로, email, username, password 등의 속성을 가지고 있고 검사 결과로 나오는 errors 변수에는 유효성 검사에서 발생한 오류들..

next.js 강의를 듣다 페이지를 이동시키기 위해 useRouter를 사용하였다 그러다 갑자기 error node_modules\next\dist\client\router.js (146:14) @ useRouter -error Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted 에러가 발생하였다 일단 강의 해결방법이 게시판에 없어 gpt에게 곧장 물어보았다. 일단 오타확인하고 아니면 다시 설치해 봐 그래도 안되면 캐시 삭제 하라는 건데; 보통 이런 경우는 자기도 모른다는 결론;; 구글링을 해보니 https://nextjs.org/docs/messages/next-router-not-mount..