173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 선생님 제가 설정이 뭔가 틀어졌는지 consol.log하면 선생님처럼 console창이 안뜨고 이렇게 뜨는데 어떻게 해결할 수 있는 방법이 없을까요? 선생님처럼 콘솔창이 떴으면 좋겠습니다.
해결됨
[풀스택 입문] Firebase보다 10배 좋은 Supabase
https://join.slack.com/t/lopun-lecture/shared_invite/zt-2mkxcgt5h-7Bq~fMnMJ8Scle17fzFYCQ Supabase로 노트앱 완성하기 15:00 즈음에 검색 기능을 만드는 과정에서 search state에 따른 검색 결과 업데이트에 질문이 있습니다. useEffect를 하나 더 추가해서 의존성 배열에 search 넣은 코드가 추가되었는데요. 기존 의존성 배열이 빈값인 녀석에 search만 추가해줘도 동일한 기능이 아닌가요? 첫 렌더링, search state 변화 될 때만 실행이 되니까요. 한번 더 동일한 코드에 의존성 배열만 다르게 해주신 점이 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다. 기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다. 소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다. /api/auth/[...nextauth]/route.ts const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], callbacks: { async signIn({ account, profile }: any) { if (account.provider === "google") { const response = await fetch( `${process.env.GATEWAY_SERVER_URL}/auth/v1`, { method: "POST", headers: { "Content-Type": "application/json", devicetype: "1", }, body: JSON.stringify({ sns_type: "GOOGLE", key: 인가코드, }), } ); } return true; // Do different verification for other providers that don't have `email_verified` }, }, }; const handler = NextAuth(authOptions); export { handler as GET, handler as POST }; 하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다. 또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!
미해결
인터랙티브 웹 개발 제대로 시작하기
지금 카드를 3d로 뒤집는데 그냥 뒤집히는게아니라 카드의 뒷면이 무엇인지 왼쪽아래나 왼쪽면부터 조금씩 뒤집어지는 느낌으로 뒤집기 위해선 animation3에서 이미지를 나눠서 보여준것처럼 효과를 줘야할까요? 그냥 카드가 3d로 휙 뒤집히는게 아닌 책장넘길때처럼 구현하고싶은데 뒷면을 확인할때 긴장감을 주기위해서 혹시 어떤 방법이 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
인강듣기전에 학습자료를 보고 먼저 따라했는데요. 인강에선 <main> 이부분을 삭제를 안했는데, 학습자료에선 main을 다 삭제 했더라구요. 이부분에서 학습자료를 참고해도 될까요? 아님 다시 복구 해야하나요? 이 부분 뿐만아니라 인강에서는 삭제를 안했는데, 학습자료에선 삭제된 부분이 꽤 있어서 걱정이 되어 문의를 드립니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 2.2)단락 평가 11:28 인수 전달 관련하여 질문 드립니다. function printName(person){ const name= person && person.name; // const age = person && person.age; console.log(name || "person의 값이 없습니다.") // console.log(age || "나이를 추정할 수 없습니다.") } printName({name:"이정환"}); 객체 값을 인수로 전달했을 때 name 변수에 인수로 전달받은 객체 값들이 정상적으로 저장되고 콘솔 창을 통해 출력되잖아요. printName함수의 person라는 매개 변수 형식?을 어디에서도 선언, 정의하지 않았는데 객체 타입으로 함수 호출 시 정상 출력되는 점이 혼란스럽습니다. 이전에 학습한 7가지 Truthy 한 값들 중 객체가 속해 있기에 Truthy 가 나오고, 그런 성질을 이용하여 변수에 name : "이정환" 이 저장되어 콘솔창에서 확인 가능한 결과가 나온다고 이해하면 될까요? 친절히 설명해주셔서 감사합니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의 너무 잘 보고있습니다. ㅎㅎ 혹시 테스트 코드 이번강의에 넣지 않으신 이유가 있나요 ?
해결됨
[풀스택 입문] Firebase보다 10배 좋은 Supabase
강의 내용 진행중 update 할때만 아래와 같은 에러가 나는데, 혹시 수정할 부분이 있을까요? insert/delete는 이상없이 진행 됩니다. 코드는 tailwind 일부만 제외하고는 전체 동일합니다. nextjs : 14.2.5 @supabase/supabase-js: "^2.45.0" ''' localhost/:1 Access to fetch at ' https://********.supabase.co/rest/v1/note?id=eq.8 ' from origin ' http://localhost:3000 ' has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response. ''' const onEdit = async () => { if(!title || !content){ alert("제목과 내용을 입력하세요"); return; } const { data, error} = await supabase .from('note') .update({ title, content }) .eq('id',note.id); if(error){ alert(error.message); return; } setIsEditing(false); fetchNotes(); }
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<div className="todos_wrapper"> {todos.map((todo) => { return <TodoItem {...todo} />; })} </div> 여기서 <TodoItem {...todo} /> <TodoItem todo= {...todo} /> 두개 차이가 뭘까요 >? import React from "react"; import "../TodoItem.css"; const TodoItem = ({ id, isDone, content, date }) => { return ( <div className="TodoItem"> <input checked={isDone} type="checkbox" /> <div>{id}</div> <div>{content}</div> <div>{isDone}</div> <div>{date}</div> </div> ); }; ({ id, isDone, content, date }) 여기 {}에 넣는거랑 {}을 뺴고 넣는거랑 차이가 뭔지 모르겠어요..
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코팩님 강의를 따라서 코드를 작성했는데, 강의 영상을 봐도 BasicTokenGuard 에서 AuthService 를 주입 못 하는 이유를 모르겠어요.. AuthModule에가 가서 imports이랑 provider에 BasicTokenGuard를 넣어도 해결되지 않네여.. 가드의 위치는 강의랑 똑같이 auth/guard 폴더 안에 위치하고 있어요.. 원인이 대체 뭘까요..?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠ db관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요? supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요? 답변 부탁드립니다..
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요. 강의 따라서 HelloWorld.vue파일을 브라우저에서 띄워줬을 때 vue가 인식되지 않는 현상(Vue.js not detected)이 있는데 왜 그럴까요?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
현재 Auth module에 있는 AccessTokenGuard 등을 보면 만약 어떤 사용자가 로그인했을 때 그 form에 있는 정보를 email:password로 받고 그것을 인코딩하여 서버로 전달하는 방식일텐데 결국 요청시에 base64로 잘 인코딩을 하여 보냈음에도 결국 Guard를 통과하면 req.user = user로 user에 대한 정보를 요청에 담은 후에 요청을 보내는 방식인 것 같은데 이러면 결국 요청에 user에 대한 정보가 담겨지는 것이고 이러면 보안상 문제가 생기는 것 아닌가요?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
현 강의에서 postPost에 UserGuard를 하기 위해 posts.module.ts에 UsersModule, AuthModule을 import해주었는데 이 UsersModule은 AuthModule에서 사용하기 때문에 import를 해줘야하는건가요? 그리고 실제로 깃헙에선 AuthModule에서 AuthService를 export했는데 postPost 매서드에서 사용하는 것은 AuthService가 아닌 auth 모듈의 guard 폴더 안에 있는 ts 파일인데 왜 AuthService를 export하는건가요?
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
node.js등 설치관련 참고하려는데~ 기초강좌라고 하시는 강의 링크좀 부탁드립니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
JPA에서는 꼭 필요할 때만 양방향 연관관계를 맺으라고 권고하는 거 같던데 TypeORM은 오히려 양방향 연관관계를 지향하는 입장인 건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import React from "react"; const Viewer = ({ count }) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer; 이걸 했을떄 .. import React from "react"; const Viewer = ( count ) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer; 두개 차이가 멀까요 계속 해깔리는데 이거.. 구조 분해형태인거 까진 알겠는데 부모에서 import logo from "./logo.svg"; import "./App.css"; import Viewer from "./component/Viewer"; import Controller from "./component/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App; GPT 물어보니 ({ count }) : 이 방식은 구조 분해 할당 을 사용한 것입니다. 함수의 인자로 객체를 받고, 그 객체의 count 라는 속성을 변수로 바로 할당합니다. 예를 들어, Viewer 컴포넌트가 { count: 5 } 라는 객체를 인자로 받으면, count 변수는 바로 5가 됩니다. (count) : 이 방식은 구조 분해 할당을 사용하지 않은 것 입니다. 함수의 인자로 객체를 받고, 그 객체를 count 라는 이름의 변수로 할당합니다. 따라서 count 는 객체가 되며, count 객체의 속성에 접근하려면 count.count 처럼 접근해야 합니다. 이렇게 하면 const [count, setCount] = useState(0); 에서 count는 객체가 아니라 그냥 변수 아닌가요 ??? <button onClick={() => { onClickButton(-1); }} > <button onClick={ onClickButton(-1);} > 이거 2개의 차이가 멀까요 저는 onClick이 함수니까 함수를 전달해줘야 한다고 생각해서 { } 안에 바로 함수를 넣었거던요 ..후자 . 근데 보니까 ()=>{ } 여기다가 함수를 넣는건 onclick의 매개 함수의 리턴값으로 함수를 넣는건데 ..두개의 차이가 뭔지좀 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 12.13 마지막에서 메인컨테이너가 화면 끝까지 안내려 오는 문제를 해결하기 위해서 index.css의 body 태그 스타일에 flex 를 주셔서 해결하셨는데요. 그 원리를 조금 더 설명해 주실 수 있나요? flex는 요소들을 한줄에 배치하기 위해서 사용 하는데 여기선 요소가 다음 줄 까지 덮도록 쓰여진것 같아 좀 헷갈립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
FetchBoardsCount는 search를 입력 받아 검색 결과에 대한 개수를 가져오는데 FetchUsedItemsISold는 내가 등록한 상품에 대한 전체 개수만 반환하고 있어 검색 결과에 대한 page 개수를 가져오지 못해 pagination에 검색 결과가 1개여도 내가 등록한 상품의 전체 개수를 한 page가 표시 됩니다. 검색 결과에 대한 refetch를 게시글이 없을 때까지 해주고 그걸 토대로 page 구성하기는 아닌 것 같아서 API의 search의 Count에 의존 하지 않고 page를 해결할 수 있는 방법이 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
23-03-login-check / login-check-success 강의 플레이가 안됩니다. 23-02, 23-04 는 잘나오는데 왜 그럴까요
