173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시글 등록 화면에서 작성자, 비밀번호, 제목, 내용 값이 입력되면 등록하기 버튼의 색을 변경해주시고 반대로 값이 입력되지 않았다면 다시 원래 색인 회식으로 되돌리기 freeboard_frontend 게시글 목록 화면을 구현해주세요. 게시글 상세 화면에서 삭제하기 기능을 구현해주세요. 이게 포폴과제인데, section11의 포폴리뷰 영상에는 오직 2번에 대한 내용만 있는듯하고 1,3번에 대한 내용은 아예 빠져있네요. github에 삭제쿼리 한줄조차 없네요. 너무 부실한거 아닌가 싶습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장은 아니지만 앞서 연습한 todolist 를 일단 배포해보고싶어서 vercel 에 회원가입을 하고 로그인까지 해놓고 다시 vscode에서 터미널에서 vercel login 을 입력하고 엔터를 치면 아래와 같이 에러메시지가 떠서 더이상의 진행을 못했는데요, 혹시 다른 뭔가를 더 해야 하는건지요 F:\★수업★\WEB수업\웹퍼블리싱\11-Front-End\React\react-study\6-todolist>vercel login 'vercel'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
현재 아래와 같은 에러를 마주쳤습니다. my-server_1 | TypeError: res.setHeader is not a function my-server_1 | at JwtGoogleStrategy.strategy.redirect (/myFolder/node_modules/passport/lib/middleware/authenticate.js:340:13) my-server_1 | at stored (/myFolder/node_modules/passport-oauth2/lib/strategy.js:285:14) my-server_1 | at NullStore.store (/myFolder/node_modules/passport-oauth2/lib/state/null.js:5:3) my-server_1 | at JwtGoogleStrategy.OAuth2Strategy.authenticate (/myFolder/node_modules/passport-oauth2/lib/strategy.js:297:28) my-server_1 | at attempt (/myFolder/node_modules/passport/lib/middleware/authenticate.js:378:16) my-server_1 | at authenticate (/myFolder/node_modules/passport/lib/middleware/authenticate.js:379:7) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:88:3 my-server_1 | at new Promise (<anonymous>) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:80:83 my-server_1 | at GqlAuthGuard.canActivate (/myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:44:32) 제 코드는 다음과 같습니다. auth.resulver.ts 파일의 일부분입니다. @UseGuards(GqlAuthGuard('google')) @Mutation(() => String) loginGoogle( @Context() context: IContext, // ): void { console.log('context::', context); } 그래프큐엘 가드 부분입니다. import { ExecutionContext } from '@nestjs/common'; import { GqlExecutionContext } from '@nestjs/graphql'; import { AuthGuard } from '@nestjs/passport'; // graphql 인가 가드 설정 export const GqlAuthGuard = (name: string) => { return class GqlAuthGuard extends AuthGuard(name) { getRequest(context: ExecutionContext) { const gqlContext = GqlExecutionContext.create(context); return gqlContext.getContext().req; } }; }; jwt google 부분입니다. import { PassportStrategy } from '@nestjs/passport'; import { Strategy } from 'passport-google-oauth20'; export class JwtGoogleStrategy extends PassportStrategy(Strategy, 'google') { constructor() { super({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, callbackURL: 'http://localhost:3001/login', scope: ['email', 'profile'], }); } validate(accessToken, profile) { console.log('profile:', profile); return { ... }; } } 혹시 제가 실수한 부분이있을까요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
저는 1년 정도 퍼블리싱 경력이 있는데 실무에서 float 를 사용한 적이 없습니다. 부끄럽지만 부족한 실력을 보완하기 위해 강의를 듣고 있는데요. 포트폴리오를 보완하려고 하는데, 강의를 듣다보니 float 를 사용법을 이제라도 익혀서 홈페이지를 만들어야하나 고민이 됩니다. 사실 flex 만 사용하면 정렬 관련해서는 어려울 게 없는데 float 는 너무 어렵게 느껴지네요...
미해결
습관부터 바꿔주는 React 기초
섹션 0 의 강의소개 첫번째 1분미만 컨텐츠가 완료가 안됩니다.
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
const solve = (a) => { let p1 = 0, p2 = 1, cn = a[p1], answer = 0; while(p1 < a.length && p2 < a.length) { if (cn < 6) { cn += a[p2]; p2++; } else if (cn === 6) { answer ++; p1 ++; cn = a[p1]; p2 = p1 + 1; } else { p1 ++; cn = a[p1] p2 = p1 + 1 } } console.log(answer) }
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
freeboard_frontend 이미지 업로드 부분 진행중인데 upload 버튼 클릭해서 이미지를 선택하면 Cannot destructure property 'url' of 'undefined' as it is undefined. 이라는 안내창이 뜨면서 정상적으로 실행이 되지 않습니다.. 원인을 알 수 있을까요? 다른 분 문의 글을 보고 혹시 apollo셋팅 문제인가 싶어 yarn add apollo-upload-client 와 yarn add -D @types/apollo-upload-client 를 추가로 설치 해봤는데도 문제 해결이 안됩니다..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위 사진과 같이 search에 'Terra'를 검색했는데 "usedItem":null 인 정보까지 받아와지는데 왜 이런가요?
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
혹시 웹에서 원하는 곳에 이미지를 애니메이션으로 보내거나 웹을 구성할때 canvas로는 좌표를 찍어 위치를 조정하기 쉬워보이는데 dom / svg를 활용할땐 웹에 원하는 곳으로 배치하기 위해선 그리드를 활용해야하나요 보통?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ? 가끔 <button>, <ul> 대신에 div 를 사용하는 경우가 많은데 웹표준에 어긋나는 게 아닌지 헷갈립니다 ㅜ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 실행은 되는데 왜이렇게 자꾸 오류가 나는걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
브라우저에 내용은 모두 잘 입력이 되고 console창에서도 _id가 잘 나왔는데 graphql로 넘어가서 등록된 부분을 확인하려 하니 등록된 게시물이 없다고 나옵니다. 어떤 부분이 문제인걸까요?
해결됨
Next + React Query로 SNS 서비스 만들기
"use client"; 하위의 컴포넌트는 Client로 랜더링 된다고 하신거 같은데, QueryClientProvider가 client에서 랜더링 되는건 아닌가요? 해당 파일을 가보니 'use client'를 사용하고 있어서요. <QueryClientProvider></QueryClientProvider>로 감싸도 그 하위에 컴포넌트들이 SSR가 되는지 궁금합니다. 'use client' import * as React from 'react' import type { QueryClient } from '@tanstack/query-core' export const QueryClientContext = React.createContext<QueryClient | undefined>( undefined, ) export const useQueryClient = (queryClient?: QueryClient) => { const client = React.useContext(QueryClientContext) if (queryClient) { return queryClient } if (!client) { throw new Error('No QueryClient set, use QueryClientProvider to set one') } return client } export type QueryClientProviderProps = { client: QueryClient children?: React.ReactNode } export const QueryClientProvider = ({ client, children, }: QueryClientProviderProps): React.JSX.Element => { React.useEffect(() => { client.mount() return () => { client.unmount() } }, [client]) return ( <QueryClientContext.Provider value={client}> {children} </QueryClientContext.Provider> ) }
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요 ~ 해당 강의 8:26 즘에 http://localhost:3000/users 검색했을때 저는 타입에러가 뜨면서 강좌에서 처럼 결과가 검색이 안되는데 어떻게 해야 할까요 ?
해결됨
Next + React Query로 SNS 서비스 만들기
개별적으로 서버를 만들어서 진행중입니다. // 로그인시 서버에서 발급하는 코드 response.cookie('connect.sid', accessToken, { httpOnly: true, sameSite: 'none', secure: false, }); // 프론트에서 아래와 같이 저장 if (res.ok && res.status === 204) { let setCookie = res.headers.get("set-cookie"); if (setCookie) { const parsed = cookie.parse(setCookie); cookies().set("connect.sid", parsed["connect.sid"]); const user = jwtDecode(parsed["connect.sid"]); return { ...user, }; } } // 서버에서 삭제하는 코드 logout(request: any, response: Response) { const { user } = request; response.clearCookie('connect.sid', { httpOnly: true, sameSite: 'none', secure: false, }); ... } 로그인 하면 서버에서 쿠키 설정 -> 프론트에서 저장을 진행한 후, 로그아웃시 위 코드처럼 삭제하도록 하고있습니다. 강의 하단부에 작성해주신것 처럼 아래와 같이 events부분에 작성하였는데 쿠키 삭제가 되지 않습니다 ㅠㅠ events에 넣지 않고 강의 그대로 했을 때는 s%3..으로 바뀌어서 삭제되지 않습니다. events에 넣었을때는 아예 값도 바뀌지 않고 삭제되지 않습니다. 어떤 작업이 필요할까요 ㅠㅠ //auth.ts events: { signOut: async (data) => { const token = cookies().get("connect.sid"); if (!token) return; const res = await logout(token.value); console.log("signOut"); }, }, // logout fetch export const logout = async (token: string) => { const res = await fetch(`${BASE_URL}/logout`, { method: "POST", headers: { Authorization: `Bearer ${token}`, }, credentials: "include", }); return res; };
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
prev와 tail을 이용해서 만들어 봤습니다! 궁금한점이 하나 있는데 remove 메서드의 if (current)의 else 부분은 필요하지 않은것 같아서 구현하지 않았는데 문제가 있지는 않나요? class LinkedList { length = 0; head = null; tail = null; add(value) { const newNode = new Node(value); if (this.head) { this.tail.next = newNode; this.tail = newNode; } else { this.head = newNode; this.tail = newNode; } this.length++; return this.length; } search(index) { return this.#search(index)[1]?.value; } prevSearch(index) { return this.#search(index)[0]?.value; } #search(index) { let count = 0; let prev; let current = this.head; while(count < index) { prev = current; current = current?.next; count++; } return [prev, current]; } remove(index) { const [prev, current] = this.#search(index); if (current) { if (prev) { prev.next = current.next; } if (current.next) { current.next.prev = prev; } if (current === this.tail) { this.tail = prev; } } this.length--; return this.length; } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const li = new LinkedList(); li.add(1); li.add(2); li.add(3); li.add(4); li.add(5); li.add(6); console.log(li.prevSearch(2)); console.log(li.remove(4)); console.log(li.search(4)); console.log(li.tail.value); console.log(li.remove(3)); console.log(li.tail.value); console.log(li.remove(3)); console.log(li.tail.value); console.log(li.remove(2)); console.log(li.remove(1)); console.log(li.tail.value); console.log(li.remove(0));
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
현재 PickType 활용하기를 듣고있습니다. 위에서 PickType 은 값을 반환을 하고 Pick 은 타입을 반환한다고 말씀을 주셨는데요. PickType 이 값을 반환 한다는 말씀이 실제로 어떤 값을 반환하는것이 아니라 request dto 역할로 데이터가 key : value 로 들어오니까 단순 타입이 아니라 값을 받기때문에 값을 반환한다 라고 이해를 해야할까요 ??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
필요한 요소들 다 설치 되어있고, 오타없이 작성했는데도 Unable to find template plugin matching '-typescript' 오류와 함께 types.ts가 생성이 안됩니다. 혹시나해서 >yarn add -D @graphql-codegen/typescript 다시 설치했지만 같은 오류가 뜹니다. >@graphql-codegen/typescript-plugin 도 설치해봤는데 아래와 같은 오류로 설치가 안되네요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
background-image에 적용하는데 있어서 문의가 있습니다.outerbox.png 이미지 키기는 807px 544px 로 나옵니다.현재 outerbox css class에서 width 888px로 주면서 대략 81px 정도가 이미지가 반복되어서 표시됩니다. 이미지 반복을 없애기 위해서 아래와 같은 css를 추가했는데 이번에는 이미지가 잘려서 보입니다. background-repeat: no-repeat background-size: cover 강사님 처럼 888px 544px div에 다른 이미지를 일치시켜서 표기하려면 어떻게 해야하나요 ?
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요. 강의 재미있게 완강하였습니다. Next.js에 애니메이션을 구현해보려고 하는데요. 현재는 load event 대신 useEffect안에서 기능들을 호출하는 방식으로 구현하였는데, useEffect는 DOM요소들이 생성이 완료되는 시점에서 기능이 실행되어 이미지들의 다운로드가 다 완료되지 않은 상태에서도 Loading 화면이 끝나버립니다. useEffect안에서 onLoad나 eventListener load를 시도해보았지만 다른 eventListener와 다르게 제대로 동작하지 않는 현상이 발생합니다. 혹시 답변이 가능하시다면 React에서는 Resource의 다운로드 완료 시점을 어떻게 알 수 있을지 조언 부탁드립니다!
