173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
백엔드를 이 강의로 처음 알아가고 있는데 . Horizontal Scaling 가 정확히 뭔지모르겠어요 설명해주시는 것중에서 Redis , in-memory 등 서버들이 같은정보를 바라보고서 사용자 정보를 우리가 판단 한다.. 이게 무슨말인지 아예 와닿질않아요 설명 해주실 수 있을까요
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
썸네일 이미지가 뜨지 않습니다! 그리고 css도 안먹힙니다. 더불어 if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,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" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다. 썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ 어떻게 문제를 해결할 수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
백엔드를 " https://api.example.com" 프론트엔드를 " https://example.com " 이렇게 배포했습니다. 그런데 백엔드 서버는 example.com 이 주소에서 api 요청만 가능하고, https://api.example.com/graphql 은 주소창에 검색해도 접속 못하게 하고 싶습니다. 어떻게 해야할까요?
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요. 강의 도중 클로저를 설명해주셨는데 의문점이 있습니다. 익명 함수를 실행할 때 i를 인자로 넣어주고, 함수 내부에서는 j로 그 값을 받습니다. 그런데 setTimeout의 2번째 인자로 j가 아닌 i를 넣어주었는데도 올바르게 실행됩니다. 익명 함수 내부에서의 i는 어디서 가져오고, j로 바꾸지 않아도 올바르게 작동하는지 궁금합니다. for (var i = 0; i < 6; i++) { (function (j) { console.log(i); setTimeout(() => { drawBall(balls[j], $result); }, 1000 * (i + 1)); })(i); }
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
어디선가 next js강의도 준비 한다고 들었던거 같아서요. 맞나요!? 맞다면 언제 정도 출시되나요 그리고 nest js는 part2 는 언제 출시되는지 궁금합니다.
미해결
Node.js로 웹 크롤링하기
try-puppeteer.appspot.com 이 사이트가 현재는 접속이 안되네요 이런 기능을 할 수 있는 유사한 사이트가 더 있을까요?
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코드팩토리님 안녕하세요. 강의를 보면서 만들었던 서버를 기반으로 로그인 인증페이지를 Next js를 통해 만들어보고 있습니다. const basicAuth = "Basic " + btoa(id + ":" + password); console.log(basicAuth); const response = await fetch("http://localhost:3000/auth/login/email", { method: "POST", headers: { Authorization: basicAuth, // Authorization 헤더에 인코딩된 정보를 추가합니다 }, }); const data = await response.json(); // 서버의 응답을 JSON 형식으로 받습니다 console.log(data); // 콘솔에 출력합니다 router.replace("/home"); } catch (err) { console.error(err); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } 이렇게 코드를 만들어서 요청을 보냈더니 [REQ] OPTIONS /auth/login/email 8/23/2024, 10:39:20 PM 요렇게 요청이 POST 가 아니라 OPTIONS 로 뜨면서 동작이 안되더군요. 혹시 어떻게 처리해야할지 힌트를 주실수 있을까요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
한입크기로 잘라먹는 리액트 강의 섹션12의 폰트,이미지,레이아웃 설정하기 강의에서처럼 vscode에서 public폴더로 폰트 파일을 드래그해서 넣었는데 public에 파일이 들어가지를 않습니다ㅠㅠ아무 오류창같은것도 뜨지 않고요 public폴더 눌러보면 아무것도 없습니다ㅠㅠ ctrl+C해서 public폴더에 ctrl+V도 해봤는데 안되고요 구글링한대로 regedit 수정해 재부팅하고 vscode실행하면 "Updates are unabled because you are running the user-scope installation of Visual Studio Code as Administrator." 이란 창이 뜹니다ㅠㅠ 드래그해서 파일넣기도 안되고요.. 그래서 관리자권한설정을 해지하면 이런 창은 안뜨는데 똑같이 드래그해서 파일넣기가 안되는 상황입니다. 이에 대한 해결방안이나 드래그해서 파일 넣기를 대신할 수 있는 방법이 있다면 답변 부탁드립니다! 참고로 제 컴퓨터os는 윈도우11 입니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
7.2) useEffect 사용하기 강의에서 state의 상태 변화 함수는 비동기로 동작하기 때문에 콘솔에 count 값을 출력하면 이전 값이 나온다고 설명하셨습니다. 그런데 state의 값이 변경되면 리렌더링 되면서 화면에 count 값이 보여지는 건 setCount인 상태 변화 함수가 실행되고, 완료됐기 때문에 화면에 나타난다고 생각했습니다. 그렇기 때문에 콘솔에 이전의 값이 출력 된다는 점이 이해가 가지 않아 질문 드립니다. 버튼을 누르면 onClickButton 함수가 실행된다. setCount 상태 변화 함수가 실행되어 값을 더한다. setCount 함수가 완료되지 않아 콘솔 창엔 이전의 count 값이 출력된다. setCount 함수가 완료되고 state의 값이 변경됐기 때문에 리렌더링이 된다. 리렌더링 된 값이 화면에 출력된다. 이런 순서로 진행되는 건가요? 코드가 어떻게 동작 되는 건지 이해가 안돼서 질문 남깁니다 ㅜㅜ... 항상 친절하고 자세하게 강의해주셔서 감사합니다!
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Nest js 패키지들은 어디서 설치하고 어디서 찾아 볼 수 있나요? Express 개발시에는 npm 사이트 검색 설치 및 사용 Nest도 npm에서 가능할까요?? @nestjs/ <<< 붙은 친구들은 사용 가능한건가요?? 주로 Nest에서 개발하면서 필요한 패키지들을 찾는 루트가 있을까요??
미해결
처음 만난 리액트(React)
import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex, flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; font-weight: bold; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks; style-componets를 install 하고 실습 코드를 실행했을 때, 강의에서 나온 결과 화면과 다른 화면이 나옵니다. 개발자 도구를 켜면 다음과 같이 display: flex; flex-direction: row 스타일이 적용되지 않은 것 같습니다. Wrapper 의 css 속성이 적용되지 않은 것 같은데, 원인을 못찾겠습니다. 답변주시면 감사하겠습니다.
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요? 강의 잘 보고 있습니다. F, B 카드가 있고 뒤집는 거잖아요? F에 z-index를 1을 주었기 때문에 B보다 앞에 있어서 F->B 순서로 보이구요. 여기서 궁금한 것은 실물 카드로 생각을 해보았을 때, F카드 밑에 B 카드가 있는거죠. [1번] backface-visibility: hidden을 주지 않았을 때 가드를 뒤집게 되면 B카드 밑에 F 카드가 있는게 아닌가요? [2번] 아니면 뒤집혀진 상태에서도 F의 z-index 1로 인해서 다시 F->B 상태로 되어 있는 건가요? 제 생각은 실물 카드로 보면 뒷면이 보이더라도 B의 뒷면이 보여야 할거 같은데 F의 뒷면이 보여서 질문 드립니다. [1]번인 경우 F의 뒷면이 보이는게 이해가 안되고, 만약 [2]번인 경우 F 카드가 B 카드보다 위에 있다는 건데 뒷면을 안보여준다고 해도 그래도 F 카드가 보여야 할 것 같아서요. -------------------------------------------------- 제가 다시 생각해봤는데요. z-index 1이니깐 F 가 B 보다 무조건 위에 있는 건 맞으나, 실물 카드처럼 딱 붙어있는게 아니니깐 F는 위에서 돌고, B는 밑에서 돌고 F 뒷면, B 뒷면으로 있는 상태가 맞을까요? 여기서 뒷면은 안보이도록 해줬으니 B만 보이는거구요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
***질문은 아니고 해결 방법 공유합니다!*** docker-compose.yml 파일에서 백엔드 service를 올리기 전에 데이터베이스부터 먼저 올리면 됩니다! 아래처럼 version: '3.7' # "컴퓨터들" services: # 컴퓨터 이름 my-database: image: mysql:8.0 environment: MYSQL_DATABASE: 'myproject' MYSQL_ROOT_PASSWORD: 'root' ports: - 3306:3306 # 컴퓨터 이름 my-backend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.docker my-database랑 my-backend 서로 순서만 바꿔주면 됩니다. 저는 그렇게 해서 됐습니다..! 조금이나마 도움이 되길 바랍니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
데이터 베이스를 사용하면서 궁금한점이 postgres-data폴더에 db관련 정보들이 저장되는것 같은데 entity의 변경과 같은 이유로 초기화를 해야 할때 초기화 후 기존에 저장했던 부분을 살릴 수 있는 방법이 없을까요?? (ex postgres-data폴더의 어떤 파일을 살려라 등)
미해결
Node.js로 웹 크롤링하기
본 강의와 관련이 없을 수 있는데, 크롤링 공부를 하는 중에 궁금한게 생겨 질문드립니다. puppeteer로 생성한 브라우저에서 크롬 확장프로그램을 설치할 수 있는 방법이 있나요? 있다면 어떤 키워드로 검색을 해서 찾아봐야하는지 알려주시면 감사하겠습니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강사님이 알려주신 방식을 듣고 다양한 이미지 처리 방식을 공부하기 위하여 Presigned URL 방식을 구현중에 있습니다. 백엔드에 요청을 통해 발급받은 S3 url 주소에 PUT 요청으로 이미지를 업로드하고 있습니다. 이 떄, 일반적인 form-data 형식은 들어가지지 않는 것 같은데, binary 형태는 매우 잘 들어가집니다. 현업에서도 presigned-url을 활용할 떄 binary 형태로만 전달을 해야하나요, 아니면 다른 방식이 있는지 알고 싶어 식견을 구하고자, 질문드립니다!!
미해결
Vue.js 시작하기 - Age of Vue.js
안녕하세요. 현재 vue3 환경으로 진행 중 개발자 도구로 css 요소검사를 하면 해당 css 경로가 보이질 않습니다. 예를 들어 개발자도구로 a 요소를 선택하면 해당 a 가 표기된 css 가 보여야 하는데 현재 <style> 로만 표시가 되어서 해당 요소가 어떤 css 파일에 들어있는지 파악하기가 어렵습니다. (현재 상태) (원하는 경로가 표시 되었을 경우 - 이건 예시예요!) 혹시 위 사진처럼 css 경로가 표기될 수 있는 방법이 있을까요?
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
const navigateFn = vi.fn(); vi.mock('react-router-dom', async () => { const original = await vi.importActual('react-router-dom'); return { ...original, useNavigate: () => navigateFn }; }); useNavigate 함수에 스파이 함수를 전달할때 위 코드를 사용하고 있는데요. 이부분에서 이해가 어려운게 있습니다. //ErrorPage.jsx const navigate = useNavigate(); const handleClickBackButton = () => { navigate(-1); }; 실제로 네비게이션에 활용하는 함수는 navigate() 잖아요. 그런데 왜 스파이 함수를 useNavigate()에 전달하는 건가요? 직관적으로 보자면, expect(navigate함수에 전달된 spyFn).toHaveBeenNthCalledWith(1, -1) 이여야 할 거 같다고 느껴져서 이해가 안갑니다.
해결됨
[코드캠프] 훈훈한 Javascript
혹시 계정 가입한지 얼마 안돼서 오류가 발생하는걸까요..ㅠ
