173만명의 커뮤니티!! 함께 토론해봐요.
미해결
실무 중심! FE 입문자를 위한 React
학습노트 pdf에서 4-2 실습코드 링크와 4-3 실습 코드 링크가 동일합니다. 수정 부탁드립니다. 그리고 5-1 강의에서 HTML과 리액트의 onclick/onClick 설명해주시는 화면에 둘 모두 onclick으로 되어 있음을 제보 드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
지금 section04 포트폴리오 리뷰까지 왔는데 지금은 작성자, 비밀번호 , 제목 , 내용을 입력하고 등록하기 버튼을 눌러도 등록안되고 에러뜨는게 정상인건가요? 저만 안되는건가 싶어서요
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 Next.js 강의를 잘 보고 있습니다. Next.js 장단점 내용을 보고 궁금한 점이 생겨서 질문드립니다. 1. 8:59초에 서버에서 모든 컴포넌트를 사전 렌더링을 한다고 말씀하셨는데, 작성한 모든 컴포넌트 의 HTML을 서버에 생성해놓는다는 의미인가요? 그렇다면 그 HTML을 받아서 브라우저가 파싱할 때, 서버로부터 받는 스크립트는 해당 컴포넌트의 관련된 로직의 js 파일을 받아오는건가요? 이 동작까지 Next.js에서 담당해주는건가요..? 사용자의 접속 요청이 들어왔을 때, FCP는 빠르겠지만 이 과정에서 서버에서 모든 컴포넌트의 사전 렌더링이 진행되고, 하이드레이션 과정까지 있습니다. 전처리 작업은 늘어난 것 같고, 사용자의 인터렉션이 불가한 지점까지 있는데 이 부분은 어떻게 핸들링하는지와 과연 FCP가 단축된게 장점이라고 할 수 있는지 궁금합니다. 해소가 안되는 부분들이 계속 생기는데, 영상을 계속 보다보면 뒤에서 다 설명을 해주시는 부분들일까요...?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo 강의에서 함수를 작성할 때, const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); 위의 코드처럼 작성하고 아이템의 체크 박스를 누르면 아래 사진과 같은 오류가 발생합니다. todos 배열 객체의 isDone 속성이 정의되지 않았다고 하는 것 같은데 해결 방법을 몰라 질문 드립니다...ㅠㅠ 혹시 몰라 List.jsx 전체 코드도 같이 올려두겠습니다. 항상 좋은 강의 만들어주셔서 감사합니다! import "./List.css"; import { useState, useMemo } from "react"; import TodoItem from "./TodoItem"; function List({ todos, onUpdate, onDelete }) { const [search, setSearch] = useState(""); const searchHandler = (e) => { setSearch(e.target.value); }; const filterFunc = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filterArr = filterFunc(); const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); return ( <div className="List"> <h4> Todo List 🌱</h4> <div> <div>total: {totalCount}</div> <div>done: {doneCount}</div> <div>notDone: {notDoneCount}</div> </div> <input placeholder="검색어를 입력하세요" onChange={searchHandler} value={search} ></input> <div className="wrapper"> {filterArr.map((todo) => { return ( <TodoItem key={todo.id} {...todo} onUpdate={onUpdate} onDelete={onDelete} /> ); })} </div> </div> ); } export default List;
미해결
[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
안녕하세요. 강의 그대로 따라해도 세팅부터 막히는데 어떻게 하나요? 파일을 만들고 나서 셀에 입력하는 화면이 안나오는데요. 강의에서 python3으로 들어가면 강의에서는 셀을 입력할 수 있도록 나오는데 저는 python3이라는게 뜨지를 않습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! Header.jsx 파일에서 이 오류가 사라지지 않아서 질문 드립니다! 어떻게 해결해야 하나요...?
미해결
[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
저의 경우 client sql 버전이 안맞다고 나옵니다 workbench는 8.0 Mysql 9.0 Configurator로 설치했습니다 stackoveflow에서 찾아보니 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; Where root as your user localhost as your URL and password as your password Then run this query to refresh privileges: flush privileges; Try connecting using node after you do so. If that doesn't work, try it without @'localhost' part. 이런 답변이 있는데 어떻게 적용하는지 알 수 있을까요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
getImageUrl을 얻는 방식을 강의 방식이 아닌 getPublicUrl을 사용해서 얻으려면 어떻게 해야 하나요?
해결됨
한 입 크기로 잘라먹는 Next.js
파라미터를 받아서 특정 도서 상세페이지로 이동하는 [id].tsx에서 이전에 사용하던 export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (q) { url += `/search?q=${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } } 이 코드에서 아래와 같은 방식도 가능할까요? export default async function fetchBooks(q?: any): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (typeof q === "string") { url += `/search?q=${q}`; } else if (typeof q === "number") { url += `/${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } }
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
reactQuery의 queryFn : ['users'] supabase의 channel의 const channel = supabase.channe l("online_users", { 부분 users와 online_users의 쓰임새를 모르겠습니다. queryFn : ['users', userId]를 하면 useEffect의 의존성 배열처럼 userId의 값에 따라 실행되는게 맞나요? 그럼 'users'는 뭔가요? 구조가 잘 와닿지 않습니다.ㅜㅜ const channel = supabase.channe l("online_users", { 도 " online_users"라는 이름값을 다른곳에서 사용할 때 쓰임새가 있는건가요?
미해결
[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
섹션5 <공지> 코드 https://github.com/chulminkw/DLCV <여기에 있나요?? 찾아도 없어서요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님! 해당 수업에서 On-Demand-ISR을 적용하기 위해 page/api/revalidate.ts 파일에 재 생성을 요청하는 handler 함수를 정의를 했습니다. // 강의에서 작성한 handler 코드 export default async function handler( req: NextApiRequest, res: NextApiResponse ) { try { // 인덱스 페이지를 요청받을 때 revalidate 되도록 하기 await res.revalidate("/"); // 재 생성이 잘 완료되었다는 걸 리턴함 return res.json({ revalidate: true }); } catch (err) { // 재생성 실패 했을 떄 실행할 코드 res.status(500).send("실패"); console.error(err); } } 현재 강의에서는 직접 localhost:3000/api/revalidate 를 입력해 수동으로 페이지를 재 생성했는데, 만약 인덱스 페이지 접속할 때마다 자동으로 페이지를 재 생성하고 싶으면 useEffect 훅을 사용하면 될까요? 아래는 제가 작성한 코드입니다! useEffect(() => { fetch("/api/revalidate") .then((res) => res.json()) .then((data) => { if (data.revalidate) { console.log("페이지가 성공적으로 재생 성되었습니다."); } }); }, []);
해결됨
Azure Native로 나만의 GPT 만들기
조금씩이지만 열심히 따라서 구현을 해 보려고 하지만 모르는게 너무 많아 조금은 힘드네요 그래도 강의 내용이 스텝 바이 스텝으로 상세해 아주 큰 도움이 됩니다 저희 중요 업무는 고객 요구 사항들 (텍스트/ 이미지)이 기록되어 있는 문서를 참조로 현재 개발된 디자인이 모든 요구 사항들을 다 잘 지켜서 개발이 완료된 건지를 체크하는 일입니다 기존에 일일히 하나하나 체크를 하다 보니 시간도 너무 오래 걸리고 일부 경험 많은 엔지니어의 경우 기존 경험에 의존해 체크가 누락되는 경우도 발생이 되고 있습니다 이에 고객 요구 사항들을 AI (gpt-4o)에게 학습시키고 완료된 디자인 문서를 프로프팅 창에 입력해 자동으로 미지원 항목을 체크해 알려주는 기능을 만드는 것이 목표입니다 이를 위해 프롬프트 창에 디자인 문서 (텍스트/ 파워포인트/ PDF/ JPG 등) 멀티모달 프롬프팅이 되어야 디자이너 스스로 자기가 만든 디자인 파일의 셀프 체크가 가능하기에 gpt-4o를 선택해서 구현을 할려고 합니다 여기서 중요한건 비교를 해야 하는 고객 요구 사항을 어떻게 gpt-4o에게 학습시키는지에 대해 잘 몰라 난감해서 문의 드립니다 가장 효과적인 학습 방법에 대한 조언을 주실 수 있으실지요? 사내 전용 우리 회사만의 GPT라면 비교 자료도 나만의 자료가 되는게 필요해서 문의 드립니다 답변 부탁 드리겠습니다 감사합니다
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
app.use('/', express.static(path.join(__dirname, 'public'))); 다른 코드들에서는 이런 식으로 경로를 지정하면 경로와 똑같은 요청만 처리를 하거나 모든 요청에 대해 처리하고 싶으면 그냥 경로를 생략하였는데 express.static은 왜 localhost:3000/ 에 대한 요청만 받아들이는 것이 아니라, 모든 요청에 대해 해당 파일이 있는지 확인하게 되는지 궁금합니다. 예시) localhost:3000/about -> public 폴더 안에 about 파일이 있는지 찾음 localhost:3000/hello.css -> public 폴더 안에 hello.css 파일이 있는지 찾음 express.static은 특별한 미들웨어 인가요?
해결됨
2주만에 통과하는 알고리즘 코딩테스트 (2024년)
n = int(input()) hint = [list(map(int,input().split())) for _ in range(n)] answer = 0 #100 ~ 999 for a in range(1,10): # 100의 자리 for b in range(10): # 10의 자리 for c in range(10): # 1의 자리 if (a == b or b == c or c == a): continue cnt = 0 for arr in hint: number = list(map(int, str(arr[0]))) strike = arr[1] ball = arr[2] ball_count = 0 strike_count = 0 #스트라이크카운트 자리수,숫자 둘다 if number[0] == a: strike_count += 1 if number[1] == b: strike_count += 1 if number[2] == c: strike_count += 1 #볼카운트 자리수는 안맞고 숫자만 if a in number and number[0] != a: ball_count += 1 if b in number and number[1] != b: ball_count += 1 if c in number and number[2] != c: ball_count += 1 if ball == ball_count and strike == strike_count: cnt += 1 if cnt == n: answer += 1 print(answer)
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
1) "webpack": "^5.94.0", "webpack-cli": "^5.1.4" node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path ./dist 다른 질문글에 open index.html 을 했는지 모르겠지만 저는 잘 안되더라구요 차이점은 ./dist/main.js 에서 ./dist 입니다. main.js를 /dist/main.js/main.js 이렇게 만들어버리더라구요 그래서 요상한 에러들 때문에 해맸었습니다. 2) 제가 봤던 에러는 크롬 디버깅창에 main.js를 그대로 로딩하지않고 마치html처럼 <!DOCTYPE html> 이 첫줄에 추가된 체로 로딩이 되어서 unexpected token "<" 와 같은에러를 봤습니다. 혹시 왜 js를 html로 랩핑? 해서 읽어온 이유를 아시나요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
리액트 쿼리를 사용하면 결국 client side fetching이 됩니다. nextjs13부터 server side fetching이 가능해지고 suspense를 활용한 data streaming은 데이터펫칭에서 새로운 패러다임을 제시했다고 생각합니다. 굳이 리액트 쿼리를 사용할 이유가 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두를 수정, 삭제하는 강의를 보면서 버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다. 내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); }; 하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); }; 이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다. 더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!
미해결
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
import { Test } from '@nestjs/testing'; import { UsersService } from '../users.service'; import { IContext } from 'src/commons/interfaces/context'; import { Request, Response } from 'express'; // 주로 DB 작업할 때 가짜DB 만들 때 사용함 class MockUsersService { mydb = []; create({ email, password, name, age }): string { this.mydb.push({ email, password, name, age }); const token = 'token'; return token; } } describe('UsersResolver', () => { let usersService: UsersService; beforeEach(async () => { const usersModule = await Test.createTestingModule({ providers: [ UsersService, { provide: UsersService, useClass: MockUsersService, }, ], }).compile(); usersService = usersModule.get<UsersService>(UsersService); }); describe('fetchUser', () => { it('유저 정보 찾기', () => { const mockRequest: Request & { user?: { id: string } } = { user: { id: '12345' }, } as Request & { user: { id: string } }; const mockResponse: Response = {} as Response; const mockContext: IContext = { req: mockRequest, res: mockResponse, }; expect(mockContext.req.user).toStrictEqual({ id: '12345' }); }); }); describe('createUser', () => { it('유저 등록하기', async () => { const mockToken = 'token'; const mockUser = { email: 'aaa@aaa.com', password: '1234', name: '정중식', age: 12, }; const result = await usersService.create({ ...mockUser }); // 반환 값이 mockToken과 일치하는지 확인 expect(result).toBe(mockToken); }); }); }); 강의에서는 app.controller.spec랑 똑같이하시면됩니다~ 하고 넘어가셔서 챗지피티랑 손잡고 짜봣는데요.. 어떤가요? 맞게했나요?.. 개념도 생소하고 코드짜는게 넘 어렵네요.. 챗지피티 이자식은 목업클래스 안만들어주고 지름길 같은 jest.fn()같은 메서드로 목업함수 만들어주고.... 선생님 답변기다리겠씁니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
container 중앙으로 이동시킬때 .container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; } 라고 하셨는데 가운데 정렬하게 될때 , margin: 0 auto; 하는것과 어떤차이가 있을까요 ??
