173만명의 커뮤니티!! 함께 토론해봐요.
미해결
리눅스 쉘 스크립트
안녕하세요 강사님. 함수 return 값을 받고 싶은 경우 함수를 실행하고 $? 로 받을 수 있고, 함수가 출력하는 값을 받고 싶은 경우 함수를 $()로 실행하고 $? 로 받는 것으로 이해했습니다. 그렇다면 함수를 한번만 실행하고 return 값과 출력 값을 모두 받을수 있는 방법이 있을까요? 두개의 값을 모두 얻고 싶으면 함수를 두번 다르게 실행하여 값을 얻는 것밖에 생각나지 질문 드립니다.
미해결
리눅스 필수 유틸리티 4종 마스터 - awk, sed, grep, find
s002_정규표현식 강의에서 마지막 예문 admin$ echo "Give me liberty, or Give me death" | grep -P '(Give).+\1' 로 Give 에 괄호로 그룹지정을 해주셨다고 하셨는데 왜 마지막 Give까지 매칭이 되는지 궁금합니다 아니면 강의 후반에 해당 내용이 자세히 다뤄지는지 문의드립니다
미해결
Next + React Query로 SNS 서비스 만들기
서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요?? 클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요?? 클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다. 강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??
해결됨
Next + React Query로 SNS 서비스 만들기
x.com 을 보면 로그인도 그렇고 게시글 올릴때도 그렇고 모달창이 뜰때마다 그냥 화면에 띄우는 방식이 아니라 저렇게 모달창을 띄울수 있는 url 따로 만든 이유가 뭘까요? 관리가 더 편해서일까요?
미해결
리눅스 쉘 스크립트 마스터
관련 답변 읽어보았으나 여전히 이해가 안되서 질문드립니다. 어디서 BASH_REMATCH 변수가 나오는건지 모르겠습니다. $LANG =~ $locale이 되면 자동으로 BASH_REMATCH가 생성되는건지 어쩐건지 설명 없이 바로 그냥 저 변수에 2번째 요소와 1번째 요소를 호출하는게 이해가 안됩니다. 그리고 =~도 무슨 말씀인지 모르겠습니다. 대체로 명령어 실행했을 때 현상 만을 설명해주시고 원리 설명이 없어서 이해가 너무 어렵습니다. 참고할만한 정규표현식 관련 사이트 같은게 있으면 추천 좀 부탁드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
해당 강의에서 postgresql 설치와 노드버전 18.17.0 환경에서 nest-prisma의 폴더를 다운 받은 후 npm i -> npx prisma migrate dev 까지는 순조롭게 진행되었으나 npm run start:dev에서 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 } 에러가 발생했습니다 구글링을 해보니 레디스 서버가 구동이 안된 것 같다고 나오기도하고 서버쪽을 잘 몰라 질문 드립니다 .env 파일 입니다 DATABASE_URL="postgresql://postgres:비번@localhost:5432/zcom?schema=public" REDIS_URL=redis://localhost:6379 COOKIE_SECRET=cookienyamnyam
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..! server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요? 강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost , 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.
해결됨
시스템엔지니어가 알려주는 리눅스 기초편 Bash Shell Script
복습하기가 어렵네요.. ㅜㅠ
해결됨
시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script
안녕하세요 버츄얼박스 최신버전을 다운로드 했다가 다시 올려주신 버츄얼박스 버전으로 다운로드를 하는데 설치에러가 나오면서 다운로드가 되지않습니다. 이럴 경우 어떻게 해결할수 있을까요?
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
콘솔로그 결과 안녕하세요 선생님, 강의를보고 간단하게 따라해보았는데요 NextRequest 타입의 req를 매개변수로 받아와서 req를 console.log 에 찍어보면 undefined가 뜹니다. 혹시 NextRequest 사용에 조건이 따로 있을까요? req.nextUrl.pathname 으로 url 도 가져와보고 싶고한데 생각처럼 잘 안되네요..
해결됨
시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script
텔레그램봇으로 알림이 안뜨는건 nginx의 용량이 안차서 그런것 같은데 혹시 고의적으로 용량을 늘릴 수 있는 방법 있을까요?
해결됨
Next + React Query로 SNS 서비스 만들기
windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086 해당 이슈가 맞는지 궁금합니다!
해결됨
시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script
안녕하세요. 맥북의 m시리즈로는 아직 수강을 할수 없는걸까요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다. 클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
SSR 방식에 서버 컴포넌트와 클라이언트 컴포넌트를 둘 다 적절히 사용하는 것인가요?? 서버 컴포넌트는 데이터 페칭, 보안, 캐싱, JS 번들크기 감소와 같은 장점이 있고 event와 hook을 사용하지 못한다는 특징도 이야기해주셨는데, 그렇다면 데이터를 받아서(페칭해서) 클라이언트 컴포넌트에 데이터를 뿌려주는 느낌으로 조합해서 사용하는 건가요?? 서버컴포넌트는 event를 사용하지 않으므로, TTI를 개선하기 위해 나온 개념은 아닌거죠???
해결됨
시스템엔지니어가 알려주는 리눅스 기초편 Bash Shell Script
직장에서는 가상머신, 집에서는 웹 기반으로 실습하려는데 codeonweb에 가입하려면 초대코드? 토큰이 필요하다고 하네요ㅠ 토큰을 받을 수 있을까요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
33-05 강의에서 test에서 자꾸 이 오류가 뜹니다 apis.js import { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.js import { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ
해결됨
시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script
안녕하세요. 이곳에서 실습환경 새로운 공지도 보았고 여러 문의글과 댓글도 보았는데 저도 안되는 쪽이 였어요 1) 네트워크 에러 해결방법 VM 3개 전부 -> 네트워 -> 어댑터2, 어댑터3 -> '네트워크 어댑터 사용하기' 이거를 사용 안함에 체크해버리고 다시 VM을 키면 정상적으로 켜짐 하지만 이 상태에서는 당연 네트워크 환경이 달라서 스크립트 실습이 안될테니 부팅된 VM 3개를 다시 꺼준다음 어댑터2, 어댑터3을 다시 사용함으로 바꾸어주고 다시 vm 키면 앞으로는 에러메시지 발생 안하고 VM 이 잘 켜집니다. 2) 버추어 박스의 리눅스에 마우스를 클릭하면 윈도우로 마우스가 빠져나오지 못할 때 버추어박스에서 '마우스잡기' 라는 기능이 있어요! 오른쪽 CTRL 키를 누르면 마우스가 빠져나옵니다. 만약 키가 먹통이여서 윈도우로 마우스가 빠져나오지 않는다면 단축키 설정에서 '키보드 잡기' 의 단축키를 ctrl + alt 로 변경해주세요 ======================================================= 공지와 압축파일 안에 있는 메모장에 수정할 사항 의견 드립니다. "이렇게 만든 가상머신은 vagrant를 사용할 수 없으니 가상머신을 시작하면 열리는 창에서 실습을 진행하시면 됩니다." ↑↑↑↑ "이제 제공되는 ova파일에는 vagrant 를 사용하여 서버 구축하는 단계가 필요 없이 세팅이 되었으니 바로 실습을 진행하시면 됩니다." .... 라고 이렇게 수정해주시면 수강생 분들이 잠시 혼자 갸우뚱하지 않을 듯합니다. 여러 IT 관련해서 강의 제작하시는 업체나 개인분들 보면서 클라우드 외에는 인프라쪽에 정말 많이 도움되는 강의는 없었다고 생각했어요 돈 되는 개발자용 강의만 만들어도 될텐데..... 얼마나 많이 팔릴지 모르는건데 인프라쪽에도 도움되는 아주 좋은 내용을 선정해서 이렇게 강의로 내주셔서 감사하게 생각해요. 인프라와 리눅스 관련된 좋은 강의 기다릴게요~
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다 댓글 리스트 presenter 파일입니다 export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다 isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다 export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다 상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데 댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요 궁금한 점은 삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지 코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다 rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 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-- 위와 같은 오류가 발생합니다. 해결 부탁드립니다!
