묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
제로초님 안녕하세요 ㅎㅎ
저스탠드 관련해서 하다가 안풀려서 여쭤 봅니다 백엔드와 통신을 하여 값을 받아 온 객체의 값을 저스탠드에 set으로 저장 하려고 하는데 이렇게 계속 나오더라구여 ..제가 지금 하려고 했던건 인터페이스를 만들어주고 각 타입을 주려고 했는데 안되더라구여 ㅠㅠ 어떤 걸 수정을 해야 될까요 ㅠㅠ타입을 any로 하니 되긴 하던데 any는 사용 하지 말라고 하셔서 되도록 ㅠㅠ
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
멀티 선택 단축키
2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!
-
미해결코드로 배우는 React with 스프링부트 API서버
장바구니 컨트롤러 처리 @PreAuthorize 부분 오류
@PreAuthorize("(#itemDTO.email == authentication.name)") @PostMapping("/change") public List<CartItemListDTO> changeCart(@RequestBody(required = true) CartItemDTO itemDTO) { log.info("itemDTO : {}", itemDTO); if (itemDTO.getQuantity() <= 0) { return cartService.remove(itemDTO.getCino()); } return cartService.addOrModify(itemDTO); }위코드에서 #ItemDTo 값이 null 설정되는것같습니다.아무리 찿아봐도 원일을 알수없는데 확인좀 부탁드릴수 있을까요? 우선 오류로그는 아래와 같습니다.jakarta.servlet.ServletException: Request processing failed: java.lang.IllegalArgumentException: Failed to evaluate expression '(#itemDTO.email == authentication.name)' at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1022) ~[spring-webmvc-6.1.5.jar:6.1.5] at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:914) ~[spring-webmvc-6.1.5.jar:6.1.5] Caused by: java.lang.IllegalArgumentException: Failed to evaluate expression '(#itemDTO.email == authentication.name)' Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'email' cannot be found on null at org.springframework.expression.spel.ast.PropertyOrFieldReference.readProperty(PropertyOrFieldReference.java:224) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.PropertyOrFieldReference.getValueInternal(PropertyOrFieldReference.java:111) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.PropertyOrFieldReference$AccessorValueRef.getValue(PropertyOrFieldReference.java:416) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.CompoundExpression.getValueInternal(CompoundExpression.java:98) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.OpEQ.getValueInternal(OpEQ.java:42) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.OpEQ.getValueInternal(OpEQ.java:32) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.SpelNodeImpl.getTypedValue(SpelNodeImpl.java:119) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.standard.SpelExpression.getValue(SpelExpression.java:309) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.security.access.expression.ExpressionUtils.evaluateAsBoolean(ExpressionUtils.java:30) ~[spring-security-core-6.2.3.jar:6.2.3]
-
해결됨Next + React Query로 SNS 서비스 만들기
제로초님 안녕하세요 ㅎㅎ
궁금 한게 있어서 여쭤 봅니다 ㅎㅎ useMutation을 사용 하였을때 prefetchQuery의 queryKey에 데이터를 저장해 놓고 useQueryClient에 데이터를 넣어 두둣이 onSuccess를 했을때 queryKey처럼 데이터를 저장 할 수 있을까요? 저스탠드와 같은 라이브러리 없이 혹시 쿼리에서 uuseMutation을 했을때 캐쉬 값을 가지고 있을 수 있을까요?!
-
미해결코드로 배우는 React with 스프링부트 API서버
궁금한점 있습니다 !
안녕하세요 강사님 !!리액트 + 스프링부트 웹개발 강의이지만스터디용으로리액트 네이티브에서 해당 스프링부트 어플리케이션 API 를 활용해도 되는 부분인가요???
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
map foreach 매개변수 이름은 product, index아니여도 되네요
그냥 첫번째 매개변수가 대상이고 두번째 매개변수는 index취급하는건가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman으로 만든 주소는 만든사람 본인만 들어가지는건가요
다른 사람은 못보는걸까요
-
미해결따라하며 배우는 리액트 A-Z
Banner.css에 대해서
강사님은 내부적으로 Banner.css에 대한 내용을 복붙하셨는데,강의 영상에서 Banner.css 내에 소스가 다표기가 되지 않아서동일하게 진행하기 어려운 것 같습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
nginx+https 적용후 www.zoommeetinggo.p-e.kr 입력시 서비스 화면이 아닌 Welcome to nginx 화면 이동 관련하여 질문드립니다.
nginx+https 적용후www.zoommeetinggo.p-e.kr 입력시 서비스 화면이 아닌 Welcome to nginx 화면으로 이동하게 되었습니다. (https 가 적용된 https://www.zoommeetinggo.p-e.kr 으로 이동)- sudo vim /etc/nginx/nginx.conf 코드 수정# 443 포트로 접근시 ssl을 적용한 뒤 3000포트로 요청을 전달해주도록 하는 설정server {server_name 13.125.232.127 www.zoommeetinggo.p-e.kr; listen 80; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000; proxy_redirect off; } listen 443 ssl; # managed by Certbot ssl_certificate /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/privkey.pem; # managed by Certbot include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot } # 80 포트로 접근시 443 포트로 리다이렉트 시켜주는 설정 server { if ($host = www.zoommeetinggo.p-e.kr) { return 301 https://$host$request_uri; } # managed by Certbot server_name www.zoommeetinggo.p-e.kr; listen 80; return 404; # managed by Certbot }///////////////////////////////////////////////////////////////////////- sudo vim cd /etc/nginx/sites-available/default 코드 수정server { listen 80; listen [::]:80; root /var/www/html index index.html index.htm index.nginx-debian.html; server_name www.zoommeetinggo.p-e.kr; location / { proxy_pass http://localhost:3000; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; }}코드 수정후http://13.125.232.127 연결시 http://13.125.232.127:3000 리다이렉트 하여 서비스 화면을 보여줍니다. (http)http://www.zoommeetinggo.p-e.kr:3000 연결시 서비스 화면 보여줍니다, (http)https://www.zoommeetinggo.p-e.kr 연결시 nginx 화면으로 이동됩니다.무엇을 놓치고 있는지 잘 모르겠어서 질문드립니다. (https://www.zoommeetinggo.p-e.kr/ 연결시 https://www.zoommeetinggo.p-e.kr:3000 포트로 연결 되게 하고 싶습니다.)
-
미해결코드로 배우는 React with 스프링부트 API서버
테일윈드css사용할때
어떤 클래스명이 어떤 css에 해당하는지를 일부내용들은 암기하고 사용하시는건지 궁금합니다! 그냥 사용하다보면 저절로 외워지는건가요?그리고 강의내용과는 별개로 현업에서 디자인같은 부분은 피그마를 많이 사용하는듯 하는데 피그마로 디자인한것을 코드로 변환하는 과정이 어떻게 이루어지나요?피그마 자체기능으로 html코드로 변환한다음에 이걸 잘 가공?해서 프론트코드로 만들어내는건지 아니면 그냥 피그마 이미지만 보고 클론코딩하는것처럼 코드를 작성하는건지 궁금합니다
-
미해결Slack 클론 코딩[실시간 채팅 with React]
[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.
[진행사항]1.기존의 AWS IP는 http://11.111.111, http://11.111.111:3000 입력시 서비스 화면이 나타났니다.2. 도메인을 www.zoommeetinggo.p-e.kr으로 변경하고 http://www.zoommeetinggo.p-e.kr:3000 주소로 접속하면 AWS IP에서 실행한 서비스 화면이 보여졌습니다.[1, 2번 실행시 보여주는 화면 (http)]3. http://www.zoommeetinggo.p-e.kr을 입력하면 https://www.zoommeetinggo.p-e.kr/으로 변경되어 Nginx의 화면이 보여졌습니다.[3번 실행시 보여주는 화면 (https 적용)] [궁금한 점]nginx 설정 코드를 수정하였지만 서비스를 실행하면 서비스 화면이 아닌 nginx화면이 보입니다. 어떤 부분을 고쳐야 서비스화면을 보여줄지 모르겠어서 질문드립니다.- vim /etc/nginx/nginx.conf: React로 Nodebird SNS - nginx + https 적용하기(16.14분 코드 참고) server { server_name 11.111.111 www.zoommeetinggo.p-e.kr; listen 80; location / { proxy_set_header HOST $host; proxy_pass http://127.0.0.1:3000; proxy_redirect off; } listen 443 ssl; # managed by Certbot ssl_certificate /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/letsencrypt/live/www.zoommeetinggo.p-e.kr/privkey.pem; # managed by Certbot include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; }server { if ($host = www.zoommeetinggo.p-e.kr) { return 301 https://$host$request_uri;} # managed by Certbot server_name www.zoommeetinggo.p-e.kr; listen 80; return 404; # managed by Certbot }
-
미해결Next + React Query로 SNS 서비스 만들기
TypeError: rt.toLowerCase is not a function 및 Compiling 무한 로딩
▲ Next.js 14.2.1 - Local: http://localhost:3000 ✓ Starting... ✓ Ready in 5.2s ○ Compiling / ... ✓ Compiled / in 5.5s (583 modules) GET / 200 in 5896ms TypeError: rt.toLowerCase is not a function at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:30:274042 at finishResolved (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:192383) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:193267 at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:12:1) ... at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:13:1) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:12:1) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:204068 at Hook.eval [as callAsync] (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bund ○ Compiling /home ...화면이 버벅거릴 정도로 에러 코드가 길어서 어쩔 수 없이 잘라서 올립니다. < 현재 상황 >npm run dev 하면 바로 TypeError: rt.toLowerCase is not a function 에러가 발생합니다.에러가 발생해도 첫 랜딩 화면은 렌더링 됩니다.그러나 주소창에 url 입력하여 페이지 이동 시 에러 코드 맨 마지막 줄 처럼 무한 로딩이 걸리고 아무 것도 안됩니다.< 시도 해 본 것>https://stackoverflow.com/questions/78321779/typeerror-rt-tolowercase-is-not-a-function-nextjs를 따라 npm 재설치 => 실패프로젝트 폴더 삭제 후 재설치 => 실패다른 구글링 자료를 보면 13버전을 사용하라고 하는데, 14버전 강의를 듣기에 적용할 수 없는 해결책
-
미해결Slack 클론 코딩[실시간 채팅 with React]
[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.
[배포하기]를 수강 이후에 개발한 프로젝트를aws에 배포하는 중에서 문제가 발생하여 질문 드려요 devServer: { historyApiFallback: true, host: '퍼블릭 IPv4 주소', port: 3333, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, },host에 퍼블릭 IPv4 주소 을 설정하고 aws에 port 3333 포트를 열어 주었습니다. "scripts": { "dev": "webpack serve --env development", "build": "webpack", "start": "webpack serve" },npm run build 이후에npm run start 할 경우(퍼블릭 IPv4 주소 -> ex: 11.111.111.11 Error: listen EADDRNOTAVAIL: address not available 11.111.111.11:3333 at Server.setupListenHandle [as _listen2] (net.js:1314:21) at listenInCluster (net.js:1379:12) at doListen (net.js:1516:7) at processTicksAndRejections (internal/process/task_queues.js:83:21) { code: 'EADDRNOTAVAIL', errno: -99, syscall: 'listen', address: '11.111.111.11', port: 3333 }오류가 발생했습니다. 무엇이 문제인지 잘 모르겠어서 질문드립니다. [aws 실행상태]aws_인스턴스 한개에 back,front 폴더를 git을 사용 하여 백,프론트를 실행하고 있습니다.[전체 코드 - webpack.config.js]const path = require('path'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const webpack = require('webpack'); const isDevelopment = process.env.NODE_ENV !== 'production'; const config = { name: 'google_meet', mode: isDevelopment ? 'development' : 'production', devtool: isDevelopment ? 'hidden-source-map' : 'inline-source-map', resolve: { extensions: ['.js', '.jsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), }, }, entry: { app: './client', }, module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['last 2 chrome versions'] }, debug: isDevelopment, }, ], '@babel/preset-react', ], env: { development: { plugins: [require.resolve('react-refresh/babel')], }, }, }, exclude: path.join(__dirname, 'node_modules'), }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' })], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, devServer: { historyApiFallback: true, host: '퍼블릭 IPv4 주소', port: 3333, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); } if (!isDevelopment && config.plugins) { } module.exports = config;
-
미해결Next + React Query로 SNS 서비스 만들기
LoginButton 컴포넌트에서 useSession 오류
강의 3:53초 부분에 회원가입을 하자마자 로그인을 하면 useSession에 값이 제대로 들어오지 않는다고 하셨는데 라이브러리 자체 오류인가요 아니면 onSubmit에서 회원가입 플로우 직후 redirect("/home")하는 부분이 영향을 받아서 그런건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
제로초님 안녕하세요 ㅎㅎ 질문이 있습니다 ㅎㅎ
react-query에서 하나의 궁금 증이 있는데 제가 아직 다 안봐서 헷갈릴 수도 있긴 하겠지만 prefetchQuery의 경우는 post, pus, delete 등의 메소드 일때는 사용 하지 않고 대부분 get일때만 사용 하나요?! post, pus, delete 의 메소드들은 Mutation으로 사용 된다고 생각 하면 될까요?! 헷갈리네요 ㅠㅠprefetchQuery말고 axios 와 같은 라이브러리를 붙여서 사용 해도 될까요?! fatch 를 사용 하셔서 한번 여쭤 봅니다 ㅎㅎ
-
미해결Next + React Query로 SNS 서비스 만들기
Suspense 동작 질문드립니다.
Suspense 컴포넌트를 아래처럼 TabDeciderSuspense 컴포넌트 안에 포함시켰더니 데이터 페칭하는 동안 Tab, PostForm 컴포넌트가 로딩 스피너 때문에 보이지 않던데 Suspense 컴포넌트는 데이터 페칭하는 컴포넌트 밖으로 무조건 빼야 제대로 동작하는 건가요? <Suspense fallback={"Loading..."}> <HydrationBoundary state={dehydratedState} queryClient={queryClient}> <TabDecider /> </HydrationBoundary> </Suspense>
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer설정 중 user 초기값이 undefined로 나오는 에러
안녕하십니까 형님진행하다 보니 궁금한게 생겨서 여쭤보려고 합니다. reducer설정 중 초기값이 undefined로 들어오는 에러가 놔왔었는데욥error - Error: The slice reducer for key "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 에러 났던 부분운 default: state 이 부분이고 코드 보고 아래처럼 수정하니 잘 동작했습니다. export const initialState = { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, } const reducer = (state=initialState, action) => { switch(action.type) { default: { return { ...state } } } }default: state vs default: { return {...state}}문법적으로 똑같은 내용이 아닌지...어떤 차이가 있는지를 모르겠어서 질문드립니다!
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
커리큘럼 관련 문의건
좋은 강의 감사합니다!혹시 테스트코드는 커리큘럼에 없죠...?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 자료 다운 로드 뜨면 에러가 떠용 XML 이랑 에러..!
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
11-29 django-taggit 라이브러리
해당 강의에서 @hook의 AFTER_SAVE를 이용하여 tags를 업데이트 하는 것으로 확인하였습니다. 그렇다면 content의 내용에 수정이 이루어진 Note들은 tags 필드가 업데이트가 되지만 수정을 하지 않은 기존 Note들은 tags 필드가 비어있게 되는 것 같습니다. Content 수정한 Note : tags 필드가 hook에 의하여 업데이트 되어 저장됨Content 수정하지 않은 기존 Note : tags 필드가 업데이트 되어있지 않음혹시 강의 중에 제가 놓치거나 한 부분이 있을까요?