inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

thunder client로 get 요청시 무한로딩

해결됨

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

안녕하세요. thunder client로 get 요청시 무한로딩이 됩니다. localhost:3000/api/hello에 대한 요청이 되지 않습니다. 다른 open api 요청을 쏴봤는데요. 그건 됩니다. 혹시 원인이 무엇일까요? 개발 환경은 실행중입니다. 폴더 구조입니다. 아래는 코드입니다. // hello.ts // Next.js API route support: https://nextjs.org/docs/api-routes/introduction import { NextApiRequest, NextApiResponse } from 'next'; import FirebaseAdmin from '@/models/firebase_admin'; export default function handler(_: NextApiRequest, res: NextApiResponse) { FirebaseAdmin.getInstance().Firebase.collection('test'); res.status(200).json({ name: 'John Doe' }); } // firebase_admin.ts import * as admin from 'firebase-admin'; interface Config { credential: { privateKey: string; clientEmail: string; projectId: string; }; } /** 싱글톤 패턴을 이용해서 어디서든 같은 인스턴스를 불러낼 수 있도록 한다. */ export default class FirebaseAdmin { public static instance: FirebaseAdmin; /** 초기화 여부 */ private init = false; /** 인스턴스를 반환하는 메서드 */ public static getInstance(): FirebaseAdmin { if (FirebaseAdmin.instance === undefined || FirebaseAdmin.instance === null) { /** 초기화 진행 */ FirebaseAdmin.instance = new FirebaseAdmin(); /** 환경을 초기화한다. */ FirebaseAdmin.instance.bootstrap(); } return FirebaseAdmin.instance; } /** 환경을 초기화할 때 사용할 메서드 */ private bootstrap(): void { /** 등록되어 있는 앱의 갯수가 0이 아니어야 앱이 존재함을 의미한다. */ const haveApp = admin.apps.length !== 0; if (haveApp) { this.init = true; return; } /** config를 활용해서 초기화한다. */ const config: Config = { credential: { /** process.env.로 환경변수에 접근하여 각 값들을 받아온다. * 각 갑들은 undefined일 수 있으므로, 값이 없을 경우 빈 문자열을 할당한다. */ projectId: process.env.projectid || '', clientEmail: process.env.clientEmail || '', /** * privateKey는 원래 개행이 들어간 여러 줄 짜리 텍스트인데, 반환할 때는 json에서는 그렇게 표현할 수 없기 때문에 한 줄이 된다. * 그 한줄짜리 json을 원래대로 개행이 들어가도록 임의로 다시 개행문자를 넣어주는 것이다. */ privateKey: (process.env.privatekey || '').replace(/\\n/g, '\n'), }, }; admin.initializeApp({ credential: admin.credential.cert(config.credential) }); console.info('bootstrap firebase admin'); } /** firestore를 반환 */ public get Firebase(): FirebaseFirestore.Firestore { if (this.init === false) { this.bootstrap(); } return admin.firestore(); } public get Auth(): admin.auth.Auth { if (this.init === false) { this.bootstrap(); } return admin.auth(); } }

  • next.js
fe 댓글 1 좋아요 0 조회수 1180

영속성 컨텍스트 질문입니다.

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

3:58초 경에 findMember.setAge(20)으로 결과가 바뀌면 영속성 컨텍스트에 관리가 되는 거고, 안바뀌면 관리가 되지 않는다라는데 이유가 뭔가요 ? JPA가 DB의 데이터에 접근하고 수정하고 작성,삭제 할 수 있다 = 영속성 컨텍스트가 관리한다 같은 말일까요 ?

  • java
  • jpa
댓글 1 좋아요 0 조회수 389

geolocation 메소드 사용 시 콘솔창 알림

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

지올로케이션으로 위치 나타내는 함수 배우는데 콘솔창 맨 위에 [Violation] Only request geolocation information in response to a user gesture. 이렇게라고 떠요. 해당 자바스크립트 번호 보니까 딱히 문제 될 것도 없고 강사님이랑 똑같이 적었는데 왜 저렇게 뜰까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
치카치카 댓글 1 좋아요 0 조회수 1123

rerender

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

emotion에 props 던지기 및 setState의 작동원리강의 49분경 설명에서.... 작성자,제목,내용 인풋창에 q,q,q를 입력하는 과정에서 최종적으로 내용인풋에 q입력할때 처음에는 contents값이 없는 상태로 렌더링이 일어나고 42번째 함수가 종료가 될때, (임시로 저장해두었던 q) contents를 q로 바꾸라고 알아들어서 바꾸면 한번더 리렌더링이 일어나서 contents 값이 q가되어 있으므로 44번째 if문이 실행이 되어서 45번째 setMycolor가 실행이 되고, 또 다시 setMycolor가 바뀌므로 리렌더링 일어나서 버튼색이 노란색으로 바껴야 하는거 아닌가요? 왜 내용에 qw를 입력하는 순간 이 일이 일어나나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
H,S 댓글 1 좋아요 0 조회수 438

