173만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요 8장 까지 마무리 하고 product 이미지 가 출력되지 않는 현상을 봤습니다. 확실한건 이미지 링크는 header에 Authorization에 bearer token이 없어서 출력되지 않는거 같아요.. 일단 shouldNotFilter에 if(path.startsWith("/api/products/view")) { return true; } 해서 보이게 했긴해지만 결국에는 링크도 토큰 인증 처리해야겠죠?
미해결
따라하며 배우는 리액트 네이티브 기초
이런게 뜨는데 npm라이브러리가 잘못된건가요? react-native-cli라 expo라이브러리를 쓸수도 없고...
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
exist 메서드 deprecated 됐다고 exists 써야한다고 하네요 ㅎ
미해결
Next + React Query로 SNS 서비스 만들기
마지막에 로그인시 저는 http://localhost:3000/api/auth/error "이 페이지는 존재하지 않습니다. 다른 페이지를 검색해 보세요 검색" 위 URL로 리다이렉트 되고 해당 ㅁㅔ시지가 뜹니다. 혹시 어디에 있는 정보로 로그인하는건지 궁금합니다
미해결
Next + React Query로 SNS 서비스 만들기
export async function getSearchResult({ queryKey }) { const [_1, _2, searchParams] = queryKey; const res = await fetch(api url, next: { tags: ["posts", "search", searchParams] }, cache: 'no-store' ) } next tags를 사용하는이유가 revalidate를 하기 위해서인데 fetch 옵션을 'no-store'로 주면 캐시가 되지 않는걸로 알고있어서 tags 사용안해도 되지않나요??
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
update 항목에서 true false 가 반대로 설명된 게 아닌지요? (화면 소스코드 코멘트) update 가 true 일 때 값을 변경 가능한 게 아닌지...
미해결
따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
send를 누르면 터미널에 이렇게 뜹니다. Server Running at 5000 C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193 throw new Error('The incoming JSON object does not contain a client_email field'); ^ Error: The incoming JSON object does not contain a client_email field at JWT.fromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193:19) at GoogleAuth._cacheClientFromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:313:16) at ReadStream.<anonymous> (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:347:36) at ReadStream.emit (node:events:519:28) at endReadableNT (node:internal/streams/readable:1696:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) Node.js v20.16.0 PS C:\project\vswork\chatbot-app-master> 아래와 같이 값이 입력이되어있는데도말입니다. 루트파일에다가 구글 인증json을 위치를 끌어다 넣어도 그렇습니다. 가르쳐줘서 고맙습니다. 근데 이렇게 문제가 생겨서 이 구간을 벗어나고 싶습니다 ㅠㅠ
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM 안녕하세요 강의 감사히 듣고 있습니다. 다름이 아니라 릴레이션 설정을 할 때 객체 방식으로 선언시 postman 결과는 잘 나오는데 IDE 에서 타입에러가 발생해서요 IDE 의 차이일까요? IDE 는 웹스톰을 사용 중 이고 typeORM 0.3.17 버전입니다. 찾아보니 TypeORM 0.3.x 이상 버전에서 제공되는 확장된 기능입니다 라는데 두 개의 방식 모두 사용해도 괜찮은지 궁금해서 글 남깁니다 Argument type {relations: {profile: boolean}} is not assignable to parameter type FindManyOptions<UserModel> | undefined
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
$tabBar.forEach((elm) => { elm.addEventListener('click', () => { onClick(elm.id); }); }); 이 onClick 함수 this.onClick으로 호출하지 않았는데, 이러면 TabBar 인스턴스의 onClick 메소드는 쓰지 않는 거 아닌가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
주소 안들어가집니다/
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, 알찬 강의와 친절한 답변 덕분에 열심히 학습하고 있습니다. 감사합니다! 이번 수업에서 사용하셨던 예제입니다. async function runner() { const result1 = await getPromise(1); // 1초 소요 const result2 = await getPromise(5); // 5초 소요 const result3 = await getPromise(8); // 8초 소요 } runner(); console.log('실행 끝') 질문입니다. 위의 코드에서, runner()를 실행했을 때 총 소요시간은 14초가 걸린다고 수업에서 말씀하셨습니다. async, await 키워드를 사용하면 promise chaining 처럼 동작하는 건가요? Promise.all() 처럼 동작해야 비동기의 효율성을 극대화할 수 있다고 생각했는데 의외여서요! promise chaining으로 동작하는 것은 마치 동기 함수들을 연속적으로 실행하는 것과 다를 바가 없어보입니다.. 어떤 부분을 제가 잘못 이해하고 있는걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요, 프론트(리액트)에서 프론트에서 credentials: include로 설정한경우 cors 문제가 발생하고있습니다. 이런 에러가 발생하고있는데요, 프론트측에서 해줘야하는 설정과 서버에서 해줘야하는 설정은 맞게해준것 같습니다. 먼저 프론트에서 해줘야하는 쿠키설정은 const httpLink = createHttpLink({ uri: 'http://localhost:3001/graphql', credentials: 'include', }); 이렇게 해줬습니다. 그리고 서버쪽에서는 onst app = await NestFactory.create(AppModule, { cors: true }); app.enableCors({ origin: 'http://localhost:3000', credentials: true, exposedHeaders: ['Authorization'], // * 사용할 헤더 추가. }); 이렇게 해주었는데요.. 이렇게해주고나서 로그인하면 맨위의 사진처럼 에러가납니다.. 버전은"@apollo/server": "^4.10.4", "@nestjs/apollo": "^12.2.0", 이렇게되어있는데.. https://www.inflearn.com/community/questions/896182/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-credentials-include%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%9C%EA%B2%BD%EC%9A%B0-cors-%EB%AC%B8%EC%A0%9C 이분이 해결하신거를 참고해봤는데, 저분이 app.module설정을 통해 해결하셨지만, 저는 버전이달라서그런가 거기에 cors설정을하면 에러가나더라구요.. 혹시 어떻게 하면 이 이슈를 헤쳐나갈수있을까요?..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
@UseGuards(GqlAuthGuard('refresh')) @Mutation(() => String) restoreAccessToken( @Context() context: IContext, // ): string { const user = context.req.user; return this.authService.restoreAccessToken({ user }); } 대충 이렇게 헤더에담긴 리프레시토큰을 그래프큐엘 가드에서 인가후 accessToken재발급이 이루어지고 있는데.. 실무에서 그래프큐엘을 사용할 경우 저렇게 그래프큐엘 가드를 사용해서 헤더에 담긴 리프레시토큰을 인가하여 accesstoken이 재발급되게 하는 코드를 사용하는지 아니면 선생님이 저희의 실습을위해 작성하신 코드인것인지 궁금합니다. jwt와 리프레시토큰 부분은 Rest API식으로 하는게 나을까요?
미해결
Next + React Query로 SNS 서비스 만들기
제로초님의 next-auth 작업하시는걸 보고 프론트에서 next-auth로 로그인하는것을 구현을 하긴 했는데 로그인(인가)을 하는 주체가 프론트다 보니 기존에 배웠을때는 nest 또는 node에서 passport를 이용해서 작업을 했엇는데 이제는 passport로 인가 하는 작업이 필요가 없어진건지 궁금합니니다. 필요가 없다라고 하면 백엔드서버에서는 이사람이 로그인을 했는지 안했는지를 알아야 할텐데 그거는 어떻게 구현을 해야할지가 막막해서 질문드립니다 ㅠㅠ
미해결
따라하며 배우는 리액트 네이티브 기초
레이아웃 표시를 했을때, 위치는 잡히는 것 같지만 시각적으로 전혀 보이지 않아요. 마치 뒤에 가려진 것 처럼요 // InputForm.js import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native' import React from 'react' const InputForm = () => { return ( <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.addFormContainer}> <TextInput style={styles.inputField} placeholder="할 일을 작성해주세요." /> <Pressable style={styles.addButton}> <Text style={styles.addButtonText} >+</Text> </Pressable> </KeyboardAvoidingView> ) } export default InputForm const styles = StyleSheet.create({ addFormContainer: { flexDirection: 'row', marginTop: 'auto', marginBottom: 30, paddingHorizontal: 20, backgroundColor: '#f7f8fa' }, inputField: { flex: 1, height: 42, padding: 5, marginRight: 25, borderRadius: 4, borderColor: 'rgba(0, 0, 0, 0.2)', borderWidth: 1, color: '#000000', fontSize: 15, textAlignVertical: 'center' }, addButton: { justifyContent: 'center', alignItems: 'center', width: 42, height: 42, borderRadius: 4, backgroundColor: 'rgba(0,0,0,0.7)', shadowColor: '#000000', shadowOpacity: 0.14, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } }, addButtonText: { color: 'white', fontSize: 25 }, }) // MainScreen.js import { SafeAreaView, StyleSheet, Text, View, StatusBar, Platform } from 'react-native' import React from 'react' import InputForm from '../components/InputForm' const MainScreen = () => { return ( <View> <SafeAreaView style={styles.container}> <StatusBar barStyle={'default'} /> <Text style={styles.pageTitle}>ToDo App</Text> <View style={styles.listView}> <Text style={styles.listTitle}>할 일</Text> </View> <View style={styles.separator} /> <View style={styles.listView}> <Text style={styles.listTitle}>완료된 일</Text> </View> <InputForm /> </SafeAreaView> </View> ) } export default MainScreen const styles = StyleSheet.create({ container: { flex: 1, paddingTop: Platform.OS = 'android' ? 20 : 0, backgroundColor: '#f7f8fa' }, pageTitle: { marginBottom: 35, paddingHorizontal: 15, fontSize: 54, fontWeight: '600', }, separator: { marginHorizontal: 10, marginTop: 25, marginBottom: 10, borderBottomWidth: 1, borderBottomColor: 'rgba(0,0,0,0.2)' }, listView: { flex: 1, }, listTitle: { marginBottom: 25, paddingHorizontal: 15, fontSize: 41, fontWeight: '500', } }) // App.js import { StyleSheet, Text, View } from 'react-native'; import MainScreen from './screens/MainScreen'; export default function App() { return ( <View style={styles.container}> <MainScreen /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'flex-start', justifyContent: 'center', }, }); // package.json { "name": "awesomeproject", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "^51.0.27", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.5" }, "devDependencies": { "@babel/core": "^7.24.0" }, "private": true }
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 질문 ; 엔티티의 버전 번호를 업데이트한다는 이해했는데. 어떤필드가 업데이트되었는지 로그가 궁금할땐 어떻게 처리해야하나요 ? 변경사항을 로깅할 땐 보통 어떻게 작업하는지 궁금합니다.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요. 질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다. 시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다. 오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Q1 7-01 02 강의에서 ipv4address custom field를 생성하셨는데요 8-20 강의 같이 이후에는 그냥 Django GenericIPAddressField를 사용셨습니다. 7-01 02강의는 그냥 custom 필드를 보여주기 위한 예시이고 그냥 장고에서 제공해주는 IP 필드를 사용하면 되는건가요? 아니면 차이점이 존재하는 건가요? Q2 제가 제작한 사이트의 사용량 집계를 위해 로그를 얻으려고 합니다. class AccessLog(models.Model): request = models.URLField() time = models.DateTimeField(auto_now=True) user = models.ForeignKey(User, on_delete=models.CASCADE, null=True) ip = models.GenericIPAddressField() 상기와 같은 모델을 작성하여 request가 client로 날라올 때마다 db에 쌓아나가는게 맞을까요? 아니라면 logger를 이용하는게 맞을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 6분 17초에 eslintrc 파일은 저에게는 eslint.config.js로 나와서 문의드립니다! 안에 내용도 좀 다르고 저는 eslint.config.js. 파일만 있어서요! 같다고 봐야할까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
브라우저를 실행 했습니다 문제는 이렇게 보내고 이런 에러가 났습니다. 또한 터미널에는 아무런 값도 뜨지않고 이상태 그대로 입니다. 무엇이 문제일까요?아래 처럼되지 않습니다. <예제가 바르게 작동된 모습> const express = require('express'); const router = express.Router(); const structjson = require('./structjson.js'); const dialogflow = require('dialogflow'); const uuid = require('uuid'); const config = require('../config/keys'); const projectId = config.googleProjectID const sessionId = config.dialogFlowSessionID const languageCode = config.dialogFlowSessionLanguageCode // Create a new session const sessionClient = new dialogflow.SessionsClient(); const sessionPath = sessionClient.sessionPath(projectId, sessionId); // We will make two routes // Text Query Route router.post('/textQuery', async (req, res) => { //We need to send some information that comes from the client to Dialogflow API // The text query request. const request = { session: sessionPath, queryInput: { text: { // The query to send to the dialogflow agent text: req.body.text, // The language used by the client (en-US) languageCode: languageCode, }, }, }; // Send request and log result const responses = await sessionClient.detectIntent(request); console.log('Detected intent'); const result = responses[0].queryResult; console.log(` Query: ${result.queryText}`); console.log(` Response: ${result.fulfillmentText}`); res.send(result) }) //Event Query Route router.post('/eventQuery', async (req, res) => { //We need to send some information that comes from the client to Dialogflow API // The text query request. const request = { session: sessionPath, queryInput: { event: { // The query to send to the dialogflow agent name: req.body.event, // The language used by the client (en-US) languageCode: languageCode, }, }, }; // Send request and log result const responses = await sessionClient.detectIntent(request); console.log('Detected intent'); const result = responses[0].queryResult; console.log(` Query: ${result.queryText}`); console.log(` Response: ${result.fulfillmentText}`); res.send(result) }) module.exports = router; const express = require("express"); const path = require("path"); const bodyParser = require("body-parser"); const app = express(); const config = require("./server/config/keys"); // const mongoose = require("mongoose"); // mongoose.connect(config.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true }) // .then(() => console.log('MongoDB Connected...')) // .catch(err => console.log(err)); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use('/api/dialogflow', require('./server/routes/dialogflow')); // Serve static assets if in production if (process.env.NODE_ENV === "production") { // Set static folder app.use(express.static("client/build")); // index.html for all page routes app.get("*", (req, res) => { res.sendFile(path.resolve(__dirname, "client", "build", "index.html")); }); } const port = process.env.PORT || 5000; app.listen(port, () => { console.log(`Server Running at ${port}`) }); { "name": "chatbot-app", "version": "1.0.0", "description": "chatbot-app", "main": "index.js", "engines": { "node": ">=20.16.0", "npm": ">=10.2.0" }, "scripts": { "start": "node index.js", "backend": "nodemon index.js", "frontend": "npm run front --prefix client", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" }, "author": "Jaewon Ahn", "license": "ISC", "dependencies": { "actions-on-google": "^2.6.0", "body-parser": "^1.18.3", "dialogflow": "^1.2.0", "dialogflow-fulfillment": "^0.6.1", "express": "^4.16.4", "mongoose": "^5.4.20" }, "devDependencies": { "concurrently": "^4.1.0", "nodemon": "^1.18.10" } }
미해결
따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
제이슨파일에 최신 버전으로 호환이될 수 있게 방법을 알려주시면 좋을 것 같습니다!!
