173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요, next-auth 5 베타를 사용하다가 "r is not a function"이라는 에러 메시지 때문에 next-auth 버전을 "^4.24.5"로 낮추었더니 해결되었습니다. 그런데 vercel에 배포하려하니 자꾸 아래의 사진과 같은 에러 때문에 어려움을 겪고 있습니다...ㅜ 해당 에러 구글에 찾아봐도 해결방법을 모르겠던데 도와주실 수 있으실까요ㅠㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
플레이 그라운드에 정보를 넣는데 이게 왜 오류가 뜨는지 모르겠어요. 분명 몇 주전에는 된 내용을 복사 붙이기로 몇십번 시도해도 안됩니다. 그리고 '섹션 04'부터 api 요청하는 부분 다 안돼요. 뭘 잘못했는지 모르겠습니다. 코드만 몇십번 확인하고, 다시 강의 재생해서 봤는데도 Api 요청에만 문제가 있습니다. 다른 섹션들도 'api 요청 부분' 만 아무리 클릭해도 맨 마지막 이미지와 같이 아무것도 안떠요. 구글에서 하라는대로 캐시도 다 지웠고, 확장프로그램도 지우고를 여러 번 했음에도 안됩니다. apollo/client 버전은 3.11.1입니다. api 요청만 다 실패해서 몇주째 잡고 있는데...너무 답답해요.
해결됨
Amazing JavaScript - 입문
잠금표시가 되어있어 새로운 파일을 생성할 수 없습니다. 강의를 보면서 따라하고싶은데 방법이 있을까요?
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
각 페이지마다 loading과 error.tsx를 각각 주고 있는데 그냥 root에 loading.tsx error.tsx를 하나만 둬서 공유하는 방식은 안되나요? 각 페이지마다 따로 둔 이유가 뭔가요? 현업에서도 layout은 보통 page마다 다르게 두나요? 이전에는 프로젝트에서 그냥 root에 위치한 하나의 layout만 써와서.. 강의 잘 보고있습니다. 선생님!
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 강의를 잘 듣던 중 궁금한 점이 생겨 질문드립니다. 해당 강의대로 진행하면 access token과 refresh token 모두 만료 전에 재발급받아 token을 연장시키는 개념으로 이해가 됩니다. 그러나 각 token의 만료 시간인 300초, 3600초가 지나지 않은 상태에서 token을 재발급하게 되면 1개의 계정에 다수의 token이 존재할 수 있는 상황이 될 수 있다고 생각됩니다.(예를 들어 만료가 3000초 남은 refresh token으로 refresh token을 재발급하게 되면 3000초 남은 refresh token과 3600초 남은 새로운 refresh token 2개가 존재하게 됩니다.) 그래서 궁금한 점은 아래 두가지입니다. 실제 production 환경에서도 이렇게 다수의 token이 존재할 가능성을 가지고 있는지. 다수의 refresh token이 존재했을때 만약 해당 refresh token이 한번 탈취 당하면 계속해서 만료전에 갱신이 가능해지는 상황인데 이에 대한 대처방법이 따로 있는것인지.(개인적인 생각으로는 user 데이터베이스에 refresh token만 따로 저장하여 유효성 검사를 진행하는 방안도 있을 것 같습니다.)
해결됨
처음 만난 리액트(React)
안녕하세요. 소플님. Custom Hook에 대해서 질문이 있어 글을 남깁니다. import {useState, useEffect} from 'react'; // 커스텀 훅 function useUserStatus(userId){ const [isOnline, setIsOnline] = useState(null); useEffect(() =>{ function handleStatusChange(status){ setIsOnline(status.isOnline); } ServerAPI.subscribeUserStatus(userId, handleStatusChange); return () =>{ ServerAPI.unsubscribeUserStatus(userId, handleStatusChange); } }); return isOnline; } function UserStatus(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); if (isOnline == null) return "대기중..."; return isOnline ? '온라인' : '오프라인'; } function UserListItems(props){ // 중복된 로직을 custom hook으로 추출하고 호출하여 간편하게 사용 const isOnline = useUserStatus(props.user.id); return ( <li style={{color: isOnline ? 'green':'black'}} > {props.user.name} </li> ); } 위 방식은 강의 내용대로 중복된 로직을 추출하여 Custom Hook을 만들고 함수 컴포넌트 내에서 호출하여 사용하는 방식입니다. 강의 내에서 " 여러 개의 컴포넌트에서 하나의 공통된 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다." 라고 말씀하셨는데 Custom Hook도 본질은 JS함수이기에 함수의 선언의 parameter와 사용의 argument는 다른 것과 같기 때문으로 이해해도 될까요? 좋은 리액트 강의 감사합니다. 꼭 완강하겠습니다!
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
chatsModel 에 @Entity() export class ChatsModel extends BaseModel { @ManyToMany(() => UsersModel, (user) => user.chats) users: UsersModel[]; @OneToMany(() => MessagesModel, (message) => message.chat) messages: MessagesModel; } 위처럼 적혀있는데 one to many 라서 저부분 list 로 하지 않아도 되나요 ??
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
한참 재미있게 배우고 있습니다!. Guard부분을 배우고 있는데 Middleware > Guard > Interceptor > Pipe > 로직 이런 순서로 이루어 진다고 하는데, Middleware부터 Pipe까지 통으로 Express의 Middleware 에서 구현 가능한 하나의 기능과 유사하다고 생각되는데 Nestjs에서는 Express의 middleware에서 하던 기능 중 유용하고, 자주 쓰이는 등의 로직을 저렇게 세분화 해서 더 유연하게 사용될 수 있도록 제공 하며 OOP의 장점을 살렸다?? 정도로 이해 해도 될까요?
미해결
Next + React Query로 SNS 서비스 만들기
아래와 같은 에러가 발생하는 이유가 제가 처음부터 파일구조를 강사님과 다르게 해서 그런가 싶어서 이미 코드는 짜놓은 상태이지만 src폴더를 만들고 그 안에 app 폴더를 넣어 구조를 똑같이 하니 레이아웃이 깨져서(원인은 아직 못 찾았습니다만 단순 import 위치 문제는 아님은 확실합니다.) 다시 src가 없는 상태로 회귀했습니다. auth.ts 파일을 app 폴더와 같은 위치에 두라고 강의에서 말씀하셔서 그대로 두기도 해보았고 혹시나해서 app 폴더 안에 위치시켰으나 handler를 못찾는 에러는 동일했습니다. 혹시 create next 이후에 다시 src를 만들어서 넣는것이 불가능한가요? 불가능하다면 auth.ts와 middleware.ts의 위치를 현재 제 파일 구조상태에서 어느 위치에 두는 것이 맞나요?
미해결
Next + React Query로 SNS 서비스 만들기
/home 페이지에서 prefetch를 해주지 않고 PostRecommends & followingPosts에서 useQuery로만 데이터를 불러와도 상관없나요 ?? 1번이 맞다고 하면 prefetch를 통해서 dehydrated를 해주는 이유가 궁금합니다. 아니면 서버 컴포넌트에서 react-query를 이렇게도 사용할 수 있다를 보여주신건지 궁금합니다:)
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 로컬에서는 새로고침 하여도 페이지가 정상적으로 보여지는데 배포후에는 다이어리, 수정페이지 새로고침시 404에러가 뜹니다. isLoading(false) 코드도 잘 작성한것 같은데 뭐가 문제인지 모르겠네요ㅠㅠ 깃허브 : https://github.com/jw118g/ONE-BITE-REACT vercel : https://emotion-diary-woad.vercel.app/
미해결
처음 만난 리액트(React)
위 소스에서 질문입니다. 생성자에서 this.handleClick 에 값을 대입할때 handleClick 함수가 정의되지않은 상태인데 어떻게 접근하는건지 궁금합니다 !
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
질문 1. next/image는 (Image컴포넌트) 웹사이트의 로딩 성능에 많은 영향을 미치는 이미지를 사용하는 것만으로도 큰 개선을 볼 수 있도록 해주는 컴포넌트이라서 비용이 비싸다고 하는데 그렇다면 AWS로 배포했을 때 next/image 때문에 비용이 더 올라 가나요? 질문 2. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금 합니다.
미해결
Next + React Query로 SNS 서비스 만들기
뭔가요?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
private composeFindOptions<T extends BaseModel>( dto: BasePaginationDto, ): FindManyOptions<T> { /** * where, order, take, skip 반환 * skip-> page based pagination에서만 */ /** * DTO의 현재 생긴 구조는 아래와 같다. * * { * where__id__more_than: 1, * order__createdAt: 'ASC, * } * * 현재는 where__id__more_than / where__id__less_than에 해당하는 where 필터만 사용중이지만 * 나중에 추가적인 where 필터를 넣고싶어졌을 때 모든 where 필터를 자동으로 파싱할 수 있을만한 기능이 * 필요하다.. * * 1) where로 시작한다면 필터 로직을 적용 * 2) order로 시작한다면 정렬 로직을 정용한다. * 3) 필터 로직을 적용한다면 '__' 기준으로 split 했을 때 3개의 값으로 나뉘는지 2개인지 확인한다. * 3-1) 3개의 값으로 나뉜다면 FILTER_MAPPER에서 해당되는 operator 함수를 찾아서 적용한다. * ex) ['where', 'id', 'more_than'] -> more_than을 실제 typeorm-operator로 적용 * 3-2) 2개의 값으로 나뉜다면 정확한 값을 필터하는 것이기 때문에 operator 없이 적용한다. * ex) ['order', 'createdAt'] -> operator 필요 X * 4) order의 경우 3-2와 같이 적용한다. */ let where: FindOptionsWhere<T> = {}; let order: FindOptionsOrder<T> = {}; for (const [key, value] of Object.entries(dto)) { if (key.startsWith('where__')) { where = { ...where, ...this.parseWhereFilter(key, value), }; } else if (key.startsWith('order__')) { order = { ...order, ...this.parseWhereFilter(key, value), }; } } return { where, order, take: dto.take, skip: dto.page ? dto.take * (dto.page - 1) : null, }; } 여기서 함수가 실행되면 where, order은 빈 객체로 초기화 되는데 왜 for 문 안에선 ...where, ...order을 해주는건가요?
해결됨
손에 익는 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에서 입력한 곳에 이상한 하얀색 코드를 없애는 법 좀 알려주세요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님 강의 잘 보고 있습니다. 다름이 아니라, 리액트 앱 생성시 Vite에서 프레임 워크: React 생성후 자바스크립트가 아닌 타입스크립트로 생성해도 강의를 수강하는데는 문제가 없는지 알고 싶습니다..!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 디자인 전공생입니다! 웹디자인 배우면서 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>
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
지금 섹션 10?? 정도 듣고 있는데 docker-compose.yaml 파일 작성 하고 TypeOrmModule imports 해서 연결 하는 중인데 궁금한게 강의를 듣는 로컬 컴퓨터에도 postgres가 설치되어 있어야 하나요?? 영상에는 설치에 대한 부분이 없던것 같아서요 typeorm module 연결 하는 부분에서 database가 존재하지 않는다고 하는데 1번이 맞다면 postgres에서 db를 직접 만들어 준 다음에 typeormmodule 연결 해야 할까요?? << 이게 맞다면 영상이 누락된건가요?ㅠ 마침 pgadmin이 깔려 있고 postgres 14버전에 마침 postgres 라는 이름을 가진 db가 존재 해서 섹션9 POSTGRES_DB: postgres 실습 까지는 마친것 같은데 다음섹션에서 typeormstudy쪽은 이상하게 진행이 안되더라구요... 연구 결과 도커 컴포즈 파일의 ports 5432:5432중 앞의 포트는 로컬 컴퓨터의 포트이다. 로컬 컴퓨터에 postgres가 설치되어 있지 않다면 강의 영상처럼 따라하면 된다. 로컬 컴퓨터에 postgres가 설치되어 있다면 로컬 5432 포트를 postgres가 사용 중일 것이다. 3번이라면 5432 외의 다른 포트를 활용해 진행 하는 방법이 있고, postgres 설치 과정이 기억 난다면 app.module에서 typeorm 초기화 할때 설치하며 세팅했던 dbname, user, pwd 입력해 연결하면 된다. 끗 5432 포트 정보 확인 $ lsof -i tcp:5432 // mac기준 윈도우는 검색... ```