나의 상품 카운트 API 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. 언제나 좋은 강의 감사합니다! 다름이 아니라 section 14 과제인 마이페이지를 구현하는 중인데 나의 상품 페이지 pagination에 사용할 내 장터-나의 상품 count API는 어떤 걸 쓰면 될까요? 다른 페이지에서 사용할 count API는 모두 있는 것 같데 나의 상품만 없는 건지 제가 못 찾고 있는 건지 모르겠네요..

  • react
  • node.js
  • seo
  • graphql
  • next.js
Hephaestus 댓글 1 좋아요 0 조회수 320

일대다 관계에서의 값타입 질문입니다.

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

@OneToMany @JoinColumn(name = "MEMBER_ID") private Order order; @OneToMany @JoinColumn(name = "MEMBER_ID") private List<Order> orders; 두개가 무슨 차이가 있는지 궁금합니다. 일대다 관계라면 컬렉션을 안써도 되지 않나요?

  • java
  • jpa
댓글 1 좋아요 0 조회수 534

클라이언트와 서버를 Docker로 배포할 시 보안 관련 질문 드립니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

강의에서 좀 더 나아가 클라이언트와 서버도 도커 환경으로 구축?을 해보려고 합니다. 계획은 Docker hub private repo에 Dockerfile로 빌드된 이미지를 push하고 ec2인스턴스에서 docker-compose up으로 pull을 받으려고 합니다. 간단히 테스트를 해보니 제대로 실행은 되고 있으나 보안적인 부분에 있어 문제될 것이 있나 궁금하여 질문 드립니다. 답변 주시면 감사하겠습니다. 감사합니다~

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
오원 댓글 1 좋아요 0 조회수 392

Integer 타입 질문입니다

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

public static void main(String[] args) { Integer a = Integer.valueOf(10); Integer b = a; a = 20; System.out.println("a = " + a); System.out.println("b = " + b); } =======출력값 ======== a = 20 b = 10 이렇게 하면 값이 변경되는데 PPT에서 변경X라는 말이 무슨 말일까요 ?

  • java
  • jpa
댓글 1 좋아요 0 조회수 700

즉시로딩과 지연로딩의 성능 차이에 대해 궁금합니다.

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

Member와 Team을 예로 생각했을 때 즉시로딩 -> Member만 필요해도 Team과 쿼리문이 같이 나감 지연로딩 -> Member만 불러오고, Team은 프록시 객체로 불러와서, Team이 필요할 때 영속성 컨텍스트에 연결을 요청하고 요청 쿼리문이 나가는 것이 맞나요 ? Member.getTeam().getName()을 1번 수행한다고 했을 때 즉시로딩 (Member + Team 쿼리문 같이)의 성능이 지연로딩 ( Member 쿼리문 따로, Team 쿼리문 따로)보다는 좋지만 강의에서 나온 여러가지 문제로 웬만해서는 지연로딩을 사용하는 것이 더 좋다. 이것이 맞나요?

  • java
  • jpa
댓글 1 좋아요 0 조회수 415

s3 연결하기 강의 중에

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님 항상 질문에 빨리 답변 달아주셔서 감사합니다. 백엔드에 문제가 있는거 같은 pm2 monit은 아래와 같이 뜹니다 const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const postsRouter = require("./routes/posts"); const hashtagRouter = require("./routes/hashtag"); const db = require("./models"); const passportConfig = require("./passport"); const passport = require("passport"); const dotenv = require("dotenv"); const morgan = require("morgan"); const path = require("path"); const hpp = require("hpp"); const helmet = require("helmet"); dotenv.config(); db.sequelize .sync() .then(() => { console.log("db 연결성공"); }) .catch(console.error); passportConfig(); //모드변경 if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet({ contentSecurityPolicy: false })); app.use( cors({ origin: "http://sansbook.co.kr", credentials: true, }) ); } else { app.use(morgan("dev")); app.use( cors({ origin: true, credentials: true, }) ); } // app.use( // cors({ // origin: [ // "http://localhost:3000", // "http://sansbook.co.kr", // "http://43.200.92.114", // ], // credentials: true, // }) // ); app.use("/", express.static(path.join(__dirname, "uploads"))); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, domain: process.env.NODE_ENV === "production" && ".sansbook.co.kr", }, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.use("/posts", postsRouter); app.use("/post", postRouter); app.use("/user", userRouter); app.use("/hashtag", hashtagRouter); app.listen(80, () => { console.log("서버실행중!"); });

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 2 좋아요 0 조회수 561

