173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
redirect는 try/catch문 안에 있으면 안돼서 그 위해 shouldRedirect의 값으로 조건문을 만들어 if문 안에서만 redirect하게 하셨는데, 이후에 catch문에서 return을 넣어주시더라고요. 그러면 shouldRedirect라는 변수를 쓰지 않아도 어차피 catch문이 실행된 경우에는 return 되니까 redirect를 아래에 그냥 배치해도 상관없지 않나 질문드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 제가 설치도구들을 다운 받고 강의를 이어 듣는데, 제 플레이터와 선생님이 보여주신 초기 화면이 달라서 어느 부분이 잘못되었는지 확인 받고 싶습니다!
해결됨
Next + React Query로 SNS 서비스 만들기
강의에서 알려주신 router.replace() 를 사용하지 않고 // @/app/(beforeLogin)/@modal/(.)login/page.tsx import { redirect } from "next/navigation"; export default function Login() { redirect("/i/flow/login"); } 기존의 이 코드를 인터셉트 라우팅으로 줘서 홈페이지 -> 인터셉트 라우팅된 /login -> 인터셉트 라우팅된 /i/flow/login 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
상황)도메인 연결하면 돈이 나간대서 탄력적 ip만 연결헤줘도 원래 로그인까지 화면은 잘 나왔었는데요, s3연결하기부터 따라하기 전에 강의를 보았는데 prepare에 레파지토리 한개만 연결하길래, 기존에 front, back 경로에 레파지토리를 각각 만들어서 커밋중이여가지고 기존 레파지토리를 다 지우고 초기화한 다음 새 레파지토리와 새 인스턴스를 연결해서 s3까지 따라했거든요. 그런데 그 뒤로 back ip는 화면에 hello express라고 잘 나오는데 front탄력적 ip를 입력하니까 화면이 연결이 안되는 상황입니다. (DB 테이블 대소문자 잘 되어있습니다, env는 ubuntu에도 비밀 엑세스키까지 4가지 똑같이 입력해놓았습니다, S3에 나오는 내용까지 설치는 완료한 상태입니다. img관련 코드에서 backUrl 지워주었습니다. ubuntu에서도 git pull, npm i , npm run build해주었습니다.) 질문)프론트 ip가 화면에 안나오는데 log와 콘솔에 아무것도 안떠서, 이럴 때 화면이 안나오는 원인과 해결방법이 어떻게 되는지 궁금합니다. 질문)보안자격증명의 액세스키에 선생님거는 리전, 서비스가 나와있는데 제거는 코드에 작성한 내용과 연결이 안되서 N/A라고 나오는게 맞나요? 시도해본 것)back에서 배포용일 때 if문에 도메인 주소를 빼고 실행해보기도 하고, 도메인 주소 대신 origin front 탄력적 ip를 넣어서 실행도 해보았지만 연결이 되지 않았습니다. if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); // app.use(cors({ // origin: 'http://nodebird.com', // credentials: true, // })); } else { app.use(morgan('dev')); } 작성한 코드 일부) app.js const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); 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()); // app.use(cors({ // origin: 'http://nodebird.com', // credentials: true, // })); } else { app.use(morgan('dev')); } app.use(cors({ origin: ['http://localhost:3060', 'http://nodebird.com', 'http://13.125.122.77'], 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, //일단 false로 하고 https적용할 땐 ture // domain: process.env.NODE_ENV = 'production' && '.nodebirdcom' //도메인 사용할 경우 // }, })); 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('서버 실행 중'); }); routes/post.js const express = require('express'); const {Post, Image, Comment, User, Hashtag} = require('../models'); const {isLoggedIn} = require('./middlewares'); const router = express.Router(); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const multerS3 = require('multer-s3'); const AWS = require('aws-sdk'); try { fs.accessSync('uploads'); } catch(error) { console.error('uploads폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } AWS.config.update({ accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, region: 'ap-northeast-2', }); const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'react-saga-nodebird-s3', key(req, file, cb){ cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: {fileSize: 20 * 1024 * 1024} //20MB }); router.post('/images', isLoggedIn, upload.array('image'),(req, res, next) => { //POST /post/images res.json(req.files.map((v) => v.location)); }); backUrl남아있는 부분 config.js export const backUrl = 'http://13.209.144.99'; profile.js import { backUrl } from '../config/config'; const Profile = () => { const { data: followersData, error:followerError } = useSWR(`${backUrl}/user/followers?limit=${followersLimit}`, fetcher); const { data: followingsData, error:followingError } = useSWR(`${backUrl}/user/followings?limit=${followingsLimit}`, fetcher); export default Profile; sagas/index import { backUrl } from '../config/config'; axios.defaults.baseURL = backUrl; back/package.json { "name": "react-nodebird-back", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "cross-env NODE_ENV=production pm2 start app.js" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "aws-sdk": "^2.1538.0", "bcrypt": "^5.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "dotenv": "^16.3.1", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^7.1.0", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "multer-s3": "^3.0.1", "mysql2": "^3.6.5", "passport": "^0.7.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "sequelize": "^6.35.2", "sequelize-cli": "^6.6.2" }, "devDependencies": { "nodemon": "^2.0.22" } } front/package.json { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "npx browserslist@latest --update-db && NODE_OPTIONS=--openssl-legacy-provider next -p 3060", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80", "lint": "eslint ." }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.2.1", "@next/bundle-analyzer": "^14.0.4", "antd": "^4.2.1", "axios": "^1.6.2", "babel-plugin-styled-components": "^2.1.4", "cross-env": "^7.0.3", "eslint-config-airbnb": "^19.0.4", "immer": "^10.0.3", "moment": "^2.30.1", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "pm2": "^5.3.0", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.9", "react-slick": "^0.29.0", "redux": "^4.2.1", "redux-devtools-extension": "^2.13.9", "redux-saga": "^1.3.0", "saga": "^4.0.0-alpha", "shortid": "^2.2.16", "styled-components": "^6.1.1", "swr": "^2.2.4" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "faker": "^5.5.3" } } 사용중인OS) macOS
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 제로초님 [리뉴얼] React로 NodeBird SNS 만들기 강의의 섹션 6. AWS에 배포하기: 우분투에 MySQL 설치하기 까지 진행한 수강생 입니다! 저는 windows 10을 사용 하고 있으며, 윈도우 서비스에서 MySQL을 실행 한 상태입니다. 아마존의 front와 back 인스턴스가 잘 실행되고 있음 을 확인하였습니다. 사전에 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치 하였습니다. node 버전은 v14.21.3, npm 버전은 6.14.18을 설치 하였습니다. AWS 우분투 백엔드 서버와 root 서버에서 MySQL 8 버전을 완전 삭제한 후 재설치 하였습니다. (원래 우분투 백엔드 서버에만 설치해야 하는데 루트 경로에 설치하는 바람에 재설치를 진행하였습니다!) 사진과 같이 백엔드 root 서버 터미널에 npx sequelize db:create을 입력하면 command not found: sequelize (sequalize 명령을 찾을 수 없습니다.)가 뜹니다. 문제를 해결하기 위해서 첫 번째로 sequelize와 sequelize-cil이 back 폴더에 제대로 설치가 되어있는지 확인했습니다. 아래 사진과 같이 back 폴더의 package.json 파일에서 시퀄라이즈 잘 설치되어 있음을 확인하였습니다. 두 번째로, 우분투 리눅스 루트 command not found: sequelize, npx sequelize db:create command not found: sequelize 해결 시퀄라이즈 command not found 해결 등등의 command not found: sequelize 관련 키워드를 구글링 하고, 노드버드 강의 커뮤니티 글을 보던 중 npx sequelize db:create 대신 sudo npx sequelize db:create 사용하는 방법을 찾았습니다. sudo를 사용해 npx sequelize db:create을 시도하였으나 여전히 sequelize 명령어가 없다고 뜹니다. 어떻게 하면 백엔드 root 서버에서 npx sequelize db:create을 성공할 수 있을까요? 혹시 관련 키워드나 힌트를 주실 수 있나요? 항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!
해결됨
Next.js 필수 개발 가이드 3시간 완성!
질문이 있습니다. page 같은 경우는 최대한 SSR로 하고 page 하위에 사용되는 컴포넌트 같은 경우는 브라우저 API 사용한다면 CSR로 하는게 맞나요? ( 하이브리드 렌더링 방식 ) app/page.tsx 파일 상단에 "use client" 선언하면 페이지 전체가 CSR로 된다고 생각하는데 네트워크 창에 localhost 에 preview를 보면 빈 페이지가 아닌 렌더링된 내용이 보이는데 왜 그런걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
이미지에 Link 태그를 쓰는거에 대한 질문입니다. Link 같은 경우에는 default로 prefetch가 되는데, 이미지를 눌렀을때 나오는 정보들은 굳이 prefetch를 미리 하고 있을 필요는 없겠죠? 그러면 실제 서비스라면 prefetch를 false로 하거나 router.push를 이용하는게 좋지 않을지 궁금합니다. 페이지를 구성할때 존재하는 모든 경로를 Link 태그로 그냥 쓰게 되면 prefetch가 모두 되어버려서, 큰 카테고리를 이동하는 경우만 prefetch를 키면 되지 않을까 하는 고민입니다.
해결됨
Next + React Query로 SNS 서비스 만들기
선생님이 사용하시는 IDE는 , 속성의 종류가 회색글씨로 나오는게, 마치 타입스크립트처럼 복잡하게 생각할 필요 없이 명시적으로 나와서 편해 보입니다. 혹시 vscode에서도 저런 익스텐션이 있을까요? 아니면 웹스톰을 사용하면 저게 자동으로 나오나요?
해결됨
Next.js 풀스택 Github Issue 서비스 만들기
안녕하세요? 꾸준히 학습을 하여 60강을 지나고 있는데요, 페이지.tsx 에서도 프리즈마를 활용해서 데이터를 서버로 요청하는것은 처음 보았습니다. 이렇게 되면 라우트를 거치지 않고 바로 데이터요청을 하는 것인데.. Fetch 를 통한 route.tsx 를 거치지 않고 바로 요청하는 이유가 있는지요? 현업에서도 이렇게 하는 경우가 자주 있는지요?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 useSelectedLayoutSegment usePathname 두 훅의 차이점이 궁금합니다. 둘 다 url에서 쿼리스트링 전까지 나오는 문자열을 추출하는 훅으로 보이는데 언제 어떤 훅을 사용해야 하나요? ActiveLink 만드는데 usePathname 으로는 안되나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 수업 시작하기 전에 궁금한 점이 있어서요. 앞쪽은 html, css , js 수업영상들이 있고 뒤쪽부터 리액트 시작이던데, 혹시 리액트 수업 영상 부터 시작을 하면 세팅이라던가 수업하면서 앞쪽을 수강하지 않아서 생기는 차이가 있을까요? 그리고 에디터는 vscode 말고 다른거를 써도 문제가 없을까요? 또, 저는 웹스톰을 쓰고 있는데 웹스톰에서는 plugins를 따로 설치 않해도 될까요?
미해결
Next + React Query로 SNS 서비스 만들기
강좌 잘 따라가고 마지막 부분에서 서버 띄우기 위해 터미널을 하나 더 열고 명령어를 적었습니다. 해당에러 node_module파일에 msw에 내부 파일에서 Response를 참지하지 못한다는 에러가 있어서 .. 브런치를 다시 지우고 작업도해보고 구글링과 공식문서를 보았는데도 문제의 해결점을 찾지 못하던 중에 12시간 전에 올라온 저와 동일한 문제를 가진 사람을 발견했어요 - ! https://www.reddit.com/r/nextjs/comments/1997wb3/msw_2x_and_nextjs_14_has_anyone_successfully/ 하지만, 이 분도 해결하지 못한거 같더라구요ㅠㅠ 현재 저의 msw버전은 msw 버전 낮춰서 작업을 하는 법이 해결방법인가요 ? 또 하나의 작은 질문입니다만, 현재 nodejs의 임시방편적인 코드를 사용하고 있는데 서버 관련 코드를 setupServer를 사용해도 괜찮을까요 ?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제목 처럼, 저는 @modal을 app경로에 생성해서 root 디렉토리의 page.tsx 와 함께 layout.tsx에 그려지길 원합니다. 그래서 저는 로그인 페이지를 따로 작성해서 가지고 있지 않고, 어느 페이지에서든지 모달창이 나오게 하고 싶습니다.
미해결
Next + React Query로 SNS 서비스 만들기
/ 로 들어갈 때 (beforeLogin) 폴더에 layout.tsx가 렌더링 되는 이유가 뭐에요? (afterLogin) 폴더 밑에도 layout.tsx가 있는데 (beforeLogin) 폴더 밑에 layout.tsx가 칠드런으로 선택되는 이유가 궁금합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 제로초님 [리뉴얼] React로 NodeBird SNS 만들기 강의의 섹션 6. AWS에 배포하기: 우분투에 노드 설치하기 까지 진행한 수강생 입니다! 우분투에 노드 설치하기 강의와 다음 강의인 우분투에 MySQL 설치하기 강의에서도 AWS 우분투 프론트 서버에서 npm run build가 성공했음을 확인하지 못하여 질문 글 올립니다! 사전에 강의를 진행하면서 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치하였습니다. node 버전은 v14.21.3, npm 버전은 6.14.18을 설치하였습니다. 제로초님 강의와 다르게 react-nodebird에 prepare 폴더는 만들지 않습니다. 그래서 react-nodebird 폴더 아래에 바로 .git, front, back, .gitignore, react-nodebird.pem 파일이 위치해 있습니다. npm run build 를 진행하기 전 우분투 프론트 서버 인스턴스 연결 주소를 정확히 입력하였습니다. ubuntu 프론트 서버에서 git pull과 npm i를 한 다음, npm run build를 진행하였으나 빌드가 되지 않고, 에러가 나타났습니다. 에러 전체를 번역 후 읽어보니 눈에 띄는 부분은 다음과 같았습니다. Error occurred prerendering page "/about". Read more: https://err.sh/next.js/prerender-error 페이지 "/about"을(를) 미리 렌더링하는 동안 오류가 발생했습니다. 자세한 내용: https://err.sh/next.js/prerender-error TypeError: Cannot read property 'data' of undefined 유형 오류: 정의되지 않은 속성 '데이터'를 읽을 수 없습니다 about을 렌더링하는 동안 오류가 발생했다는 메시지를 확인하고, 정적 페이지인 about.js의 getStaticProps를 의심했지만 에러 메시지에는 getStaticProps 코드 언급이 없어서 함부로 의심하는 걸 멈췄습니다. https://nextjs.org/docs/messages/prerender-error 에러 메시지에 있는 next 사이트를 확인했으나 제 미숙함으로 문제를 해결할 방법을 찾지 못했습니다. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! 이것은 아마도 npm의 문제가 아닐 것입니다. 위에 추가적인 로깅 출력이 있을 것 같습니다. npm ERR! 이 실행의 전체 로그는 다음에서 확인할 수 있습니다 :npm ERR! /home/ubuntu/.npm/_logs/2024-01-17T18_39_56_370Z-debug.log vscode 에서 debug.log를 클릭했으나 No match results가 뜨며 로그를 확인할 수 없었습니다. 문제를 해결하기 위해 커뮤니티를 확인하던 중 똑같은 aws 빌드 문제가 발생한 질문 글을 발견하였습니다. -- 해당 질문글 링크 -- https://www.inflearn.com/course/lecture?courseSlug=%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC&unitId=49013&category=questionDetail&tab=community&q=254338 해당 질문 글에서 제로초님은 npm i를 다시 하거나 styled-components 버전 문제일 가능성을 알려주셨습니다. 강의와 똑같이 styled-components ^5.1.1 버전을 사용하고 있음을 확인하였고, 다시 우분투 프론트 서버에서 npm install를 한 후, 빌드를 시도해보았으나 상단 에러와 똑같은 문제가 발생했습니다. vsCode를 완전히 껐다가 키고, 우분투 인스턴스를 잠시 중시 후 재부팅 해보았음에도 같은 문제가 발생하였습니다. node react AWS 구동 방법, AWS E2U 배포, AWS 빌드 문제 npm 관련 키워드를 검색하면서 npm을 실행할 때 종속성이나 캐시 문제 발생이 원인이지 않을까 짐작했습니다. 그래서 로컬 front 경로에서 아래 네 가지 작업을 진행하였습니다. (사전에 node_modules 폴더, package.lock.json 파일, .next를 삭제하기 전에 로컬 프론트에서 npm run dev, npm run build, npm start 스크립트를 실행해 서버가 성공적으로 연결됨을 확인하였습니다.) 로컬 front 경로 1. node_modules 폴더 삭제 2. package.lock.json 삭제 3. .next 삭제 4. npm cache clean --force 로 npm 캐시 삭제 네 가지 작업을 진행한 후 로컬 front에서 다시 npm install을 하여 node_modules과 package.lock.json을 생성하였습니다. 다시 aws 우분투 프론트 서버로 돌아와 node, npm이 정상적으로 설치되었음을 확인하고 git pull, npm i 를 하고, npm run build를 했지만 문제는 해결되지 않았습니다! 어떻게 하면 AWS ubuntu 프론트 서버 경로에서 npm run build를 성공할 수 있을까요? 혹시 관련 키워드나 힌트를 주실 수 있나요? aws를 처음 사용해서 미숙함에 질문 글이 많이 길어졌습니다. 항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!
미해결
제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서 발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요 어째서 제가 읽기에는 unsubscribe = ~ 온스냅샷함수 ~ . . . return () => unsubscribe함수 실행 useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데 다시 온스냅샷함수를 실행? 제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠ export default function Timeline() { const [tweets, setTweet] = useState<ITweet[]>([]); let unsubscribe: Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) ); unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { const tweets = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username, photo } = doc.data(); return { tweet, createdAt, userId, username, photo, id: doc.id, }; }); setTweet(tweets); }); }; useEffect(() => { fetchTweets(); return () => { unsubscribe && unsubscribe(); }; }, []); }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
모듈을 찾을 수 없다고 나옵니다. node_modules안에 파일이 있는거 확인했고 pakage.json안에 설치 잘 되어있는 것도 확인했습니다. 어떤게 문제인지 알려주시면 감사하겠습니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql-mutation-args 강의를 보면서 따라하던 도중 아래와 같은 에러가 발생해서 문의 드립니다. 하드코딩으로 graphql 코드를 생성해서 요청을 해도 위와 같은 에러가 발생합니다. 아래는 index.js 에 작성한 코드와 개발자도구의 네트워크 탭 캡처 사진 입니다. 찾아보니 아폴로서버와 graphql 버전이 맞지 않아서 그런 것 같다는 의견이 있던데, 어떻게 해결해야 할지 잘 모르겠습니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <View style={styles.productBlur} />} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, }); 어떤 오류메세지도 뜨지않고, 에뮬레이터에 화면이 출력되지않는 문제가 발생합니다. Carousel을 적용하기전에는 화면 잘 출력되었는데, Carousel을 적용하니 화면이 출력되지않네요.. Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details. 이러한 오류가 발생해서 GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데, 애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다. 서버는 잘 연결되어있는걸 확인햇습니다.. 뭐가문제일까요
해결됨
Next + React Query로 SNS 서비스 만들기
> duckblog@0.1.0 build > next build && next export ⚠ Invalid next.config.js options detected: ⚠ Unrecognized key(s) in object: 'appDir' at "experimental" ⚠ Unrecognized key(s) in object: 'dynamic' ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config ▲ Next.js 14.0.4 ✓ Creating an optimized production build ✓ Compiled successfully ✓ Linting and checking validity of types > Build error occurred Error: Page "/post/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config. at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:1012:59 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async Promise.all (index 6) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:892:17 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:829:124 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async build (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:187:29) at async main (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/bin/next:157:5) next.config.js /** @type {{output: string, assetPrefix: string, experimental: {appDir: boolean}}} */ const nextConfig = { experimental: { appDir: true, }, output: "export", assetPrefix: "/duckblog/", // dynamic: "force-static", }; module.exports = nextConfig; build시에 발생하는 에러입니다. dynamic route에서 에러가 발생하는것 같은데 깃헙이슈나 레디스에 올라와있는 방법으로도 잘 해결이 안되네요... output export 를 없애고 빌드르 하면 아래와 같은 에러가 발생합니다 The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export
