수업시간 5분 50초때 설명해주시기로는ssr방식은 첫 페이지는 전통적인 방식으로 seo를 가능하게 하고, 이후 페이지 전환시에는 react방식으로 하신다고 하셨는데, 이게 next.js에서 구현된 ssr에 한하여 설명해주신건가요?? 아니면 next가 아니더라도 보편적인 ssr방식을 설명해주신건가요 ?? 동아리 면접 대비로 ssr, csr, spa, mpa 개념이 헷갈려서 공부하고있는데,제가 이해하기로는 ssr은 브라우저의 요청시마다 페이지 전체를 데이터까지 적용하여 서버에서 전달받아 렌더링하는걸로 이해했는데, 6분때 설명해주시는것은 csr방식이 섞인것 같은데, 혹시 제 이해가 잘못되었나 싶어서 여쭤봅니다.. + 수업 1분20초에 ssr의 전체 과정이 길어서 로딩속도가 많이걸려 느리게 그려준다고 하셨는데, 다른 관련 블로그 글에선 오히려 csr방식이 서버에 첫 요청시 전체 페이지에 대한 문서파일을 받아오니 ssr보다 첫페이지 로딩속도가 느리다고 하더라고요.그러면 첫페이지 로딩속도는 ssr이 csr보다 빠르고,페이지 전환 속도는 csr이 ssr보다 빠르다고 정리하면 될까요?? 답변해주시면 감사하겠습니다 !  