상품 등록

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

<BookForm> @Getter @Setter public class BookForm { private Long id; private String name; private int price; private int stockQuantity; private String author; private String isbn; } <Controller> @PostMapping("/items/new") public String create(BookForm form){ Book book = new Book(); book.setName(form.getName()); book.setPrice(form.getPrice()); book.setStockQuantity(form.getStockQuantity()); book.setAuthor(form.getAuthor()); book.setIsbn(form.getIsbn()); itemService.saveItem(book); return "redirect:/"; } <Service> @Service @RequiredArgsConstructor @Transactional(readOnly = true) public class ItemService { private final ItemRepository itemRepository; public void saveItem(Item item){ itemRepository.save(item); } public Item findOne(Long itemId){ return itemRepository.findOne(itemId); } public List<Item> findAll(){ return itemRepository.findAll(); } } <Repository> @Repository @RequiredArgsConstructor @Slf4j public class ItemRepository { private final EntityManager em; public void save(Item item){ if(item.getId() == null){ log.info("item={}", item); em.persist(item); //신규등록 }else{ em.merge(item); } } public Item findOne(Long id){ return em.find(Item.class, id); } public List<Item> findAll(){ return em.createQuery("select i from Item i", Item.class) .getResultList(); } } <Log> 2023-04-21 15:08:16.380 INFO 7536 --- [nio-8080-exec-2] j.jpashop2.repository.ItemRepository : item=Book(author=qwe, isbn=1234) <Test> 로그에 찍히는거 보면 값이 다 전달이 되고 테스트 코드에서도 성공으로 떠서 저장이 되야 될거 같은데 h2 db에 가면 값이 저장이 안되어 있네요 아예 디비랑 연동이 안되나 싶었는데 멤버는 정상적으로 회원가입이 되는데 아이템만 저장이 안되네요 뭐가 문제일까요... ddl-auto 는 create로 되어있구요 h2 db 버전은 1.4.2 입니다

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 1 조회수 688

회원가입시 500 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

{ "name": "sansbook-back", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "dev": "nodemon app", "start": "cross-env NODE_ENV=production pm2 start app.js" }, "author": "jangsan", "license": "ISC", "dependencies": { "bcrypt": "^5.1.0", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "dotenv": "^16.0.3", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^6.1.5", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "mysql2": "^3.2.0", "passport": "^0.6.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "sequelize": "^6.30.0", "sequelize-cli": "^6.6.0", "session": "^0.1.0" }, "devDependencies": { "nodemon": "^2.0.22" } } const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const postsRouter = require("./routes/posts"); const hashtagRouter = require("./routes/hashtag"); const db = require("./models"); const passportConfig = require("./passport"); const passport = require("passport"); const dotenv = require("dotenv"); const morgan = require("morgan"); const path = require("path"); const hpp = require("hpp"); const helmet = require("helmet"); dotenv.config(); db.sequelize .sync() .then(() => { console.log("db 연결성공"); }) .catch(console.error); passportConfig(); //모드변경 if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet()); } else { app.use(morgan("dev")); } app.use( cors({ origin: ["http://localhost:3000", "sansbook.com", "http://15.164.99.87"], credentials: true, }) ); app.use("/", express.static(path.join(__dirname, "uploads"))); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.use("/posts", postsRouter); app.use("/post", postRouter); app.use("/user", userRouter); app.use("/hashtag", hashtagRouter); app.listen(80, () => { console.log("서버실행중!"); }); 회원가입 할떄 마다 500에러가 나는데 프론트 문제인가요?

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 1 좋아요 0 조회수 392

logoutUser 로그아웃 방법

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

로그인은 가능한데 로그아웃은 어떻게 하는지 모르겠습니다 ㅠ logoutUser mutation으로 해도 에러가 떠서 찾아봐도 강의에 나와있지 않아서 글 남깁니다!!

  • react
  • node.js
  • seo
  • graphql
  • next.js
호겸 댓글 1 좋아요 0 조회수 563

Aborting

미해결

[리뉴얼] React로 NodeBird SNS 만들기

git 저장소를 불러오는중에 Aborting떠서 git reset --hard를 해도 계속 최신 커밋이 안뜹니다 ㅠㅠ HEAD is now at 95de5ce Update: back start script 계속 이게 뜨면서 pull해도 Aborting이 계속 나오네요 ㅠㅠ

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 1 좋아요 0 조회수 436

mysql_secure_installation 정책에 관해

미해결

[리뉴얼] React로 NodeBird SNS 만들기

제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 3 좋아요 0 조회수 565

Item - OrderItem 관계 및 양방향관계?

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

ORDERS와 ORDER_ITEM의 관계는 하나의 주문 안에, 주문된 여러가지 아이템(book,album,movie등)이 있을 수 있기 때문에 1:N인 것 이 맞나요 ? OrderItem과 Item의 관계가 잘 이해 가지 않아서 찾아보다가 https://www.inflearn.com/course/lecture?courseSlug=ORM-JPA-Basic&unitId=21699&category=questionDetail&tab=community&q=805804 이 답변을 보고 헷갈리는 부분이 있는데요. Book을 n번 주문할 수 있기 때문에 1:N이라고 하셨는데 이 말은 즉, Book이라는 아이템 안에서도 주문된 여러가지 책(일본 책, 독일 책, 한국책) 이 있을 수 있기 때문에 1:N이라는 말일까요? 어떤 Member가 어떤 주문을 했는지 Order를 참고하는 것과 어떤 Order가 무엇을 구매했는지 Order_Item을 참고하는 것이 같은 맥락이라고 생각하는데 전자는 잘못된 설계고 후자는 괜찮은 설계인 이유는 무엇일까요?

  • java
  • jpa
댓글 1 좋아요 1 조회수 956

외래키의 위치?에 관해 질문입니다.

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

public class Team2 { @Id @GeneratedValue @Column(name = "TEAM_ID") private int id; private String name; @OneToMany @JoinColumn(name = "MEMBER_ID") private List<Member> members = new ArrayList<>(); } public class Member2 { @Id @GeneratedValue() private Long id; @Column(name = "name") private String username; @ManyToOne(mappedBy = "members") private Team team; } 강의를 듣다가 외래키를 Team에 두면 안되는 것인가? 하고 혼자 코드를 작성해보았는데요. @ManyToOne은 mappedBy옵션을 지원하지 않는 걸로 봐서 1:N에서 N쪽이 외래키가 있어야하고, 연관관계의 주인이 되어야하는 것 같은데 연관관계의 주인이 되는 외래키는 어떤 방식으로 설정해주나요 ?

  • java
  • jpa
댓글 1 좋아요 0 조회수 585

정답오류가 있는것 같습니다.

해결됨

자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비

안녕하세요 선생님 다름이 아니라 제가 작성한 코드가 정답처리가 되었는데 이 코드는 정답이 되면 안되는 코드가 아닌가 해서 여쭤보고 싶어서 질문글 남깁니다. 예를들면 첫번째 문제에서는 CBA 순서로 무조건 짜야하지만 제 코드에서 str1 은 꼭 순서를 지켜야 하는 값이고 str2는 C의 순서를 알 수 없는데 정답처리가 되어서 제가 작성한 코드가 제대로 정답이 맞는건지 궁금해서 질문글을 남깁니다!

  • java
  • 코딩-테스트
hong090992 댓글 1 좋아요 0 조회수 511

redux-saga 코드 정리는 어떻게 하는게 좋나요?

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

강좌를 듣고나면 saga의 user.js 랑 post.js 쪽 파일이 코드줄이 굉장히 길어지는데요 막상 파일을 쪼개서 정리를 하려고해도 연관되는 상태들이 많아서 결국엔 한쪽으로 몰게되네요 어쩔 수 없는 부분인가요? 사실 강좌를 듣고 프로젝트를 하나 완성했는데 saga 부분을 쪼갤 수 있으면 최종적으로 수정하고 마무리 할거고 아니면 바로 타입스크립트 강좌 듣고 repo 하나 더 파서 지금 프로젝트 타입스크립트로 정리해보려 합니다 ㅎ 좋은 강좌 만들어주셔서 정말 감사하고 다음 강좌는 전용 링크로 수수료없이 결제하겠습니다 ~ 감사합니다 !

  • react
  • redux
  • node.js
  • express
  • next.js
kenny 댓글 1 좋아요 0 조회수 299

react query를 이용한 로그인 유저 정보 가져오는 방법

미해결

[리뉴얼] React로 NodeBird SNS 만들기

깃허브에 올려주신 react query의 부분을 보고 공부하는 과정중에 궁금한 점이 생겨 질문드립니다. 로그인 정보를 가져오기 위한 const { data: me } = useQuery<User>('user', loadMyInfoAPI); useQuery를 이용해 캐싱한 데이터를 가져오는 방법과, 리덕스, 리코일의 전역관리 상태 라이브러리를 이용하여 로그인 정보를 관리하는 방법중에 어떠한 방법이 나은 방향인지 궁금합니다. 저의 경우는 전역 상태로 관리해, 데이터를 한 번만 가져와서 여러 곳에서 사용할 수 있어서 코드의 중복을 줄일 수있다고 생각하였는데 왜 useQuery를 이용해 캐싱한 데이터를 가져오는 방법을 사용하였는지 궁금합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
복준우 댓글 1 좋아요 0 조회수 2302

인기 태그

인프런 TOP Writers

주간 인기글