묻고 답해요
140만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
5:42 임포트 단축키
뭔가요?
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
데이터 재검증 방법
강의에서 데이터를 재검증하는 방법으로 route handler를 생성하고 그 안에서 revalidateTag 함수를 호출해서 캐시를 지우는 방법을 소개해주셨는데요! 그와 관련해서 궁금한게 세가지 있어서 질문 드립니다.버튼과 같은 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요?위의 방법으로 캐시를 지운 후 브라우저를 직접 새로고침해야 새로운 데이터를 가져와서 화면상에서 갱신이 되던데 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요?next.js에서도 react처럼 axios를 많이 사용하나요? 제가 지금까지 이해한 바로는 next.js는 여러가지 캐싱 기능을 fetch를 이용한 요청으로 제공하는 거 같더라구요. 그리고 공식문서나 다른 블로그 글들 혹은 강의를 봐도 데이터 패칭 및 캐시 부분에서는 fetch를 사용하는 예시만 나와서 next.js의 캐싱 기능을 활용하려면 fetch를 사용해야 하는건가 싶습니다. react를 이용할 때에는 보통 실무에서는 axios를 많이 사용한다고 들었었는데 next.js는 어떤지 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground에서 이상한 하얀색 코드가 생기고 안 없어 집니다
playground에서 입력한 곳에 이상한 하얀색 코드를 없애는 법 좀 알려주세요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제입니다!
안녕하세요 디자인 전공생입니다! 웹디자인 배우면서 html은 맛보기로 공부했었는데, 강의 듣고 깔끔하게 다시 한번 정리할 수 있어 좋았습니다. 혹시라도 코드에 보완할점이 있을까 싶어 올립니다!!그리고 checkbox와 radio button에서 색이랑 테두리 등의 속성을 변경하고 싶을땐 어떻게 해야하는지 궁금합니다!<!DOCTYPE html> <html lang="ko"> <head> <title>과제</title> <style> .page{ width: 1920px; height: 1080px; display: flex; align-items: center; padding: 60px 625px 60px 625px; } .pb{ width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; background-color: #FFF; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); display: flex; flex-direction: column; justify-content: space-evenly; padding: 72px 100px 70px 100px; } h1{ color: #0068FF; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; } .name{ color: #797979; font-family: "Noto Sans CJK KR"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .gender{ text-align: center; } .agree{ text-align: center; font-size: 14px; border: 0; border-bottom: 1px solid #E6E6E6; padding: 0 0 24px 0; } button{ color: #0068FF; text-align: center; font-size: 18px; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFF; } input{ border: 0; font-size: 30px; padding: 0 0 12px 0; border-bottom: 1px solid #CFCFCF; } </style> </head> <body> <div class="page"> <div class="pb"> <h1>회원 가입을 위해<br> 정보를 입력해주세요</h1> <br><br> <div class="name">* 이메일</div><br> <input type="text"><br> <div class="name">* 이름</div><br> <input type="text"><br> <div class="name">* 비밀번호</div><br> <input type="password"><br> <div class="name">* 비밀번호 확인</div><br> <input type="password"><br> <div class="gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="agree"> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.<br> </div> <button>가입하기</button> </div> </div> </div> </body> </html>
-
해결됨Firebase보다 10배 좋은 Supabase
useEffect 의존성 배열 관련 질문이 있습니다
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 서비스 만들기
NextAuth를 활용한 소셜 로그인 시 authorization code 발급 방법
안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다.기존에는 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를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
보일러 플레이트
인강듣기전에 학습자료를 보고 먼저 따라했는데요.인강에선 <main> 이부분을 삭제를 안했는데,학습자료에선 main을 다 삭제 했더라구요.이부분에서 학습자료를 참고해도 될까요?아님 다시 복구 해야하나요?이 부분 뿐만아니라 인강에서는 삭제를 안했는데, 학습자료에선 삭제된 부분이 꽤 있어서 걱정이 되어 문의를 드립니다.
-
해결됨Firebase보다 10배 좋은 Supabase
update 진행 시 에러가 발생합니다.
강의 내용 진행중 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(); }
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
DBeaver는 왜쓰는 건가요?
안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠdb관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요?supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요?답변 부탁드립니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
상품 CountISold에 대한 pagination 질문입니다.
FetchBoardsCount는 search를 입력 받아 검색 결과에 대한 개수를 가져오는데FetchUsedItemsISold는 내가 등록한 상품에 대한 전체 개수만 반환하고 있어 검색 결과에 대한 page 개수를 가져오지 못해 pagination에 검색 결과가 1개여도 내가 등록한 상품의 전체 개수를 한 page가 표시 됩니다. 검색 결과에 대한 refetch를 게시글이 없을 때까지 해주고 그걸 토대로 page 구성하기는 아닌 것 같아서API의 search의 Count에 의존 하지 않고 page를 해결할 수 있는 방법이 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
23-03-login-check / login-check-success 강의 플레이가 안되네요? 저만 그런가요
23-03-login-check / login-check-success 강의 플레이가 안됩니다. 23-02, 23-04 는 잘나오는데 왜 그럴까요
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
next.js에서부터는 react query 필요없는지
next.js를 도입하면 react query가 필요없어서 더 이상 안쓰시는건가요?? fetch를 쓰던 axios를 쓰던 next.js에서 알아서 캐시를 남겨주는건가요?? 아니면 fetch를 써야만 알아서 해주나요??
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
next.js 에서 서버 컴포넌트 비중을 늘리는 이유
1. 강사님께서 올려주신 답변들을 봤습니다. "공식 문서에서 클라이언트 컴포넌트를 트리의 끝에 보내라고 권한다. 서버 컴포넌트를 최대한 활용하기 위한 권장 사항이라고 이해하시면 좋다."이라고 봤는데 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요? 2. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
GraphQLClient 설치 후 모듈을 못찾습니다.
코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다.하지만 위 이미지 처럼 에러가 발생합니다.package.json 은 아래와 같습니다.node_modules 는 아래와 같습니다.설치됨을 다 확인하였으나 인식을 못하네요.tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다.이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
http://localhost:3000/home 오류 문의드립니다.
영상을 3:29 이 부분을 똑같이 하려고하는데,http://localhost:3000/home로 접속하면 파일이 없다고 합니다..app 안에 (afterLogin) (beforeLogin)로 나뉘고,home 폴더를 만들어서 layout.tsx 와 page.tsx를 만들어홈페이지와 홈 레이아웃을 작성하여루트 레이아웃과 층계별 확인하려고 http://localhost:3000/를 들어가면 루트레이아웃은 잘나오는데http://localhost:3000/home는 페이지가 없다고 나옵니다.. (afterLogin) 안이 아니라 밖으로 app/home/layout.tsx 와 page.tsx가 있어야만 http://localhost:3000/home가 잘나오는데 왜이럴까요?
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
generate-types씨 발생하는 에러 해결방법
failed to retrieve generated types: {"message":"Your account does not have the necessary privileges to access this endpoint. For more details, refer to our documentation https://supabase.com/docs/guides/platform/access-control"}generate-types씨 발생하는 에러 해결방법이 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
실무에서 리버스 인피니트 스크롤링 최적화 방법
채팅을 계속 올려서 몇개월 치를 사용자가 본다면 위로 채팅 기록이 엄청 쌓일텐데, 실무에서 메모리가 넘치는걸 방지하는 방법으로 사용하시는게 있는지 어떤걸 사용하시는지 궁금합니다.찾아보니 react-window 같은 라이브러리를 사용해서 실제 랜더링 하는 요소 갯수를 제한하고 스크롤을 유지 시켜서 성능 향상을 하는 글을 봤습니다. 실제로 실무에서 이런 방법을 주로 쓰는지 궁금합니다.
-
해결됨Next.js 시작하기
스페이스 + 컨트롤 눌러도 활성화 안되시는분 참고하세요...
인텔리센스 단축키 (Intellisense shortcut)¶https://stackoverflow.com/questions/51341555/visualcode-shortcut-to-display-autocomplete-list-before-typing-in-macos인텔리센스 사용시 한영 전환(ctrl + space)와 스팟라이트(cmd + space) 단축키와 충돌이 발생하므로 (option + esc) 조합을 사용합니다.메인 메뉴 Code > Preferences > Keyboard Shortcuts (cmd + K, cmd + S)에서 단축키(Trigger Suggest)를 (ctrl + .)로 변경할 수 있습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section11 - event-bubbling 에러 문의있습니다
새 pc에서 강의를 듣는 중에 yarn dev 후 웹페이지에서 이런 에러가 뜹니다 ㅜㅜ node_modules 삭제 후 재설치 해도 이렇게 뜨는데 어떻게 해결해야 할까요?
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
혹시 ssr과 csr을 병행하여 사용하고 싶을 땐
api/(site)/page.tsx에 actions/todo/todo.actions.ts를 사용하고하위컴포넌트들에서는 ex) api/(site)/compoents/...container.ts 내부에서는 hook을 임포트한것들이 apis/todo-no-rls.ts를 사용하면 될까요? *위 예시는 강의에서 다룬 파일만을 예를 들었보았습니다.