172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
저는 scss 대신 emotion 스타일을 사용하고 컴포넌트or 페이지를 스타일 파일과 한폴더에 넣어 사용합니다 (아래와 같은 폴더구조) 페이지 폴더가 라우트 기능을 해서인지 다음과 같이 빌드 최적화에 실패햇다고 뜨는 현상이 있는데 컴포넌트폴더 에서는 문제없이 되는데 페이지 폴더에서만 이렇게 되는 원인이 무엇인가요? 또 해당 페이지를 컴포넌트로 이동신후 페이지에서 단순 호출만 하게 한다면 최적화가 정상적으로 되는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이전 강의 섹션 7 "실무용 폴더구조와 props"에서 21분 3초쯤에 src > components에서 한 번만 사용되는 컴포넌트들은 units, 두 번 이상 사용되는 컴포넌트들은 commons폴더에 만들어 준다고 하셨는데 섹션 7 "컴포넌트 재사용성"에서는 만들 컴포넌트는 등록페이지와 수정페이지 두 곳에서 사용되는데 12분 50초쯤에 src > components > commons이 아니라 src > components > units 폴더에 만드시던데 2번 이상 사용될 컴포넌트는 commons안에 만드는 거 아니었나? 혼란스러워서 저도 units 폴더에 따라 만들긴 했지만 제가 제대로 이해못한 것 같습니다... 이 부분에 대해서 한 번 더 설명해 주시면 감사드리겠습니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! css 싸이월드 1일차 과제 중에 아이콘과 글자 사이의 간격을 조절할 수 있는 방법이 있는 지 궁금해져 질문 드립니다! 아래는 제가 작성한 html 코드이고 아래는 라이브서버 화면입니다! 별과 인스타그램 사이 간격이 위 3개의 글자보다 넓어 신경이 쓰이네요... 차이를 알고자 배경색을 깔아둔 것입니다. 답변 주시면 감사하겠습니다 :)
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
중괄호 등을 통해서 코드를 작성할 때 중괄호가 [] 이렇게 두개 자동으로 생성되는데요. 이외에도 '' 등 두개씩 자동으로 만들어줘서 코드를 작성하는데는 편리한데 'LEE' 등 코드를 쓰고 EE에서 '를 넘어 가기 위해 방향키를 눌러줘야 하는 불편함이 있습니다. 혹시 빠르게 작성하기 위해 단투키 같은게 별도로 있을지 문의드립니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요.. 매번 사소한걸로 질문드리고 있어욥... 싸이월드 만들기 2탄 수업들으면서 같이 실습하고 있는데 html에는 제대로 입력을 한것같은데 화면에는 제대로 안떠서 문의글 남깁니다... 머가 문제인지 모르겠어요ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const setGraphql = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; export default function GraphqlMutationPage() { const [createBoardMutation] = useMutation(setGraphql); const onClickSubmit = async () => { try { const result = await createBoardMutation({ // await 을 빼주면 promise 상태로 변환 variables: { // variables => $ 역할을함 writer: '훈이', title: 'ㅎㅇ', contents: '반갑습니다', }, }); console.log(result); } catch (error) { console.error(error); } }; 다음과 같이 코드를 작성해보았습니다. 데이터 요청은 보내지지만 variables 값들이 바뀌질 않습니다.
미해결
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');
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 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 에서 코딩 중에 회색으로 코드 힌트가 들어가 있던데요. 어떤 익스텐션인지 알려 주실 수 있을까요? 검색 중인데 못찾겠네요. 죄송하지만 도움을 주셨으면 감사하겠습니다. 좋은 주말되세요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 선생님 ! 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 값을 어떻게 변경해줘야 할지를 잘 모르겠어서 질문드립니다.
미해결
파이썬 무료 강의 (활용편3) - 웹 스크래핑 (5시간)
태그 관련 내용이 반환이 안 되는데 어떻게 하면 될까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(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로 서버와 클라이언트는 백그라운드로 실행시켰지만 도커는 포어그라운드로 동작시켜서 인스턴스 종료하면 데이터베이스와는 연결이 끊겨 제대로 동작을 안할 것이라 생각했는데 예상과는 달리 잘 동작하더라고요. 이건 도커의 특징인건지, 아니면 저희가 작성한 파일에 백그라운드로 동작하도록 하는 설정이 포함되어 있는건지.. 알려주시면 감사하겠습니다. 질문이 길고 갯수가 많은데 답변 기다리겠습니다..! 감사합니다.
