173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next + React Query로 SNS 서비스 만들기
'Next프로젝트 시작하기' 6:50 초에 현재는 npx create-next-app@latest 명령시 14버전이 설치되는데 상관이 없는건가요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. nginx에 배포를해서 실행을하니 실행은되는데 antd 가 적용이 안되는데 왜그런지 모르겠습니다. nginx.conf파일에 아래처럼 구성했고요(docker이용해서 .next 폴더 /usr/share/nginx/html/_next 에 복사했음) location / { root /usr/share/nginx/html; index /_next/server/pages/index.html; } .next 폴더 하위에 server/pages 폴더 아래에 index.html이 있어 index부분을 해당 파일로 지정하였는대 antd가 적용이 안됩니다. 왜그런걸까요 ㅠ? (npm run dev로 실행시에는 적용됩니다.)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰보고 똑같이작성해도 에러가나고, 깃허브에서 자료받아서 복붙해도 똑같은 에러가나네요 ,ㅠ 오타는 절대아니고 무슨 원인일까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 제로초님! 섹션 4. 백엔드 노드 서버 구축하기 credentials로 쿠키 공유하기 강의까지 수강한 수강생입니다! 작업물을 git clone하고 모듈 설치 후 npm run dev 하는 과정에서 문제가 발생했습니다! (프론트는 front 폴더 내에서 npm install 로 node_modules 를 생성하였습니다.) 회원가입 구현하기 강의 영상과 똑같이 백엔드 터미널에 npm i express@4.17.1 를 입력해 back 폴더 내에 node_modules 폴더를 생성하고 백엔드에서 npm run dev 를 하면 아래 사진과 같은 에러가 나타납니다! 이유가 무엇인지 궁금합니다! ++ MySQL 환경 변수 설정은 미리 path로 설정하여 MySQL이 정상 작동됨을 확인하였습니다! ++ vsCode 파워셀 터미널에서 작업하였습니다! 항상 강의 영상 잘 보고 있습니다! 감사합니다 제로초님!
해결됨
Next + React Query로 SNS 서비스 만들기
windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086 해당 이슈가 맞는지 궁금합니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
10-04-graphql-codegen-mutation/query 안녕하세요, 원두 강사님. 아래글에서 빠른 답글 감사합니다. 그러나 아직 해결이 되지 않은 문제가 있습니다. "yarn generate"를 하면 Done이라고 뜨긴 하는데 ts파일이 전혀 생성되지 않고 있습니다. 터미널 창 입니다. ts파일이 생기지 않은 모습입니다. codegen.yaml 파일입니다. (띄어쓰기는 두번 씩으로 들여쓰기가 한번 씩 되어 있습니다.) package.json 파일입니다. 제가 시도한 터미널 명령어는 rm -rf ./node_modules && npm install yarn add -D @graphql-codegen/cli yarn add -D @graphql-codegen/typescript yarn add ts-node 입니다. 좌측 메뉴탭 윗부분의 새로고침 버튼을 여러번 눌러봐도 마찬가지고 비쥬얼스튜디오코드 에디터를 껐다 다시 켜봐도 마찬가지 입니다ㅠㅜㅠㅜ AI 답변 받은 이후 차근차근 따라 해봤지만 해결이 안되고 있습니다. 노드모듈즈와 yarn.lock을 지우고 yarn install 이후 package.json 에서 코드젠 관련 된 코드줄 다 지우고 다시 처음부터 하나씩 해봐도 안됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
크롬에서 위치 설정해줘도 아무것도 안뜨네요 ㅠㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. react와 react-native가 따로 있는 것으로 아는대 react로는 웹과 앱 모두 한번에 개발할 수 있는 프레임워크가 따로 없나요? flutter의 경우는 3개의 환경 모두 한번에 개발이 가능한걸로 아는대 react는(반응형 x) 웹/앱 개발을 위해 native 를 별도로 개발해야하는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
(사진)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 https://backend-example.codebootcamp.co.kr/graphql 이 사이트 접속이 안되고 있습니다. 점검 부탁드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
export const FETCH_BOARDS = gql` query fetchBoards($page: Int) { fetchBoards(page: $page) { _id writer title createdAt } } `; ($page:Int)와 (page:$page)의 역할이 무엇인가요
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 갑자기 로컬호스트에 접속이 안 되어서 질문합니다 npm run dev 하면 컴파일까지는 성공하는데 그 다음에 localhost 로 접속하면 다음과 같은 에러가 뜹니다 error - ./node_modules/worker-farm/lib/fork.js:3:0 Module not found: Can't resolve 'child_process' null Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp' Could not find files for / in .next/build-manifest.json (중간중간에 콘솔로그 찍힌건 생략했습니다) 개발자도구 확인해보면 에러는 안 나옵니다 구글링해서 package.json 수정하는 방법이랑 _document.js에 import 'classlist.js' 하는방법 시도해봤는데 오류가 해결되지 않았습니다.. 어떻게 해야할까요ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의에 나온 백엔드 주소랑 강의 자료의 34.64.135.149 주소가 다릅니다 어떤 주소가 맞는지요? 둘 다 적용해도 접속이 안됩니다. 또한 port번호는 어떤 걸 사용해도 상관 없나요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
넥스트는 12버전 사용하고 있습니다. 빌드 할 때 보통 시간이 20초 정도 걸리나요? 새로고침하면 20초 정도 계속 걸려서 테스트하기가 참.. 힘드네용..ㅜ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm run build > react-nodebird-front@1.0.0 build > cross-env ANALYZE=true NODE_ENV=production next build Linting and checking validity of types .. ⨯ ESLint: ESLint configuration in .eslintrc is invalid: - Unexpected top-level property "parseOptions". ✓ Linting and checking validity of types Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled Webpack Bundle Analyzer saved report to /home/ubuntu/TwitterClone-FS-/front/.next/analyze/nodejs.html No bundles were parsed. Analyzer will show only original module sizes from stats file. Webpack Bundle Analyzer saved report to /home/ubuntu/TwitterClone-FS-/front/.next/analyze/edge.html Using external babel configuration from /home/ubuntu/TwitterClone-FS-/front/.babelrc ⚠ It looks like there is a custom Babel configuration can be removed : ⚠ Next.js supports the following features natively: ⚠ - 'styled-components' can be enabled via 'compiler.styledComponents' in 'next.config.js' ⚠ For more details configuration options, please refer https://nextjs.org/docs/architecture/nextjs-compiler#supported-features Creating an optimized production build ... 계속 빌드를 진행하고있는데, ⨯ ESLint: ESLint configuration in .eslintrc is invalid: - Unexpected top-level property "parseOptions". 이부분, 통과못해도 계속해서 빌드가 진행되나요!? 아니면, 이부분때문에 지금 계속 빌드를 못하고 있는걸까요? 평균적인 빌드시간을 알고 싶습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm install npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@faker-js/faker@8.3.1', npm WARN EBADENGINE required: { node: '^14.17.0 || ^16.13.0 || >=18.0.0', npm: '>=6.14.13' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'next@13.5.6', npm WARN EBADENGINE required: { node: '>=16.14.0' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'styled-components@6.1.1', npm WARN EBADENGINE required: { node: '>= 16' }, npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' } npm WARN EBADENGINE } up to date, audited 421 packages in 3s 105 packages are looking for funding run `npm fund` for details 1 high severity vulnerability To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ npm run dev > react-nodebird-front@1.0.0 dev > next /home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/lib/picocolors.js:134 const { env, stdout } = ((_globalThis = globalThis) == null ? void 0 : _globalThis.process) ?? {}; ^ SyntaxError: Unexpected token '?' at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at Module.mod.require (/home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/server/require-hook.js:64:28) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/home/ubuntu/TwitterClone-FS-/front/node_modules/next/dist/build/output/log.js:55:21) at Module._compile (internal/modules/cjs/loader.js:999:30) ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ ls components next.config.js package-lock.json pages sagas utils hooks node_modules package.json reducers store ubuntu@ip-172-31-45-72:~/TwitterClone-FS-/front$ 이런 에러가 발생됩니다. unexpected token '?' 어떤 이유로 에러가 발생하고, 어떤식으로 해결해야지 실행할 수 있는지 알 고 싶습니다!!
미해결
[리뉴얼] React로 NodeBird SNS 만들기
문제가 몇일째 안풀리는게 있어 문의드려요 제가 next-auth를 사용해서 로그인 프로세스를 해보고 있습니다. 로컬에서 별도로 배포환경 만들어서 테스트를 했을 때에는 잘 되는데 배포시에 계속 Unauthorized 에러가 발생해서요 제가 작성한 [...nextauth].ts 코드입니다. import NextAuth, { User } from 'next-auth'; import CredentialsProvider from 'next-auth/providers/credentials'; import { refreshAccessToken } from 'utils/tokenRefresh'; export default NextAuth({ providers: [ CredentialsProvider({ name: 'Credentials', credentials: { userId: { label: 'UserId', type: 'text', placeholder: 'jsmith' }, password: { label: 'Password', type: 'password' }, }, authorize: async (credentials) => { const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/users/signin`, { method: 'POST', body: JSON.stringify({ userId: credentials!.userId, password: credentials!.password, }), headers: { 'Content-Type': 'application/json' }, }); const user = await res.json(); // 로그인 성공 시 사용자 객체를 반환하고, 실패 시 null을 반환 if (res.ok && user) { console.log('ok user', user); return user; } else { console.log('error user', user); return false; } }, }), ], secret: process.env.NEXTAUTH_SECRET, // session: { // strategy: 'jwt', // maxAge: 0, // 브라우저가 닫히면 세션 종료 // // updateAge: 24 * 60 * 60, // 24시간마다 세션 갱신 (옵션) // }, callbacks: { async jwt({ token, user }) { // 사용자 로그인 시 토큰 설정 if (user) { return { ...token, accessJwt: user.result?.accessJwt, refreshJwt: user.result?.refreshJwt, companyId: user.result?.companyId, userName: user.result?.userName, accessTokenExpires: Date.now() + 3600 * 1000, }; } // 토큰 만료 확인 및 리프레시 if (Date.now() > token.accessTokenExpires!) { const newAccessJwt = await refreshAccessToken(token.refreshJwt!); return refreshAccessToken(newAccessJwt); } return token; }, async session({ session, token }) { if (token && token.accessJwt) { const customUser = session.user as User; if (!customUser.result) { customUser.result = { accessJwt: '', refreshJwt: '', companyId: '', userName: '', }; } customUser.result.accessJwt = token.accessJwt; customUser.result.refreshJwt = token.refreshJwt; customUser.result.companyId = token.companyId; customUser.result.userName = token.userName; session.user = customUser; } return session; }, }, }); NEXT_PUBLIC_BACKEND_URL 환경변수는 별도의 백엔드를 구성한 주소이구요 배포는 도커를 사용했습니다. FROM node:20.10 as builder # pnpm 설치 RUN npm install -g pnpm WORKDIR /usr/src/app COPY package*.json ./ RUN pnpm install ARG NEXT_PUBLIC_BACKEND_URL ARG NEXTAUTH_SECRET COPY . . RUN NEXT_PUBLIC_BACKEND_URL=https://${NEXT_PUBLIC_BACKEND_URL} NEXTAUTH_SECRET=${NEXTAUTH_SECRET} pnpm run build FROM node:20.10 RUN npm install -g pnpm WORKDIR /usr/src/app COPY --from=builder /usr/src/app/package*.json ./ RUN pnpm install --prod COPY --from=builder /usr/src/app . # COPY --from=builder /usr/src/app/.next ./.next EXPOSE 3000 CMD ["pnpm", "run", "dev"] NEXTAUTH_SECRET은 프론트 주소를 도커 실행 시 넣어줘야 한대서 도커 실행 할 때 환경변수로 따로 넣어줬구요 Docs, Stackoverflow, ChatGPT 등 여러 방면으로 찾아봤는데 해결이 안되더라구요.. 강의하고는 별개 내용이긴 한데 더이상 물어볼 데가 없어서 강사님께 여쭈어봅니다..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이렇게 갈색으로 뜨는데, 에러가 되는 이유가 이 때문인 것 같아요. 무슨 이유 때문에 그럴까요? ㅠㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위는 선생님 파일 다운로드 한거의 package.json 이거는 제 포폴 의 package.json 입니다 ts-node 라든지 devDependencies에서도 빠진 게 몇개 있어보이는데.. 터미널에서 뭘 설치해야 할까요?? 수업 코드에서도 똑같이 설치한것같은데 types.ts 내용이 다르더라구요. ㅠㅠ 이건 수업 코드 내의 package.json 입니다 별 다를 건 없어 보입니다.. 근데 둘다 types.ts 내부 내용들이 누락된 게 너무 많더라구요 설치는 똑같이 한 거 같은데 버전 문제일까요? (types.ts) 이런식으로 많이 다릅니다.. (오른쪽이 수업코드) +추가질문 포트폴리오 파일인데 저런 오류가 뜹니다.. types.ts 에 누락된 내용이 많아서 그런걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 공부하시는분들도 잘 적용됐는지 확인하는데 번거로움이 있을거 같아서 말씀드려요!
