176만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
몇 번이고 완성코드랑도 비교해보고 영상도 계속 돌려보고 다 확인해봐도 코드의 문제는 전혀 없는데 도대체 왜 갑자기 cors 에러가 뜨는지 모르겠네요...
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다음과 같이 에러가 나는데 이유가 뭔가요 'rev' 속성이 '{}' 형식에 없지만 'Pick<AntdIconProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "hidden" | "color" 에서 필수입니다 라고 나옵니다
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. test를 하던 중 오류가 발생하여 문의드립니다. 지금 현재 코드를 import { setupServer } from "msw/node"; import { apis } from "./apis"; export const server = setupServer(...apis); 위에처럼 입력해 놓은 상태입니다. 하지만 테스트 실행 시 아래와 같이 발생합니다. Cannot find module 'msw/node' from 'src/commons/mocks/index.js' Require stack: src/commons/mocks/index.js jest.setup.js > 1 | import { setupServer } from "msw/node"; | ^ 2 | import { apis } from "./apis"; 추가적으로 지금 jest관련 페이지에서 Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\commons\mocks\index.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run-- 위와 같은 오류가 발생합니다. 해결 부탁드립니다!
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
"NEXT_PUBLIC_" prefix 는 Browser를 위한거라 서버컴포넌트에서는 반드시 넣을 필요는 없는 것 같네요ㅎㅎ https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
노드 버전때문에 eslint가 설치되다가 중간에 오류가 났습니다. 그래서 오류 내용이 노드 16버전이나 18버전 이상을 써라고 하는거 같더라고 지금 17.3.1버전이고요, 그래서 nvm use 명령을 사용해서 18.15버전을 사용해서 설치 했더니 그때부터 parser 오류가 계속 나더라고요..ㅠㅠ parser 오류를 없애려고 하니, eslint가 작동을 안하는거 같고 도와주세요 아래에 tsconfig.json, eslintrc.js, package.json, 그리고 경로 사진을 첨부하여 드립니다. 어떻게든 구글 검색으로 할려고 했으나... 도대체 어느버전이 호환이 안되는건지 모르겠네요 ㅠㅠ eslint 설치시 오류난 상황 캡처 사진입니다. 파일 경로 캡처입니다. tsconfig 캡처입니다. package.json 캡처입니다. eslintrc.js 캡처입니다.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 린터와 포멧터 강의 따라하면서 모든 설치와 적용을 끝냈는데요. 하던 중에 .eslintrc.js에서 다음과 같은 에러가 뜨기 시작하더라구요. 해결방법 서치하다가 아래 코드를 추가했더니 위 에러는 사라지긴 했는데 맞는 해결방법인지 모르겠네요. ignorePatterns: [".eslintrc.js"] 그리고 이 코드를 넣든 안 넣든 class 내에 있는 모든 js 파일들에서 import 부분에 Parsing error가 나네요...(ts, tsx 파일들은 제대로 lint가 작동하는 것 같아 전부 고칠 수 있었습니다) 이런 오류가 아마 모든 js 파일에서 뜨네요 yarn lint하면 이렇게 도배가 되구요... 어떻게 해결해야 하나요? 참고로 .eslintrc.js module.exports = { env: { browser: true, es2021: true, }, extends: ["standard-with-typescript", "plugin:react/recommended", "prettier"], overrides: [ { env: { node: true, }, files: [".eslintrc.{js,cjs}"], parserOptions: { sourceType: "script", }, }, ], parserOptions: { project: "**/tsconfig.json", ecmaVersion: "latest", sourceType: "module", }, plugins: ["react"], rules: { "react/react-in-jsx-scope": "off", "@typescript-eslint/no-misused-promises": "off", "@typescript-eslint/no-unused-vars": "off", }, ignorePatterns: [".eslintrc.js"], }; tsconfig.json { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } 폴더 구조입니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
package.json node_modules, yarn.lock 지우고 다시 깔아보고 라이브러리 버전 맞춘거 같은데 yarn run start가 안돼요 tsconfig.json eslintrc.js tsconfig.json, eslintrc.js 느낌상 이쪽 문제 같은데 어딘지 모르겠습니다 여기 폴더 인터넷 찾아보고 조금 수정했는데 모르겠어요 어느순간부터 오류 놓쳤는데 어딘지 모르겠어요
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요, 실무에서 next.js를 이번에 사용할려고 강의를 듣고있습니다. 강의 초반부에 SSR의 경우 (getServerSideProps) API 응답 속도에 따라 렌더가 되지않아 가급적 자제하라고 본 것 같은데, 실무에선 사실 컴포넌트 내에서 API요청량이 많을텐데 보통 어떤식으로 구현하시는지 궁금합니다 보통 getServerSideProps 에서 API 통신을 하고 props로 넘겨줘서 쓰는지 ? 아니면 CSR방식으로 일반 컴포넌트 내에서 API통신을 하는지 ? 도 궁금합니다. 2번 질문에서 CSR방식으로 컴포넌트 내에서 API통신을 한다면 next.js를 쓰는 장점은 비동기 데이터 dom들을 제외한 html을 서버에서 렌더링해준다는게 장점일까여?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 람다하고 nginx 까지 적용했는데, 정말 렌덤하게 403 error 가 뜹니다. 몇몇 이미지는 처음 업로드 할때 403 error 가 나지만 새로고침을 하면 업로드가 되어 있었습니다. 1MB에 png 이미지는 resizing 이 되지 안고 새로고침을 해도 403에러가 납니다. 람다 모니터링 메세지를 봤는데 이렇게 나옵니다. 혹시 제가 resize 폴더에 너무 많은 이미지를 저장해서 나는 오류일까요? 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
무한스크롤 Section16-02-infinite-scroller 강의를 듣고 있을 때 발생한 오류입니다. 실행은 정상적으로 되는데 해결방법 알 수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 차근차근 강의 들으며 공부하고 있는 수강생입니다 현재 강의에서 알려주신 방법에 따라 페이지를 구현할 경우 2가지 문제점에 대해 말씀해 주셨는데요 2번째 문제점은 내가 수정하고 싶은 요소만 수정했을 때, 기존에 입력했던 다른 요소가 삭제된다는 것이었습니다 그런데 container 파일 작성 요소 중 const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState(); useState() 소괄호가 비어 있을 땐 기존에 입력했던 다른 요소가 삭제되지 않은 채 수정한 요소가 반영되었습니다 여기서 궁금한 점은 useState() 소괄호가 비어 있을 때와 소괄호 안에 빈 문자열("")을 넣어주었을 때 결과가 달라지는 이유 useState() 소괄호가 비어 있는 상태로 코드 작성을 끝내지 않는 이유 입니다 감사합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
BoardWriter 컴포넌트를 자동완성으로 쓸 경우 import 경로 자동완성이 @으로 시작되면 경로 오류가 뜨고 위처럼 ../ 로 바꿀경우 오류가 안뜨는데 자동완성으로 하면 안되나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
여기서 만들때 writer 이랑 password에 string 느낌표 안붙여있는건 오류인가요? 원래는 느낌표가 있어서 필수 입력인거죠?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그래프큐엘로 작성자 비밀번호 제목 내용 이렇게 넘기고 조회해보려는데 패스워드는 안되더라고요 패스워드 넘긴거는 그냥 넘긴건가요 아님 따로 조회할수있나요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
프로트 서버에서 config.js안에 있는 주소 바꿔주고 npm run build 했는데 계속 빌드가 안됩니다. 용량이 너무 커서 서버가 멈춘것일까요? 다른 분 질문 한것을 보니까 이럴경우 로컬에서 빌드를 하고 git push 할때 .next 파일도 같이 보내주는 경우를 봤는데, 이렇게 해도 상관 없나요? 아니면 다른 부분에서 이슈가 있어서 빌드가 안되는 것일까요? 음...터미널을 닫고 ec2서버 다시 연결하려는데, 연결이 안되고 계속 저기 상태에서 연결이 안되네요...서버에 이상이 생긴걸까요? 감사합니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
s3 설정을 하고 나서, 서버 도메인을 새로고침하고, pm2 리스트를 봤는데, status에 errored라고 뜹니다. pm2를 kill하고 다시 시작했는데, 처음에는 아무 이상없고, 도메인에 접속하고 list를 찍어보면 Status 가 Errored 라고 바뀌어 있네요ㅜㅜ 어디쪽에서 errored가 발생한것일까요? 감사합니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! DROP DATABASE 후에 테이블을 다시 생성하는 과정을 반복했는데, use my-memories-back(제 데이터베이스 이름.)을 입력하니까 ERROR 1049 (42000): Unknown database 'my-memories-back' 가 뜹니다. 한가지 걸리는 것은 DROP DATABASE할때, root 권한으로 mysql 접속해서 했는데, 이것이 문제가 있을까요? 음.. 그리고 이건 Back end server pm2 list 인데, Access denied for user 'root'@'localhost' 라는 에러가 뜨는데, 이것이 테이블을 다시생성 하는것에 문제가 될 수 있을것이라고 생각이 드는데, 어떤가요? 항상 감사합니다 :)
미해결
[리뉴얼] React로 NodeBird SNS 만들기
<> <div> // img 태그의 스타일에도 버티컬얼라인 미들 추가해주면 정상적으로 나옵니다. <img role="presentation" style={{ verticalAlign: 'middle' }} width="50%" src = {images[0].src} alt={images[0].src} onClick={onZoom} /> <div role="presentation" style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }} onClick={onZoom} > <PlusOutlined /> <br /> {images.length - 1 }개의 사진 더보기 </div> </div> </> 사용 환경 Antd 5
미해결
[리뉴얼] React로 NodeBird SNS 만들기
비밀번호를 바꾼후에 npx sequelize db:create를 실행했는데, Unexpected token '(' 이라는 에러가 뜹니다. 보통 이런경우 타이포 error 일것 같아서 파일을 살펴 봤는데 별다른 오타는 없었습니다. 다른곳을 살펴봐야할 부분이 있을까요? 감사합니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
async function PostDetailPage({ params }: any) { const post = await getPost(params.id); return ( <div> <h1>Posts/{post.id}</h1> <div> <h3>{post.title}</h3> <p>{post.created}</p> </div> </div> ); } PostDetailPage 에서 params을 콘솔에 출력하면 id값이 나오는거는 주소에서 받아오는건가요?
