172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next + React Query로 SNS 서비스 만들기
fetch 함수가 그냥 web API 같은데 fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요? next 가 내부적으로 fetch 를 새로 만든건가요?
해결됨
AWS 배포 완벽가이드 (feat. Lightsail, Docker, ECS)
안녕하세요, AWS를 통한 SSL/TLS 인증서 발급에 대해 한 가지 의문이 들어서 질문 남깁니다. SSL/TLS 인증서는 CA(인증기관)을 통해 발급받을 수 있고, CA는 도메인과 소유자의 세부 정보를 확인하고 '이 웹사이트는 믿을 수 있음'이란 의미로 인증서를 발급해주는 기관이며, AWS는 CA 중 하나로서 도메인과 SSL/TLS 인증서를 판매할 수 있다고 이해했는데요, 의문이 생기는 지점은 AWS가 이 SSL/TLS 인증서를 무료로 발급해준다는 점입니다. 유/무료 인증서의 차이는 유료 인증서가 웹사이트에 대해 더 높은 신뢰를 보장하고, 보안 사고에 대해 보상금을 지급할 의무를 지는 반면 무료 인증서는 그런 제약이 없다는 것으로 알고 있는데, DNS 검증만 통과하면 AWS에서 인증서가 발급되고, 어떤 보안 사고에 대한 보장 같은 건 언급이 되어 있지 않으니... AWS에서 발급받은 인증서를 예를 들면 회사 홈페이지 도메인에 적용해도 되는 걸까요? 무료라고 해도 그 AWS가 '신뢰할 수 없는' 것을 제공할 것 같지는...? 않아서 아리송합니다. 강의 내용을 좀 벗어나는 것 같긴 하지만ㅠㅠ 여기저기 검색을 해봐도 적절한 답변을 찾을 수가 없어서요. 항상 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다.
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. next-auth 로그인시 해결되지 않는 부분이 있어서 질문드립니다. 로그인을 계속 실패하고 있습니다. next-auth의 버젼 (4였다가 삭제하고 3으로도 시도 해봤습니다.) "dependencies": { "next-auth": "^5.0.0-beta.3", }, 로그인을 시도했을때 뜨는 화면: The Middleware "/src/middleware" must export a middleware or a default function This error happened while generating the page. Any console logs will be displayed in the terminal window. 로그인을 시도했을때 콘솔 화면: 로그인을 시도했을때 네트워크 화면 : middleware.ts code 입니다. import { auth as middleware } from "./auth"; // See "Matching Paths" below to learn more export const config = { matcher: ["/compose/tweet", "/home", "/explore", "/messages", "/search"], }; auth.ts code 입니다. import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; console.log("-", process.env.AUTH_URL); export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return user; }, }), ], }); handers.ts의 로그인쪽 코드입니다. import { http, HttpResponse, StrictResponse } from "msw"; import { faker } from "@faker-js/faker"; export const handlers = [ http.post("/api/login", () => { console.log("로그인"); return HttpResponse.json({ id: "zerohch0", nickname: "제로초", image: "/5Udwvqim.jpg" },, { headers: { "Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/", }, }); }), ];
미해결
코드로 배우는 React 19 with 스프링부트 API서버
8강 10분56초에서 하늘색 허공에 클릭하시는데 페이지가 이동하는것 같은데요. 어떻게 하신것인지 궁금해서 질문드립니다. 글자를 클릭해야 하는것 아닌가요? 근데 영상에서 동작은 또 잘되네요...?... 제가 잘 몰라서 이해를 잘못한걸까여?... 아래는 제 코드입니다..
미해결
만들면서 배우는 리액트 : 기초
https://cataas.com/undefined 로 나오는데 왜그런건가요? 28강 수강하고 있는데 fetch를 사용하려고 하는데 이미지가 안나와요 ㅠㅠㅠ
해결됨
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
좋은 내용 감사합니다. 프롬프트 내용중에 "Translate Into Korean~" 이라는 내용으로 답변을 한글로 받게 됩니다. 혹시 [events] 밑에 오는 사용자 입력값과 동일한 언어로 결과를 받고 싶다면 어떻게 작성하면 될까요? 강의 내용을 기준으로 다국어 서비스를 만들려고 하는데, 영어가 짧아서 질문 드려요
미해결
pnpm, vite를 사용하여 리액트 프로젝트 생성한 다음 tailwind 랑 typescript, shadcn/ui 를 설치하였는데요. shadcn/ui를 쓰려고 버튼 컴포넌트를 임포트 하는데 파일경로가 계속 잘못되었다고 합니다. 다 확인했는데 도저히 어디가 문제인지 몰라서 여쭤 봅니다. 이런 오류가 뜨고요 tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "baseUrl": ".", "paths": { "@/*": ["./*"] }, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } vite.config.ts import path from "path" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }) App.tsx import './App.css' import { Button } from "@/components/ui/button" function App() { return ( <> <div className="ml-4 mt-8 text-3xl font-bold underline"> Hello world! </div> <div> <Button>Click me</Button> </div> </> ) } export default App 입니다. 현재 @이게 적용이 안되고 있는 것 같습니다 근데 파일 누르면 올바르게 해당하는 파일로 이동이 잘됩니다. 어디가 문제일까요 ?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
따라하며-배우는-노드-리액트-쇼핑몰 > 쇼핑 카트 페이지 데이터 가져오기 강의를 수강중에 있습니다. 17:30 부근에 제품을 배열로 다시 재정리 해주는 걸 설명해주고 계시는데 split 후에 map을 하는 이유가 궁금합니다. 값을 map 처리하기 전후로 찍어보니 값이 동일하게 나오는데 map 처리를 해주는 이유가 따로 있나 싶어서 여쭤봅니다.
해결됨
[React 1부] 만들고 비교하며 학습하는 React
안녕하세요 강의 정말 잘 듣고 있습니다. 해당 강의를 듣는중 궁금한점이 생겨서 질문 드립니다. 제가 원래 java/spring을 공부하다가 이번에 프론트 엔드쪽에 관심이 생겨서 React를 학습중인데 ide에서는 .js 파일을 Import할때 뒤에 왜 자동으로 .js가 안붙도록 되어있나요? 저는 강사님과 다른 ide를 사용중인데도 여기서도 .js가 자동으로 붙지 않습니다. import React from "react"; import Header from "./components/Header.js"; import KeywordList from "./components/KeywordList.js"; import SearchForm from "./components/SearchForm.js"; import SearchResult from "./components/SearchResult.js"; import Tabs, { TabType } from "./components/Tabs.js"; import store from "./Store.js"; 제가 추측한건데 React를 import 하는 경우에는 react 파일이 typeScript로 되어있고 나머지 경우는 전부 javaScript로 되어있습니다. 따라서 기본이 .ts로 설정 되어 있어서 javascript파일은 별로로 명시해줘야 찾을 수 있게 되어 있다고 생각이 듭니다. 별로 의미없는 질문이지만 궁금해서 질문 드립니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요?? 클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요?? 클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다. 강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 2.1 단위 테스트란 무엇일까? 강의를 들으며 따라하고 있습니다. 강의에서 진행하고 있는 unit-test-example 브랜치에서 TextField.spec.jsx 파일을 따라 치며 테스트를 하려고 하는데 vscode 테스트 메뉴에서 '이 작업 영역에서 아직 발견된 테스트가 없습니다.' 라는 문구와 '추가 테스트 확장 설치'라는 버튼만 떠서 테스트 진행을 하지 못하고 있습니다. 강의에서 소개해주신 vitest를 설치하고 vscode를 껐다가 다시 켜봐도 테스트를 찾을 수 없다고 뜨고 있는데 제가 어떻게 하면 될까요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
토큰적용 후 발생하는 현상에 대해서 질문드립니다. Product게시판에 이미지에 경우, 아래와 같이 표시가되는데요 이때 토큰을 헤더에 설정 되어있지않기떄문에 {"error":"ERROR_ACCESS_TOKEN"}가 발생합니다. jwtAxios를 사용하여 처리는 가능할듯한데 문제는 결과값이 문자열로 되돌아와서 이미지표시가 좀 힘들어보이고 어떻게 처리해야할지 모르겠습니다. 이런경우 어떠한방식으로 처리하는게 좋을까요? src={`${host}/api/products/view/s_${product.uploadedFileNames[0]}`}
미해결
안녕하세요 react로 웹 페이지를 만들었는데 만든 사이트를 모바일로 삼성인터넷 앱을 통해 접속하니깐 크롬 연결 팝업이 자동으로 계속 나오게 되더라구요 혹시 코드상으로 크롬 연결 팝업이 뜨는걸 막을수있는 방법이 있을까요 ?
해결됨
Next + React Query로 SNS 서비스 만들기
x.com 을 보면 로그인도 그렇고 게시글 올릴때도 그렇고 모달창이 뜰때마다 그냥 화면에 띄우는 방식이 아니라 저렇게 모달창을 띄울수 있는 url 따로 만든 이유가 뭘까요? 관리가 더 편해서일까요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
@ElementCollection와 @EntityGraph사용법에 대해서 잘 숙지 하였습니다. 한가지 질문이 있습니다. JPA사용시 일반적으로 쓰이는 @OneToMany, @ManyToOne, @ManyToMany를 대신해서 @ElementCollection으로대체하여 사용이 가능할까요? 왠지 될거같은생각이 들긴하는데....
미해결
Next + React Query로 SNS 서비스 만들기
해당 강의에서 postgresql 설치와 노드버전 18.17.0 환경에서 nest-prisma의 폴더를 다운 받은 후 npm i -> npx prisma migrate dev 까지는 순조롭게 진행되었으나 npm run start:dev에서 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 } 에러가 발생했습니다 구글링을 해보니 레디스 서버가 구동이 안된 것 같다고 나오기도하고 서버쪽을 잘 몰라 질문 드립니다 .env 파일 입니다 DATABASE_URL="postgresql://postgres:비번@localhost:5432/zcom?schema=public" REDIS_URL=redis://localhost:6379 COOKIE_SECRET=cookienyamnyam
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..! server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요? 강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost , 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
콘솔로그 결과 안녕하세요 선생님, 강의를보고 간단하게 따라해보았는데요 NextRequest 타입의 req를 매개변수로 받아와서 req를 console.log 에 찍어보면 undefined가 뜹니다. 혹시 NextRequest 사용에 조건이 따로 있을까요? req.nextUrl.pathname 으로 url 도 가져와보고 싶고한데 생각처럼 잘 안되네요..
해결됨
Next + React Query로 SNS 서비스 만들기
windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086 해당 이슈가 맞는지 궁금합니다!
