172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next.js 시작하기(feat. 지도 서비스 개발)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 네이버 클라우드 플랫폼에도 사용횟수는 늘어나고 있고 css를 건드려봐도 map이 생성이안되서 height 100% 가 먹히질 않고있습니다.. 뭐가문제일까요 ㅠㅠ ++ 개발자 도구 Network 를 열어봐도 잘 받아오고잇고 지도 이미지도 받아오는것을 확인 하였습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
image upload 의 주소가 google로 되어있다고 설명해주셨는데 백엔드 개발자가 google 쪽으로 설정한 것인지 아니면 graphql 에서 기본적으로 google 주소를 가지고 있는 것인지 궁금합니다
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 먼저 빠르게 답변해주셔서 정말 감사합니다! 답변해주신 부분 참고해서 코드를 수정하던 도중 궁금한 점이 생겨 다시 질문 드립니다 아래 답변을 참고해서 코드를 변경해봤는데 맞는건지 확인가능할까요? -firebase_admin.ts if (!admin.apps.length) { const config: Config = { credentials: { projectId: process.env.projectId || '', clientEmail: process.env.clientEmail || '', privateKey: process.env.privateKey?.replace(/\\n/g, '\n') || '', }, }; admin.initializeApp({ credential: admin.credential.cert(config.credentials), }); console.info('bootstrap firebase admin'); } else { admin.app(); } else문에 admin.app ()을 통해 이미 애플리케이션이 실행되었다면 초기화하지않고 실행한다는 코드인데 이게 맞을까요?? 파이어베이스에 대해 정확히 알지 못해서...ㅠㅠ 번거롭게 해드려 죄송합니다. -if문안에서 로그 안뜨는 문제는 해결했습니다! console.info('bootstrap firebase admin');
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. OpenJDK 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release. 이러한 오류가 뜨는데, 실행하는데는 문제가 없습니다. 이 오류를 고쳐야 할 것 같은데, 어떻게 고쳐야할까요?
해결됨
자바 ORM 표준 JPA 프로그래밍 - 기본편
실무에서 DB방언을 상속받아 사용자 정의 함수를 등록해서 사용하는 경우가 많은지 궁금합니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! section 26 포트폴리오 수행중, Invariant Violation이라는 에러가 떠서 이렇게 질문 드립니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
next Link를 이용하게 되면 해당 페이지에서 링크 페이지의 js를 미리 불러온다는 내용이 강의에 존재하였는데 헤더나 푸터등 모든페이지에 공용으로 들어가는 영역에 site맵 존재하고 모든 링크를 걸어 놓게 된다면 모든 페이지가 미리 js 형태로 불러와 지게 되는건가요? 해당 경우에는 next의 강점이 많이 무뎌질거 같아 질문합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-04-graphql-mutation-input 파트에서 gql세팅에서 백틱을 사용하는데 백틱 내부 내용이 저는 문자열 처리되어서 강의와 같이 문자열이 아닌 함수 형태로 만들 수 있는 플러그인이 무엇일까요? 동작은 똑같이 동작하기는 합니다
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 설명해주신 싱글톤? 방식말고 평소에 사용하는 방식으로 바꿔봤는데 맞는지 검사가능할까요?? hello.ts import { NextApiRequest, NextApiResponse } from 'next'; const admin = require('../../model/firebase_admin'); export default function handler(_: NextApiRequest, res: NextApiResponse) { const db = admin.firestore(); db.collection('test'); res.status(200).json({ name: 'John Doe' }); } modle/firebase_admin.ts const admin = require('firebase-admin'); interface Config { credentials: { privateKey: string; clientEmail: string; projectId: string; }; } if (!admin.apps.length) { const config: Config = { credentials: { projectId: process.env.projectId || '', clientEmail: process.env.clientEmail || '', privateKey: process.env.privateKey?.replace(/\\n/g, '\n') || '', }, }; admin.initializeApp({ credential: admin.credential.cert(config.credentials), }); console.info('bootstrap firebase admin'); } module.exports = admin; 현재 firestore만 hello.ts에서 test 보내는 방식만 따라해봤습니다! 질문 1. 이 방식으로 사용해도 될까요?? 이 방식으로 문제될게 있을까요? 질문 2. 아래 코드가 출력이 안되는데 이유가 있을까요? console.info('bootstrap firebase admin'); 위 전체코드에서처럼 if문안에 작성하게되면 콘솔이 영상처럼 터미널에 안뜨는데 왜그런걸까요? if문 밖에 선언하면 잘 출력됩니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! nextjs 실습중입니다. next/Image를 사용해서 이미지를 띄웠는데, dev 환경에서는 이미지가 잘 떴는데, 실제로 배포하니까 에러가 나면서 이미지가 안뜨네요 아무리 구글링 해봐도 모르겠어서 질문 드립니다ㅜㅜ
미해결
실습으로 배우는 선착순 이벤트 시스템
쿠폰 생성 발급 로직도 컬럼에 쿠폰의 개수를 지정해놓으면 이전 강의랑 똑같은 거 같은데 왜 이번 강의는 쿠폰 엔티티를 새로 생성해서 그 개수를 체크하는 건지 궁금합니다. 이전 컬럼에 개수를 두어 관리하는 거랑 지금처럼 엔티티를 생성하는 방식의 차이점이 너무 궁금해요 항상 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, section 26 수업을 따라가던 도중, 이러한 error가 발생하였습니다. error message를 확인해보면, CreateProductInput에 문제가 있는 것 같은데 해결하기가 어려워 질문을 남깁니다 !
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
수업 잘듣고 있습니다. 수업 외적으로 VSCode 에서 코딩 중에 회색으로 코드 힌트가 들어가 있던데요. 어떤 익스텐션인지 알려 주실 수 있을까요? 검색 중인데 못찾겠네요. 죄송하지만 도움을 주셨으면 감사하겠습니다. 좋은 주말되세요
미해결
실습으로 배우는 선착순 이벤트 시스템
만약 Redis에 장애가 발생한다면 2차 장치로 DB Count에 의존할 수 밖에 없는걸까요? 실무에선 어떻게 대응하시는지 궁금합니다!
해결됨
Java/Spring 주니어 개발자를 위한 오답노트
안녕하세요 주니어 개발자 길라잡이가 되주셔서 감사합니다. fulltext index에 대해서 질문이 있습니다. 임계점이 올경우 튜닝으로도 해결할 수 없는 문제라고 말씀해주셨는데요 경험담이라고 해주셨는데 그 경험담을 듣고 싶어서 질문을 남겨봅니다. 공식 문서에서 찾아보니까 https://dev.mysql.com/doc/refman/8.0/en/innodb-fulltext-index.html#innodb-fulltext-index-deletion 동시 경합이 발생할 수 있다고 작성이 되어있는데 이 문제로 발생한건가요 ? 아니면 다른 인덱스와 다르게 인덱스 용량 때문에 발생한 문제이신건가요 ? FULLTEXT INDEX의 한계 검색을 해도 다 좋은점만 나오더라구요..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 선생님 ! props를 잘 쓰다가, return문 첫 번째 줄에 넣었는데 두 번쨰 이미지처럼 에러가 뜨더라구요 . 근데 첫 번째 이미지처럼 위에 부모 태그를 달아주면 괜찮아지던데 이유가 혹시 뭔지 알 수 있을까요 ??
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
리덕스, 사가를 사용할때는 리덕스 -> 사가 -> 리덕스 순으로 값이 전해져서 게시글을 추가할때마다 게시글 개수가 올라가는 흐름을 툴킷을 적용해서 하려고 하니깐 막혀서 어떻게 해야할지 질문드립니다. 코드는 다음과 같이 post.ts // post.ts export const addPostAction = createAsyncThunk('/post', async (data: string) => { const addPost = dummyPost(data); await delay(1000); return addPost; }); // 게시글 삭제 export const removePostAction = createAsyncThunk( '/post/delete', async (data: string) => { await delay(1000); return data; } ); // 게시글 추가 .addCase(addPostAction.pending, (draft) => { draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; }) .addCase(addPostAction.fulfilled, (draft, action) => { draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.payload); }) .addCase(addPostAction.rejected, (draft, action) => { draft.addPostLoading = false; draft.addPostError = action.error.message; }) // 게시글 삭제 .addCase(removePostAction.pending, (draft) => { draft.removePostLoading = true; draft.removePostDone = false; draft.removePostError = null; }) .addCase(removePostAction.fulfilled, (draft, action) => { draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.payload ); }) .addCase(removePostAction.rejected, (draft, action) => { draft.removePostLoading = false; draft.removePostError = action.error.message; }) user.ts // user.ts const dummyUser = (data: LoginData): DummyData => ({ ...data, nickname: '제로초', id: 1, Posts: [{ id: 1 }], Followings: [ { id: 2, nickname: '김' }, { id: 3, nickname: '이' }, { id: 4, nickname: '박' }, ], Followers: [{ nickname: '김' }, { nickname: '박' }, { nickname: '이' }], }); const userSlice = createSlice({ name: 'user', initialState, reducers: { addPostTome(draft, action) { draft.me?.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { if (draft.me) { draft.me.Posts = draft.me?.Posts.filter((v) => v.id !== action.payload); console.log(draft.me); } }, }, 로 구분을 했고 게시글 추가, 삭제는 정상적으로 작동하는데 이때 user.ts의 dummyUser 값을 어떻게 변경해줘야 할지를 잘 모르겠어서 질문드립니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
일단...여러가지 배포 오류가 많이떠서 거의 2주간 배포에 시간 썼는데 여찌저찌 배포가 되긴 했어요..! 이번엔 질문이 좀 많아요..ㅎ 서버 api와 통신은 제대로 잘 되는데 자꾸 웹소켓 오류가 뜨는데 이거 무시해도 괜찮은 건가요? 서비스 동작하는데는 문제 없는 것 같은데 이런 오류가 계속 떠요. 백엔드와 데이터베이스 연결 pdf 파일 내용은 영상으로 안다뤄 주신거죠? 제가 도커쪽과 배포쪽은 정말 아예 처음 써보는거라 지식이 많이 부족한데, 제가 영상보고 이해하기로는 현재 ec2에서 깃 클론으로 모든 client와 server소스코드와 도커 컴포즈 파일까지 가져와서 거기서 pm2로 클라이언트랑 서버 모두 백그라운드로 실행하는 것으로 이해했거든요. 2-1. 왜 도커 파일을 client와 server에 각각 만들어줘서 도커컴포즈로 이미지 생성하도록 만드는건지 이해를 못했어요. 도커 파일에는 여러 패키지 설치하는 명령어(?)와 client를 실행시키는 명령어가 있던데 이 과정이 왜 필요한건지 이해를 못했습니다.ㅠㅠ 사실 저는 '백엔드와 데이터베이스 연결하기'라는 pdf에 있는 도커 파일로 변경했을때 배포 실패했다가 도커파일 싹 다 지우고 decker-compose.yml파일을 원래 기존 로컬에서 작성했던대로 냅두고, data-source.ts 파일의 host 부분도 그냥 " localhost "로 놔둔채 배포에 성공했거든요. 그래서 저 pdf 파일대로 client와 server에 도커파일을 만들고 도커 컴포즈 파일까지 변경한 후 도커 컴포즈 명령어 실행했을 때와 도커파일 없이 기존의 도커컴포즈 파일대로 배포했을 때와는 어떤 부분이 다른건지 궁금합니다. ec2 인스턴스에서 깃 클론으로 가져온 client를 다시 npm run build:production하는 빌드과정을 보여주셨는데, 어짜피 pm2로 ecosystem.config파일을 백그라운드로 실행시킬거면 (이 파일에서 script: "npm run start:production"라는 명령어를 실행하도록 설정해줬으므로) client의 빌드 폴더 만드는 과정이 필요 없는거 아닌지요? (무지한 소리면 죄송합니다..ㅠ) 마지막으로, 인스턴스를 종료하고 컴퓨터를 끄더라도 도커가 종료되지 않고 계속 동작하는 것 같더라고요. 로그인 로그아웃이 동작하고 유효한 토큰인지 확인하는 api도 잘 동작했어요. 제가 생각했을 떄는 pm2로 서버와 클라이언트는 백그라운드로 실행시켰지만 도커는 포어그라운드로 동작시켜서 인스턴스 종료하면 데이터베이스와는 연결이 끊겨 제대로 동작을 안할 것이라 생각했는데 예상과는 달리 잘 동작하더라고요. 이건 도커의 특징인건지, 아니면 저희가 작성한 파일에 백그라운드로 동작하도록 하는 설정이 포함되어 있는건지.. 알려주시면 감사하겠습니다. 질문이 길고 갯수가 많은데 답변 기다리겠습니다..! 감사합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1. getStaticProps를 about 페이지에 사용하셨는데 빌드를 하고 나서 유저의 게시글 개수 팔로우 개수 팔로워 개수가 바뀔 수 있잖아요? 근데 getStaticProps를 사용했고 빌드시 html로 만들어 저장하고 그 html을 브라우저로 전달하기 때문에 DB의 데이터가 바뀌어도 브라우저 화면의 about페이지에는 빌드시의 html이 보여지게 되서 데이터 갱신이 안되는데 맞나요?? 2. 그리고 html로 바뀌는 대상이 about페이지라면 about컴포넌트의 자식 AppLayout의 자식 UserProfile 컴포넌트에는 동적인 데이터가 쓰이기 때문에 말이 안되는 것 같은데 html로 바뀌는 대상이 정확히 뭔지 알 수 있을까요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import { GithubOutlined } from "@ant-design/icons"; import styled from "@emotion/styled"; import { useRouter } from "next/router"; const Wrapper = styled.div` height: 80px; padding: 0px 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #fff4f4; `; const LoginWrapper = styled.div` display: flex; flex-direction: row; `; const LoginBtn = styled.button` width: 100px; height: 40px; background-color: orange; border: 2px solid orange; border-radius: 10px; font-size: 16px; color: white; cursor: pointer; `; const SignBtn = styled.button` width: 100px; height: 40px; background-color: orange; border: 2px solid orange; margin-left: 10px; border-radius: 10px; font-size: 16px; color: white; cursor: pointer; `; export default function LayoutHeader(): JSX.Element { const router = useRouter(); const onClickLogo = (): void => { void router.push("/boards/page"); }; const onClickLogin = (): void => { void router.push("/boards/login"); }; const onClickSign = (): void => { void router.push("/boards/sign"); }; return ( <Wrapper> <GithubOutlined style={{ fontSize: "50px" }} onClick={onClickLogo} /> <LoginWrapper> <LoginBtn onClick={onClickLogin}>로그인</LoginBtn> <SignBtn onClick={onClickSign}>회원가입</SignBtn> </LoginWrapper> </Wrapper> ); } 다음과 같이 코드를 작성했을때 다음과 같은 에러 메시지가 나오는데 rev 에 어떤 속성을 줘야되나요?