안녕하세요 선생님..강의 따라 프론트 배포 후, aws인스턴스에 나와있는 퍼블릭 ip주소로 들어가서 프론트 서버가 실행되는지 확인해보니 연결을 거부했다는 창이 떴습니다.우분투에서 npm run build 해서 info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)이렇게 빌드 하고, sudo npx pm2 start npm -- start위의 명령어를 입력하니까ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 start npm -- start npx: installed 184 in 13.279s [PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 [PM2] PM2 Successfully daemonized [PM2] Starting /usr/bin/npm in fork_mode (1 instance) [PM2] Done. ┌─────┬────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐ │ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │ ├─────┼────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤ │ 0 │ npm │ default │ N/A │ fork │ 19231 │ 0s │ 0 │ online │ 0% │ 26.1mb │ root │ disabled │ └─────┴────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘터미널에 이런 창이 떴구요,sudo npx pm2 monit위의 명령어 입력하니까ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 monit npx: installed 184 in 7.952s ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ npm run build > fahsionary@1.0.0 build /home/ubuntu/My-Projects/fourthProject/front > cross-env ANALYZE=true NODE_ENV=production next build Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db info - Using external babel configuration from /home/ubuntu/My-Projects/fourthProject/front/.babelrc Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/server/analyze/client.html Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/analyze/client.html info - Creating an optimized production build info - Compiled successfully info - Collecting page data [ ==] info - Generating static pages (0/4)watchSinUp [====] info - Generating static pages (1/4)watchSinUp 메인포스트: [] undefined [=== ] info - Generating static pages (1/4)watchSinUp undefined watchSinUp info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ┌─ Process List ───────────────────┐┌── npm Logs ────────────────────────────────────────────────────────────────────┐ │[ 0] npm Mem: {#aN-fg} 0 MB ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ ┌─ Custom Metrics ─────────────────┐┌─ Metadata ───────────────────────────────────────────────────────────────────────┐ │ ││ App Name npm │ │ ││ Namespace default │ │ ││ Version N/A │ │ ││ Restarts 15 │ │ ││ Uptime 0 │ │ ││ Script path /usr/bin/npm │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ left/right: switch boards | up/down/mouse: scroll | Ctrl-C: exit To go further check out https://pm2.io/ 이렇게 뜨던데..어디가 문제인가요?vim package.json 하니까 "scripts": { "dev": "next", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80" },scripts부분은 이렇게 나왔습니다 aws에서 프론트 인스턴스의 보안그룹 인바운드 규칙은이렇게 구성했습니다.백서버는 ip주소로 들어가면 수업 내용과 같이 hello express가 보여서 잘 실행되고 있는걸 확인했습니다. config폴더에에서 confing.js로 backUrl로 백 주소 정의해서 교체도 진행했어요

 안녕하세요 현재 cjs 가 아닌 es6 로 nodejs 코드를 작성하고 있습니다. 9-2 강의 진행 중 강사님 깃헙 리포지토리 9-2 폴더 중 app.js 20번 줄에서 sequelize.sync is not a function 이라는 오류가 나옵니다. 구글 검색을 해본 결과 일부 블로그에서 es6 에서는 해당 함수를 사용이 불가하다는 글을 보았습니다. 그리고 models/index.js 파일에서 fs.readdirSync(__dirname) .filter(file=>{ return file.indexOf('.') !== basename && file.slice(-3) === '.js'; }) .forEach((file) =>{ import(path.join(__dirname,file)) .then((obj) => {console.log(obj.name); obj(sequelize, Sequelize.DataTypes); db[obj.name] = obj; obj.initiate(sequelize);}) .catch(err => console.log(err)); //const model = require(path.join(__dirname, file)); //console.log(file,model.name); //db[model.name] = model; //model.initiate(sequelize); });주석 처리한 부분은 cjs 스타일이고 변경한 부분은 동적 import 를 사용해서 구현해보았습니다. 구글 검색 후 obj(sequelize, Sequelize.DataTypes) 구문을 삽입하면 해당 오류가 해결이된다고 했으나 해결이 되지 않습니다. 오류설명이 구구절절 길었으나 제 질문을 정리하자면해당 함수(sequelize.sync)가 es6에서는 사용이 안되나요?사용이 안되다면 전면 cjs 로 바꿔 코드 작성을 해야하나요?입니다. es6 코드 작성을 연습하고자 코드를 변경해가며 진행중인데 난관을 겪었습니다. 질문 유의사항을 잘지켜야지 하며 적었는데 가독성이 있을지는 모르겠습니다. 감사합니다.

쿠키 세션과 전체 로그인 흐름 강의 까지 들었습니다. 안녕하세요. 로그인시 401 오류가 생겨서 해결을 못하고 있습니다. user saga 에서 logInAPI랑 logIn 부분에서 error가 생기고 있는거 같은데 이유를 찾지 못했습니다.아래에 비슷한 질문이 있길래 봤더니 json 형식으로 axios.post 해줘야 한다고 하시는 거 같은데 이해를 못하겠습니다... 조금 더 길게 설명해 주실 수 있을까요?

노션에 써있는걸로 sudo systemctl start mongod 실행하면 실행이 안되서공식문서에서 찾아보니 sudo service mongod start를 입력하면 starting database mongod 라고 뜬 후 fail이 뜹니다.... localhost:27017로 접속을 하면 잘 뜨긴 하는데 해결 방법이 없을까요 ??

이거는 nodemon이랑 비슷한 개념인가요?..

안녕하세요 선생님. 우분투(back)에 mysql 설치 커맨드를 강의 따라 입력하다가터미널 창에 아래와 같은 메시지가 떴는데우분투가 mysql에 지원되지 않는 서버라고...?? 목록에 있는 시스템 중 하나를 선택하라고 하는데 이때 뭘 선택해야 하나요? 명령어 sudo dpkg -i mysql-apt-config_0.8.13-1_all.deb 입력하니까 저런게 나왔어요.우분투 22.04 LTS 입니다.mysql --version 하니까mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))이렇게 나오던데 계속 진행해도 될까요?

imports: [MongooseModule.forFeature([{ name: Cat.name, schema: CatSchema }])],에서 왜 name, schema 를 가지는 객체가 필요한지 궁금해서 타고 들어가봤더니, ModelDefinition타입이더라구요. 패키지에 도큐먼트 작성된 것이 없어서npm mongoose , nestjs/mongoose둘 다 찾아봤는데 mongoose 도큐먼트에는 따로 없었고,nestjs/mongoose 는 도큐먼트가 아예 안보이더라구요.. API 가 궁금할 때에는 어떤 방법으로 찾아 볼 수 있을까요..?  

 docker run 이미지ID 하고 새로운 터미널 열어서 docker ps 로 containerID 확인 후docker exec -it 명령어 사용해서 도커 내부로 들어가려고 하면 OCI runtime exec failed: exec failed: unable to start container process: exec: "C:/Program Files/Git/usr/bin/bash": stat C:/Program Files/Git/usr/bin/bash: no such file or directory: unknown이런식으로 오류가 뜹니다 왜 그런건가요??해결 방법 알려주세요!

서버 주소도 제대로 전달한 것 같은데 404 에러가 뜨는데 뭐가 잘못된걸까요

선생님 안녕하세요슬랙방 링크를 클릭하니 이런 페이지가 뜹니다.

const [Image, setImage] = useState(PostInfo.image); <ImageUpload Image={Image} /> 이처럼 state값에 PostInfo.image를 해주어서 이미지 경로 값을 지정해주고 props로 넘긴 뒤  <Form.Control type="file"accept="image/*"src={props.Image}onChange={(e) => FileUpload(e)}/>이런식으로 해주었는데 안떠서 그런데 어떤식으로 해야 수정할 때 이전의 이미지 경로가 뜨게 될까요 ??

 products.service.ts에서 create 부근에 tag를 저장 하기 전 tag를 미리 조회하는 부분을 구현 중인데 findOne에서 {name: tagname} 을 구현하려고 할 때 다음과 같은 에러가 발생합니다. save에서는 에러가 발생하지 않는데 findOne 조회 부분만 에러가 발생하네요관련된 코드 같이 보내드립니다.createProduct.input.tsimport { InputType, Field, Int } from '@nestjs/graphql'; import { Min } from 'class-validator'; import { ProductSaleslocationInput } from 'src/apis/productsSaleslocation/entities/dto/productSaleslocation.input'; @InputType() export class CreateProductInput { @Field(() => String) name: string; @Field(() => String) description: string; @Min(0) @Field(() => Int) price: number; @Field(() => ProductSaleslocationInput) productSaleslocation: ProductSaleslocationInput; @Field(() => String) productCategotyId: string; @Field(() => [String]) productTags: string[]; }  products.entity.tsimport { Field, Int, ObjectType } from '@nestjs/graphql'; import { ProductCategory } from 'src/apis/productsCategory/entities/productsCategory.entity'; import { ProductTag } from 'src/apis/productsTags/productTags.entity'; import { User } from 'src/apis/users/users.entity'; import { Column, DeleteDateColumn, Entity, JoinColumn, JoinTable, ManyToMany, ManyToOne, OneToOne, PrimaryGeneratedColumn, } from 'typeorm'; import { ProductSaleslocation } from '../../productsSaleslocation/entities/productsSaleslocation.entity'; @Entity() @ObjectType() export class Product { @PrimaryGeneratedColumn('uuid') @Field(() => String) id: string; @Field(() => String) @Column() name: string; @Field(() => String) @Column() description: string; @Field(() => Int) @Column() price: number; @Field(() => Boolean) @Column({ default: false }) isSoldout: boolean; @DeleteDateColumn() deletedAt: Date; @Field(() => ProductSaleslocation) @JoinColumn() @OneToOne(() => ProductSaleslocation) productSaleslocation: ProductSaleslocation; @Field(() => ProductCategory) @ManyToOne(() => ProductCategory) productCategory: ProductCategory; @Field(() => User) @ManyToOne(() => User) user: User; @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag]) productTags: ProductTag[]; }  productTags.entity.tsimport { Field, ObjectType } from '@nestjs/graphql'; import { Column, Entity, ManyToMany, PrimaryGeneratedColumn } from 'typeorm'; import { Product } from '../products/entities/products.entity'; @Entity() @ObjectType() export class ProductTag { @Field(() => String) @PrimaryGeneratedColumn('uuid') id: string; @Column() @Field(() => String) name: string; @Field(() => [Product]) @ManyToMany(() => Product, (products) => products.productTags) products: Product[]; }  products.service.tsimport { Product } from './entities/products.entity'; import { Injectable, UnprocessableEntityException } from '@nestjs/common'; import { Repository } from 'typeorm'; import { InjectRepository } from '@nestjs/typeorm'; import { ProductSaleslocation } from '../productsSaleslocation/entities/productsSaleslocation.entity'; import { ProductTag } from '../productsTags/productTags.entity'; @Injectable() export class ProductService { constructor( @InjectRepository(Product) private readonly productRepository: Repository<Product>, @InjectRepository(ProductSaleslocation) private readonly productSaleslocationRepository: Repository<ProductSaleslocation>, @InjectRepository(ProductTag) private readonly productTagRepository: Repository<ProductTag>, ) {} async findAll() { return await this.productRepository.find({ relations: ['productSaleslocation', 'productCategory', 'productTags'], }); } async findOne({ productId }) { return await this.productRepository.findOne({ where: { id: productId }, relations: ['productSaleslocation', 'productCategory', 'productTags'], }); } async create({ createProductInput }) { // 1. 상품만 등록하는 경우 // const result = await this.productRepository.save({ // ...createProductInput, // // 하나 하나 직접 나열하는 방식 // // name: createProductInput.name, // // description: createProductInput.description, // // price: createProductInput.price, // }); // 2. 상품과 상품거래 위치 같이 등록 const { productSaleslocation, productCategotyId, productTag, ...product } = createProductInput; const result = await this.productSaleslocationRepository.save({ ...productSaleslocation, }); // productTag // ["#electronics, #computer"] const result2 = []; // [{name: ..., id: ...}] for (let i = 0; i < productTags.length; i++) { const tagName = productTags[i].replace('#', ''); // check the tags that has already registered const checkTag = await this.productTagRepository.findOne({ name: tagName, }); // if the tags has been existed if (checkTag) { result2.push(checkTag); // if the tags hasn't been existed } else { const newTag = await this.productTagRepository.save({ name: tagName }); result2.push(newTag); } } const result3 = await this.productRepository.save({ ...product, productSaleslocation: result, // result 통째로 넣기 vs id만 넣기 productCategory: { id: productCategotyId }, productTags: result2, }); return result3; } async update({ productId, updateProductInput }) { const myProduct = await this.productRepository.findOne({ where: { id: productId }, }); const newProduct = { ...myProduct, id: productId, ...updateProductInput, }; return await this.productRepository.save(newProduct); } async checkSoldOut({ productId }) { const product = await this.productRepository.findOne({ where: { id: productId }, }); if (product.isSoldout) { throw new UnprocessableEntityException('Sold out'); } // if(product.isSoldout) { // throw new HttpException('이미 판매 완료 된 상품입니다.', HttpStatus.UNPROCESSABLE_ENTITY) // } } async delete({ productId }) { // 1. 실제 삭제 // const result = await this.productRepository.delete({ id: productId }); // return result.affected ? true : false // 2. 소프트 삭제(직접 구현) - isDeleted // this.productRepository.update({ id: productId }, { isDeleted: true }); // 3. 소프트 삭제(직접 구현) - deletedAt // this.productRepository.update({ id: productId }, { deletedAt: new Date() }); // 4. 소프트 삭제(TypeORM 제공) - softRemove - id로만 삭제 가능 // this.productRepository.softRemove({ id: productId }); // 4 . 소프트 삭제(TypeORM 제공) - softDelete const result = await this.productRepository.softDelete({ id: productId }); return result.affected ? true : false; } }  내용 확인 부탁드립니다.    

@ObjectType이랑 @EntryType이랑 같이 사용을 할수는 없는건가요??dto와 entry가 다른부분이 없어서 같이 쓰는게 낫겠다싶어서 시도하려니 안되네요확실히 역할을 나눠야하는건가요??

client 주소: http://localhost:3000server 주소: http://localhost:5000현재 저는 쿠키 공유 잘 되며 글 작성도 잘 됩니다. 그런데 client에서 server로 요청을 보내고 요건에 부합하지 않으면 client측 화면을 redirect 시키려는데 cors 오류가 발생합니다. 어떤부분을 보면 좋을까요?server에서 redirect 주소는 http://localhost:3000/login 이런식으로 client 주소 작성했습니다.추가적으로 client 측에서 router.push로 서버 주소로 요청보내고 로직 수행 후 응답 결과로 res.redirect는 cors 오류 없이 잘 동작합니다. 이건 또 왜 잘 되는걸까요.? 

맥에서 vim /usr/local/etc/mongod.conf 를 입력했는데 기존 파일이 없어서 새로 작성되고, :wq!로도 저장이 안됩니다.그리고 애초에 /usr/local 밑에 etc 폴더가 없습니다. 어떻게 해결해야 하나요?위의 과정 없이 mongo admin -u를 진행하니 에러가 뜹니다.

이렇게 찾을 수 없다는 에러가 뜨는데 어떻게 해야되나요? 다른 분이 질문하신거 보고 package.json에 proxy도 추가해봤는데 안됩니다.

router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { // done에서 넣은값들이 순서대로 전달되는곳 if (err) { console.error(err); next(err); } if (info) { return res.status(401).send(info.reason); } })(req, res, next); // middleware 확장하는 express의 기법 // (req, res, next)를 붙히면 그냥 함수를 전달하는것과 똑같은 기능을 하게 된다. return req.login(user, async (loginErr) => { // 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 하는데 에러발생시 핸들 if (loginErr) { console.error(loginErr); return next(loginErr); } return res.json(); }); });return req.login(user, async (loginErr) => {여기서 우리 서비스 로그인이 다 끝나면 passport 로그인을 한번 더 한다고 하셧는데 이게 무슨 의미 인가요?? 우리 서비스에서 로그인을 하면 끝 아닌가요?

필요한 정보를 넣어주고 회원가입 버튼을 누르면 saga 의 user.js 에서 signUp 에서 에러가 발생하는데 이유를 모르겠습니다.

안녕하세요. 혼자서는 결론을 내리지 못해 더 많은 경험과 고민을 한 제로초님께 조언을 구하고 싶습니다.제가 기존 코드에 Menu가 있었습니다. 그리고 이번에 타입스크립트로 마이그레이션 했는데 네이밍 컨벤션에 고민이 있습니다. 이 이름을 쓰는 곳은 총 4곳 입니다.menu - 데이터로 불러오는 menuMenu - 타입으로서 MenuMenu - 페이지(메뉴 상세 페이지)Menu - 메뉴 아이템(메뉴 리스트 안에 각각 뿌려지는 메뉴 아이템)사실 타입이 없을 때는 아래 2개의 파스칼 케이스의 Menu가 이름으로 겹칠 일이 없었습니다. 그러다가 타입을 도입 했는데, 타입인 Menu 같은 경우 제로초님이 요즘은 앞에 헝가리안 표기법으로 타입인지 인터페이스인지를 표기 안하는 추세라고 하시기도 했고, 프로그래밍에서 가장 중요한게 데이터라 생각해서 그 데이터의 타입은 그대로 쓰는게 좋다고 생각했습니다. 페이지 같은 경우에는 파일 명과 반드시 같은 필요가 없다 해서 라우팅할때 menu.tsx를 쓰더라도 파일 내부에서는 MenuPage로 명명했습니다.그리고 남은 컴포넌트가 문제인데 다른 강의를 봐도 MenuComponent 같은 이름 보단 다른 강의에서 List를 붙이시는거 보고 MenuItem으로 컴포넌트 명을 지으려고 하는데 괜찮을까요??감사합니다!!