173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
socket 은 현업에서 사용해본적이 거의 없다가 개념만 이해하고 이번에 다시 강의로 공부를 하고있습니다. 실제로 사용하게 된다면 조금 더 정리하는게 다가올것같긴한데 그러면 socket.io 로 모든 요청과 응답을 구현해도 될것같은데 ? 라는 생각을 했습니다. 아니면 비용적인 측면때문에 rest api 로 요청때마다 응답을 보내도록하고 socket 은 정말 양방향으로 필요할때만 구현하고 있는걸까요 ??
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
3000번 포트가 사용중이라고 에러가 나와서 main에서 3001 번으로 바꿔서 사용중 입니다. 코딩을 그대로 진행했고 포스트맨에서 /users [post] 하여 Body에서 잘 입력하여 { "nickname": "study", "email": "study@naver.com", "password": "123123", "id": 10, "role": "USER" } 로 출력이 됩니다. 그대로 GET 방식으로 http://localhost:3001/users 를 입력했는데 [] 만 출력이 되고 여태 저장한 값들이 나오지가 않습니다. 오른쪽 위에는 초록색으로 200 OK 로 나옵니다.. 왜그런걸까요?
해결됨
자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.2
setInterval() 으로 1초가 계속 증가하는건 입력했는데 stop 버튼을 누르면 증가하는 숫자가 멈추게 하는 부분이 도저히 해결이 되지 않습니다. 익명함수로 풀이 하는건 해결을 했는데 이걸 전부 일반함수로 풀이 하는 법을 모르겠어요
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
next.js를 도입하면 react query가 필요없어서 더 이상 안쓰시는건가요?? fetch를 쓰던 axios를 쓰던 next.js에서 알아서 캐시를 남겨주는건가요?? 아니면 fetch를 써야만 알아서 해주나요??
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
import React from 'react'; import Counter from './components/Counter'; // Counter 컴포넌트의 경로를 정확히 입력 function App() { return ( <> <Counter /> </> ); } export default App; 이런 오류가 뜹니다 버전이 달라서일까요? 노드는 최신버전을 쓰고있습니다.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
1. 강사님께서 올려주신 답변들을 봤습니다. " 공식 문서에서 클라이언트 컴포넌트를 트리의 끝에 보내라고 권한다. 서버 컴포넌트를 최대한 활용하기 위한 권장 사항이라고 이해하시면 좋다. "이라고 봤는데 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요? 2. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?
해결됨
코어 자바스크립트
선생님 안녕하세요. 아래 코드에서 궁금한 점이 있습니다. function user(_name) { var _logged = true; return { get name() { return _name }, set name(v) { _name = v }, login() { _logged = true }, logout() { _logged = false }, get status() { return _logged ? 'login' : 'logout'; } } } var roy = user('재남'); [질문 ①] 제가 알기로 return 문은 하나의 객체만 리턴할 수 있는 걸로 알고 있습니다. 따라서 return { } 안에 있는 get, set, login, logout 함수들을 임의의 주소값 100번지에 담아서 리턴한다고 생각해도 될까요? [질문 ②] 위와 같은 문법을 객체 리터럴 반환이라고 부르나요? [질문 ③] 만약 return문 안에 있는 get, set, login, logout 함수들을 넣지 않고 동일한 동작을 하는 함수를 만든다면 어떻게 코드를 작성할까?.... 문법이 이상해서 잘 이해가 되지 않아서 질문드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다. 하지만 위 이미지 처럼 에러가 발생합니다. package.json 은 아래와 같습니다. node_modules 는 아래와 같습니다. 설치됨을 다 확인하였으나 인식을 못하네요. tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다. 이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?
미해결
Vue.js 시작하기 - Age of Vue.js
소스를 저장 후 라이브서버까지 켜서 개발자도구에 들어가보니 어떤소스에서는 Vue탭이 뜨고 어떤탭에서는 Vue탭이 안뜨고 있는데 혹시 이유를 아실까요?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 간단한 질문 하나 하겠습니다. 단순하게 궁금증이 생겨서요 엑세스토큰이 만료되었을때 서버에서 401을 반환하고 클라이언트에서는 코드가 401일때 리프레쉬토큰으로 엑세스토큰을 재발급 받고 다시 요청을 보낸다 까지는 이해가 가는데, 리프레쉬로 리프레쉬토큰을 발급받는 것은 어떤상황에 사용하는지 감이 안잡혀서 질문드립니다.
미해결
처음 만난 리액트(React)
안녕하세요. 소플님. 강의 정말 잘 듣고 있습니다. 컴포넌트 합성과 추출에서 props에 관련하여 질문이 있어 질문을 드립니다. // Component 추출 전 function Comment(props){ return ( <div className = "comment"> <div className = "user-info"> <img className = "avatar" src = {props.author.avatarUrl}, alt = {props.author.name} /> <div className = "user-info-name"> {props.author.name} </div> </div> <div className = "comment-text"> {props.text} </div> <div className = "comment-date"> {formatDate(props.date)} </div> </div> ); } 첫 코드가 Component를 추출하기 전의 코드이고 /* Component 추출 후 */ // 1. Avatar Component 추출 function Avatar(props){ return( <img className = "avatar" src = {props.user.avatarUrl}, alt = {props.user.name} {/* 재사용성을 측면을 높이기 위해 보편적인 단어인 user를 사용 */} /> ); } // 2. UserInfoName Component 추출 function UserInfoName(props){ return( <div className = "user-info-name"> {props.user.name} </div> ); } // 3. UserInfo 추출하기 function UserInfo(props){ return( <div className = "user-info"> {/* 이미 추출한 Avatar Component도 적용 */} <Avatar user = {props.user} /> {/* 이미 추출한 UserInfoName Component도 적용 */} <UserInfoName user = {props.user}/> </div> ); } // 4. CommentText 추출하기 function CommentText(props){ return( <div className = "comment-text"> {props.text} </div> ); } // 5. CommentDate 추출하기 function CommentDate(props){ return( <div className = "comment-date"> {formatDate(props.date)} </div> ); } // 6. 추출한 Component들로 Comment 재합성 function Comment(props){ return( <div className = "comment"> <UserInfo user = {props.user}/> <CommentText text = {props.text}/> <CommentDate date = {props.date}/> </div> ); } 이 코드가 강의에서 작성해주신 코드를 제 나름대로 완성한 컴포넌트를 추출한 형태입니다. userData가 아래의 형태라고 가정하겠습니다. const commentData = { user: { avatarUrl: "https://example.com/avatar.jpg", // 아바타 이미지 URL name: "Soaple" // 사용자 이름 }, text: "안녕 리액트!", date: new Date() // 댓글 작성 날짜 }; 처음 Comment Component에 Props로는 CommentData 자체가 전달될 것이고, 그 다음 UserInfo의 props로는 props.user, 여기서는 아래의 commentData.user가 전달이 되는 것까지는 논리적 흐름대로 이해를 했습니다. // UserInfo가 받은 props(commentData.user) user: { avatarUrl: "https://example.com/avatar.jpg", name: "Soaple" } 그런데 Avatar의 props로는 props.user가 전달되어야 하는데 그렇게 되면 Avatar에 전달하는 props가 commentData.user.user가 되어 전달할 수 없지 않나요? UserInfoName도 commentData.user.user 가 되어 이상하다는 생각이 드는데... chatGPT나 뤼튼과 AI에 물어봐도 이상이 없는 정상 코드라는 답변을 받았습니다. React에서 props가 굉장히 중요하다고 강조하신 만큼 이 부분은 꼭 집고 넘어가야겠다는 생각이 듭니다. 답변 부탁드립니다!
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
강의 내용 pdf가 제공되나요?
미해결
Next + React Query로 SNS 서비스 만들기
영상을 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)
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 + .)로 변경할 수 있습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 pc에서 강의를 듣는 중에 yarn dev 후 웹페이지에서 이런 에러가 뜹니다 ㅜㅜ node_modules 삭제 후 재설치 해도 이렇게 뜨는데 어떻게 해결해야 할까요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
api/(site)/page.tsx 에 actions/todo/todo.actions.ts를 사용하고 하위컴포넌트들에서는 ex) api/(site)/compoents/...container.ts 내부에서는 hook을 임포트한것들이 apis/todo-no-rls.ts를 사용하면 될까요? *위 예시는 강의에서 다룬 파일만을 예를 들었보았습니다.
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
동일한 폴더 내에 있는 파일 중 style.scss만 css로 컴파일 하고 싶습니다 하단의 Watch Sass 클릭하여 컴파일 진행시 style.scss 뿐 아니라 common.scss도 동시에 css로 컴파일 되어 방법을 찾다 문의 남깁니다 하나의 파일만 컴파일 가능한지 궁금합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
ec2 터미널에서 node를 14버전으로 설치 후에 강의대로 따라가는 중인데요 git clone해와서 yarn install시에 node의 버전이 맞지 않아서 설치가 안되고 있습니다 ec2의 node 버전을 업그레이드하면 /lib64/libm.so.6: version GLIBC_2.27 not found(required by node) 가 뜨면서 ec2의 버전이 맞지 않는거같고 14버전으로 진행하면 설치한 프로젝트의 버전이 달라서 안되는데 class_build의 버전은 이런데 react의 버전을 바꿔야 해결되는걸까요? "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.5" }
